DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS控制頁面樣式的4種方式和優先級問題
CSS控制頁面樣式的4種方式和優先級問題
編輯:CSS詳解     
本節主要講解,兩個內容,
第一:CSS如何控制頁面樣式,有幾種方式;
第二:這些方式出現在同一個頁面時的優先級。

      使用xHTML+CSS布局頁面,其中有個很重要的特點就是內容與表象相分離,內容指HTML頁面代碼,表象就是CSS代碼了,如果把頁面看成穿著衣服的人的話,人就是Html,是內容,而衣服呢就是CSS,是表
象,現在出現的問題是,如何讓CSS去控制頁面?或者說,如何讓衣服穿在人身上,好體現出人得風格特點;不同的CSS就可以使頁面出現不同的風格適用不同的網站,而不同的衣服,人穿上後就會體現
出不同的職業。

第一:如何讓CSS去控制Html頁面效果呢?
有這麼4種方式,行內方式、內嵌方式、鏈接方式、導入方式

1)行內方式
      行內方式是4種樣式中最直接最簡單的一種,直接對Html標簽適用style="",例如:
  1. <p style="color:#F00; background:#CCC; font-size:12px;"></p>
雖然這種方法比較直接,在制作頁面的時候需要為很多的標簽設置style屬性,所以會導致Html頁面不夠純淨,文件體積過大,不利於搜索蜘蛛爬行,從而導致後期維護成本高。

2)內嵌方式
      內嵌方式就是將CSS代碼寫在<head></head>之間,並且用<style></style>進行聲明,例如:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd">
  2. <html XMLns="http://www.w3.org/1999/xHtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/Html; charset=gb2312" />
  5. <title>無標題文檔</title>
  6. <style type="text/CSS">
  7. <!--
  8. #div1{width:64px; height:64px; float:left;}
  9. #div1 img{width:64px; height:64px;}
  10. -->
  11. </style>
  12. </head>
  13. <body>
  14. <div id="div1"><img src="/School/UploadFiles_7810/201105/20110527195259423.gif" /></div>
  15. 全國的CSS愛好者匯聚於此,如果不來,你就OUT喽~我們的口號是:
  16. “分享自己的歡樂與痛苦,分享自己的經驗與心得,分享自己的資料與資源”
  17. 如果您也願意,就加入我們吧~ 
  18. </body>
  19. </Html>
內嵌方式,大家應該也能意識到,即使有公共CSS代碼,也是每個頁面都要定義的,如果一個網站有很多頁面,每個文件都會變大,後期維護也大,如果文件很少,CSS代碼也不多,這種方式還是很不錯
的。

3)鏈接方式
      鏈接方式是使用頻率最高,最實用的方式,只需要在<head></head>之間加上
  1. <link href="style.css" type="text/CSS" rel="stylesheet" />
,就可以了,這種方式將Html文件和CSS文件徹底分成兩個
或者多個文件,實現了頁面框架Html代碼與美工CSS代碼的完全分離,使得前期制作和後期維護都十分方便,並且如果要保持頁面風格統一,只需要把這些公共的CSS文件單獨保存成一個文件,其他的頁
面就可以分別調用自身的CSS文件,如果需要改變網站風格,只需要修改公共CSS文件就OK了,相當的方便,這才是我們xHtml+CSS制作頁面提倡的方式。
Html代碼
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd">
  2. <html XMLns="http://www.w3.org/1999/xHtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/Html; charset=gb2312" />
  5. <title>無標題文檔</title>
  6. <link href="style.css" type="text/CSS" rel="stylesheet" />
  7. </head>
  8. <body>
  9. <div id="div1"><img src="/School/UploadFiles_7810/201105/20110527195259423.gif" /></div>
  10. 全國的CSS愛好者匯聚於此,如果不來,你就OUT喽~我們的口號是:
  11. “分享自己的歡樂與痛苦,分享自己的經驗與心得,分享自己的資料與資源”
  12. 如果您也願意,就加入我們吧~ 
  13. </body>
  14. </Html>
CSS代碼
  1. #div1{width:64px; height:64px; float:left;}
  2. #div1 img{width:64px; height:64px;}

4)導入方式
導入樣式和鏈接樣式比較相似,采用import方式導入CSS樣式表,在HTML初始化時,會被導入到Html文件中,成為文件的一部分,類似第二種內嵌方式。
具體導入樣式和鏈接樣式有什麼區別,可以參看這篇文章《CSS:@import與link的具體區別》,不過我還是建議大家用鏈接方式!

第二:四種樣式的優先級
      如果這上面的四種方式中的兩種用於同一個頁面後,就會出現優先級的問題,這裡我就不再舉例子來說明了,大家在下面自己證明一下下面的結論

四種樣式的優先級別是(從高至低):行內樣式、內嵌樣式、鏈接樣式、導入樣式

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved