Head First HTML與CSS
第十章 div與span
CSS——掌控頁(yè)面的表現(xiàn)
<a>元素的不同狀態(tài)
鏈接的樣式表現(xiàn)與其他元素稍有不同，取決于具體環(huán)境，它們會(huì)瞬間改變樣式。
未訪問(wèn)的鏈接，稱為“鏈接”，默認(rèn)為藍(lán)色。訪問(wèn)過(guò)的鏈接，稱為“已訪問(wèn)的鏈接”，使用不同的顏色顯示，默認(rèn)為紫色。把鼠標(biāo)放在一個(gè)鏈接上，但不點(diǎn)擊，稱為“懸?！?。在一些瀏覽器上，鼠標(biāo)懸停在鏈接上時(shí)你會(huì)看到一個(gè)工具提示，它會(huì)顯示“title”屬性的文本，如果看得更仔細(xì)一點(diǎn)，你會(huì)發(fā)現(xiàn)懸停在鏈接上時(shí)，它會(huì)有一種不同的樣式。
因此，<a>元素的樣式會(huì)根據(jù)它的狀態(tài)(未訪問(wèn)，已訪問(wèn)，懸停等)而改變。
如何根據(jù)元素的狀態(tài)指定樣式？
如下：
a:link{
color:green;
}
a:visited{
color:red;
}
a:hover{
color:yellow;
}
第一個(gè)選擇器應(yīng)用于未訪問(wèn)的鏈接，第二個(gè)選擇器應(yīng)用于已訪問(wèn)的鏈接，第三個(gè)選擇器應(yīng)用于懸停狀態(tài)的鏈接。
如果把<a>元素當(dāng)成一個(gè)普通元素來(lái)指定樣式，如：
a{color:red;}
那么鏈接會(huì)在任何狀態(tài)下保持同種樣式，無(wú)法做到用戶友好。
還有另外兩種狀態(tài)：focus和active。
focus：瀏覽器將焦點(diǎn)放在鏈接上時(shí)為焦點(diǎn)（focus）狀態(tài)（Tab鍵輪流訪問(wèn)頁(yè)面上所有鏈接，瀏覽器訪問(wèn)到某個(gè)鏈接時(shí)，這個(gè)鏈接就擁有“焦點(diǎn)”）。
active：用戶第一次單擊一個(gè)鏈接時(shí)，就處于活動(dòng)（active）狀態(tài)。
偽類
上述:link,:visited,:hover其實(shí)就是偽類選擇器，類是指創(chuàng)建一個(gè)分組，放入一些元素，可以對(duì)他們一起指定樣式；而偽類就像一個(gè)類，但不是真正的類，你可以對(duì)偽類指定樣式，但是并沒(méi)在HTML中輸入這些偽類。
瀏覽器會(huì)自主檢查每個(gè)<a>元素的狀態(tài)，把它添加到正確的偽類中。例如，如果一個(gè)鏈接已經(jīng)訪問(wèn)過(guò)，它會(huì)被放在“:visited”偽類中。因此，這些類確實(shí)是存在，瀏覽器在后臺(tái)向這些類中增加和刪除元素。
偽類不僅僅能處理鏈接，還能處理其他元素。例如偽類:first-child對(duì)應(yīng)元素的第一個(gè)子元素，:last-child對(duì)應(yīng)元素的最后一個(gè)子元素。如<blockquote>中的第一個(gè)和最后一個(gè)段落。
層疊
HTML的CSS樣式表來(lái)源有三種：作者編寫(xiě)的樣式表，用戶創(chuàng)建的樣式表，瀏覽器本身的默認(rèn)樣式表。瀏覽器確定要對(duì)一個(gè)元素應(yīng)用哪個(gè)樣式時(shí)，會(huì)使用所有這些樣式表，按優(yōu)先級(jí)排序?yàn)椋鹤髡?、用戶、瀏覽器的樣式表。
給定一組樣式表中的一組樣式，瀏覽器以層疊的方式確定一個(gè)元素究竟應(yīng)用哪個(gè)樣式。假設(shè)頁(yè)面上有一個(gè)<h1>元素，我們想知道這個(gè)元素的font-size屬性。步驟如下：
1.收集所有樣式表
包括Web頁(yè)面作者的樣式表、用戶增加的樣式表和瀏覽器的默認(rèn)樣式。
2.找到所有匹配的聲明
例如，我們要找font-size屬性，所以要查看所有可能選擇<h1>元素的選擇器的font-size聲明。檢查所有樣式表，找出所有匹配<h1>且有font-size屬性的規(guī)則。
3.現(xiàn)在對(duì)所有匹配的規(guī)則排序
既然得到了所有的規(guī)則，現(xiàn)在按作者、讀者、瀏覽器的順序排序。
4.按特定性大小對(duì)三種來(lái)源的聲明分別排序
特定性大的優(yōu)先。簡(jiǎn)單來(lái)說(shuō)，如果一個(gè)規(guī)則能更準(zhǔn)確地選擇一個(gè)元素，那么這個(gè)規(guī)則更特定。例如“blockquote h1”比"h1"更特定。具體特定性判斷方法之后介紹。
5.對(duì)于沖突的規(guī)則（來(lái)源相同、特定性相同），按照它們?cè)诟髯詷邮奖砝锍霈F(xiàn)的順序進(jìn)行排序
后面的優(yōu)先，覆蓋前面的。
這樣得到的有序列表中的第一個(gè)規(guī)則就是我們應(yīng)用到這個(gè)元素的樣式規(guī)則。
6.如果在層疊的所有規(guī)則中，沒(méi)有找到匹配的屬性，就要使用繼承。對(duì)于能繼承的屬性，瀏覽器會(huì)查看這個(gè)元素的祖先，從父元素開(kāi)始，嘗試找到這個(gè)屬性的值。如果找到了，就會(huì)應(yīng)用。
7.如果這個(gè)屬性不能繼承或祖先也沒(méi)有指定該屬性，就會(huì)應(yīng)用瀏覽器的默認(rèn)樣式。
特定性具體判斷方法
從三位的特定數(shù)計(jì)算開(kāi)始。
初始都是：0 0 0
如果該選擇器包含id，每個(gè)id在百位上加1。
如果該選擇器包含類或偽類，每個(gè)類或偽類在十位上加1。
如果該選擇器包含元素名，每個(gè)元素名在個(gè)位上加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、類和元素后，得到的特定數(shù)越大，其特定性越強(qiáng)。
類似“h1,h2”規(guī)則，可以拆開(kāi)來(lái)看 都是001。
讀者樣式對(duì)作者樣式的覆蓋
讀者可能會(huì)覆蓋一個(gè)樣式，在他的屬性聲明最后放置一個(gè)“!important”，例如：
h1{
font-size:200%
!important;
}
這會(huì)覆蓋作者的樣式。
