CSS優先級簡要說明

CSS Specificity
W3C對Specificity的描述(http://www.w3.org/TR/CSS2/cascade.html#specificity):

count 1 if the declaration is from is a ‘style’ attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element’s “style” attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
count the number of ID attributes in the selector (= b)
count the number of other attributes and pseudo-classes in the selector (= c)
count the number of element names and pseudo-elements in the selector (= d)

粗略地分為a,b,c,d四級:

  • 每個元素的 style屬性(即內聯式樣),為a級1,0,0,0。
  • 每個 ID 選擇符,為b級0,1,0,0。
  • 每個 類 (class)、偽類(:hover)、屬性選擇符( [attr=” “] ),為c級0,0,1,0。
  • 每個元素(即標籤)或偽元素(如 :after),為d級0,0,0,1。
  • 其它選擇符(如 全局選擇符 * ,子選擇符 > ),為0,0,0,0。

其它規則:

  • !important 聲明的規則高於一切,如果 !important 聲明衝突,則比較優先級。
  • 如果優先級一樣,則按源碼中“後來者居上”的原則。
  • 由繼承而得到的式樣屬性不參與 specificity 的計算,低於一切其它規則(如 全局選擇符 * )。

備註:
偽類(如 :hover)值為0,0,1,0 但通常它會有個前綴,如 .class:hover值為0,0,2,0,a:hover值為0,0,1,1

參考文章:http://www.blueidea.com/tech/web/2008/5749.asp
計算權值:http://www.suzyit.com/tools/specificity.php

常見的瀏覧器排版引擎

  Rendering Engine,渲染引擎,其實就是網頁瀏覽器的排版引擎(有時看文章也看到其它叫法:瀏覽器引擎/ 轉譯引擎/樣版引擎)

  它负責取得網頁的内容(HTML、XML、CSS、圖像等等),整理訊息以及計算網頁的顯示方式。由於,不同的瀏覽器會使用不同的渲染引擎作内核,對代碼的解讀不一,如常見的CSS,在不同瀏覽器上就呈現出不同式樣。

  另外,在Mozilla將其渲染引擎(Gecko)作為獨立於瀏覽器的一個配件之後,“渲染引擎”這個詞彙才被廣泛使用。也就是說,除了Mozilla瀏覽器,其他瀏覽器也可以使用Gecko作自己的渲染引擎。

  常見瀏覽器使用的Rendering Engine

Browser Rendering Engine
Mozilla Firefox Gecko
Windows Internet Explorer Trident
Opera Presto
Safari, Chrome Webkit
Konqueror KHTML

部份HTML標籤的英文全稱、意義

  • HTML(HyperTextMark-upLanguage)即超文本标记语言
  • CSS(Cascading Style Sheets)层叠样式表
  • 语义(Semantics)

  • <a>:anchor 定义锚
  • <abbr>:abbreviation 定义缩写
  • <acronym>: 定义只取消首字母的缩写
  • <address>:定义地址元素
  • <area>:定义图像映射内部的区域
  • <b>:bold 定义粗体字
  • <base>:定义页面当中的所有链接的基准链接
  • <bdo>: bidirectional override 定义文字的显示方向
  • <big>:定义大号字
  • <blockquote>:定义长的引用
  • <body>:定义body元素
  • <br>:break 插入一个回车
  • <button>:定义按钮

Continue reading →

兩份CSS Reset

1份來自YUI:http://developer.yahoo.com/yui/reset/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:”;
}
abbr,acronym { border:0;
}

/*==============================*/
2.一份來自:meyerweb.com
Continue reading →