css工作原理
Silas Shen
9月 16, 2017
这两天的时间在学习css的基础内容，主要是看《css设计指南》再结合一些视频，自己敲敲代码。这种学习方式还不错，能让我更好地理解css的基本原理。我打算分三部分来学习总结css这部分的内容。这是第一部分，主要复习css规则，选择器，以及继承和层叠。
添加样式的三种方法
- 行内样式 => 写在特定HTML标签的style属性
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
- 嵌入样式 => 放在HTML文档的head元素中
<head>
<style type="text/css">
body {
background-color:yellow;
}
p {
color:blue;
}
</style>
</head>
- 链接样式 => 把样式放在一个单独的文件里（样式表），可以在任意多个HTML页面中链接同一个样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
优先级 行内样式 > 嵌入样式 > 链接样式（就近原则）[1]
命名惯例
选择器 (组) + 声明（属性+值）
简单选择器
type selector
<h2>类型选择器</h2>
h2{border: 1px solid red;}
- 为h2加上红色边框
id selectors
语法 #id名
写法与类选择器相似，但在页面中只能唯一标识一个元素（每个id名在页面中只能用一次）
- 用于页内导航
<a herf="#third">article<a>
<h3 id="third">article</h3>
- #表示链接的目标在当前页面，导航到同一页的h3元素位置
- 返回顶部的链接
<a herf="#">返回顶部</a>
class selectors
用于描述一组元素的样式，class可以在多个元素中使用
语法 .类名
.center {text-align:center;}
标签带类选择器
p.center {text-align:center;}
多类选择器
.center.small {font-size:20px;}
什么时候用ID，什么时候用类
- ID表示的是页面中的一个唯一的HTML元素，利用唯一ID，可以方便地定位到一个元素以及它的子元素。[2]
- 类的目的是为了标识一组具有相同特征的元素，类可以让不同标签名的元素应用相同的样式。
属性选择器
语法 E[foo] an E element with a foo attribute
<lable>
<input type="text" disabled />
</lable>
input[disabled]{cursor : not-allowed;}
- 选中属性值为disabled的文本框，鼠标滑过时添加禁用样式
语法 E[foo^=“bar”] an E element whose foo attribute value begins exactly with the string “bar”
a[href^="#"] {
background-color: blue;
}
<a href="#" >top</a>
<a href="#test" >test</a>
- 选中属性值以#号开头的a元素，为其添加背景为蓝色的样式
上下文选择器
- e1 e2
- e1 > e2 子选择器
- e1 + e2 紧邻同胞选择器 e2必须紧跟在e1后
- e1 ~ e2 一般同胞选择器
*通用选择器 可以用它构成非子选择器
伪类选择器
结构化伪类选择器
- e:first-child e:last-child
<ol class="results">
<li> chird1 </li>
<li> child2 </li>
<li> child3 </li>
</ol>
ol.results li:first-child{color: blue;}
- 选中child1,为其添加字体为蓝色样式
ol.results li:last-child{color: red;}
- 选中child3,为其添加字体为红色样式
- e:nth-child(n)
<tr>
<td>一班</td>
<td>30</td>
<td>89</td>
</tr>
<tr>
<td>二班</td>
<td>35</td>
<td>85</td>
</tr>
<tr>
<td>三班</td>
<td>32</td>
<td>80</td>
</tr>
table tbody tr:nth-child(2n+1){background-color: yellow;}
- 选中表格的奇数行，添加背景为黄色的样式，提高了表格的可读性
UI伪类选择器
- 链接伪类
- Link 等着用户点击
- Visited 用户此前点击过这个链接
- Hover 鼠标指针正悬停在链接上
- Active 链接正在被点击（鼠标在元素上按下，还没有被释放）
- :focus伪类
- 用户点击表单中的文本字段时会获得焦点
- :target伪类
<a href="#more_info">更多</a>
<h2 id="more_info">指向这里</h2>
h2:target {background: yellow;}
- 点击链接时,位置跳转到h2，并为其添加背景为黄色的样式
- :checked伪类
- 单选框或多选框被选中时，元素就会被选中
伪元素选择器
- e::first-letter 选中e元素的第一个字母
- e::first-line 选中e元素的第一行
- e::before和::after 可以在e元素前面或后面添加特殊的内容
<p class="age">22</p>
p.age::before{content:"Age: ";}
P.age::after{content:" years.";}
- 输出结果为 Age: 22 years.
继承
body{font-size:18px;}
- 全站的主字体大小只要在某个上层元素上指定即可，无需在每一个标签上分别指定。
层叠
样式来源
浏览器层叠各个来源样式的顺序
- 浏览器默认样式表
- 用户样式表
- 链接样式表
- 嵌入样式
- 行内样式
层叠规则
- ID>Class>Type
- 行内>嵌入>链接[3]
- 设定的样式胜过继承的样式
计算特指度
I-C-T
- 选择符有一个ID，就在I的位置加1
- 选择符有一个类，就在C的位置加1
- 选择符有一个元素（标签）名，就在T位置加1
p 0-0-1=1
p.largetext 0-1-1=11
p#largetext 1-0-1=101
body p#largetext 1-0-2=102
body p#largetext ur.mylist 1-1-3=113