編寫適合所有項目的通用的reset.css
互聯(lián)網(wǎng) 發(fā)布時間:2009-04-02 19:37:50 作者:佚名
我要評論
網(wǎng)頁制作Webjx文章簡介:本文就是來介紹如何寫一個合適所有項目的通用的reset.css,以及介紹在設置玩reset.css之后需要針對不同項目要首先要設置的內容。
0、引言
每每有新項目,第一步就是應當使用一個reset.css來重置樣式
本文就是來介紹如何寫一個合適所有項目的通用的reset.css,以及介紹在設置玩reset.css之后需要針對不同項目要首先要設置的內容。
6、字體樣式(font style/weight/size/variant)
YUI里,分成了多條:
address, caption, cite, code, dfn,
em, strong, th, var, optgroup {
font-style: inherit;
font-weight: inherit;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
abbr, acronym {
border: 0;
font-variant: normal;
}
input, button, textarea,
select, optgroup, option {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
}
/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input, button, textarea, select {
*font-size: 100%;
}
Eric則在他最終版的reset中去掉了關于這些的樣式重置,只保留了
font-size: 100%;
理由見下文。
但通常情況下,我認為還是重置一下這些樣式好,比如strong元素,很多時候只是語義而已,并非希望他真的加粗。可能會有背景色或者其他方式來強調。而之所以這里都用了inherit這個繼承屬性而不是定義
font-weight: normal;
可以在 Eric 先前的reset文章 中看到。這是為了防止——父元素字體加粗了,而沒有一個子元素繼承加粗屬性(因為設置了normal)——這種情況的發(fā)生。所以把YUI中設置h1-h6的樣式以及abbr和acronym的兩句樣式都改成inherit會比較好。
此外,對于h1-h6的字體大小定義,建議放到專門的typography.css里,不建議放在reset.css里。所以這里我同樣傾向于用YUI的策略,全部重置。
但是很不幸,在ie6/ie7當中,不論是strong還是h1-h6,亦或是em等元素,設置了inherit均無法繼承父元素屬性,依然保持自己的特色。這就帶來了瀏覽器差異,樣式重置本身是為了避免瀏覽器差異的,但現(xiàn)在帶來了瀏覽器差異,是萬萬不可取的。對于這個問題我考慮了很久,到底是為了統(tǒng)一所有瀏覽器都重置成normal(YUI的想法),還是放棄重置這些元素,讓他們順其自然,來保證在所有瀏覽器中樣式一樣(Eric的想法)。我最后決定采用YUI的做法。因為,無論重置成normal還是不重置,這些元素都無法繼承父元素屬性。既然如此,那么退而求其次,保證這些元素都恢復到普通外觀,避免在設計的時候還要重置樣式。
不得不說,這種妥協(xié)是僅僅針對IE6和IE7的,也許在5年后,老板和客戶都不要求支持IE7的時候,我們可以放心大膽得使用inherit了。
此外,YUI并沒有給code kbd samp tt 這幾個元素重置字體大小。但實際上在IE中,他們都會被縮小顯示。所以此處應當給予重置font-size: 100%;
7、行高(line-height)
對于行高,YUI并沒有給出重置定義,而Eric則給出了重置:
body {
line-height: 1;
}
行高默認所有元素都會繼承的,所以給body設置行高為1就足夠了。通常行高設為1時候,英文照常閱讀,但中文就無法閱讀了,行間距過于緊密導致容易看錯行。通常在中文環(huán)境下得設置1.4到1.5才能是用戶正常閱讀。我建議是1.5,這樣算出來的值也是整數(shù)。比如字體大小12px的時候行高是18px,字體大小16px時行高24px。看起來也會比較舒服。此外,還有一個不設置成1的重要原因是:IE下,行高為1時,中文字頂部會被削掉幾像素,字體加粗時尤為明顯。所以,重置的原則是好的,但切不可重置為1。
相關文章
- 每個瀏覽器都有一套CSS樣式表用于保證網(wǎng)頁正常顯示,為了精準寫出WEB頁面 通常一開始就重新定義標簽樣式,介紹兩個比較不錯的Reset.css 分別來自雅虎YUI和Eric Meyer2014-01-26
- 全局CSS想必大家并不陌生吧,主要就是一些基礎全局的樣式設置,提高書寫效率,本文整理了一些方便大家使用,感興趣的朋友可以了解下2013-09-12
- CSS樣式清除和重置是前端開發(fā)必需要做的事情,結合了前輩們的經(jīng)驗整理了一份CSS重置樣式代碼不敢獨享特此與大家分享下,感興趣的朋友可不要錯過了哈2013-05-20
CSS重置(CSS Reset) 讓網(wǎng)頁樣式在各瀏覽器中表現(xiàn)一致
CSS Reset是指重設瀏覽器的樣式,在各種瀏覽器中,都會對CSS的選擇器默認一些數(shù)值,譬如當h1沒有被設置數(shù)值時,顯示一定大小;有了CSS Reset,讓網(wǎng)頁的樣式在各瀏覽器中表現(xiàn)2012-12-21- reset.css本意就是重置樣式,我始終建議把.clearfix放入layout.css,而把h1、h2之類的定義放進typography.css2012-04-01
- 網(wǎng)頁制作Webjx文章簡介:Eric Meyer Reset和YUI Reset都是非常強大的,但是對于我而言,它們走的太遠了。我覺得你最終需要重置一切,然后重新定義所有元素的屬性。這就是為2009-04-02
- 這篇文章主要介紹了CSS樣式重置代碼,一般保存為reset.css修改了默認的css設置,方便布局與提高瀏覽器兼容性2014-06-11

