圖解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 標籤;

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