今天『成為CSS高手之路』系列文章之四,繼續針對『整頁套用的CSS規則』作後半段的說明,能夠讓規則套用在整個頁面的方法除了前文『成為CSS高手之路(三)~CSS在DW中的設定與語法宣告方式Part I-整頁套用的CSS規則(上)所提到的設定方法之外,還有其他幾種設定方式,其影響範圍也都是一整個頁面的。

 

      以下要介紹以『類別』(CLASS)、『ID』以及『標籤』三種方式所建立的CSS規則,這三種規則的宣告有個共通性-『都必須寫在<head>及</head>之間,且用<style>標籤來定義CSS的內容』,這一點我們在上一篇文章有提過,溫故知新一下,但是這三種方式還是有其宣告與使用上的差異性,以下來分別介紹。 

1.本文範例初始畫面如下: 開啟Dreamweaver建立新頁面後,輸入以下五段文字。

2.jpg    

2.在第一段以到第四段文字分別套用<h1>與<h2>的html標籤樣式。

a.反白選取要設定的文字

3.jpg  

b.屬性面板→『HTML模式』→『段落』→選擇『標題1』(h1)作套用。

3.jpg 

 c.使用相同的流程之對第三、四段文字套用『標題2』(h2)格式,結果畫面如下:

1.jpg  

d.原始碼畫面如下:我們看到在<body>和</body>中看到了這幾行原始碼

 4.jpg

到目前這個步驟,我們只純粹使用html標籤的套用,以下我們來加入CSS樣式規則。

3.利用『標籤』建立CSS規則:此種方法是針對特定的HTML元素為設定對象,規則建立後只要是該HTML元素都會全部套用此規則。

a.CSS樣式面板→新增CSS規則

5.jpg 

b.在『選取器類型』選擇『標籤(重新定義HTML元素)』,選取器名稱則輸入『h1』,因為我們要針對h1標籤作定義,設定好按下『確定』。

6.jpg 

c.進行樣式設定,這裡設計嵐用16pt以及紅色文字色彩為設定內容,完成按下『確定』。

7.jpg 

d.此時就會發現頁面中所有套用<h1>標籤的文字都會變成16pt、紅色文字了,這就是用『標籤』方式宣告CSS規則的特性

e.原始碼畫面如下:

9.jpg 

f.從上圖紅框中發現:

i.CSS規則語法也在<head>和</head>之間

ii.前後用<style>和</style>標籤作定義

iii.以『標籤』方式定義CSS的語法結構如下:

    元素名稱 {

                 屬性1:設定值1;

                 屬性2:設定值2;

                 ......

               }

4.以『類別』(CLASS)方式宣告CSS:上面方法是針對該元素的所有對象統一套用CSS,但如果我們想針對頁面『特定的HTML元素』作格式設定,就適合這個方法, 例如:設計嵐想針對第二段套用了<h1>的文字做個別設定:

 a.新增CSS規則:

5.jpg 

b.選取器類型選擇『類別』(可套用至任何HTML元素),選取器名稱可自訂,但只能用英文和數字以及 _ 底線符號,不可用中文和以數字做開頭,也不要用特殊符號。

10.jpg 

c.我將文字的顏色改成『藍色』,文字大小改成18pt,完成設定後按下確定。

11.jpg 

d.由於是用『類別』方式定義CSS,所以不會有任何文字自動套用,我們要設定將規則套用在哪個物件身上,這邊設計嵐反白第二段文字→屬性面板→HTML→類別→選擇剛剛建立的『h1_blue』規則就可以套用。

12.jpg 

e.套用了會發現,只有我們指定的文字會套用規則,其他的文字不受影響,這就是以『類別』建立CSS規則的特性。

13.jpg  

f.原始碼畫面如下:我們會發現使用『類別』所建立的CSS規則和使用『標籤』的方式建立規則一樣,都必須將語法寫在<head>和</head>之間,且也都會放在<stylle>和</style>之間,其語法格式如下:

.類別名稱 {

                 屬性1:設定值1;

                 屬性2:設定值2;

                 ......

               }

     上面的語法結構與『標籤』不同的地方在於,『類別』方式建立的規則,在類別名稱前面必須要有一個『句號』(.)作為起始。

5.使用『ID』建立CSS規則:使用的方式類似『類別』。

a.新增CSS規則:

5.jpg 

b.『選取器類型』請選擇『ID』(僅套用至一個HTML元素),選取器名稱可自訂,命名規則同『類別』,完成後按下『確定』。

14.jpg 

c.在此我設定文字大小為9pt,文字色彩為『綠色』,完成按下『確定』。

15.jpg 

d.反白要套用ID的文字→屬性面板→HTML→ID→選擇剛剛建立的ID規則即可完成套用。

16.jpg 

e.結果如下圖:選取的文字變成綠色,9pt大小了。

16.jpg 

f.原始碼畫面如下:在<head>和</head>之間會有ID規則語法,而在<body>和</body>之間會找到套用了此ID規則的文字,其標籤中加上了ID表示套用。

17.jpg 

g.使用ID建立CSS語法的架構類似於『類別』,不同的是ID名稱前面是用#起始而不是用.起始。

#ID名稱 {

                 屬性1:設定值1;

                 屬性2:設定值2;

                 ......

               }

      最後再統整一下,所謂的『整頁套用』就是將CSS語法寫在檔頭區域內(<head>),且其影響範圍是整個頁面,只要符合規則定義的對象在此頁面中,都會受到規則的控制,後續設計嵐將說明第二種CSS宣告方式-『個別設,敬請期待。

 

 

 

 

arrow
arrow
    全站熱搜

    房匠網 發表在 痞客邦 留言(2) 人氣()