1、外部文件引用方式;(推薦使用)
2、使用@import引用外部CSS文件;
3、內部文檔頭方式也叫內嵌法調用;
4、直接插入式也叫行內樣式。
它們主要的差別在於它們規定的風格使用的范圍不同:
一、外部文件引用方式
外部文件引用方式即將CSS寫成一個文件,在HTML文檔頭通過文件引用來進行風格控制。
也就是把寫好的CSS屬性的文件保存為文件擴展名為.CSS文件。
CSS文件的引用是在HTML的標記之間寫下列語句:
<link rel="stylesheet" href="CSS/test.CSS">
如當前文件目錄下有一CSS 文件名為myStyle.css,內容如下:
P{ font-family:'宋體'; font-size:9pt; color:blue; } H2{ font-family:'宋體'; font-size:13pt; color:red; }
則在引用是,用下列語句:
<link rel="stylesheet" href="CSS/test.CSS">
當然,你可以復制這句,然后改下引用文件的路徑及文件名就可以了。
應用CSS文件的一個最大好處就是,你可以在每個HTML文件中引用這個文件,從而可使整個站點的HMTL文件在風格上保持一致,避免重復的CSS屬性設置;
另外,當你遇上改版或作某些重大調整要對風格進行修改時,可直接修改這個CSS文件,
當然了,HTML文件一直引用最近更新的樣式單,而不必每個每個HTML文件進行修改,
如果在建站之初沒有網站風格的統一規划並形成CSS文件,以后內容一多,想調整一下風格會累死你的。
二、使用@import引用外部CSS文件
這種方式在文檔頭<heade></head>之間使用style標簽引用外部css
<Style Type="text/css"> <!-- @import url(myStyle.css);/*這里是通過@import引用CSS的樣式內容*/ --> </Style>
三、內部文檔頭方式
這種方式與外部文件方式區別在於這種方式是將風格直接定義在文檔頭<heade></head>之間,而不是形成文件。
這種風格定義產生作用的范圍也只局限於本文件,其格式如下(套用上邊的CSS)
<Style Type="text/css"> <!-- P{ font-family:'宋體'; font-size:9pt; color:blue } H2{ font-family:'宋體'; font-size:13pt; color:red; } --> </Style>
這種方式的主要用處是,在一些方面統一風格的前提下,可針對具體頁面進行具體調整。這兩種方式並不相排斥,而是相互結合,
比如在CSS文件中定義了P標志的字體大小font-size為10pt,而在內部文檔中可定義P標志字體顏色font-color為Red;
而在另一個HTML文件中定義顏色為Green,從這里,你也可能明白為什么風格樣式單叫層疊式樣單了。
四、直接插入式
直接插入式很簡單,只是在每個HTML標記后書寫CSS屬性就可以了。
這種方式很直接,如我們想規定一個Table標志中的字為紅色,字體大小為10pt,則可書寫如下:
<Table style="color:red;font-size:10pt" />
這種方式主要用於對具體的標記做具體的調整,其作用的范圍只限於本標記。
綜上所述,這幾種方式各有用途,在統一整個站點風格上,用第一種方式在整個頁面風格統一上,
用第三種方式在頁內某個標記的具體微調上,第三種方式也有用武之地,所以各有千秋吧!
前三種的目的在於一是統一風格,二是減少繁瑣的標記屬性設置,真是功不可沒喲!