css規(guī)則的基本格式是“選擇器{屬性:屬性值;}”?!斑x擇器”用于告訴瀏覽器“{}”包裹的樣式將作用于頁面中哪些對象,“屬性”是CSS提供的設(shè)置好的樣式選項,“屬性值”是用來顯示屬性效果的參數(shù)。
本教程操作環(huán)境:windows7系統(tǒng)、CSS3版、Dell G3電腦。
樣式是 CSS 最小語法單元,每個樣式包含兩部分內(nèi)容:選擇器和聲明(規(guī)則),如下圖所示。
1) 選擇器(Selector)
選擇器告訴瀏覽器該樣式將作用于頁面中哪些對象,這些對象可以是某個標簽、所有網(wǎng)頁對象、指定 class 或 id 值等。瀏覽器在解析這個樣式時,根據(jù)選擇器來渲染對象的顯示效果。
2) 聲明(Declaration)
聲明可以增加一個或者無數(shù)個,這些聲明告訴瀏覽器如何去渲染選擇器指定的對象。
聲明必須包括兩部分:屬性和屬性值,并用分號來標識一個聲明的結(jié)束,在一個樣式中最后一個聲明可以省略分號。
所有聲明被放置在一對大括號{ }
內(nèi),然后整體緊鄰選擇器的后面。
3) 屬性(Property)
屬性是 CSS 提供的設(shè)置好的樣式選項。屬性名由一個單詞或多個單詞組成,多個單詞之間通過連字符相連。這樣能夠很直觀地表示屬性所要設(shè)置樣式的效果。
4) 屬性值(Value)
屬性值用來顯示屬性效果的參數(shù)。它包括數(shù)值和單位,或者關(guān)鍵字。
【示例1】定義網(wǎng)頁字體大小為 12 像素,字體顏色為深灰色,則可以設(shè)置如下樣式。
body{ font-size: 12px; color: #CCCCCC; }
多個樣式可以并列在一起,不需要考慮如何進行分隔。
【示例2】定義段落文本的背景色為紫色,則可以在上面樣式基礎(chǔ)上定義如下樣式。
body{ font-size: 12px; color: #CCCCCC;} p{ background-color: #FF00FF; }
由于 CSS 語言忽略空格(除了選擇器內(nèi)部的空格外),因此可以利用空格來格式化 CSS 源代碼,則上面代碼可以進行如下美化:
body { font-size: 12px; color: #CCCCCC; } p { background-color: #FF00FF; }
這樣在閱讀css源代碼時就一目了然了,既方便閱讀,也更容易維護。
任何語言都需要注釋,HTML 使用<!- 注釋語句-> 來進行注釋,而 CSS 使用/* 注釋語句 */來進行注釋。
【示例3】對于上面樣式可以進行如下注釋。
body { /*頁面基本屬性*/ font-size: 12px; color: #CCCCCC; } /*段落文本基礎(chǔ)屬性*/ p { background-color: #FF00FF; }
(學習視頻分享:css視頻教程)