什麼是CSS? 中文翻譯為樣式表! 它的作用簡單的說：就是可以使你在同一頁面裡使用不同的超連結樣式。
更神奇的是，用CSS，僅僅改變一個檔案就可以改變數百個網頁的外觀......個人化的表現而不損失訪問者......所有這些都因為網頁樣式表的強大和靈活特性。
讓我們開始吧！
CSS 速成
層疊樣式表的基礎入門。
CSS 結構和規則
各種選擇符、偽類、虛擬元素和層疊順序的入門。
CSS 屬性
各種層疊樣式表層級一有效屬性的描述。
將樣式表加入到HTML中
各種將樣式表加入到HTML文本中的方法。
依賴樣式表
怎樣會是濫用樣式表和使你的網頁難以處理。
CSS 參考
串連到介紹CSS的規範和其它方面的文章。
------------------------------------------------------------------------------
CSS 速成
一個樣式表由樣式規則群組成, 以告訴瀏覽器怎樣去呈現一個文檔. 有很多將樣式規則加入到你的HTML文檔中的方法, 但最簡單的啟動方法是使用HTML的STYLE組件. 這個元素放置於文檔的HEAD部分, 包含網頁的樣式規則.
要注意到儘管STYLE元素是實驗樣式表的好方法, 它具有某些在使用者使用這種方法之前應該考慮的缺點. 不同方法的優點和缺點在將樣式表加入到HTML中部分中有討論。
每個規則的組成包括一個選擇符--通常是一個HTML的元素, 例如BODY, P, 或EM--和該選擇符所接受的樣式.
有很多的屬性可以用於定義一個元素. 每個屬性帶一個值, 共同地描述選擇符應該如何呈現.
樣式規則群組成如下:
選擇符 { 屬性: 值 }
單一選擇符的複合樣式聲明應該用分號隔開:
選擇符 { 屬性1: 值1; 屬性2: 值2 }
以下是一段定義了H1和H2元素的顏色和字型大小屬性:
<HEAD>
<TITLE>CSS例子</TITLE>
<STYLE TYPE="text/css">
H1 { font-size: x-large; color: red }
H2 { font-size: large; color: blue }
</STYLE>
</HEAD>
上述的樣式表告訴瀏覽器用加大、紅色字型去顯示一級標題, 用大、藍色字型去顯示二級標題. CSS1 規格正式地定義了所有的有效屬性和值. 屬性和值在本網站的CSS 屬性部分也給出了.
本教程專門介紹了CSS非常基礎的知識, 以提供足夠的資訊去讓你實驗自己的樣式. 要獲得CSS更深入的知識, 閱讀繼續閱讀以下部分:
CSS 結構和規則
CSS 屬性
將樣式表加入到HTML中
基本文法
規則
選擇符
任何HTML元素都可以是一個CSS1的選擇符。選擇符僅僅是指向特別樣式的元素。例如：
P { text-indent: 3em }
當中的選擇符是P。
類選擇符
單一個選擇符能有不同的CLASS(類)，因而允許同一元素有不同樣式。例如，一個網頁製作者也許希望視其語言而定，用不同的顏色顯示代碼 :
code.html { color: #191970 }
code.css { color: #4b0082 }
以上的例子建立了兩個類，css和html，供HTML的CODE元素使用。CLASS屬性是用於在HTML中以指明元素的類，例如：
<P CLASS=warning>每個選擇符只允許有一個類。
例如，code.html.proprietary是無效的。</p>
類的聲明也可以無須相關的元素:
.note { font-size: small }
在這個例子，名為note的類可以被用於任何元素。
一個良好的習慣是在命名類的時候，根據它們的功能而不是根據它們的外觀。上述例子中的note類也可以命名為small，但如果網頁製作者決定改變這個類的樣式，使得它不再是小字型的話，那麼這個名字就變得毫無意義了。
ID 選擇符
ID 選擇符個別地定義每個元素的成分。這種選擇符應該盡量少用，因為他具有一定的局限。一個ID選擇符的指定要有指示符"#"在名字前面。例如，ID選擇符可以指定如下:
#svp94O { text-indent: 3em }
這點可以參考HTML中的ID屬性:
<P ID=svp94O>文本縮排3em</P>
關聯選擇符
關聯選擇符只不過是一個用空格隔開的兩個或更多的單一選擇符組成的字串。這些選擇符可以指定一般屬性，而且因為層疊順序的規則，它們的優先權比單一的選擇符大。例如， 以下的上下文選擇符
P EM { background: yellow }
是P EM。這個值表示段落中的強調文本會是黃色背景；而標題的強調文本則不受影響。
聲明
屬性
一個屬性被指定到選擇符是為了使用它的樣式。屬性的例子包括顏色、邊界和字型。
值
聲明的值是一個屬性接受的指定。例如，屬性顏色能接受值red。
組合
為了減少樣式表的重複聲明，組合的選擇符聲明是允許的。例如，文檔中所有的標題可以通過組合給出相同的聲明:
H1, H2, H3, H4, H5, H6 {
color: red;
font-family: sans-serif }
繼承
實際上，所有在選擇符中嵌套的選擇符都會繼承外層選擇符指定的屬性值，除非另外更改。例如，一個BODY定義了的顏色值也會應用到段落的文本中。
有些情況是內部選擇符不繼承周圍的選擇符的值，但理論上這些都是特殊的。例如，上邊界屬性是不會繼承的；直覺上，一個段落不會有同文檔BODY一樣的上邊界值。
註解
樣式表裡面的註解使用C語言編程中一樣的約定方法去指定。CSS1註解的例子如以下格式:
/* COMMENTS CANNOT BE NESTED */
偽類和虛擬元素
偽類和虛擬元素是特殊的類和元素，能自動地被支援CSS的瀏覽器所識別。偽類區別開不同種類的元素(例如，visited links(已訪問的串連)和active links(可啟用串連)描述了兩個定位錨(anchors)的類型)。虛擬元素指元素的一部分，例如段落的第一個字母。
偽類或虛擬元素規則的形式如
選擇符:偽類 { 屬性: 值 }
或
選擇符:虛擬元素 { 屬性: 值 }
偽類和虛擬元素不應用HTML的CLASS屬性來指定。一般的類可以與偽類和虛擬元素一起使用，如下:
選擇符.類: 偽類 { 屬性: 值 }
或
選擇符.類: 虛擬元素 { 屬性: 值 }
定位錨偽類
偽類可以指定A元素以不同的方式顯示串連(links)、已訪問串連(visited links)和可啟用串連(active links)。定位錨元素可給出偽類link、visited或active。一個已訪問串連可以定義為不同顏色的顯示，甚至不同字型大小和風格。
一個有趣的效果是使當前(或“可啟用”)串連以不同顏色、更大的字型顯示。然後，當網頁的已訪問串連被重選時，又以不同顏色、更小字型顯示。這個樣式表的樣本如下:
A:link { color: red }
A:active { color: blue; font-size: 125% }
A:visited { color: green; font-size: 85% }
首行虛擬元素
通常在報紙上的文章，例如Wall Street Journal中的，文本的首行都會以粗印體而且全部大寫地展示。CSS1包括了這個功能，將其作為一個虛擬元素。首行虛擬元素可以用於任何區塊層級元素(例如P、H1等等)。以下是一個首行虛擬元素的例子:
P:first-line {
font-variant: small-caps;
font-weight: bold }
首個字母虛擬元素
首個字母虛擬元素用於加大(drop caps)和其他效果。含有已指定值選擇符的文本的首個字母會按照指定的值展示。一個首個字母虛擬元素可以用於任何區塊層級元素。例如:
P:first-letter { font-size: 300%; float: left }
會比普通字型加大三倍。
層疊順序
當使用了多個樣式表，樣式表需要爭奪特定選擇符的控制權。在這些情況下，總會有樣式表的規則能獲得控制權。以下的特性將決定互相對立的樣式表的結果。
! important
規則可以用指定的! important 特指為重要的。一個特指為重要的樣式會淩駕於與之對立的其它相同權重的樣式。同樣地，當網頁製作者和讀者都指定了重要規則時，網頁製作者的規則會超越讀者的。以下是! important 聲明的例子:
BODY { background: url(bar.gif) white;
background-repeat: repeat-x ! important }
Origin of Rules (Author's vs. Reader's)
正如以前所提及的，網頁製作者和讀者都有能力去指定樣式表。當兩者的規則發生衝突，網頁製作者的規則會淩駕於讀者的其它相同權重的規則。而網頁製作者和讀者的樣式表都超越瀏覽器的內建樣式表。
網頁製作者應該小心地使用! important 規則，因為它們會超越使用者任何的! important 規則。例如，一個使用者由於視覺關係，會要求大字型或指定的顏色，而且這樣的使用者會有可能聲明確定的樣式規則為! important，因為這些樣式對於使用者閱讀網頁是極為重要的。任何的! important 規則會超越一般的規則，所以建議網頁製作者使用一般的規則以確保有特殊樣式需要的使用者能閱讀網頁。
選擇符規則: 計算特性
基於它們的特性層級，樣式表也可以超越與之衝突的樣式表，一個較高特性的樣式永遠都淩駕於一個較低特性的樣式。這隻不過是計算選擇符的指定個數的一個統計遊戲。
統計選擇符中的ID屬性個數。
統計選擇符中的CLASS屬性個數。
統計選擇符中的HTML標記名格式。
最後，按正確的順序寫出三個數字，不要加空格或逗號，得到一個三位元。( 注意，你需要將數字轉換成一個以三個數字結尾的更大的數。)相應於選擇符的最終數字列表可以很容易確定較高數字特性淩駕於較低數位。以下是一個按特性分類的選擇符的列表:
#id1 {xxx} /* a=1 b=0 c=0 --> 特性 = 100 */
UL UL LI.red {xxx} /* a=0 b=1 c=3 --> 特性 = 013 */
LI.red {xxx} /* a=0 b=1 c=1 --> 特性 = 011 */
LI {xxx} /* a=0 b=0 c=1 --> 特性 = 001 */
特性的順序
為了方便使用，當兩個規則具同樣權重時，取後面的那個。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
