CSS樣式表引用方式

標籤：style   blog   class   code   c   java   

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" />

　　這種方式主要用於對具體的標記做具體的調整,其作用的範圍只限於本標記。

　　綜上所述，這幾種方式各有用途，在統一整個網站風格上，用第一種方式在整個頁面風格統一上，

　　用第三種方式在頁內某個標記的具體微調上，第三種方式也有用武之地，所以各有千秋吧！

　　前三種的目的在於一是統一風格，二是減少繁瑣的標記屬性設定，真是功不可沒喲!