語法

層疊樣式表 (CSS) 語言的基本目標是允許瀏覽器引擎用特定的功能（如顏色、定位或裝飾）來繪製頁面的元素。CSS 語法反映了這一目標，它的基本構建塊是

  • 屬性，它是一個識別符號，即一個人類可讀的名稱，它定義了要考慮的哪個功能。
  • 值，它描述了引擎如何處理該功能。每個屬性都有一組有效值，由正式語法定義，以及由瀏覽器引擎實現的語義含義。

CSS 宣告

將 CSS 屬性設定為特定值是 CSS 語言的核心功能。屬性和值對被稱為宣告，任何 CSS 引擎都會計算哪些宣告應用於頁面的每個元素，以便適當地佈局和設定樣式。

預設情況下，CSS 中的屬性和值都不區分大小寫。這對用冒號“:”（U+003A COLON）分隔，屬性和值之前、之間和之後有空格，但內部不一定有空格，空格將被忽略。

css syntax - declaration.png

CSS 中有數百種不同的屬性，以及實際上無限數量的不同值。並非所有屬性和值的組合都是允許的，每個屬性都定義了哪些值是有效的。當某個值對於給定屬性無效時，該宣告被認為是無效的，並將被 CSS 引擎完全忽略。

CSS 宣告塊

宣告被分組到塊中，即用一個左花括號“{”（U+007B LEFT CURLY BRACKET）和一個右花括號“}”（U+007D RIGHT CURLY BRACKET）分隔的結構中。塊有時可以巢狀，因此必須匹配左花括號和右花括號。

css syntax - block.png

這種塊自然被稱為宣告塊，塊中的宣告用分號“;”（U+003B SEMICOLON）分隔。宣告塊可以為空，即包含空宣告。宣告周圍的空格將被忽略。塊中的最後一個宣告不需要用分號結束，儘管通常認為良好的風格是這麼做，因為它可以防止在用另一個宣告擴充套件塊時忘記新增分號。

下圖顯示了 CSS 宣告塊。

css syntax - declarations block.png

注意： CSS 宣告塊的內容，即一系列用分號分隔的宣告，不包括初始和結束花括號，可以放在 HTML 的style 屬性中。

CSS 規則集

如果樣式表只能將宣告應用於網頁的每個元素，那麼它們將毫無用處。真正的目標是將不同的宣告應用於文件的不同部分。

CSS 透過將條件與宣告塊相關聯來實現這一點。每個（有效的）宣告塊之前都有一個或多個用逗號分隔的選擇器，這些選擇器是選擇頁面中某些元素的條件。選擇器列表和相關的宣告塊，合稱為規則集，或通常稱為規則。

下圖顯示了 CSS 規則集（或規則）。

css syntax - ruleset.png

由於頁面元素可能被多個選擇器匹配，因此也可能被多個規則匹配，而這些規則可能包含相同屬性但具有不同值。CSS 標準定義了優先順序規則，確定哪個規則應優先應用，這就是所謂的級聯演算法。

注意：需要注意的是，即使由一組選擇器組成的規則集類似於一種速記方式，它可以替代每個選擇器只有一個的規則集，但這並不適用於規則集本身的有效性。

這會導致一個重要的後果：如果單個基本選擇器無效，例如使用未知偽元素或偽類時，整個選擇器將無效，因此整個規則也將被忽略（因為它也是無效的）。

CSS 語句

規則集是樣式表的主要構建塊，樣式表通常只包含一個大型規則集列表。但是，網頁作者希望在樣式表中傳達其他資訊，例如字元集、要匯入的其他外部樣式表、字體面或列表計數器描述等等。它將使用其他特定型別的語句來實現這些功能。

語句是一種構建塊，它以任何非空格字元開頭，以第一個閉合括號或分號（在字串之外，未轉義且不包含在其他 {}、() 或 [] 對中）結束。

css syntax - statements Venn diag.png

語句有兩種型別：

  • 規則集（或規則），如前所述，將一組 CSS 宣告與透過選擇器描述的條件關聯。
  • @規則，以“@”（U+0040 COMMERCIAL AT）開頭，後面跟一個識別符號，然後一直延續到語句的結尾，即直到下一個分號（;）在塊之外，或下一個塊的結尾。每種型別的@規則（由識別符號定義）可能具有其自己的內部語法和語義。它們用於傳達元資料資訊（例如@layer或@import）、條件資訊（例如@media或@document）、或描述性資訊（例如@font-face）。

任何不是規則集或 @規則的語句都是無效的，會被忽略。

巢狀語句

還有一組語句——巢狀語句。這些語句可以在 @規則的特定子集（條件組規則）中使用。這些語句僅在滿足特定條件時才適用：@media @規則的內容僅在執行瀏覽器的裝置滿足表達的條件時才適用；@document @規則的內容僅在當前頁面滿足某些條件時才適用，等等。在 CSS1 和 CSS2.1 中，只有規則集可以在條件組規則內使用。這限制很大，並且該限制在CSS 條件規則級別 3中被取消。現在，儘管仍然是實驗性的，並非所有瀏覽器都支援，但條件組規則可以包含更廣泛的內容：規則集以及一些（但不是全部）@規則。

另請參閱