| 網(wǎng)頁制作Webjx文章簡介：第一：CSS如何控制頁面樣式，有幾種方式；第二：這些方式出現(xiàn)在同一個(gè)頁面時(shí)的優(yōu)先級。 |
本節(jié)主要講解，兩個(gè)內(nèi)容，
第一：CSS如何控制頁面樣式，有幾種方式；
第二：這些方式出現(xiàn)在同一個(gè)頁面時(shí)的優(yōu)先級。
使用xHTML+CSS布局頁面，其中有個(gè)很重要的特點(diǎn)就是內(nèi)容與表象相分離，內(nèi)容指HTML頁面代碼，表象就是CSS代碼了，如果把頁面看成穿著衣服的人的話，人就是HTML，是內(nèi)容，而衣服呢就是CSS，是表
象，現(xiàn)在出現(xiàn)的問題是，如何讓CSS去控制頁面？或者說，如何讓衣服穿在人身上，好體現(xiàn)出人得風(fēng)格特點(diǎn)；不同的CSS就可以使頁面出現(xiàn)不同的風(fēng)格適用不同的網(wǎng)站，而不同的衣服，人穿上后就會(huì)體現(xiàn)
出不同的職業(yè)。
第一：如何讓CSS去控制HTML頁面效果呢？
有這么4種方式，行內(nèi)方式、內(nèi)嵌方式、鏈接方式、導(dǎo)入方式
1）行內(nèi)方式 行內(nèi)方式是4種樣式中最直接最簡單的一種，直接對HTML標(biāo)簽適用style=""，例如：
- <p style="color:#F00; background:#CCC; font-size:12px;"></p>
雖然這種方法比較直接，在制作頁面的時(shí)候需要為很多的標(biāo)簽設(shè)置style屬性，所以會(huì)導(dǎo)致HTML頁面不夠純凈，文件體積過大，不利于搜索蜘蛛爬行，從而導(dǎo)致后期維護(hù)成本高。
2）內(nèi)嵌方式
內(nèi)嵌方式就是將CSS代碼寫在<head></head>之間，并且用<style></style>進(jìn)行聲明，例如：
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www./1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>無標(biāo)題文檔</title>
- <style type="text/css">
- <!--
- #div1{width:64px; height:64px; float:left;}
- #div1 img{width:64px; height:64px;}
- -->
- </style>
- </head>
- <body>
- <div id="div1"><img src="http://www./index/images/ico/2days.gif" /></div>
- 全國的CSS愛好者匯聚于此，如果不來，你就OUT嘍~我們的口號是：
- “分享自己的歡樂與痛苦，分享自己的經(jīng)驗(yàn)與心得，分享自己的資料與資源”
- 如果您也愿意，就加入我們吧~
- </body>
- </html>
內(nèi)嵌方式，大家應(yīng)該也能意識到，即使有公共CSS代碼，也是每個(gè)頁面都要定義的，如果一個(gè)網(wǎng)站有很多頁面，每個(gè)文件都會(huì)變大，后期維護(hù)也大，如果文件很少，CSS代碼也不多，這種方式還是很不錯(cuò)
的。
3）鏈接方式
鏈接方式是使用頻率最高，最實(shí)用的方式，只需要在<head></head>之間加上
- <link href="style.css" type="text/css" rel="stylesheet" />
，就可以了，這種方式將HTML文件和CSS文件徹底分成兩個(gè)
或者多個(gè)文件，實(shí)現(xiàn)了頁面框架HTML代碼與美工CSS代碼的完全分離，使得前期制作和后期維護(hù)都十分方便，并且如果要保持頁面風(fēng)格統(tǒng)一，只需要把這些公共的CSS文件單獨(dú)保存成一個(gè)文件，其他的頁
面就可以分別調(diào)用自身的CSS文件，如果需要改變網(wǎng)站風(fēng)格，只需要修改公共CSS文件就OK了，相當(dāng)?shù)姆奖悖@才是我們xHTML+CSS制作頁面提倡的方式。
HTML代碼
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www./1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>無標(biāo)題文檔</title>
- <link href="style.css" type="text/css" rel="stylesheet" />
- </head>
- <body>
- <div id="div1"><img src="http://www./index/images/ico/2days.gif" /></div>
- 全國的CSS愛好者匯聚于此，如果不來，你就OUT嘍~我們的口號是：
- “分享自己的歡樂與痛苦，分享自己的經(jīng)驗(yàn)與心得，分享自己的資料與資源”
- 如果您也愿意，就加入我們吧~
- </body>
- </html>
CSS代碼
- #div1{width:64px; height:64px; float:left;}
- #div1 img{width:64px; height:64px;}
4)導(dǎo)入方式
導(dǎo)入樣式和鏈接樣式比較相似，采用import方式導(dǎo)入CSS樣式表，在HTML初始化時(shí)，會(huì)被導(dǎo)入到HTML文件中，成為文件的一部分，類似第二種內(nèi)嵌方式。
具體導(dǎo)入樣式和鏈接樣式有什么區(qū)別，可以參看這篇文章《CSS:@import與link的具體區(qū)別》，不過我還是建議大家用鏈接方式！
第二：四種樣式的優(yōu)先級
如果這上面的四種方式中的兩種用于同一個(gè)頁面后，就會(huì)出現(xiàn)優(yōu)先級的問題，這里我就不再舉例子來說明了，大家在下面自己證明一下下面的結(jié)論
四種樣式的優(yōu)先級別是(從高至低)：行內(nèi)樣式、內(nèi)嵌樣式、鏈接樣式、導(dǎo)入樣式。
