編寫適合所有項(xiàng)目的通用的reset.css
互聯(lián)網(wǎng) 發(fā)布時(shí)間：2009-04-02 19:37:50 作者：佚名 
我要評論
我要評論網(wǎng)頁制作Webjx文章簡介：本文就是來介紹如何寫一個(gè)合適所有項(xiàng)目的通用的reset.css，以及介紹在設(shè)置玩reset.css之后需要針對不同項(xiàng)目要首先要設(shè)置的內(nèi)容。
0、引言
每每有新項(xiàng)目，第一步就是應(yīng)當(dāng)使用一個(gè)reset.css來重置樣式
本文就是來介紹如何寫一個(gè)合適所有項(xiàng)目的通用的reset.css，以及介紹在設(shè)置玩reset.css之后需要針對不同項(xiàng)目要首先要設(shè)置的內(nèi)容。
12、引用元素的引號
某些瀏覽器中，q或者blockquote前后會出現(xiàn)引號。這個(gè)并不是誰都喜歡的。所以需要重置他。
YUI的比較簡單，只重置了q：
q:before,
q:after {
content: '';
}
而Eric則比較周到，把q和blockquote都重置了。
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
OK，就決定用Eric的了，對于樣式重置，細(xì)致一點(diǎn)周到一點(diǎn)總沒有錯(cuò)。
13、鏈接
對于鏈接，YUI和Eric都沒有采取樣式重置，但從我思考許久后還是決定把鏈接樣式重置放進(jìn)來。究其原因，還是因?yàn)闃邮街刂靡粊硪獜氐?，二來對于鏈接樣式并非所有設(shè)計(jì)師都喜歡用下劃線裝飾。因此，我還是建議把鏈接的下劃線重置掉。
a {
text-decoration: none;
}
但這樣做有點(diǎn)粗糙。真正有下劃線樣式的其實(shí)只有 :link和:visited所以改成下面這樣比較好：
:link, :visited {
text-decoration: none;
}
此外，對于鏈接顏色，可以作為reset后急需設(shè)置的規(guī)則來處理。直接放入reset.css中不是很合適。
14、我的重置樣式
總結(jié)上面種種規(guī)則，這里給出一下我的CSS重置規(guī)則，BSD協(xié)議發(fā)布，請隨意使用。測試樣本（這個(gè)是從 YUI那里復(fù)制過來的 ，感謝YUI為此做出的貢獻(xiàn)。）
下載：reset.css reset-min.css
/*
Copyright (c) 2009, Shawphy(shawphy.com). All rights reserved.
http://shawphy.com/2009/03/my-own-reset-css.html
Based on YUI http://developer.yahoo.com/yui/reset/
and Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html
Licensed under the BSD License:
http://creativecommons.org/licenses/BSD/
version: 1.1 | 20090303
*/
body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6, pre, code,
form, fieldset, legend, input, button,
textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
fieldset, img {
border: 0;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
address, caption, cite, code, dfn,
em, strong, th, var, optgroup {
font-style: normal;
font-weight: normal;
}
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;
}
code, kbd, samp, tt {
font-size: 100%;
}
/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input, button, textarea, select {
*font-size: 100%;
}
body {
line-height: 1.5;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th {
text-align: left;
}
sup, sub {
font-size: 100%;
vertical-align: baseline;
}
/* remember to highlight anchors and inserts somehow! */
:link, :visited , ins {
text-decoration: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
相關(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è)瀏覽器的樣式,在各種瀏覽器中，都會對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文章簡介：Eric Meyer Reset和YUI Reset都是非常強(qiáng)大的，但是對于我而言，它們走的太遠(yuǎn)了。我覺得你最終需要重置一切，然后重新定義所有元素的屬性。這就是為2009-04-02
- 這篇文章主要介紹了CSS樣式重置代碼，一般保存為reset.css修改了默認(rèn)的css設(shè)置，方便布局與提高瀏覽器兼容性2014-06-11