08-01-HTML/CSS

>CSS
1.1概念：CSS：Cascading Style Sheets层叠样式表

1.2优点：
1、功能强大。
2、将内容展示和样式控制分离。
　　降低耦合度。
　　让分工协作更加容易。
　　提高开发效率。

1.3CSS的使用：CSS和HTML结合方式
1、内联样式
　　在标签内使用style属性(HTML5的标准属性，所有标签均支持)指定CSS代码。
　　如：<div style="color:red;">hello css</div>
2、内部样式
　　在hhead标签内，定义style标签。style标签的内容是 CSS代码。

<style>
     div{
         color:blue;
      }    
 </style>
<div>hello css</div>

3、外部样式
1）定义CSS资源文件。
2）在head标签内使用<link>，引入外部资源文件。

a.css文件：
    div{
        color:green;
    }
<link rel="stylesheet" href="css/a.css">
<div>hello css</div>
<div>hello css</div>

注意：1方式不常用，后期常用2,3。第三种方式可以写成：

<style>
@import "css/a.css";
</style>

1.4CSS语法
选择器{
　　属性名1：属性值1；
　　属性名2：属性值2；
　　...
}
选择器：筛选具有相似特征的元素。
注意：每一对属性需要使用；隔开，最后一对属性可以不加；

1.5选择器：筛选具有相似特征的元素。
==》id和class是HTML5的标准属性，所有标签均支持。
分类：
1）基础选择器 I C E
<1>id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一=》html语法宽松，id可以相同，但不建议。
　　语法：#id属性值{  }
<2>元素选择器：选择具有相同标签名称的元素。
　　语法：标签名称{  }
<3>类选择器：选择具有相同class属性值。=》calss描述该控件的类型。
　　语法：.class属性值{  }
　　注意：类选择器选择器优先级高于元素选择器。

2）扩展选择器
<1>通配(符)选择器：选择所有的元素
　　语法：*{  }
<2-1>并集选择器：
　　语法：选择器1,选择器2{  }==》或
<2-2>交集选择器：
　　语法：选择器1[.#]选择器2{  }
<3>后代选择器：筛选选择器1元素下的选择器2元素。==》一层层找，嵌套在里面的也会被选到。
　　语法：选择器1 选择器2{  }
<4>(直接)子代选择器：
　　选择当前标签中的直接子元素（直接放在标签下面没有经过任何标签的嵌套）。
　　选择器1 > 选择器2{  }
<5>属性选择器：选择元素名称 [属性名=属性值元素]。==》找键或者找键值对形式的不同。
　　语法：元素名称[属性名=”属性值“]{  }
　　a[href="xxx"][title] {color:red;}==》将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色。
<6>伪类元素：选择一些元素具有的状态
　　语法：元素：状态{  }
　　状态：link：初始化的状态  visited：被访问过的状态  active：正在访问状态  hover：鼠标悬浮状态

a:link {color: #FF0000}        /* 未访问的链接 */
a:visited {color: #00FF00}    /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}    /* 选定的链接 */

:first-child：向元素的第一个子元素添加样式。
:focus：向拥有键盘输入焦点的元素添加样式。
:lang：向带有指定lang属性的元素添加样式。
附注：
未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接(被点住的时候)带有下划线而且是红色的

[class*= col-] 代表包含 col- 的类名 ，比如说 col-md-4 ,demo-col-2(这个是虚构的)等都可以匹配到。
[class^=col-] 代表 以 col- 开头的类名，比如说 col-md-4
[class$=col-] 代表以 col- 结尾的类名


>CSS三大特性
 2.1、继承：给父元素设置一个属性，然后子元素可以使用。
注意：css初始化，与页面文字的整体颜色一般会先设置。
哪些属性可以继承：以line-,text-,font-开头的属性都是可以继承。

2.2、层叠：页面处理冲突属性的一个能力。
多个选择器为同一个元素设置了不同的属性它们会同时作用于这个元素。
多个选择器为同一个元素调协了相同的属性它们会发生层叠。
层叠的最终结果跟优先级有关系。

2.3、优先级
优先级从大到小：
　！important>Id>类>标签>通配符>继承>浏览器默认

2.4、! important：最高级
作用：将对应选择器的优先级设置为最高级。(不能继承)。

2.5、权重
特指度(sppecifity)：表示一个css选择器表达式的重要程度，可以通过一个公式来计算出一个数值，数越大，越重要。
“I-C-E”公式：确定优先级


2.6、层叠、优先级以及权重之间的关系
层叠：是css的一特性，如果两个相同的属性作用于同一标签，它们会发生层叠。
优先级：是计算权重和后的排序结果。
权重：即各个选择器等的优先级别值的表现形式。(指标(元素)在整体中的重要程度)。

层叠次序
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，数字4拥有最高的优先级。
1、浏览器缺省设置<
2、外部样式表<
3、内部样式(位于<head>标签内部)
4、内联样式(在HTML元素内部)

posted @ 2018-11-20 22:21  payn  阅读(148)  评论(0)    收藏  举报