圖解 CSS (11): 理解樣式表的邏輯

樣式表可以是外部的、內聯的或嵌入的; 連結外部樣式檔案一般是:
<link rel="stylesheet" type="text/css" href="xxx.css" media="all">

這要寫在 Head 標籤內, 其內容不區分大小寫, 其中的雙引號也可以是單引號、也可省略; 逐個解釋一下:

link: 是 HTML 的常用標籤, 它的作用可不僅僅是連結外部樣式, 譬如指定地址欄的表徵圖:
<link rel="shortcut icon" type="image/ico" href="my.ico">

rel="stylesheet": (rel 是 relation 的縮寫)說明 Link 的檔案用於樣式表, 所以樣式表的尾碼未必一定要是 css.

type="text/css": 說明 Link 的檔案是文字格式設定; 現在應該都是文字格式設定, 說不定以後會有二進位的.

href="xxx.css": 的路徑可以是絕對的、相對的、遠端、本地的.

media="all": media 的取值多了(all、aural、braille、embossed、handheld、print、projection、screen、tty、tv),
但現在得到廣泛支援也就是: all、screen(用於螢幕呈現)、print(用於列印).
如果給 media 指定多個值可用逗號隔開, 如: media = "print, screen".
它的預設值應該是 all(沒經資料核對), 所以可以省略.

它最簡單的寫法可以是: <link rel=stylesheet href=xxx.css> 不能再省了!

也有給它擴充的, 譬如:
<link rel="stylesheet" id="css1" title="FirstCSS" type="text/css" href="xxx.css" media="all">

在 js 指令碼中, 可以通過下面方式讀出這些值(假如這是第一個 Link 標籤):

document.getElementsByTagName("link").item(0).rel;document.getElementsByTagName("link").item(0).id;document.getElementsByTagName("link").item(0).title;document.getElementsByTagName("link").item(0).href;document.getElementsByTagName("link").item(0).media;document.getElementsByTagName("link").length; // Link 標籤總數.

曾見到有些實現動態轉場樣式的指令碼就是利用了其 title 屬性.

如果 Link 了多個外部樣式表, 會優先使用哪個呢?
答案簡單, 不同的樣式: 設定都起作用、相同的樣式: 後者覆蓋前者; 後面的 @import 和其中的元素也是如此.

內聯樣式也要寫在 Head 標籤內, 書寫格式:
<style type="text/css"> ... </style>; 常被寫做: <style> ... </style>

在內聯樣式內可用 @import 引入外部檔案, 如:

<style>  @import url(xxx.css);  @import url(xxx.css) screen, print; /* 也可同時指定用途 */  /* 本頁的其他樣式 */</style>

因為 @import 來的比較晚(老瀏覽器不支援)、也不容易被 js 控制, 所以不如 Link 普及.
不過設定頁內樣式用內聯樣式很方便了.

內建樣式, 如: <div style="font: bold; color: #f00;"> ... </div>
這種用法很普及, 指定個人化的元素也方便, 只是讓本來非常宏觀的 CSS 小氣了一點.

設定的樣式用於哪個標籤? 哪些標籤? 基本分為:
標籤選擇、ID選擇、類選擇、包含選擇、通配選擇、偽類選擇(本來還有更多, 現在沒有得到普遍支援, 學也無用).

標籤選擇:
span {color: red;} 會作用於所有 span 標籤;
span, div {color: red;} 會作用於所有 span 和 div 標籤;

ID選擇:
#ID1 {color: red;} 會作用於所有 id=ID1 的標籤;
#ID1, #ID2 {color: red;} 會作用於所有 id=ID1 和 id=ID2 標籤;
類選擇:
.c1 {color: red;} 會作用於所有 class=c1 的標籤;
.c1, .c2 {color: red;} 會作於到所有 class=c1 和 class=c2 標籤;

值得一提的是: 一個標籤也可以同時指定多個類(空格隔開), 如:

包含選擇:
div span {color: red;} 會作用於所有父元素是 div 的 span 標籤;
div p a {color: red;} 會作用於所有 div 中的 p 中的所有連結;

把上面混一下:
span, div p #ID1 {color: red;} 會作用於 div 下的 p 下的 id=ID1 的標籤、和所有的 span 標籤.
div.c1 {color: red} 會作用與 div 下 class=c1 的標籤; 若多個空格: div .c1 {color: red} 會更好理解.

通配選擇:
如: *{background: #ddd; color: #f00;} 它作用與所有元素.
這比 html {background: #ddd; color: #f00;} 厲害, 下面是對比圖:

繼續研究萬用字元:
如果把 .c1 寫做 *.c1; 或者把 #ID1 寫做 *#ID1 應該不難理解(它們沒有區別);

但 div{...} 和 div*{...} 就有區別了! div* 是指 div 下的元素, 不包含直屬內容. 看圖:

同樣 body * a {...} 不會作用到 body 下的直屬連結:

偽類選擇, 如:
a:visited {...} (已訪問的連結);
div:first-letter {...} (div 中的第一個字).
之所以叫 "偽類", 是因為它們是不確定的.

還有一個優先順序的問題, 前面稍有提到.
定義位置的優先順序是(由高到低): 嵌入 - 內聯 - 外部;
選擇方式的優先順序是(由高到低): ID選擇 - 類選擇 - 標籤選擇;
如果定義不重複就都有效、重複定義的後者會覆蓋前者.

如果前面定義的樣式, 不想被後面覆蓋怎麼辦? 使用 !important (它具有最高優先順序). 如:

總結:
基本順了一遍樣式表, 寒假也算沒有虛度;
因為不常用它, 感覺還是接觸了不少新東西;
部落格園上朋友好像大都是搞網路編程的, 對 css 應該沒得說; 鬥膽把它發在首頁上, 以期待得到指正和補充.

相關連結:

圖解 CSS (1): 先做一個樣式表測試載入器

圖解 CSS (2): border - 邊框

圖解 CSS (3): padding(內邊距)、margin(外邊距)

圖解 CSS (4): background - 背景

圖解 CSS (5): font - 字型

圖解 CSS (6): text - 文字格式設定

圖解 CSS (7): 大小、定位、剪下、捲軸

圖解 CSS (8): 浮動、顯示、隱藏

圖解 CSS (9): 列表

圖解 CSS (10): 連結、繼承、放縮、滑鼠指標、其他(待補充...)

圖解 CSS (11): 理解樣式表的邏輯