初學者應該先來瞭解的CSS網頁知識

css|初學|網頁 Cascading Style Sheets（簡稱CSS），翻譯為“層疊樣式單”或“級聯樣式單”，又簡稱“樣式表”。

CSS的引入是用來擴充HTML的，而不是用來替代HTML的。也就是說CSS離不開HTML，它只是一項協助工具輔助，是對HTML功能的一種補充。

CSS的優勢

在CSS標準裡，不僅重新定義了HTML原有的樣式，如文字的大小、顏色等；更加入了重疊文字、區塊變化及任意位置放置等多項新屬性。通過CSS可以使用更豐富、更靈活的樣式，更簡單地設計出更美觀的網頁。同時，也讓網頁的設計與維護更有效率。

減少影像檔的使用：很多網頁為求設計效果，而大量使用映像，以致網頁的下載速度變慢。CSS提供了很多文字樣式的設定，且再加上IE內建的濾鏡特效，因此可輕鬆取代原來映像才能表現的視覺效果。這樣的設計方式讓修改網頁內容變得更方便，也大大提高了下載速度；

集中管理樣式資訊：CSS的基本概念在於可將網頁要展示的內容與其表現的樣式設定分開，也就是將網頁的外觀設定資訊從網頁的內容中獨立出來，並集中管理。這樣，當要改變網頁外觀時，只需更改樣式設定的部分，HTML檔案本身並不需要任何的更改；

共用樣式設定：網頁的樣式設定和內容分離的好處，除了可集中管理外，如果進一步將CSS樣式的資訊儲存成獨立的檔案，還可讓多個網頁檔案共同使用它。這樣，可省卻在每一個網頁檔案中都要重複設定樣式的麻煩；

將樣式分類使用：相對於多份HTML檔案可套用同一個CSS樣式檔案，也可以在一份HTML網頁檔案上套用多個CSS樣式檔案。

CSS的規則

CSS的樣式規則由兩部分組成：選取器和聲明。

選取器就是樣式的名稱，包括自訂的類，HTML標籤和CSS選取器樣式。比如“.mycss”為自訂的類，“td”為標準HTML標籤，而“a:link”則是CSS選取器樣式；

聲明則是用於定義樣式元素的。聲明由分兩部分：屬性（如font-size）和值（如12px）。對於一個選取器而言，可以有多個聲明。比如一個聲明是表示顏色，一個聲明是表示大小等。

以下為CSS樣式的程式碼片段：


td {
    font-size: 12px;
    color: #666666;
}
.cnbruce {
    background-color: #000033;
}
其中“td”和“.cnbruce”都屬於選取器，“font-size”、“color”以及“background-color”都屬於聲明中的屬性，而“12px”、“#666666”及“#000033”即為屬性對應的值。每個選取器的聲明都採用{…}包含。

CSS的形式

從CSS代碼的標籤形式來看，分如下3種CSS樣式：

1，自訂CSS樣式，又稱類樣式。可應用於任何標籤，名稱必須帶有句點“.”，比如“.cnbruce”；

2，HTML標籤樣式。雖說自訂CSS樣式可應用任何標籤，但對於HTML固有的標籤，每次都要選用自訂的樣式就顯得比較麻煩。所以HTML標籤樣式的出現就是為了擴充HTML標籤的；

3，CSS選取器樣式。此為進階選項，可用來定義標籤的組合，比如“a”表示對超級連結樣式的選擇，“td”表示對儲存格樣式的選擇，而如果對儲存格中超級連結樣式的選擇則使用“td a”。

a {
    color: #3366CC;
}
td a{
    color: #FF0000;
}
如上代碼的定義，對於普通插入的超級連結的顏色，和在儲存格中使用的超級連結的顏色，將進行不同的顯示。

CSS的應用範圍

CSS無處不在，它可以分為以下兩種。

外部CSS樣式表：以副檔名為.css的檔案而存在，檔案中內容即是所有樣式的選擇和聲明。該檔案可做為共用檔案，讓多個文檔共同引用並應用，達到網站檔案樣式的一致性。同時，如果修改該樣式表檔案，所有引用的文檔都將改變其樣式，達到網站迅速改版的目的。

內部CSS樣式表：只存在於當前文檔中，並只針對當前頁進行樣式應用的方法。一般存在於文檔head部分的style標籤內。

外部CSS樣式表和內部CSS樣式表可同時作用於一個頁面，但當兩種樣式表出現對同一選擇對象進行樣式修飾時，瀏覽器將按照如下規則來應用樣式效果：

若兩者所聲明的屬性不相衝突，則顯示為該兩種樣式的全部屬性；
若兩者所聲明的屬性直接相衝突，則採用內部樣式表的樣式。
所謂“求同存異，內部優先”。