CSS教程之CSS的應(yīng)用

 

一、In-line 行內(nèi) 

　　行內(nèi)樣式是在html標(biāo)簽里直接使用style屬性 

  
p style="color: red">text/p> 
　　設(shè)定段落文字紅色。 
　　但要記住，最后的HTML應(yīng)該是獨(dú)立出來，使用表現(xiàn)文檔，所以行內(nèi)樣式應(yīng)該在任何地方避免。 

二、Internal 內(nèi)部 

　　使用于整個(gè)頁面的植入內(nèi)部樣式在head標(biāo)簽里面，style標(biāo)簽包圍樣式。 

  
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
html> 
head> 
title>CSS Example/title> 
style type="text/css"> 
    p { 

        color: red; 
    } 

    a { 
        color: blue; 
    } 
/style> 
... 
　　所有段落文字紅色，鏈接藍(lán)色。 
　　像行內(nèi)樣式一樣，你應(yīng)該保持HTML和CSS分離，所以我們只剩下救星。 

三、外部 

　　外部樣式使用在整個(gè)多樣頁面網(wǎng)站。它是一個(gè)獨(dú)立的CSS文件，像下面一樣： 

  
p { 
    color: red; 
} 

a { 
    color: blue; 
} 
　　如果上面保存為“web.css”，HTML里面的鏈接就像下面： 

  
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
html> 
head> 
    title>CSS Example/title> 
    link rel="stylesheet" type="text/css" href="web.css" /> 
... 
　　后面教程里會(huì)講到其他外聯(lián)樣式的方法，現(xiàn)在已經(jīng)足夠了。 

　　從這篇指導(dǎo)里面，我們以后沿著上面的方法實(shí)驗(yàn)代碼是個(gè)好主意，用文本編輯器新建文件，保存為"web.css"在html目錄。 

  
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
html> 
head> 
    title>My first web page/title> 
    link rel="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é)果。