網頁中添加CSS樣式表的四種方式
本文向大家描述一下網頁中添加CSS樣式表的四種方式，首先讓我們來看一下CSS樣式表文件的優勢，主要體現在兩個方面，請看下文詳細介紹。
CSS樣式表文件的優勢表現在兩個方面:
***，簡化了網頁的格式代碼，外部的CSS樣式表還會被瀏覽器保存在緩存里，加快了下載顯示的速度，也減少了需要上傳的代碼數量(因為重復設置的格式將被只保存一次)。
第二，只要修改保存著網站格式的CSS樣式表文件就可以改變整個站點的風格特色，在修改頁面數量龐大的站點時，顯得格外有用。避免了一個一個網頁的修改，大大減少了重復勞動的工作量。
網頁中添加CSS樣式表的四種方式
一、使用STYLE屬性：將STYLE屬性直接加在個別的元件標簽里。
<元件(標簽)STYLE="性質(屬性)1:設定值1;性質(屬性)2:設定值2;...}
例如：
- <TDSTYLETDSTYLE="COLOR:BLUE;font-size:9pt;
- font-family:"標楷體";line-height:150%>
這種用法的優點是可靈巧應用樣式於各標簽中，但是缺點則是沒有整篇文件的『統一性』。
二、使用STYLE標簽：將CSS樣式規則寫在<STYLE>...</STYLE>標簽之中。
- <STYLETYPESTYLETYPE="text/css">
- <!--
- 樣式規則表
- -->
- </STYLE>
- 例如：
- <STYLETYPESTYLETYPE="text/css">
- <!--
- BODY{
- color:BLUE;
- background:#FFFFCC;
- font-size:9pt}
- TD,P{
- COLOR:GREEN;
- font-size:9pt}
- -->
- </STYLE>
通常是將整個的<STYLE>...</STYLE>結構寫在網頁的<HEAD></HEAD>部份之中。這種用法的優點就是在於整篇文件的統一性，只要是有聲明的的元件即會套用該樣式規則。缺點就是在個別元件的靈活度不足。
三、使用LINK標簽：將CSS樣式規則寫在.css的樣式檔案中，再以<LINK>標簽引入。
假設我們把樣式規則存成一個example.css的檔案，我們只要在網頁中加入
<LINKREL=STYLESHEETTYPE="text/css"HREF="example.css">
即可套用該樣式檔案中所制定好的樣式了。通常是將LINK標簽寫在網頁的<head></head>部份之中。這種用法的優點就是在於可以把要套用相同樣式規則的數篇文件都指定到同一個樣式檔案即可。缺點也是在個別文件或元件的靈活度不足。
四、使用@import引入：跟LINK用法很像，但必 放在<STYLE>...</STYLE>中。
- <STYLETYPESTYLETYPE="text/css">
- <!--
- @importurl(引入的樣式表的位址、路徑與檔名);
- -->
- </STYLE>
- 例如：
- <STYLETYPESTYLETYPE="text/css">
- <!--
- @importurl(http://yourweb/example.css);
- -->
- </STYLE>
要注意的是，行末的分號是絕對不可少的！這種方式也可以把@importurl(http://yourweb/example.css);加到其它CSS樣式內調用。
文章出處：標準之路(http://www.aa25.cn/div_css/388.shtml)
【編輯推薦】
- 學習筆記 剖析CSS縮寫六大規則
- CSS樣式表特點及嵌入網頁的四種途徑
- 剖析CSS中border:none與border:0的區別
- 實用但IE不支持的十個CSS屬性
- 探究CSS高級語法中選擇器分組和CSS繼承用法
