小編給大家分享一下css樣式層疊規(guī)則是什么,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
讓客戶滿意是我們工作的目標,不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶,將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴,公司提供的服務項目有:申請域名、雅安服務器托管、營銷軟件、網(wǎng)站建設、連平網(wǎng)站維護、網(wǎng)站推廣。
CSS樣式規(guī)則語法樣式是CSS的基本單位,每個樣式規(guī)則都是由選擇器和聲明塊兩個基本部分組成的。
選擇器(selector)決定為哪些元素應用樣式;
聲明塊定義相應的樣式,它包含在一對花括號內,有一條或多條聲明組成,而每一條聲明則由一個屬性和一個值組成,中間用冒號隔開。
語法:
屬性名1: 屬性值1;
屬性名2: 屬性值2;
屬性名3: 屬性值3;
1.找到應用給每個元素和屬性的所有聲明
瀏覽器在 加載每個頁面時。都會據(jù)此查到每一條CSS規(guī)則,表示出所有受到影響的HTML元素
2.按照順序和權重排序
瀏覽器依次檢查 5個來源 ,并設定匹配的屬性。如果匹配的屬性在下一個來源也有定義,則更新該屬性的值。
5個來源: 1.瀏覽器默認樣式表 2.設置瀏覽器字體大小來改變默認樣式 3.link引用的css文件 4.style中編寫的樣式代碼 5.行內樣式
聲明權重。如下!important用于增加聲明的權重。這樣其他來源一概不用考慮了。
p {color:green !important; font-size:12pt;}
順序決定權重。如果兩條規(guī)則都影響某元素的同一個屬性,而且它們的特指度也相同,則位置最靠下(或后聲明)的規(guī)則勝出。
3.按特指度排序:特指度表示一條規(guī)則有多明確
p {font-size:12px;} p.largetext {font-size:16px;}
第二條既有標簽名又有類名所以特指度更高,第二條的規(guī)則會覆蓋第一條規(guī)則。
計算特指度:ICE 公式
1. 選擇符中有一個 ID,就在 I 的位置上加 1;
2. 選擇符中有一個類,就在 C 的位置上加 1;
3. 選擇符中有一個元素(標簽)名,就在 E 的位置上加 1;
4. 得到一個三位數(shù)。
好了,下面通過幾個例子來理韶特指度。
P 0-0-1 特指度=1
p.largetext 0-1-1 特指度=11
p#largetext 1-0-1 特指度=101
body p#largetext 1-0-2 特指度=102
body p#largetext ul.mylist 1-1-3 特指度=113 body p#largetext ul.mylist li 1-1-4
特指度=114
在此,每個選擇符都比前一個選擇符的特指度更高。
4.CSS選擇符有哪些?哪些屬性可以繼承?
1.id選擇器( # myid)
2.類選擇器(.myclassname)
3.標簽選擇器(div, h2, p)
4.相鄰選擇器(h2 + p)
5.子選擇器(ul > li)
6.后代選擇器(li a)
7.通配符選擇器( * )
8.屬性選擇器(a[rel = "external"])
9.偽類選擇器(a:hover, li:nth-child)
* 可繼承的樣式: font-size font-family color, UL LI DL DD DT;
* 不可繼承的樣式:border padding margin width height ;
看完了這篇文章,相信你對“css樣式層疊規(guī)則是什么”有了一定的了解,如果想了解更多相關知識,歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!