今天『成為CSS高手之路』系列文章之四，繼續針對『整頁套用的CSS規則』作後半段的說明，能夠讓規則套用在整個頁面的方法除了前文『成為CSS高手之路(三)~CSS在DW中的設定與語法宣告方式Part I-整頁套用的CSS規則(上)』所提到的設定方法之外，還有其他幾種設定方式，其影響範圍也都是一整個頁面的。
以下要介紹以『類別』(CLASS)、『ID』以及『標籤』三種方式所建立的CSS規則，這三種規則的宣告有個共通性-『都必須寫在<head>及</head>之間，且用<style>標籤來定義CSS的內容』，這一點我們在上一篇文章有提過，溫故知新一下，但是這三種方式還是有其宣告與使用上的差異性，以下來分別介紹。
1.本文範例初始畫面如下： 開啟Dreamweaver建立新頁面後，輸入以下五段文字。
2.在第一段以到第四段文字分別套用<h1>與<h2>的html標籤樣式。
a.反白選取要設定的文字
b.屬性面板→『HTML模式』→『段落』→選擇『標題1』(h1)作套用。
c.使用相同的流程之對第三、四段文字套用『標題2』(h2)格式，結果畫面如下：
d.原始碼畫面如下：我們看到在<body>和</body>中看到了這幾行原始碼
到目前這個步驟，我們只純粹使用html標籤的套用，以下我們來加入CSS樣式規則。
3.利用『標籤』建立CSS規則：此種方法是針對特定的HTML元素為設定對象，規則建立後只要是該HTML元素都會全部套用此規則。
a.CSS樣式面板→新增CSS規則
b.在『選取器類型』選擇『標籤(重新定義HTML元素)』，選取器名稱則輸入『h1』，因為我們要針對h1標籤作定義，設定好按下『確定』。
c.進行樣式設定，這裡設計嵐用16pt以及紅色文字色彩為設定內容，完成按下『確定』。
d.此時就會發現頁面中所有套用<h1>標籤的文字都會變成16pt、紅色文字了，這就是用『標籤』方式宣告CSS規則的特性
e.原始碼畫面如下：
f.從上圖紅框中發現：
i.CSS規則語法也在<head>和</head>之間
ii.前後用<style>和</style>標籤作定義
iii.以『標籤』方式定義CSS的語法結構如下：
元素名稱 {
屬性1:設定值1;
屬性2：設定值2;
......
}
4.以『類別』(CLASS)方式宣告CSS：上面方法是針對該元素的所有對象統一套用CSS，但如果我們想針對頁面『特定的HTML元素』作格式設定，就適合這個方法， 例如：設計嵐想針對第二段套用了<h1>的文字做個別設定：
a.新增CSS規則：
b.選取器類型選擇『類別』(可套用至任何HTML元素)，選取器名稱可自訂，但只能用英文和數字以及 _ 底線符號，不可用中文和以數字做開頭，也不要用特殊符號。
c.我將文字的顏色改成『藍色』，文字大小改成18pt，完成設定後按下確定。
d.由於是用『類別』方式定義CSS，所以不會有任何文字自動套用，我們要設定將規則套用在哪個物件身上，這邊設計嵐反白第二段文字→屬性面板→HTML→類別→選擇剛剛建立的『h1_blue』規則就可以套用。
e.套用了會發現，只有我們指定的文字會套用規則，其他的文字不受影響，這就是以『類別』建立CSS規則的特性。
f.原始碼畫面如下：我們會發現使用『類別』所建立的CSS規則和使用『標籤』的方式建立規則一樣，都必須將語法寫在<head>和</head>之間，且也都會放在<stylle>和</style>之間，其語法格式如下：
.類別名稱 {
屬性1:設定值1;
屬性2：設定值2;
......
}
上面的語法結構與『標籤』不同的地方在於，『類別』方式建立的規則，在類別名稱前面必須要有一個『句號』(.)作為起始。
5.使用『ID』建立CSS規則：使用的方式類似『類別』。
a.新增CSS規則：
b.『選取器類型』請選擇『ID』(僅套用至一個HTML元素)，選取器名稱可自訂，命名規則同『類別』，完成後按下『確定』。
c.在此我設定文字大小為9pt，文字色彩為『綠色』，完成按下『確定』。
d.反白要套用ID的文字→屬性面板→HTML→ID→選擇剛剛建立的ID規則即可完成套用。
e.結果如下圖：選取的文字變成綠色，9pt大小了。
f.原始碼畫面如下：在<head>和</head>之間會有ID規則語法，而在<body>和</body>之間會找到套用了此ID規則的文字，其標籤中加上了ID表示套用。
g.使用ID建立CSS語法的架構類似於『類別』，不同的是ID名稱前面是用#起始而不是用.起始。
#ID名稱 {
屬性1:設定值1;
屬性2：設定值2;
......
}
最後再統整一下，所謂的『整頁套用』就是將CSS語法寫在檔頭區域內(<head>)，且其影響範圍是整個頁面，只要符合規則定義的對象在此頁面中，都會受到規則的控制，後續設計嵐將說明第二種CSS宣告方式-『個別設定』，敬請期待。
留言列表
房匠網專欄 (8)
