CSS有哪幾種方式控制網(wǎng)頁頁面?
有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>
雖然這種方法比較直接,在制作頁面的時候需要為很多的標(biāo)簽設(shè)置style屬性,所以會導(dǎo)致HTML頁面不夠純凈,文件體積過大,不利于搜索蜘蛛爬行,從而導(dǎo)致后期維護成本高。
2、內(nèi)嵌方式
內(nèi)嵌方式就是將CSS代碼寫在<head></head>之間,并且用<style></style>進行聲明,例如:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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="https://www.jb51.net/images/logo.gif" /></div>
</body>
</html>
運行代碼 復(fù)制代碼 另存代碼 <script language="JavaScript">ffcod = delpost.runcode7 .value; ffcod = ffcod.replace(/
/g,''); delpost.runcode7 .value = ffcod;</script> 提示:您可以先修改部分代碼再運行
內(nèi)嵌方式,大家應(yīng)該也能意識到,即使有公共CSS代碼,也是每個頁面都要定義的,如果一個網(wǎng)站有很多頁面,每個文件都會變大,后期維護也大,如果文件很少,CSS代碼也不多,這種方式還是很不錯的。
3、鏈接方式
鏈接方式是使用頻率最高,最實用的方式,只需要在<head></head>之間加上
復(fù)制代碼
代碼如下:
<link href="style.css" type="text/css" rel="stylesheet" />
,就可以了,這種方式將HTML文件和CSS文件徹底分成兩個
或者多個文件,實現(xiàn)了頁面框架HTML代碼與美工CSS代碼的完全分離,使得前期制作和后期維護都十分方便,并且如果要保持頁面風(fēng)格統(tǒng)一,只需要把這些公共的CSS文件單獨保存成一個文件,其他的頁
面就可以分別調(diào)用自身的CSS文件,如果需要改變網(wǎng)站風(fēng)格,只需要修改公共CSS文件就OK了,相當(dāng)?shù)姆奖悖@才是我們xHTML+CSS制作頁面提倡的方式。
HTML代碼
復(fù)制代碼
代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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="https://www.jb51.net/images/logo.gif" /></div>
</body>
</html>
CSS代碼
復(fù)制代碼
代碼如下:
#div1{width:64px; height:64px; float:left;}
#div1 img{width:64px; height:64px;}
4、導(dǎo)入方式
導(dǎo)入樣式和鏈接樣式比較相似,采用import方式導(dǎo)入CSS樣式表,在HTML初始化時,會被導(dǎo)入到HTML文件中,成為文件的一部分,類似第二種內(nèi)嵌方式。
具體導(dǎo)入樣式和鏈接樣式有什么區(qū)別,可以參看這篇文章《CSS:@import與link的具體區(qū)別》,不過我還是建議大家用鏈接方式!
四種樣式的優(yōu)先級 :
如果這上面的四種方式中的兩種用于同一個頁面后,就會出現(xiàn)優(yōu)先級的問題,這里我就不再舉例子來說明了,大家在下面自己證明一下下面的結(jié)論
四種樣式的優(yōu)先級別是(從高至低):行內(nèi)樣式、內(nèi)嵌樣式、鏈接樣式、導(dǎo)入樣式。
拓展資料
css是層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現(xiàn)HTML(標(biāo)準(zhǔn)通用標(biāo)記語言的一個應(yīng)用)或XML(標(biāo)準(zhǔn)通用標(biāo)記語言的一個子集)等文件樣式的計算機語言。
CSS不僅可以靜態(tài)地修飾網(wǎng)頁,還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化。
CSS為HTML標(biāo)記語言提供了一種樣式描述,定義了其中元素的顯示方式。CSS在Web設(shè)計領(lǐng)域是一個突破。利用它可以實現(xiàn)修改一個小的樣式更新與之相關(guān)的所有頁面元素。