特殊性

一个元素可能被多个选择器定义，那么最终生效的样式是哪一种呢？
特殊性的值表述为4个部分，如0.0.0.0：

1. 对于选择器中给定各个ID属性值：加0.1.0.0
2. 对于选择器中给定的各个类属性值、属性选择器或伪类：加0.0.1.0
3. 对于选择器中给定的各个元素和伪元素：加0.0.0.1
4. 内联样式的特殊性：加1.0.0.0
5. 结合符（无特殊性）和通配选择器（0特殊性）没有特殊性贡献
6. 非CSS表现的样式（如HTML的<font>标签）的特殊性为0

---

如：
h1 {color: red} -> 0.0.0.1
p em {color: purple}-> 0.0.0.2
.grape {color: purple} -> 0.0.1.0
p.bright em.dark {color: purple} -> 0.0.2.2
特殊性高的样式，优先采用。

思考：

1. 给出以下样式的特殊性

html > body table tr[id="display-name"] td ul > li {color: maroon}

2. 0.0.0.13与0.0.1.0，谁的特殊性更高？
3. 属性为active的元素最终是什么颜色？

#acitve {color: red}
*[id="active"] {color:green}

重要性

如果一个属性特别重要，不希望被其他属性所覆盖，则我们可以将其声明为重要属性。方法为在样式声明后面加上!important。

---

