Head First HTML与CSS

第十章 div与span

CSS——掌控页面的表现

<a>元素的不同状态

链接的样式表现与其他元素稍有不同，取决于具体环境，它们会瞬间改变样式。

未访问的链接，称为“链接”，默认为蓝色。访问过的链接，称为“已访问的链接”，使用不同的颜色显示，默认为紫色。把鼠标放在一个链接上，但不点击，称为“悬停”。在一些浏览器上，鼠标悬停在链接上时你会看到一个工具提示，它会显示“title”属性的文本，如果看得更仔细一点，你会发现悬停在链接上时，它会有一种不同的样式。

因此，<a>元素的样式会根据它的状态(未访问，已访问，悬停等)而改变。

如何根据元素的状态指定样式？

如下：

a:link{

color:green;

}

a:visited{

color:red;

}

a:hover{

color:yellow;

}

第一个选择器应用于未访问的链接，第二个选择器应用于已访问的链接，第三个选择器应用于悬停状态的链接。

如果把<a>元素当成一个普通元素来指定样式，如：

a{color:red;}

那么链接会在任何状态下保持同种样式，无法做到用户友好。

还有另外两种状态：focus和active。

focus：浏览器将焦点放在链接上时为焦点（focus）状态（Tab键轮流访问页面上所有链接，浏览器访问到某个链接时，这个链接就拥有“焦点”）。

active：用户第一次单击一个链接时，就处于活动（active）状态。

伪类

上述:link,:visited,:hover其实就是伪类选择器，类是指创建一个分组，放入一些元素，可以对他们一起指定样式；而伪类就像一个类，但不是真正的类，你可以对伪类指定样式，但是并没在HTML中输入这些伪类。

浏览器会自主检查每个<a>元素的状态，把它添加到正确的伪类中。例如，如果一个链接已经访问过，它会被放在“:visited”伪类中。因此，这些类确实是存在，浏览器在后台向这些类中增加和删除元素。

伪类不仅仅能处理链接，还能处理其他元素。例如伪类:first-child对应元素的第一个子元素，:last-child对应元素的最后一个子元素。如<blockquote>中的第一个和最后一个段落。

层叠

HTML的CSS样式表来源有三种：作者编写的样式表，用户创建的样式表，浏览器本身的默认样式表。浏览器确定要对一个元素应用哪个样式时，会使用所有这些样式表，按优先级排序为：作者、用户、浏览器的样式表。

给定一组样式表中的一组样式，浏览器以层叠的方式确定一个元素究竟应用哪个样式。假设页面上有一个<h1>元素，我们想知道这个元素的font-size属性。步骤如下：

1.收集所有样式表

包括Web页面作者的样式表、用户增加的样式表和浏览器的默认样式。

2.找到所有匹配的声明

例如，我们要找font-size属性，所以要查看所有可能选择<h1>元素的选择器的font-size声明。检查所有样式表，找出所有匹配<h1>且有font-size属性的规则。

3.现在对所有匹配的规则排序

既然得到了所有的规则，现在按作者、读者、浏览器的顺序排序。

4.按特定性大小对三种来源的声明分别排序

特定性大的优先。简单来说，如果一个规则能更准确地选择一个元素，那么这个规则更特定。例如“blockquote h1”比"h1"更特定。具体特定性判断方法之后介绍。

5.对于冲突的规则（来源相同、特定性相同），按照它们在各自样式表里出现的顺序进行排序

后面的优先，覆盖前面的。

这样得到的有序列表中的第一个规则就是我们应用到这个元素的样式规则。

6.如果在层叠的所有规则中，没有找到匹配的属性，就要使用继承。对于能继承的属性，浏览器会查看这个元素的祖先，从父元素开始，尝试找到这个属性的值。如果找到了，就会应用。

7.如果这个属性不能继承或祖先也没有指定该属性，就会应用浏览器的默认样式。

特定性具体判断方法

从三位的特定数计算开始。

初始都是：0 0 0

如果该选择器包含id，每个id在百位上加1。

如果该选择器包含类或伪类，每个类或伪类在十位上加1。

如果该选择器包含元素名，每个元素名在个位上加1。

例如：

h1 001

h1.blue 011

ol li p 003

em 001

.green 010

span.cd 011

a:link 011

#elixirs h1 101

#sidebar 100

综合考虑id、类和元素后，得到的特定数越大，其特定性越强。

类似“h1,h2”规则，可以拆开来看 都是001。

读者样式对作者样式的覆盖

读者可能会覆盖一个样式，在他的属性声明最后放置一个“!important”，例如：

h1{

font-size:200%

!important;

}

这会覆盖作者的样式。