重置默认样式:css reset

风华正貌_

风华正貌_

2016-02-19 23:32

每个人都希望每天都是开心的,不要因为一些琐事扰乱了心情还,闲暇的时间怎么打发,关注图老师可以让你学习更多的好东西,下面为大家推荐重置默认样式:css reset,赶紧看过来吧!

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

重置默认样式

最近看到一个词叫css reset。什么叫做css reset呢?我理解为重置css,也就是重置默认样式。我在中讲到,一些标签元素在HTML下有一个默认属性值,我们在写css页面的时候,为了避免在css中重复定义它们,我们需要重置默认样式(css reset)。每个人的用法和写法都不一样。找到一篇关于 可以看看国外使用css reset的比例调查。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

 


这里有一篇总结css reset比较全面的文章,列举了多种css reset的写法,可以看看。



接下来我也查看了国内的两个网站,用Firebug按F12看看他们的css reset怎么写的?

淘宝():

html {
overflow-x:auto;
overflow-y:scroll;
}
body, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, p, blockquote, th, td {
font-weight:400;
margin:0;
padding:0;
}
h1, h2, h3, h4, h4, h5 {
margin:0;
padding:0;
}
body {
background-color:#FFFFFF;
color:#666666;
font-family:Helvetica,Arial,sans-serif;
font-size:12px;
padding:0 10px;
text-align:left;
}
select {
font-size:12px;
}
table {
border-collapse:collapse;
}
fieldset, img {
border:0 none;
}
fieldset {
margin:0;
padding:0;
}
fieldset p {
margin:0;
padding:0 0 0 8px;
}
legend {
display:none;
}
address, caption, em, strong, th, i {
font-style:normal;
font-weight:400;
}
table caption {
margin-left:-1px;
}
hr {
border-bottom:1px solid #FFFFFF;
border-top:1px solid #E4E4E4;
border-width:1px 0;
clear:both;
height:2px;
margin:5px 0;
overflow:hidden;
}
ol, ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
caption, th {
text-align:left;
}
q:before, q:after, blockquote:before, blockquote:after {
content:"";
}

百度有啊():(架构基本上是模仿YUI来做的)

body {
font-family:arial,helvetica,sans-serif;
font-size:13px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.4;
text-align:center;
}
body, ul, ol, dl, dd, h1, h2, h3, h4, h5, h6, p, form, fieldset, legend, input, textarea, select, button, th, td {
margin:0;
padding:0;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}
table {
font-size:inherit;
}
input, select {
font-family:arial,helvetica,clean,sans-serif;
font-size:100%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}
button {
overflow:visible;
}
th, em, strong, b, address, cite {
font-style:normal;
font-weight:normal;
}
li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
img, fieldset {
border:0 none;
}
ins {
text-decoration:none;
}

《超越css》一书中建议我们做网站开始重置所有默认样式:

/* Normalizes margin,padding */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td { margin:0;padding:0}

/* Normalizes font-size for headers */
h1,h2,h3,h4,h5,h6 { font-size:100%}

/* Removes list-style from lists */
ol,ul { list-style:none }

/* Normalizes font-size and font-weight to normal */
address,caption,cite,code,dfn,em,strong,th,var { font-size:normal; font-weight:normal }

/* Removes list-style from lists */
table { border-collapse:collapse; border-spacing:0 }

/* Removes border from fieldset and img */
fieldset,img { border:0 }

/* Left-aligns text in caption and th */
caption,th { text-align:left }

/* Removes quotation marks from q */
q:before,q:after { content:''}

那我们实际写代码的时候该怎么来css reset呢?
我个人推荐使用(和)的 css reset

Eric Meyer's Reset:

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,
b, u, i, center,
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-size: 100%;
 vertical-align: baseline;
 background: transparent;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}

/* remember to define focus styles! */
:focus {
 outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
 text-decoration: none;
}
del {
 text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
 border-collapse: collapse;
 border-spacing: 0;
}

YUI:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {   
     margin:0;  
     padding:0;  
 }
 table { 
     border-collapse:collapse;  
     border-spacing:0;  
 }
 fieldset,img {   
     border:0;  
 }
 address,caption,cite,code,dfn,em,strong,th,var { 
     font-style:normal;  
     font-weight:normal;  
 }
 ol,ul { 
     list-style:none;  
 }
 caption,th { 
     text-align:left;  
 }
 h1,h2,h3,h4,h5,h6 { 
     font-size:100%;  
     font-weight:normal;  
 }
 q:before,q:after { 
     content:'';  
 }
 abbr,acronym { border:0;  
 } 

结合他们的css reset写法,再根据自己的实际情况,一定能写出符合自己网站的完美的css reset。

展开更多 50%)
分享

猜你喜欢

重置默认样式:css reset

Web开发
重置默认样式:css reset

XHTML语言默认的CSS样式

Web开发
XHTML语言默认的CSS样式

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

YaHoo方法:CSS Reset重设浏览器的样式

Web开发
YaHoo方法:CSS Reset重设浏览器的样式

CSS Reset重设浏览器的样式代码实例

Web开发
CSS Reset重设浏览器的样式代码实例

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Css Reset(复位)整理

Web开发
Css Reset(复位)整理

CSS样式表教程:浏览器默认样式

Web开发
CSS样式表教程:浏览器默认样式

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

网页开头部分的声明DOCTYPE

网页开头部分的声明DOCTYPE

逐梦路上最美的太阳.

逐梦路上最美的太阳.
下拉加载更多内容 ↓