VB.net 2010 視頻教程 VB.net 2010 視頻教程 VB.net 2010 視頻教程
SQL Server 2008 視頻教程 c#入門經典教程 Visual Basic從門到精通視頻教程
當前位置:
魔兽世界wow > 網站開發 > css >
  • div+css視頻教程之成為CSS高手之路(四)~CSS在DW中的

  • 2015-07-29 21:43 來源:未知
·    成為CSS高手之路(四)~CSS在DW中的設定與語法宣告方式Part II-整頁套用的CSS規則(下)
分享:          
 
      今天『成為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的文字→屬性面板→HTMLID→選擇剛剛建立的ID規則即可完成套用。
 
e.結果如下圖:選取的文字變成綠色,9pt大小了。
 
f.原始碼畫面如下:在<head>和</head>之間會有ID規則語法,而在<body>和</body>之間會找到套用了此ID規則的文字,其卷標中加上了ID表示套用。
 
g.使用ID建立CSS語法的架構類似于『類別』,不同的是ID名稱前面是用#起始而不是用.起始。
#ID名稱 {
                 屬性1:設定值1;
                 屬性2:設定值2;
                 ......
               }
      最后再統整一下,所謂的『整頁套用』就是將CSS語法寫在文件頭區域內(<head>),且其影響范圍是整個頁面,只要符合規則定義的對象在此頁面中,都會受到規則的控制,后續設計嵐將說明第二種CSS宣告方式-『個別設,敬請期待。
 
相關教程