編寫適合所有項(xiàng)目的通用的reset.css
互聯(lián)網(wǎng) 發(fā)布時(shí)間:2009-04-02 19:37:50 作者:佚名
我要評(píng)論
網(wǎng)頁制作Webjx文章簡(jiǎn)介:本文就是來介紹如何寫一個(gè)合適所有項(xiàng)目的通用的reset.css,以及介紹在設(shè)置玩reset.css之后需要針對(duì)不同項(xiàng)目要首先要設(shè)置的內(nèi)容。
0、引言
每每有新項(xiàng)目,第一步就是應(yīng)當(dāng)使用一個(gè)reset.css來重置樣式
本文就是來介紹如何寫一個(gè)合適所有項(xiàng)目的通用的reset.css,以及介紹在設(shè)置玩reset.css之后需要針對(duì)不同項(xiàng)目要首先要設(shè)置的內(nèi)容。
8、列表樣式
YUI用了:
li {
list-style: none;
}
Eric用了:
ol, ul {
list-style: none;
}
盡管我沒有測(cè)試出YUI的有什么問題,但我始終覺得設(shè)置ol和ul會(huì)比較穩(wěn)妥。而且,波及的元素更少,性能應(yīng)該更高一點(diǎn)。雖然下載量會(huì)多3字節(jié)。
9、表格元素
在表格方面,都比較統(tǒng)一。均是:
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
Eric還提醒到,需要在html中設(shè)置cellspacing="0" 來達(dá)到完美重置效果。
但此外YUI還設(shè)置了
caption, th {
text-align: left;
}
讓caption和th元素不要居中。作為重置,是可取的。建議添加此規(guī)則。
10、上下標(biāo)以及baseline
YUI寫成
sup {
vertical-align: baseline;
}
sub {
vertical-align: baseline;
}
似乎沒有優(yōu)化,不知道為何沒有寫到一起去。而Eric則在最開始那條中就已經(jīng)定義。而其中的問題是,YUI這樣定義了,但沒有重置字體大小,這點(diǎn)是有所遺憾的。既然是重置樣式,就徹底一些,所以建議改成這樣的:
sup, sub {
font-size: 100%;
vertical-align: baseline;
}
同樣對(duì)于Eric把所有元素都放到了Baseline上,包括上標(biāo)下標(biāo)。Eric的解釋是,強(qiáng)制讓設(shè)計(jì)師精確定位這些元素的垂直偏移。
11、插入和刪除(ins/del)
對(duì)于這個(gè)問題,YUI直接清除了ins的下劃線和del的刪除線這兩個(gè)文本裝飾:
del, ins {
text-decoration: none;
}
而Eric保留了刪除線:
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
如何取舍?我選擇Eric的,為什么我這里不追求完美的樣式重置了呢?很簡(jiǎn)單,我這個(gè)reset的目標(biāo)是為了讓我們寫頁面的時(shí)候盡量避免瀏覽器默認(rèn)樣式,以及不同瀏覽器之間默認(rèn)樣式差異帶來的問題。而del元素刪除線的文本裝飾,我相信沒有人會(huì)反對(duì)的。有人會(huì)加上其他樣式,比如字體變淡之類的,但對(duì)于del如此強(qiáng)語義的元素來說,沒有什么比用刪除線更能表達(dá)含義的了。而不像上面那個(gè)focus樣式,未必人人喜歡虛線框。但似乎又沒有什么瀏覽器默認(rèn)不給del元素加刪除線,故這條可以省略。
所以,這里我只重置ins樣式,別忘了給ins元素在等下也添加一些樣式。
相關(guān)文章
- 每個(gè)瀏覽器都有一套CSS樣式表用于保證網(wǎng)頁正常顯示,為了精準(zhǔn)寫出WEB頁面 通常一開始就重新定義標(biāo)簽樣式,介紹兩個(gè)比較不錯(cuò)的Reset.css 分別來自雅虎YUI和Eric Meyer2014-01-26
- 全局CSS想必大家并不陌生吧,主要就是一些基礎(chǔ)全局的樣式設(shè)置,提高書寫效率,本文整理了一些方便大家使用,感興趣的朋友可以了解下2013-09-12
- CSS樣式清除和重置是前端開發(fā)必需要做的事情,結(jié)合了前輩們的經(jīng)驗(yàn)整理了一份CSS重置樣式代碼不敢獨(dú)享特此與大家分享下,感興趣的朋友可不要錯(cuò)過了哈2013-05-20
CSS重置(CSS Reset) 讓網(wǎng)頁樣式在各瀏覽器中表現(xiàn)一致
CSS Reset是指重設(shè)瀏覽器的樣式,在各種瀏覽器中,都會(huì)對(duì)CSS的選擇器默認(rèn)一些數(shù)值,譬如當(dāng)h1沒有被設(shè)置數(shù)值時(shí),顯示一定大小;有了CSS Reset,讓網(wǎng)頁的樣式在各瀏覽器中表現(xiàn)2012-12-21- reset.css本意就是重置樣式,我始終建議把.clearfix放入layout.css,而把h1、h2之類的定義放進(jìn)typography.css2012-04-01
- 網(wǎng)頁制作Webjx文章簡(jiǎn)介:Eric Meyer Reset和YUI Reset都是非常強(qiáng)大的,但是對(duì)于我而言,它們走的太遠(yuǎn)了。我覺得你最終需要重置一切,然后重新定義所有元素的屬性。這就是為2009-04-02
- 這篇文章主要介紹了CSS樣式重置代碼,一般保存為reset.css修改了默認(rèn)的css設(shè)置,方便布局與提高瀏覽器兼容性2014-06-11

