CSS Reset重设浏览器的样式.docx
- 文档编号:12908228
- 上传时间:2023-04-22
- 格式:DOCX
- 页数:12
- 大小:18.04KB
CSS Reset重设浏览器的样式.docx
《CSS Reset重设浏览器的样式.docx》由会员分享,可在线阅读,更多相关《CSS Reset重设浏览器的样式.docx(12页珍藏版)》请在冰豆网上搜索。
CSSReset重设浏览器的样式
CSS Reset是指重设浏览器的样式。
在52CSS.com以前的文章中,也介绍过相似的知识,但不够深入,今天我们看十个CSS Reset方法的例子,学习这种方法的应用。
在各种浏览器中,都会对CSS的选择器默认一些数值,譬如当h1没有被设置数值时,显示一定大小。
但并不是所有的浏览器都使用一样的数值,所以有了CSS Reset,以让网页的样式在各浏览器中表现一致。
一、Generic Reset CSS
ExampleSourceCode[]
* {
padding:
0;
margin:
0;
border:
0;
}
这也是一款CSS Reset的方法,让所有的选择器的padding、margin和border都设置成0。
这是一种强大的方法,也是最简单,最安全的方法,不过,也是最占用资源的方法。
对于小型的网站来说,用这个并不会带来大的资源浪费,但如果是像Yahoo这种架构非常大的网站,刚需要有选择地进行CSS重设,以减少资源浪费。
二、Ateneu Popular CSS Reset
ExampleSourceCode[]
html, body, div, span, applet, object, iframe, h1, h2, h3,
h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
address, big, cite, code, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt,
var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin:
0;
padding:
0;
border:
0;
outline:
0;
font-weight:
inherit;
font-style:
inherit;
font-size:
100%;
font-family:
inherit;
vertical-align:
baseline;
}
:
focus { outline:
0;}
a, a:
link, a:
visited, a:
hover, a:
active{text-decoration:
none}
table { border-collapse:
separate;border-spacing:
0;}
th, td {text-align:
left; font-weight:
normal;}
img, iframe {border:
none; text-decoration:
none;}
ol, ul {list-style:
none;}
input, textarea, select, button {font-size:
100%;font-family:
inherit;}
select {margin:
inherit;}
hr {margin:
0;padding:
0;border:
0;color:
#000;background-color:
#000;height:
1px}
三、Chris Poteet’s Reset CSS
ExampleSourceCode[]
* {
vertical-align:
baseline;
font-family:
inherit;
font-style:
inherit;
font-size:
100%;
border:
none;
padding:
0;
margin:
0;
}
body {
padding:
5px;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
margin:
20px 0;
}
li, dd, blockquote {
margin-left:
40px;
}
table {
border-collapse:
collapse;
border-spacing:
0;
}
四、Yahoo’s CSS Reset
ExampleSourceCode[]
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
padding:
0;
margin:
0;
}
table {
border-collapse:
collapse;
border-spacing:
0;
}
fieldset,img {
border:
0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-weight:
normal;
font-style:
normal;
}
ol,ul {
list-style:
none;
}
caption,th {
text-align:
left;
}
h1,h2,h3,h4,h5,h6 {
font-weight:
normal;
font-size:
100%;
}
q:
before,q:
after {
content:
'';
}
abbr,acronym { border:
0;
}
五、Eric Meyer Reset CSS
ExampleSourceCode[]
html, body, div, span, applet, object, iframe, table, caption,
tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
vertical-align:
baseline;
font-family:
inherit;
font-weight:
inherit;
font-style:
inherit;
font-size:
100%;
outline:
0;
padding:
0;
margin:
0;
border:
0;
}
:
focus {
outline:
0;
}
body {
background:
white;
line-height:
1;
color:
black;
}
ol, ul {
list-style:
none;
}
table {
border-collapse:
separate;
border-spacing:
0;
}
caption, th, td {
font-weight:
normal;
text-align:
left;
}
blockquote:
before, blockquote:
after, q:
before, q:
after {
content:
"";
}
blockquote, q {
quotes:
"" "";
}
六、Tantek Celik Reset CSS
ExampleSourceCode[]
:
link,:
visited { text-decoration:
none }
ul,ol { list-style:
none }
h1,h2,h3,h4,h5,h6,pre,code { font-size:
1em; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:
0; padding:
0 }
a img,:
link img,:
visited img { border:
none }
address { font-style:
normal }
七、Christian Montoya Reset CSS
ExampleSourceCode[]
html, body, form, fieldset {
margin:
0;
padding:
0;
font:
100%/120% Verdana, Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
margin:
1em 0;
padding:
0;
}
li, dd, blockquote {
margin-left:
1em;
}
form label {
cursor:
pointer;
}
fieldset {
border:
none;
}
input, select, textarea {
font-size:
100%;
font-family:
inherit;
}
八、Rudeworks Reset CSS
ExampleSourceCode[]
* {
margin:
0;
padding:
0;
border:
none;
}
html {
font:
62.5% "Lucida Grande", Lucida, Verdana, sans-serif;
text-shadow:
#000 0px 0px 0px;
}
ul {
list-style:
none;
list-style-type:
none;
}
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
font-weight:
normal;
margin:
0 0 1em 0;
}
cite, em, dfn {
font-style:
italic;
}
sup {
position:
relative;
bottom:
0.3em;
vertical-align:
baseline;
}
sub {
position:
relative;
bottom:
-0.2em;
vertical-align:
baseline;
}
li, dd, blockquote {
margin-left:
1em;
}
code, kbd, samp, pre, tt, var, input[type='text'], textarea {
font-size:
100%;
font-family:
monaco, "Lucida Console", courier, mono-space;
}
del {
text-decoration:
line-through;
}
ins, dfn {
border-bottom:
1px solid #ccc;
}
small, sup, sub {
font-size:
85%;
}
abbr, acronym {
text-transform:
uppercase;
font-size:
85%;
letter-spacing:
.1em;
border-bottom-style:
dotted;
border-bottom-width:
1px;
}
a abbr, a acronym {
border:
none;
}
sup {
vertical-align:
super;
}
sub {
vertical-align:
sub;
}
h1 {
font-size:
2em;
}
h2 {
font-size:
1.8em;
}
h3 {
font-size:
1.6em;
}
h4 {
font-size:
1.4em;
}
h5 {
font-size:
1.2em;
}
h6 {
font-size:
1em;
}
a, a:
link, a:
visited, a:
hover, a:
active {
outline:
0;
text-decoration:
none;
}
a img {
border:
none;
text-decoration:
none;
}
img {
border:
none;
text-decoration:
none;
}
label, button {
cursor:
pointer;
}
input:
focus, select:
focus, textarea:
focus {
background-color:
#FFF;
}
fieldset {
border:
none;
}
.clear {
clear:
both;
}
.float-left {
float:
left;
}
.float-right {
float:
right;
}
body {
text-align:
center;
}
#wrapper {
margin:
0 auto;
text-align:
left;
}
九、Anieto2K Reset CSS
ExampleSourceCode[]
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, font, img,
ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
center, u, b, i {
margin:
0;
padding:
0;
border:
0;
outline:
0;
font-weight:
normal;
font-style:
normal;
font-size:
100%;
font-family:
inherit;
vertical-align:
baseline
}
body {
line-height:
1
}
:
focus {
outline:
0
}
ol, ul {
list-style:
none
}
table {
border-collapse:
collapse;
border-spacing:
0
}
blockquote:
before, blockquote:
after, q:
before, q:
after {
content:
""
}
blockquote, q {
quotes:
"" ""
}
input, textarea {
margin:
0;
padding:
0
}
hr {
margin:
0;
padding:
0;
border:
0;
color:
#000;
background-color:
#000;
height:
1px
}
十、CSSLab CSS Reset
ExampleSourceCode[]
html, body, div, span, applet, object, iframe, h1, h2, h3,
h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,
big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot,
thead, tr, th, td {
margin:
0;
padding:
0;
border:
0;
outline:
0;
font-weight:
inherit;
font-style:
inherit;
font-size:
100%;
font-family:
inherit;
vertical-align:
baseline;
}
:
focus {
outline:
0;
}
table {
border-collapse:
separate;
border-spacing:
0;
}
caption, th, td {
text-align:
left;
font-weight:
normal;
}
a img, iframe {
border:
none;
}
ol, ul {
list-style:
none;
}
input, textarea, select, button {
font-size:
100%;
font-family:
inherit;
}
select {
margin:
inherit;
}
/* Fixes incorrect placement of numbers in ol’s in IE6/7 */
ol { margin-left:
2em; }
/* == clearfix == */
.clearfix:
after {
content:
".";
display:
block;
height:
0;
clear:
both;
visibility:
hidden;
}
.clearfix {display:
inline-block;}
* html .clearfix {height:
1%;}
.clearfix {display:
block;}
这些都大同小异,需求不同,方法也就不同。
我自己偏向于喜欢Yahoo的CSS Reset,也用了Yahoo的代码。
你,有自己的CSS Reset体系吗?
或许可以分享出来,在52CSS.com发表评论,说说您的经验吧!
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- CSS Reset重设浏览器的样式 Reset 重设 浏览器 样式