CSS 句法

CSS 是宣告型語言，這讓它的句法（syntax）非常直白易懂。

除此之外，它還有很好的錯誤恢復機制，它能避免在錯誤發生時把所有東西都弄得一團亂：比如說在它碰到不認識的宣告時，它會直接忽略掉這個東西。但從另一方面來說，這也讓錯誤更難被發現了。

藉著最近前端同事事務繁忙的機會，我這客戶端工程師趕鴨子上架懟了一個靜態網頁出來，順便產下了兩篇副產品，都與 CSS 基礎相關，這是第二篇（第一篇在此：CSS 是怎麼運作的），希望對其他可能有相同需要的同志送上一些幫助。

名詞解釋

正如上一篇文章裡說到的，CSS 是由選擇器和一組屬性組成的。其中，屬性部分是由一系列的鍵值對組成，在 CSS 的世界裡，它們有著自己的名字：

• 屬性（Properties）：以“說人話”的方式表明這個玩意兒是幹什麼的
• 值（Values）：每個屬性都會有對應的值，表示你想要怎麼修改這個東西

這樣的一組“屬性-值”的組合，我在前面直接稱呼為“鍵值對”了，但它在 CSS 世界裡的本名其實是CSS 宣告（CSS declaration） 。

被一對大括號包裹起來的一組 CSS 宣告被稱為CSS 宣告塊（CSS declaration blocks） 。

最後，一個 CSS 宣告塊會跟一個選擇器搭配起來，稱為CSS 規則（CSS Rulesets/Rules） 。

CSS 宣告

把 CSS 屬性設定為一個特定的值，可以說是 CSS 這門語言的最核心功能了。需要注意的是，屬性和值都是區分大小寫的，它們之間用 “:” 來分隔。

目前，CSS 世界裡一共有ofollow,noindex">300 種不同的屬性 ，每種屬性都有其對應的可選值。

在 CSS 語法裡（包括其他 web 標準中），美式拼寫是唯一的拼寫標準。比如說，在需要設定顏色的時候，color 永遠優於colour 。

CSS 宣告塊

CSS 宣告以程式碼塊的形式存在，用一對大括號括起來。

CSS 宣告塊可以是空的（裡面不帶任何宣告）

CSS 宣告塊裡的不同宣告是通過 “;” 來分隔的。

實際上，最後一組宣告是可以不用分號結尾的，但是好好的幹嘛要逼死強迫症呢？

CSS 選擇器和規則

在寫好了宣告塊之後，我們還需要告訴瀏覽器這些屬性要用到哪裡去，這就需要在這個宣告塊前面加上一個字首——選擇器了。

選擇器可以是非常複雜的：你可以把一個宣告塊應用到好幾個選擇器上，通過逗號分隔；你還可以鏈式地構造一個指向性更明確的選擇器，比如：選擇一個類名是 “abc” 的元素，它要在<article> 標籤下，而且只有滑鼠移動到它上面的時候才生效。

一個元素可能被多個選擇器看上，所以同一個屬性可能會被改變多次，CSS 會通過層疊演算法（cascade algorithm）來判斷這些屬性修改的優先順序。

對於同一個宣告塊，在使用複雜選擇器的時候（比如存在多個選擇器），如果其中的某一項選擇有誤，那麼其他的選擇器是不會被影響的，該怎麼工作還是怎麼工作。

CSS 語句

除了上面看到的宣告塊之外， CSS 裡還有一些其他型別的語句：

• At-規則 用來傳達元資料、條件資訊或其他描述性資訊。比如說：
  • @charset 和@import (元資料)
  • @media 或者@document (條件資訊，也叫內部語法)
  • @font-face (描述性資訊)
    完整的寫法是這樣的：

@import 'custom.css'; /* 從另一個 css 檔案中引入規則 */

• 內部語法（Nested statements） 是 at-規則 的一個子集，這類規則只會在特定條件下才會生效：
  • @media 執行裝置符合某些條件時才執行
  • @supports 瀏覽器支援某些測試特性的時候才執行
  • @document 當前頁面符合某些條件時才執行
    舉個例子：

@media (min-width: 801px) {
body {
margin: 0 auto;
width: 800px;
}
}

上述針對body 的規則，只在裝置寬度大於 800px 的時候才會生效。

小結

分兩篇敘述的 CSS 相關知識就講完了。這兩篇文章的主要目的是把我們領進前端世界的大門，讀完之後，我們應該可以實現一些簡單的靜態頁面了！_{（小聲說：雖然具體怎麼用還需要自己去谷歌百度一下）} 當然，前端的魅力還遠不止如此，要想把 CSS 玩出花兒來，還需要持續的磨練。

我這個半吊子的前端工程師總算是把整個靜態頁面的需求給懟出來啦！接下來如果有時間的話，我會再把頁面裡用到的一些 JS 實現的邏輯也拉出來溜一溜。要是這下一篇文章真的有誕生之日的話，那讀到完整三個部分的同學們就會在前端界六得飛起_（假的） 了！