css語法由選擇器和聲明(規則)兩部分構成。選擇器告訴瀏覽器該樣式將作用于頁面中哪些對象,而聲明告訴瀏覽器如何去渲染選擇器指定的對象;聲明可以有一個或者無數個,而所有聲明被放置在一對大括號“{}”內,然后整體緊鄰選擇器的后面。聲明必須包括兩部分:屬性和屬性值,屬性和值之間需要使用冒號進行分隔,并用分號來標識一個聲明的結束。css語法的完整格式“選擇器{屬性:屬性值;…}”。

本教程操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
樣式是 CSS 最小語法單元,每個樣式包含兩部分內容:選擇器和聲明(規則),如下圖所示。

1、選擇器(Selector)
選擇器由 HTML 元素的 id、class 屬性或元素名本身以及一些特殊符號構成,用來指定要為哪個 HTML 元素定義樣式,例如選擇器p就表示為頁面中的所有<p>標簽定義樣式;
2、聲明(Declaration)
聲明可以有一個或者無數個,這些聲明告訴瀏覽器如何去渲染選擇器指定的對象。所有聲明被放置在一對大括號{ }內,然后整體緊鄰選擇器的后面。
聲明必須包括兩部分:屬性和屬性值,并用分號來標識一個聲明的結束,在一個樣式中最后一個聲明可以省略分號。
-
屬性:您希望給 HTML 元素設置的樣式名稱,由一系列關鍵詞組成,例如 color(顏色)、border(邊框)、font(字體)等,CSS 中提供了眾多屬性,您可以通過 W3C 官網查看;
-
值:由數值和單位或者關鍵字組成,用來控制某個屬性的顯示效果,例如 color 屬性的值可以是 red 或 #F1F1F1 等。
屬性和值之間需要使用冒號
:進行分隔,每個屬性和值的組合可以看作一個聲明,每個聲明的末尾都需要使用分號;作為結尾,屬于同一選擇器的聲明需要使用花括號{ }包裹起來。
selector {property: value;} 選擇器{屬性:屬性值;}
【示例1】可以按照如下圖所示的語法規則來定義 CSS 樣式:

上圖的語法示例中:
-
選擇器
h1表示要為網頁中所有的<h1>標簽定義樣式; -
屬性
color表示字體顏色,值blue則表示將字體設置為藍色; -
屬性
text-align表示文本的對齊方式,值center 則表示將文本的對齊方式設置為居中對齊。
為了使 CSS 更具可讀性,您可以在定義 CSS 時每一行代碼上只放置一個聲明,如下所示:
h1 { color: blue; text-align: center; }
提示:CSS 中的屬性和大部分值都是不區分大小寫的,但 CSS 中的選擇器通常區分大小寫,例如類選擇器
.bianchengbang和.BianChengBang就表示兩個不同的選擇器。
多個樣式可以并列在一起,不需要考慮如何進行分隔。
【示例2】定義段落文本的背景色為紫色,則可以在上面樣式基礎上定義如下樣式。
body{ font-size: 12px; color: #CCCCCC;} p{ background-color: #FF00FF; }
由于 CSS 語言忽略空格(除了選擇器內部的空格外),因此可以利用空格來格式化 CSS 源代碼,則上面代碼可以進行如下美化:
body { font-size: 12px; color: #CCCCCC; } p { background-color: #FF00FF; }
這樣在閱讀css源代碼時就一目了然了,既方便閱讀,也更容易維護。
任何語言都需要注釋,HTML 使用<!- 注釋語句-> 來進行注釋,而 CSS 使用/* 注釋語句 */來進行注釋。
【示例3】對于上面樣式可以進行如下注釋。
body { /*頁面基本屬性*/ font-size: 12px; color: #CCCCCC; } /*段落文本基礎屬性*/ p { background-color: #FF00FF; }
CSS高級語法:選擇器的分組
你可以對選擇器進行分組,這樣,被分組的選擇器就可以分享相同的聲明。
用逗號將需要分組的選擇器分開。在下面的例子中,我們對所有的標題元素進行了分組。所有的標題元素都是綠色的。
h1,h2,h2,h3,h5,h6 { color: green; }
(學習視頻分享:css視頻教程)
站長資訊網