CSS排版程式(2)-套用規則

CSS的語法大致都長成「selector { property }」的形式,其中 property 即是我們想要套用的排版樣式,而 selector 則是套用的目標。property 又可分成「屬性:值;」,每一個樣式設定都以分號做結尾。要把CSS的語法套用到HTML中,有好幾種不同的方式,以下依序做介紹(更多CSS3的套用規則請參考「CSS3與濾境(1)-套用規則」)。使用CSS2的語法時,請記得在每個網頁中加入 DOCTYPE 宣告(詳情請參考XHTML架構與準則)。

套用到標籤 (2011.05.15更新)

這是針對HTML標籤直接做套用,通常是用在網站的統一性設定,例如網頁大小、位置、字型顏色與大小等等。建議在撰寫時,寫在所有CSS的最上方。

/* 設定超連結(a)的color=red */
a { color:red; }

/* 用逗號分隔標籤,表示一起選擇這幾種標籤做相同的設定 */
/* 設定在body、td 和 p 標籤下的字大小為13px,行高為150% */
body, td, p { font-size:13px; line-height:150%; }

/* 用空白分隔標籤 */
/* 只設定在 div 標籤裡的 p 標籤,文字顏色為綠色 */
div p { color:green; }

/* CSS2進階用法 */

/* 用>分隔標籤 */
/* 當 p 標籤的上一層父元素是 div 時,將文字顏色設為藍色 */
/* p 是 div 的子元素,例如

(藍色字)

*/ div>p { color:blue; } /* 用+分隔標籤 */ /* 當 p 標籤的前面一個元素是 div 時,將文字顏色設為藍色 */ /* 例如

(藍色字)

(正常字)

*/ div+p { color:blue; } /* HTML和CSS的字母都是不分大小寫的 */

套用到類別

在HTML標籤中,你可以加入屬性class來指定該元素的類別名稱,例如「

」,使CSS可以針對類別做樣式的套用。一個類別可以指定給多個不同種類的HTML標籤,一個標籤也可以被直定成多個類別,class_name用空白區隔即可。

/* 以點(.)開頭的selector代表一個類別名稱 */

/* 將所有class=class_name的標籤內容置中 */
.class_name { text-align:center; }

/* 在class_name類別中,若HTML標籤為 p 則設定字大小為15px,標籤為 a 則設定字大小為11px */
p.class_name { font-size:15px; }
a.class_name { font-size:11px; }

套用到ID

在HTML語法中,可以使用id屬性來指定標籤的id_name,但是一個id_name只能在同一個網頁中出現一次。

/* 以井號(#)開頭的selector代表一個ID名稱 */

/* 將id=id_name的標籤內容設成綠色 */
#id_name { color:green; }

套用到全部 (2011.05.15新增)

利用星號(*)來表示所有元素。可以用在網站的統一設定中。建議在撰寫時,寫在所有CSS的最上方。

/* CSS2進階用法 */
/* 將網站中全部的字體大小設成13px */
* { font-size:13px; }

/* 將 p 標籤裡所有的文字顏色設成灰色 */
p * { color:gray; }

套用到屬性 (2011.05.15新增)

透過HTML標籤裡的屬性來選擇CSS套用的對象。屬性名稱用 [ ] 框住。

/* CSS2進階用法 */
/* 將有 title 屬性的標籤設定背景顏色為黃色 */
[title] { background-color:yellow; }

/* 將有 target="_blank" 屬性的 a 標籤設定顏色為紅色 */
a[target="_blank"] { color:red; }

/* 將 title 屬性裡有"電腦"兩個字的元素設定背景顏色為綠色 */
[title~="電腦"] { background-color:green; }
/* 關鍵字必需用空白獨立出來才會被選取,例如 title="電腦 門市" */
/* 如果 title="電腦人" 則不會被選取 */

/* 當屬性 lang 的值為 en 開頭時,把顏色設為藍色 */
[lang|="en"] { color:blue; }
/* lang="en" 或 lang="en-us" 都會被套用,但 lang="no-en" 就不會被選取 */

特殊狀態的應用 (2011.02.19更新)

有一些狀態它並不是HTML的標籤,但CSS仍然可以加以設定。最常見的就是超連結的設定,以下直接用範例做說明:

/* 設定超連結的顏色=藍色,內容無底線 */
a:link { color:blue; text-decoration:none; }

/* 當滑鼠移過超連結時,顯示底線 */
a:hover { text-decoration:underline; }

/* 當滑鼠點擊超連結時,顏色變黃色,沒有底線 */
a:active { color:yellow; text-decoration:none; }

/* 當此超連結曾經被點選過,顏色=黑色,內容無底線 */
a:visited { color:black; text-decoration:none; }

/* 當滑鼠移過類別為line的超連結時,字體變成15px */
a.line:hover { font-size:15px; }


/* 設定p標籤第一個字母的樣式 */
p:first-letter {}

/* 設定p標籤第一行內容的樣式 */
p:first-line {}

/* CSS2進階用法 */

/* 在所有的p標籤裡,出現的第一個strong元素 */
p > strong:first-child {}

/* 在第一個p標籤裡的全部strong元素 */
p:first-child strong {}

/* 設定當

時的樣式 */ p:lang(tw) {} /* 效果和 p[lang|=tw] 相同 */ /* 當鍵盤focus在input欄位時,將input的背景變成灰色 */ input:focus { background-color:Gray; } /* 在所有的p標籤內容最前面加上紅色的NEW! */ p:before { content: "NEW!"; color:red; } /* 在所有的p標籤內容最後加上(End.) */ p:after { content: "(End.)"; }