參考手冊:

設定 CSS, 總會要查一下手冊, 下面列的是個人經常參考的 CSS 手冊及標準文件

W3Scholl 教學網站的 CSS 參考
mozilla 的 CSS 參考手冊
~~IE 的 CSS 參考手冊~~ (微軟放棄它了, 已經轉向 mozilla)
W3C CSS Level 1 標準文件
W3C CSS Level 2.1 標準文件
W3C CSS Selectors 標準文件(Level 3, 20181106)
W3C CSS Selectors 草案文件 (Level 4)
W3C CSS Colors Level 3 標準文件

HTML CSS 的語法結構:

網頁作者的設定是 CSS style 中最重要的部份, 網頁作者可以運用的 CSS 設定有多種來源:

inline style
embedded stylesheet
included stylesheet

修飾設定:

這些 CSS 設定的基礎是修飾設定: 一個 CSS 屬性和它的設定值, 中間以冒號 : 接連起來, 例如: font-size : 1.2em. 這三者之間可以任意加入空白, 以提高可讀性. 但是屬性的名稱和每一種屬性的可以接受的設定值只能依照 CSS 的標準文件來 (或者更嚴格的說只能依照 CSS 的標準文件和各家 browser 實作的交集部份來設定.)

inline style:

inline style 是三種 CSS 設定中最基本的, 它要把上述的修飾設定寫在 HTML tag 的 style 屬性的設定質中, 用單引號或雙引號括住, 如: <p style="color:red">.... 如果修飾設定有多於一組的時候, 在兩組修飾設定的中間要用分號 (;) 將兩者隔開, 而最後一組修飾設定後面可以加分號也可以不加, 例如: "color:red;font-weight: bold;font-size: 18px". 因為它是寫在 HTML tag 的 style 屬性中, 因此可以想見的修飾的效果也只針對該 HTML Tag 作用.

由於 inline style 的作用範圍只有單一個 HTML tag, 其他 tag 也需要有一樣的效果的時候唯一的方法就是照抄一次. 如果只有少數幾個那倒也還好, 反正只是 copy paste. 但是用多了檔案就變大了, 更大的麻煩是: 當需要修改的時候, 問題就來了! 你應該沒辦法記住到底 copy paste 了幾次吧? 所以接下來也就有了 embedded stylesheet.

embedded stylesheet:

embedded stylesheet 是把原本散在這個 HTML 檔案中的各個 inline style 都集中起來, 改寫在 <style></style> tag 中. 不過, 你的 HTML 檔案中的 inline style 一定不只一組, 所以需要標明這組 style 是要給誰用的, 而那一組又是給誰用的. 所以 embedded stylesheet 就在把每一組 inline style 用一對大括號 {} 括住, 並在它的前面加一個 selector 來標明作用範圍, 整個結構的樣子如下圖所示:

css syntax

注意事項:

這些修飾設定不需要全都擠進同一行裡, 只要在左大括號和右大括號當中就行了.
需要的時候, 還可以用 /* 及 */ 將任何一段文字括住作為註解.
不支援巢狀註解.
擺放位置: HTML4 是規定要放在 <head> 段落內, 而 HTML5 則放在 <body> 段落內也是可以的.
支援多個 <style> 段落: style 不用全都放在同一個 <style> 段落內, 可以依據實際需要擺放多個 <style> 段落.

下面是一個 embedded stylesheet 的例子:

<style type="text/css">
  p { margin-top: 0.8em; }
  h1 { font-weight:bold; font-size:20px; color:#0BA }
  h2 { font-weight:bold; font-size:18px; color:#0B9 }
  a  { color:#222; border-bottom:1px dashed #91b8c1; 
       padding-bottom:1px; }
</style>

included stylesheet:

included stylesheet 有二種型式:

刪除 <style></style>, 改用 <link rel="stylesheet" />
在 <style></style> 中加入 @import

included stylesheet 和 embedded stylesheet 的差別是把原本要寫在 <style> 和 </style> 當中的 stylesheet 內容整個 (或者是部份) 以檔案的方式儲存下來, 再改用上述二種方法把檔案引進來. 這樣在多個 HTML 檔中就可以共享這一份 stylesheet, 而不用每個 HTML 檔案都要把整份 embedded stylesheet 一遍又一遍的 copy paste, 一篇又一篇 copy paste.

把上個例子的樣式存成檔案 myStyleSheet.css, 檔案內容是下面這個樣子:

  p { margin-top: 0.8em; }
  h1 { font-weight:bold; font-size:20px; color:#0BA }
  h2 { font-weight:bold; font-size:18px; color:#0B9 }
  a  { color:#222; border-bottom:1px dashed #91b8c1; 
       padding-bottom:1px; }

而在原本的 HTML 檔中的整段 <style></style> 則換成下面這樣:

<link href="myStyleSheet.css" rel="stylesheet" />

或者是

<style type="text/css">
  @import url("myStyleSheet.css")
</style>

雖然 @import 還有一些進階功能, 如: 可以多重巢狀匯入 (即: 匯入的 CSS 檔中又匯入另一個 CSS 檔), 可以在 url() 後面加上指定要匯入的樣式 selector (二個以上請用 , 分開)...等等, 不過由於效能因素_(註一)及一些其他問題, 一般建議不要再使用 @import 了, 詳情請參考這一篇: don't use @import 簡中翻譯 高性能网站设计：不要使用@import

註一: 由於瀏覽器 (browser) 必需等所有的 stylesheet 都載入且完成解析 (parse) 才會開始頁面的渲染, 而使用 @import 來載入的 stylesheet, 會依序一個完成了再載入另一個, 不會使用非同步下載來加快整個網頁的載入, 因而造成網頁的下載時間拉長. 尤其是多重巢狀匯入時, 是一層匯入完成後再接著匯入下一層, 因而把下載時間拉長.

續待下一篇

HTML CSS 語法 Part2: 看懂複雜的 Selector 的寫法