解析CSS應(yīng)用的三大場(chǎng)合
這里和大家分享一下應(yīng)用CSS的三種方法，比如In-line行內(nèi)，行內(nèi)樣式是在html標(biāo)簽里直接使用style屬性，而外部樣式使用在整個(gè)多樣頁(yè)面網(wǎng)站，它是一個(gè)獨(dú)立的CSS文件。
應(yīng)用CSS的三種方法
一、In-line行內(nèi)
行內(nèi)樣式是在html標(biāo)簽里直接使用style屬性
ExampleSourceCode
- <pstylepstyle="color:red">text</p>
設(shè)定段落文字紅色。
但要記住，***的HTML應(yīng)該是獨(dú)立出來，使用表現(xiàn)文檔，所以行內(nèi)樣式應(yīng)該在任何地方避免。
二、Internal內(nèi)部
使用于整個(gè)頁(yè)面的植入內(nèi)部樣式在head標(biāo)簽里面，style標(biāo)簽包圍樣式。
ExampleSourceCode
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html>
- <head>
- <title>CSSExample</title>
- <styletypestyletype="text/css">
- p{
- color:red;
- }
- a{
- color:blue;
- }
- </style>
- ...
所有段落文字紅色，鏈接藍(lán)色。
像行內(nèi)樣式一樣，你應(yīng)該保持HTML和CSS分離，所以我們只剩下救星。
三、外部
外部樣式使用在整個(gè)多樣頁(yè)面網(wǎng)站。它是一個(gè)獨(dú)立的CSS文件，像下面一樣：
ExampleSourceCode
- p{
- color:red;
- }
- a{
- color:blue;
- }
如果上面保存為“web.css”，HTML里面的鏈接就像下面：
ExampleSourceCode
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html>
- <head>
- <title>CSSExample</title>
- <linkrellinkrel="stylesheet"type="text/css"href="web.css"/>
后面教程里會(huì)講到其他外聯(lián)樣式的方法，現(xiàn)在已經(jīng)足夠了。
從這篇指導(dǎo)里面，我們以后沿著上面的方法實(shí)驗(yàn)代碼是個(gè)好主意，用文本編輯器新建文件，保存為"web.css"在html目錄。
ExampleSourceCode
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html>
- <head>
- <title>Myfirstwebpage</title>
- <linkrellinkrel="stylesheet"type="text/css"href="web.css"/>
- </head>
- ...
保存HTML文件，現(xiàn)在已經(jīng)鏈接上CSS，不過現(xiàn)在CSS是空的，沒有內(nèi)容不會(huì)改變HTML。當(dāng)你開始學(xué)習(xí)CSS，就可以添加代碼到CSS文件里，看HTML刷新后的結(jié)果。
【編輯推薦】
- CSS Sprites對(duì)CSS布局的意義
- 全面認(rèn)識(shí)CSS中margin屬性用法
- 暢談CSS編碼與組織技巧
- 暢談CSS編碼與組織技巧
- 專家推薦 DIV CSS表單布局的五個(gè)小技巧
