h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;} input,select,textarea,samp {font-size:100%;} 看到一些css重設,請問設置font-size:100%的目的和作用是什麼? 假如你設置body{f
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
input,select,textarea,samp {font-size:100%;}
看到一些css重設,請問設置font-size:100%的目的和作用是什麼?
---------------------------------------------------------------------------------------
假如你設置body{font-size:12px;}
但h1是不會繼承這個12px,它會按照一定百分比增加字型大小,但如果給h1顯試指定font-
size:100%;它就會繼承body設定的字體大小。
1. 它改變了預設的大小。
2. 這些元素本身不會繼承父體的字體大小,設置了font-size:100%後就能自動繼承。
瀏覽器在給 hx 標題元素設定預設樣式時,使用的是 h1 {font-size: 200%;} h2 {font-size: 150%;} 等等這樣的規則來設定字體大小。瀏覽器通過這些樣式來確保各級標題文本可以與普通文本呈現字體大小的固定比例關係。
那麼瀏覽器為什麼要通過百分比來固定這個比例,而不是用固定的 px 值來確定相對的比例關係呢(比如這樣:h1 {font-size: 32px;} h2 {font-size: 24px;} p {font-size: 16px;} 等等)?
一方面,百分比顯然更適合用來設置比例, 另一方面,是因為幾乎所有瀏覽器通常都提供了文本縮放功能(註意:非整頁縮放),這是瀏覽器對網頁可訪問性提供的最基礎的支持。而瀏覽器(尤其是 IE)的文本縮放功能在原理上,通常是通過重設 body 元素的字體大小來實現的——當 body 的字體大小變化時,其後代元素通過 CSS 的層層繼承和百分比的換算來呈現字體大小的比例關係。
所以,瀏覽器自身的預設樣式中是不會使用 px 這樣的絕對單位的,否則文本縮放特性無法實現。(我們一定都有過這樣的經驗,一旦某個元素的字體大小使用了固定的 px 值,它就再也不受 IE 縮放設置的影響了。)
羅嗦完了,回到問題本身:
寫 CSS Reset 的目的,就是把瀏覽器的預設樣式覆蓋掉。我最早看到的 CSS Reset,確實就是這麼寫的:
h1,h2,h3,h4,h5,h6 {font-size:100%; font-weight:normal;}
甚 至可能第一個寫 CSS Reset 的人(Eric Meyer?)就是這麼寫的。這樣寫的“好處”在於,可以非常直觀地把瀏覽器的預設樣式(h1 {font-size: 200%;} 等)清零,用百分比干掉百分比,再合適不過。而後來人也一直沿用,可能是懶得去作改變,也可能是向前輩致敬。
重設瀏覽器預設字體大小
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
假如你設置body{font-size:12px;}
但h1是不會繼承這個12px,它會按照一定百分比增加字型大小,但如果給h1顯示指定font-size:100%;它就會繼承body設定的字體大小。
1. 它改變了預設的大小。
當然除此以外,還有其它方法也可以實現 hx 字體大小清零的目的:
- {font-size: inherit;} 可是 IE 6,7 不支持。
- {font-size: 1em;} 這個貌似完美,且位元組數更少。
line-height : normal | length
參數:
normal : 預設行高
length : 百分比數字 | 由浮點數字和單位標識符組成的長度值,允許為負值。其百分比取值是基於字體的高度尺寸。請參閱長度單位
說明
檢索或設置對象的行高。即字體最底端與字體內部頂端之間的距離。
如行內包含多個對象,則應用最大行高。此時行高不可為負值。
對應的腳本特性為lineHeight。請參閱我編寫的其他書目。
示例
div {line-height:6px; }
div {line-height:10.5; }
註意
1.用line-height只對文字起作用 對於圖片時失效
2.用dreamweaver 可以看到即時的line-height 的效果
3.用line-height 時可以使用負值
需要註意的是,在各瀏覽器下對於line-height的解決也是有細微的區別的,上下會有1px的差別,如果行高是偶數的話,大部分瀏覽器解釋還是比較正常,如果是奇數的話,有些瀏覽器會上比下多1px,而另一些瀏覽器會下比上多1px,對於有些要求比較嚴格的網站,建議行高設計時用偶數