網(wǎng)址制作技術(shù)之關(guān)于CSS代碼執(zhí)行的優(yōu)先級-沈陽易勢科技有限公司

build網(wǎng)站制作

build網(wǎng)站制作當(dāng)前位置：首頁>主要服務(wù)>網(wǎng)站制作

網(wǎng)址制作技術(shù)之關(guān)于CSS代碼執(zhí)行的優(yōu)先級

一、加入CSS代碼的方式

a、在<head>標(biāo)簽對中鏈接外部樣式：

b、在<head>標(biāo)簽對中寫內(nèi)部樣式：

c、在鏈接外部樣式表和內(nèi)部樣式的最前面可以使用 @import url(style.css); 輸入樣式

d、在標(biāo)簽屬性中可以使用style屬性寫入，即行內(nèi)樣式：

二、CSS優(yōu)先級是：行內(nèi)樣式 > 內(nèi)部樣式 > 鏈接外部樣式？

是的，的確是這樣，但我們必須給其限定一下條件，這個(gè)比較才是成立，而不是一味的就這樣認(rèn)為了。

這個(gè)條件就是：在相同的selector（選擇器）情況下

在不使用“!important”的情況下，行內(nèi)樣式最優(yōu)先，這個(gè)毋庸置疑，那么就比較沒有行內(nèi)樣式吧

下面示例：

html代碼：

<html xmlns="http://www.w3.org/1999/xhtml "> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title> new document </title> <link href="color1.css" rel="stylesheet" type="text/css"> <style type="text/css"> @import url(color2.css); span{color:#06f} </style> </head> <body> <div><span><b>什么顏色呢？</b></span></div> </body> </html>

color1.css ：

div span b{color:red}

color2.css ：

div span{color:blue}

那么文字的最終顏色是--red

是的，在不使用行內(nèi)樣式的情況下，外部鏈接樣式打贏了。

三、CSS優(yōu)先級計(jì)算方式

說明	權(quán)重
HTML標(biāo)記	1
class	10
id	100
行內(nèi)style	1000
!important	高于一切
繼承	0

知道了這些，使用加法就很容易了解權(quán)重值了，例如：

div span{} 權(quán)重為：1+1=2

#select1 div{} 權(quán)重為：100+1=101

.select2 div{} 權(quán)重為：10+1=11

#select1 .select2 div{} 權(quán)重為：100+10+1=111

所以上面那個(gè)例子，外部鏈接樣式權(quán)重3大于內(nèi)部樣式權(quán)重2

四、要注意的一些問題

1、如果!important聲明沖突，則比較優(yōu)先權(quán)。如果優(yōu)先權(quán)一樣，則按照在源碼中出現(xiàn)的順序決定，后來者居上。

2、由@import加載的外部樣式，由于@import必須出現(xiàn)在所有其它規(guī)則定義之前(如不是，則瀏覽器應(yīng)該忽略之)，所以按照后來居上原則，一般優(yōu)先權(quán)沖突時(shí)是占下風(fēng)的。

3、關(guān)于繼承性：
權(quán)重低，任何顯式聲明的規(guī)則都會覆蓋繼承的樣式，比如全局選擇符定義的規(guī)則；
局限性，有一些屬性不能被繼承，如：border, margin, padding, background等。

4、要使用內(nèi)聯(lián)樣式，必須使用Content-Style-Type HTTP頁眉擴(kuò)展對整個(gè)文檔進(jìn)行單獨(dú)的樣式表語言聲明。
<meta http-equiv="Content-Style-Type" content="text/css">

5、所有的 @import 聲明必須放在樣式表的開始部分，后面 @import 的樣式覆蓋前面 @import 的樣式，所以<style>中的樣式表規(guī)則超越輸入樣式表中對應(yīng)的規(guī)則。