CSS--層疊樣式表

　　什么是CSS?
　　中文翻譯為樣式表! 它的作用簡(jiǎn)單的說：就是可以使你在同一頁(yè)面里使用不同的超鏈接樣式。
　　更神奇的是，用CSS，僅僅改變一個(gè)文件就可以改變數(shù)百個(gè)網(wǎng)頁(yè)的外觀......個(gè)性化的表現(xiàn)而不損失訪問者......所有這些都因?yàn)榫W(wǎng)頁(yè)樣式表的強(qiáng)大和靈活特性。
　　讓我們開始吧！

CSS 速成

　　一個(gè)樣式表由樣式規(guī)則組成, 以告訴瀏覽器怎樣去呈現(xiàn)一個(gè)文檔. 有很多將樣式規(guī)則加入到你的HTML文檔中的方法, 但最簡(jiǎn)單的啟動(dòng)方法是使用HTML的STYLE組件. 這個(gè)元素放置于文檔的HEAD部分, 包含網(wǎng)頁(yè)的樣式規(guī)則.

　　要注重到盡管STYLE元素是試驗(yàn)樣式表的好方法, 它具有某些在用戶使用這種方法之前應(yīng)該考慮的缺點(diǎn). 不同方法的優(yōu)點(diǎn)和缺點(diǎn)在將樣式表加入到HTML中部分中有討論。

　　每個(gè)規(guī)則的組成包括一個(gè)選擇符--通常是一個(gè)HTML的元素, 例如BODY, P, 或EM--和該選擇符所接受的樣式.

　　有很多的屬性可以用于定義一個(gè)元素. 每個(gè)屬性帶一個(gè)值, 共同地描述選擇符應(yīng)該如何呈現(xiàn).

樣式規(guī)則組成如下:

選擇符 { 屬性: 值 }
單一選擇符的復(fù)合樣式聲明應(yīng)該用分號(hào)隔開:

選擇符 { 屬性1: 值1; 屬性2: 值2 }

以下是一段定義了H1和H2元素的顏色和字體大小屬性:






上述的樣式表告訴瀏覽器用加大、紅色字體去顯示一級(jí)標(biāo)題, 用大、藍(lán)色字體去顯示二級(jí)標(biāo)題. CSS1 規(guī)格正式地定義了所有的有效屬性和值. 屬性和值在本網(wǎng)站的CSS 屬性部分也給出了.

本教程專門介紹了CSS非�；�礎(chǔ)的知識(shí), 以提供足夠的信息去讓你試驗(yàn)自己的樣式. 要獲得CSS更深入的知識(shí), 閱讀繼續(xù)閱讀以下部分:

CSS 結(jié)構(gòu)和規(guī)則
CSS 屬性
將樣式表加入到HTML中

CSS 結(jié)構(gòu)和規(guī)則

基本語(yǔ)法

規(guī)則
選擇符
任何HTML元素都可以是一個(gè)CSS1的選擇符。選擇符僅僅是指向非凡樣式的元素。例如，

P { text-indent: 3em }
當(dāng)中的選擇符是P。

類選擇符
單一個(gè)選擇符能有不同的CLASS(類)，因而答應(yīng)同一元素有不同樣式。例如，一個(gè)網(wǎng)頁(yè)制作者也許希望視其語(yǔ)言而定，用不同的顏色顯示代碼 :

code.html { color: #191970 }
code.css { color: #4b0082 }
以上的例子建立了兩個(gè)類，css和html，供HTML的CODE元素使用。CLASS屬性是用于在HTML中以指明元素的類，例如，

每個(gè)選擇符只答應(yīng)有一個(gè)類。
例如，code.html.proprietary是無(wú)效的。

類的聲明也可以無(wú)須相關(guān)的元素:

.note { font-size: small }
在這個(gè)例子，名為note的類可以被用于任何元素。

一個(gè)良好的習(xí)慣是在命名類的時(shí)候，根據(jù)它們的功能而不是根據(jù)它們的外觀。上述例子中的note類也可以命名為small，但假如網(wǎng)頁(yè)制作者決定改變這個(gè)類的樣式，使得它不再是小字體的話，那么這個(gè)名字就變得毫無(wú)意義了。

ID 選擇符
ID 選擇符個(gè)別地定義每個(gè)元素的成分。這種選擇符應(yīng)該盡量少用，因?yàn)樗�具有一定的局��。一個(gè)ID選擇符的指定要有指示符"#"在名字前面。例如，ID選擇符可以指定如下:

#svp94O { text-indent: 3em }
這點(diǎn)可以參考HTML中的ID屬性:

文本縮進(jìn)3em

關(guān)聯(lián)選擇符
關(guān)聯(lián)選擇符只不過是一個(gè)用空格隔開的兩個(gè)或更多的單一選擇符組成的字符串。這些選擇符可以指定一般屬性，而且因?yàn)閷盈B順序的規(guī)則，它們的優(yōu)先權(quán)比單一的選擇符大。例如，以下的上下文選擇符

查看更多 動(dòng)易Cms教程  動(dòng)易Cms模板