css語(yǔ)法由什么構(gòu)成

這篇文章主要介紹“css語(yǔ)法由什么構(gòu)成”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“css語(yǔ)法由什么構(gòu)成”文章能幫助大家解決問(wèn)題。

css語(yǔ)法由選擇器和聲明（規(guī)則）兩部分構(gòu)成。選擇器告訴瀏覽器該樣式將作用于頁(yè)面中哪些對(duì)象，而聲明告訴瀏覽器如何去渲染選擇器指定的對(duì)象；聲明可以有一個(gè)或者無(wú)數(shù)個(gè)，而所有聲明被放置在一對(duì)大括號(hào)“{}”內(nèi)，然后整體緊鄰選擇器的后面。聲明必須包括兩部分：屬性和屬性值，屬性和值之間需要使用冒號(hào)進(jìn)行分隔，并用分號(hào)來(lái)標(biāo)識(shí)一個(gè)聲明的結(jié)束。css語(yǔ)法的完整格式“選擇器{屬性:屬性值;...}”。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

樣式是 CSS 最小語(yǔ)法單元，每個(gè)樣式包含兩部分內(nèi)容：選擇器和聲明（規(guī)則），如下圖所示。

1、選擇器（Selector）

選擇器由 HTML 元素的 id、class 屬性或元素名本身以及一些特殊符號(hào)構(gòu)成，用來(lái)指定要為哪個(gè) HTML 元素定義樣式，例如選擇器p就表示為頁(yè)面中的所有<p>標(biāo)簽定義樣式；

2、聲明（Declaration）

聲明可以有一個(gè)或者無(wú)數(shù)個(gè)，這些聲明告訴瀏覽器如何去渲染選擇器指定的對(duì)象。所有聲明被放置在一對(duì)大括號(hào){ }內(nèi)，然后整體緊鄰選擇器的后面。

聲明必須包括兩部分：屬性和屬性值，并用分號(hào)來(lái)標(biāo)識(shí)一個(gè)聲明的結(jié)束，在一個(gè)樣式中最后一個(gè)聲明可以省略分號(hào)。

• 屬性：您希望給 HTML 元素設(shè)置的樣式名稱，由一系列關(guān)鍵詞組成，例如 color（顏色）、border（邊框）、font（字體）等，CSS 中提供了眾多屬性，您可以通過(guò) W3C 官網(wǎng)查看；

• 值：由數(shù)值和單位或者關(guān)鍵字組成，用來(lái)控制某個(gè)屬性的顯示效果，例如 color 屬性的值可以是 red 或 #F1F1F1 等。

屬性和值之間需要使用冒號(hào):進(jìn)行分隔，每個(gè)屬性和值的組合可以看作一個(gè)聲明，每個(gè)聲明的末尾都需要使用分號(hào);作為結(jié)尾，屬于同一選擇器的聲明需要使用花括號(hào){ }包裹起來(lái)。

selector {property: value;}
選擇器{屬性:屬性值;}

【示例1】可以按照如下圖所示的語(yǔ)法規(guī)則來(lái)定義 CSS 樣式：

上圖的語(yǔ)法示例中：

• 選擇器 h2 表示要為網(wǎng)頁(yè)中所有的<h2>標(biāo)簽定義樣式；

• 屬性 color 表示字體顏色，值 blue 則表示將字體設(shè)置為藍(lán)色；

• 屬性 text-align 表示文本的對(duì)齊方式，值 center 則表示將文本的對(duì)齊方式設(shè)置為居中對(duì)齊。

為了使 CSS 更具可讀性，您可以在定義 CSS 時(shí)每一行代碼上只放置一個(gè)聲明，如下所示：

h2 {
    color: blue;
    text-align: center;
}

提示：CSS 中的屬性和大部分值都是不區(qū)分大小寫的，但 CSS 中的選擇器通常區(qū)分大小寫，例如類選擇器 .bianchengbang 和 .BianChengBang 就表示兩個(gè)不同的選擇器。

多個(gè)樣式可以并列在一起，不需要考慮如何進(jìn)行分隔。

【示例2】定義段落文本的背景色為紫色，則可以在上面樣式基礎(chǔ)上定義如下樣式。

body{ font-size: 12px; color: #CCCCCC;} p{ background-color: #FF00FF; }

由于 CSS 語(yǔ)言忽略空格（除了選擇器內(nèi)部的空格外），因此可以利用空格來(lái)格式化 CSS 源代碼，則上面代碼可以進(jìn)行如下美化：

body {
    font-size: 12px;
    color: #CCCCCC;
}
p {
    background-color: #FF00FF;
}

這樣在閱讀css源代碼時(shí)就一目了然了，既方便閱讀，也更容易維護(hù)。

任何語(yǔ)言都需要注釋，HTML 使用<!- 注釋語(yǔ)句-> 來(lái)進(jìn)行注釋，而 CSS 使用/* 注釋語(yǔ)句 */來(lái)進(jìn)行注釋。

【示例3】對(duì)于上面樣式可以進(jìn)行如下注釋。

body {  /*頁(yè)面基本屬性*/
    font-size: 12px;
    color: #CCCCCC;
}
/*段落文本基礎(chǔ)屬性*/
p {
    background-color: #FF00FF;
}

CSS高級(jí)語(yǔ)法：選擇器的分組

你可以對(duì)選擇器進(jìn)行分組，這樣，被分組的選擇器就可以分享相同的聲明。

用逗號(hào)將需要分組的選擇器分開。在下面的例子中，我們對(duì)所有的標(biāo)題元素進(jìn)行了分組。所有的標(biāo)題元素都是綠色的。

h2,h3,h3,h4,h6,h7 {
color: green;
}

關(guān)于“css語(yǔ)法由什么構(gòu)成”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。