inline style 
embeded style 
external style 
user style 
inline style是丑陋的，它們穿梭在HTML文檔中，與HTML元素扭成一團(tuán)，給Web前端開發(fā)人員造成了許多麻煩。它們往往以這樣的面目出現(xiàn)：

<p style="color:red;">This is a paragraph.</p>
embeded style比inline style紳士一些，它們也寄宿在HTML文檔中，但是它們不屑于與HTML元素扭成一團(tuán)。它們往往在 <style> 元素中出現(xiàn)：

<style type="text/css" media="screen">
    p{
        color : red;
    }
</style>
external style是個(gè)貴族，它不愿意同HTML呆在一起，所以干脆以外部文件的形式獨(dú)立存在。通常我們使用 <link> 元素或者@import語(yǔ)句將它們導(dǎo)入HTML。

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
我們應(yīng)當(dāng)盡可能使用external style，我想理由有很多，大家都知道，我也就不重復(fù)了。

還有一種user style與以上三者略有不同，如果你使用IE瀏覽器，那么你可以在Tools – Internet Options – General – Appearance – Accessibility – User style sheet 下找到添加user style的地方（原諒我沒有中文版的IE瀏覽器）。

既然我們有如此多的添加style的方法，那么難以避免樣式會(huì)產(chǎn)生層疊。如：

<p class="intro" style="color:red;">This is a paragraph.</p>
我們?cè)谑褂靡陨蟟nline style的同時(shí)，又在我們的external style中使用了：

p{
    color : yellow;
}
我們甚至還在擁有 class="intro" 的 <p> 元素上應(yīng)用了：

p.intro{
    color : blue;
}
這樣我們就 在同一元素的同一屬性 color 上，擁有多條CSS規(guī)則指定了值 。這種情況被稱為層疊(Cascading)。當(dāng)層疊發(fā)生時(shí)，CSS Parser將根據(jù)優(yōu)先級(jí)算法來(lái)確定最終選用的值。 

優(yōu)先級(jí)算法按照先后順序考慮以下三個(gè)方面：

CSS規(guī)則的重要性和來(lái)源 
CSS規(guī)則的特殊性 
CSS規(guī)則在文檔中出現(xiàn)的順序 
算法過(guò)程分為4步：

1、針對(duì)某一元素的某一屬性，列出所有給該屬性指定值的CSS規(guī)則。如上例中，在 class="intro" 的 <p> 元素上，有三條CSS規(guī)則指定了 color 屬性。

2、根據(jù)聲明的重要性和來(lái)源進(jìn)行優(yōu)先級(jí)排序

重要性有兩種：

important 
normal（即非important） 
在CSS規(guī)則后添加 !important 的重要性要高于沒有添加的。

來(lái)源有三種：

user agent stylesheet – 瀏覽器默認(rèn)樣式 
author stylesheet – 開發(fā)人員定義的樣式 
user stylesheet – 用戶在瀏覽器中定義樣式 
重要性和來(lái)源的優(yōu)先級(jí)排序從低到高是：

user agent stylesheet 
user style sheets中的normal規(guī)則 
author style sheets中的normal規(guī)則 
author style sheets中的important規(guī)則 
user style sheets中的important規(guī)則 
經(jīng)過(guò)以上排序，如果有一條CSS規(guī)則的優(yōu)先級(jí)高于其他所有競(jìng)爭(zhēng)規(guī)則，那么算法結(jié)束，返回該最高優(yōu)先級(jí)指定的值。如果有多條CSS規(guī)則具有最高優(yōu)先級(jí)，那么它們將要繼續(xù)競(jìng)爭(zhēng)下去，算法將進(jìn)入第3步。

3、按照特殊性（Specificity）排序

CSS將計(jì)算多條規(guī)則中指定每一規(guī)則的selector的特殊性值，該值越高，優(yōu)先級(jí)越高。

特殊性值是一個(gè)由4個(gè)整數(shù)組成的一個(gè)類似數(shù)組的值：a,b,c,d，其中a的權(quán)重最高，依次類推，d的權(quán)重最低。selector特殊性值的計(jì)算方法是：

如果該規(guī)則是一條inline style，那么a = 1 
如果該規(guī)則由selector指定，selector中出現(xiàn)的id selector的數(shù)量就是b的值 
如果該規(guī)則由selector指定，selector中出現(xiàn)的屬性selector（包括class selector）或者偽類selector的數(shù)量總和就是c的值 
如果該規(guī)則由selector指定，selector中出現(xiàn)的元素selector或者是偽元素selector的數(shù)量總和就是d的值。 
universal selector * 的特殊性值為0,0,0,0 
官方網(wǎng)站 提供了一些例子可以加深理解。

在根據(jù)特殊性值排序時(shí)，由于a的權(quán)重最高，因此首先比較a，在a相同的情況，在比較b，依次類推。因此不論b,c,d值有多大，inline style總是具有最高的特殊性。

如果根據(jù)以上特殊性排序后，有一條CSS規(guī)則的優(yōu)先級(jí)高于其他所有競(jìng)爭(zhēng)規(guī)則，那么算法結(jié)束，返回該最高優(yōu)先級(jí)指定的值。如果有多條CSS規(guī)則具有最高優(yōu)先級(jí)，那么它們將要繼續(xù)競(jìng)爭(zhēng)下去，算法將進(jìn)入第4步。

4、比較CSS規(guī)則在文檔中出現(xiàn)的順序

出現(xiàn)在后的總是比出現(xiàn)在前的具有更高的優(yōu)先級(jí)，因此出現(xiàn)在最后的那條語(yǔ)句將被作為該屬性的值。

至此，算法結(jié)束。我徹底暈了。

最新評(píng)論