如：
.alert {color: red !important;}
.info-box {color: #ccc !important; border: 1px solid blue !important;}
!important不会贡献任务特殊性，它与特殊性可以理解为不同维度的东西。任何样式表中，声明了重要性的属性会被自动归为一组（“重要”组），未声明重要性的样式被归为另一组（“非重要”组）。重要组中的样式，其优先级始终高于非重要组。对于同组中的样式，如果产生了冲突，则在同一组内进行特殊性排名，特殊性高者获胜。

继承

在父无素上定义的属性，会延着文档结构树向其子孙元素传递，这称为样式的继承。
为了防止布局混乱以及过多的工作，大多数框模型属性（如外边距、内边距、背景和边框等）都不继承。
继承的值不具有任何特殊性。没有特殊性与特殊性为0有本质的区别，举个例子：
* {color: red}的特殊性为0.0.0.0，我们假设有这样一个样式h1 {color: gray}，那么下面这个例子中的em元素应该是什么颜色的呢？

<h1>这是为了展示<em>0特殊性</em>与<em>无特殊性</em>样式的区别而使用的例子</h1>

答案：红色。
这个例子说明通配符对于样式的继承有“短路”的效果，所以要谨慎使用通配符来指定样式。这也充分说明了为何你在指定了父级元素的字体颜色的情况下，超链接仍然会呈现为蓝色。那是因为浏览器的默认样式表中可能指定了<a>的样式，即便其特殊性为0.0.0.1，它也完胜了继承所带来的效果。所以请牢记，继承的值不具有任何特殊性。

层叠

如果特殊性相等的两个规则同时应用到了同一个元素，这种情况怎么办呢？“层叠”词就体现出来了。元素的样式可以理解为一层一层叠加的效果，最终由继承和特殊性来决定哪种样式在“最上层”。CSS2.1中，层叠的规则为：

1. 有!important标志的样式，其权重高于无!important标志的样式。
2. 从来源来讲，正常情况下，创作人员的样式高于读者样式、读者样式高于浏览器默认样式。但是有!important样式的读者样式高于所有其的样式，包括含有!important标记的创作人员样式。
3. 按特殊性的值对应用到指定元素的所有的样式声明进行排序。
4. 出现越晚的样式声明，其权重越大。

字体

字体系列

Serif字体

字体成比例，而且有上下短线。如果字体中的所有字符根据其不同的大小有不同的宽度，则称该字体是成比例的。比如我们在Office中常用的Times New Roman字体就是Serif字体的一种。

Serif字体

Sans-serif字体

字体成比例，而且没有下短线。
Arial字体就属于Sans-serif字体。

Sans-serif字体

Monospace字体

字体不成比例，它们通常用于模拟打字机打出的文本。
我们编程时常使用的Courier New字体和Consolas字体就属于Monospace字体。

Monospace字体

指定字体通常使用font-family属性指定一个通用字体系列。比如font-family: Arial, Sans-serif, 'Times New Roman', Serif。这样，浏览器会根据指定的顺序去匹配最贴合的字体进行显示。

如果font-family中的字体名称与某些关键字匹配，则需要用引号将字体名称包含起来。作为一种最佳实践，推荐将字体都使用引号包含起来。

字体粗细

样式：font-weight
关于字体的粗细，CCS中只定义了9个等级，即从100至900的整百数。当然，也可以使用normal、bold等关键字来指定。但是归根结底，关键字也会被映射至某一个数值所代表的字体粗细上。
由于不是每一种字体都定义了这9个级别的粗细，所以很有可能你在指定了不同的粗细级别后，发现字体的粗细并无区别。CSS规定，粗细数值大的字体，至少在渲染的时候不会细于粗细值比它小的字体。

不同font-weight的效果

如果想让元素字体的粗细呈现一个阶梯增长的样式，可以使用bolder对字体粗细进行设计。这样，被指定样式的元素的字体粗细会比其从父级元素继承的字体粗一个等级（至少在值上会比父级元素大一些）；同理，可以使用lighter来使当前元素的字体比父元素字体更细。
虽然可以使用相对粗细来指定字体的粗细程度，但是CSS规定，使用相对粗细的字体最初不超过900，最细不低于100。

字体大小

样式：font-size

绝对大小

font-size共有7个绝对大小值，分别为xx-small、x-small、small、medium、large、x-large、xx-large。
CSS1中规定，一个绝对大小与下一个绝对大小之间的差距应当是向上1.5或向下0.66。CSS2中规定这个差距介于1.0~2.0之间，由用户代理决定。

相对大小

除了使用绝对大小来指定字体大小外，也可以使用相对大小（smaller、larger）来指定元素相对于其父元素字体来大小。
与字体粗细不同，相对大小的计算值最终可以小于xx-small，也可以大于xx-large。

百分数大小

与相对大小相似，百分数值总是根据从父元素继承的大小来计算。
尽管在CSS中的font-size是可以继承的，但是其继承的是计算值而不是百分数。

百分数字体大小继承

使用长度

使用长度单位来指定字体大小时，可以使用的单位有pt、pc、in、cm、mm和px等。
在PC上，我们使用较多的为px，即像素。其他单位经常用于打印或其他媒体。

font属性

font属性允许使用多个值对字体进行设置，同时设计字体大小、粗细、变形等属性。font的前三个值（font-style、font-variant和font-weight）的顺序可以随意，甚至可以省略。浏览器会根据用户使用的值自动判断该值是属于哪一个属性。但是对于最后的两个值，即font-size和font-family，要求他们必须以font-size在前，font-family在后的顺序出现，同时这两个值是font属性的必填值。如果顺序不正确，或者某个值缺失，则整个font规则都是无效的，会被浏览器忽略。
在font属性中指定font-size时，还可以以font-size/line-height的形式顺带指定行高。如14px/1.5，则会指定字体大小为14像素，同时行高为14px * 1.5 = 21px。
同时，我们还可以将font属性指定为系统字体，如caption、icon、menu、message-box、small-caption、status-bar等字体，这样就会将字体设置为与操作系统中的对应控件相同的字体。这在开发基于浏览器的桌面应用时非常有用。

文本属性

缩进文本

样式：text-indent
一般的，我们可以为所有的块级元素应用text-indent，但是这个属性无法应用于行内元素；图像之类的替换元素上也无法应用text-indent属性。
注：如果想要对行内元素进行“缩进”，我们可以换而使用左内边距和左外边距来达到类似的效果。
text-indent可以使用所有长度单位（包括百分数）。但是请注意，当使用百分数时，百分数要相对于缩进元素的父元素的宽度。而且，text-indent只会用于元素的第一行。即便是元素中包含了换行符，另起的一行也不会再有缩进效果。

text-indent效果展示

水平对齐

样式：text-align
text-align会影响元素中文本行的相对对齐方式。需要注意的是，text-align只能用于块级元素，而无法应用于行内元素。
text-align不会影响元素本身的位置，只会影响元素内部内容的位置。如使用text-align: center会使元素内部的内容居中，但是不会影响元素自身的位置。

垂直对齐

行高

line-height属性是指文本行基线之间的距离，line-height和字体大小的差值就是我们所说的行间距。在应用于块级元素的时候，line-height定义了元素中文本基本之间的最小距离，line-height不会影响替换元素的布局，但是确实可以应用于替换元素。
文本行中的每个元素都会生成一个内容区，这由字段的大小决定。这个内容区会生成一个行内框，如果不存在其他因素，行内框就完全等于元素的内容区。由line-height产生的行间距就是增加或减少各行内框高度的因素之一。
要确定一个给定元素的行间距，只需要将line-height的计算值减去font-size的计算值。这个值可以是负的。我们将行间距除以2，再均分至一行的顶部和底部，其结果就是元素的行内框。
一旦确定了每个元素的行内框，在行框的构造过程中就会考虑这些行内框。行框的高度恰好足以包含最高的行内框的顶端和最低的行内框的底端。
当发生line-height的继承时，要从父元素计算其计算值，而不是从子元素计算其值。如：

body {font-size: 10px}
div {line-height: 1em}
p {font-size: 18px}

其HTML结构为 body > div > p，则p的行高应该为10px，而非18px。想要克服这样的现象，在指定div的行高时，需要指定一个缩放因子：

div {line-height: 1}

这样的话，p的行高便为18px。原因是当为line-height指定一个数值时，缩放因子将是继承值而不是计算值。

垂直对齐文本

样式：vertical-align
在CSS中，vertical-align属性只应用于行内元素和替换元素，如图像和表单输入元素。
vertical-align属性不能继承。

基线对齐

baseline要求一个元素的基线与其父元素的基线对齐。如果一个元素没有基线（如图像和表单），那么该元素的底端与其父元素的基线对齐。

基线对齐

上标和下标

super和sub只会使元素变为上标和下标，即其基线相对于父元素的基线有所提升或下沉，但是字体本身的大小不会发生变化（注意与<sup>元素以及<sub>元素的区别）。

上标对齐
下标对齐
vertical-align:super和<sup>标签效果对比

底端对齐

bottom将元素行内框的底端与行框的底端对齐。
text-bottom是将元素行内框底端与行内文本的底端对齐。

底端对齐

顶端对齐

top将元素行内框的顶端与行框的顶端对齐。
text-top是将元素行内框顶端与行内文本的顶端对齐。

顶端对齐

居中对齐

middle往往应用于图像，它会所行内元素框中的中点与父元素基线上方0.5ex处的一点对齐(ex为字体中“x"的高度)。由于1ex通常都会被处理为0.5em，所以middle会将元素的垂直中点与父元素基线上方0.25em处对齐。

居中对齐

百分数

如果将vertical-align设置为一个百分数，则会把元素的基本（或替换元素的底边）相对于父元素的基线升高或降低相对于该元素的line-height计算出的量。

百分数对齐

长度对齐

当为vertical-align指定一个长度时，表示将元素升高或降低指定的距离。需要注意的是，垂直对齐文本能改变元素的垂直位置，但是却不会使元素成为另一行的一部分，所有的垂直对齐元素都会影响行高。（行框应该足以包含最高的行内框的顶端和最低的行内框的底端，而垂直对齐方式影响的即是行内框的高度）

长度对齐

文本转换

样式：text-transform
uppercase会将元素文本全都转换为大写字母；lowercase会将元素文本全都转换为小写字母；capitalize会将每一个单词的首字母都大写；none则是取消所有的转换样式。

text-transform样式

文本装饰

样式：text-decoration
关于文本装饰，大家使用得很多，这里就不详细介绍。但是需要注意的是，text-decoration不能继承。没有继承性意味着文本上画的任何装饰线（上划线或贯穿线）与父元素的颜色相同，即使后代元素本身有其他颜色也是如此。

<p style="font-size:14px;text-decoration:underline;">
    “text-decoration”不能继承。没有继承性意味着文本上画的任何装饰线
    <span style="color:silver">（上划线或贯穿线）</span>与父元素的颜色相同， 
    即使后代元素本身有其他颜色也是如此。
</p>

text-decoration继承性

<p style="font-size:14px;text-decoration:underline;">
    “text-decoration”不能继承。没有继承性意味着文本上画的任何装饰线
    <span style="color:silver;text-decoration:underline;">（上划线或贯穿线）</span>
    与父元素的颜色相同，即使后代元素本身有其他颜色也是如此。
</p>

text-decoration继承性