CSS控制頁面樣式的4種方式和優先級問題

2024-07-11 09:03:11

字體：大中小

來源：轉載

供稿：網友

武林網(www.survivalescaperooms.com)文章簡介：第一：CSS如何控制頁面樣式，有幾種方式；第二：這些方式出現在同一個頁面時的優先級。

本節主要講解，兩個內容，
第一：CSS如何控制頁面樣式，有幾種方式；
第二：這些方式出現在同一個頁面時的優先級。

使用xHTML+CSS布局頁面，其中有個很重要的特點就是內容與表象相分離，內容指HTML頁面代碼，表象就是CSS代碼了，如果把頁面看成穿著衣服的人的話，人就是HTML，是內容，而衣服呢就是CSS，是表
象，現在出現的問題是，如何讓CSS去控制頁面？或者說，如何讓衣服穿在人身上，好體現出人得風格特點；不同的CSS就可以使頁面出現不同的風格適用不同的網站，而不同的衣服，人穿上后就會體現
出不同的職業。

第一：如何讓CSS去控制HTML頁面效果呢？
有這么4種方式，行內方式、內嵌方式、鏈接方式、導入方式

1）行內方式
行內方式是4種樣式中最直接最簡單的一種，直接對HTML標簽適用style=""，例如：

雖然這種方法比較直接，在制作頁面的時候需要為很多的標簽設置style屬性，所以會導致HTML頁面不夠純凈，文件體積過大，不利于搜索蜘蛛爬行，從而導致后期維護成本高。

2）內嵌方式
內嵌方式就是將CSS代碼寫在<head></head>之間，并且用<style></style>進行聲明，例如：

內嵌方式，大家應該也能意識到，即使有公共CSS代碼，也是每個頁面都要定義的，如果一個網站有很多頁面，每個文件都會變大，后期維護也大，如果文件很少，CSS代碼也不多，這種方式還是很不錯
的。

3）鏈接方式
鏈接方式是使用頻率最高，最實用的方式，只需要在<head></head>之間加上

，就可以了，這種方式將HTML文件和CSS文件徹底分成兩個
或者多個文件，實現了頁面框架HTML代碼與美工CSS代碼的完全分離，使得前期制作和后期維護都十分方便，并且如果要保持頁面風格統一，只需要把這些公共的CSS文件單獨保存成一個文件，其他的頁
面就可以分別調用自身的CSS文件，如果需要改變網站風格，只需要修改公共CSS文件就OK了，相當的方便，這才是我們xHTML+CSS制作頁面提倡的方式。
HTML代碼

CSS代碼

#div1{width:64px; height:64px; float:left;}

#div1 img{width:64px; height:64px;}

4)導入方式
導入樣式和鏈接樣式比較相似，采用import方式導入CSS樣式表，在HTML初始化時，會被導入到HTML文件中，成為文件的一部分，類似第二種內嵌方式。
具體導入樣式和鏈接樣式有什么區別，可以參看這篇文章《CSS:@import與link的具體區別》，不過我還是建議大家用鏈接方式！

第二：四種樣式的優先級
如果這上面的四種方式中的兩種用于同一個頁面后，就會出現優先級的問題，這里我就不再舉例子來說明了，大家在下面自己證明一下下面的結論

四種樣式的優先級別是(從高至低)：行內樣式、內嵌樣式、鏈接樣式、導入樣式。

上一篇：CSS基礎入門教程:CSS選擇器規范化命名

下一篇：CSS基礎入門教程:理解盒子模型