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