200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > 重置默认样式:css reset

重置默认样式:css reset

时间:2020-12-28 09:26:58

相关推荐

重置默认样式:css reset

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

重置默认样式

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

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

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

淘宝:

html {

;

;

}

body, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, p, blockquote, th, td {

;

margin:0;

padding:0;

}

h1, h2, h3, h4, h4, h5 {

margin:0;

padding:0;

}

body {

background-color:#FFFFFF;

color:#666666;

,,;

;

padding:0 10px;

;

}

select {

;

}

table {

;

}

fieldset, img {

border:0 none;

}

fieldset {

margin:0;

padding:0;

}

fieldset p {

margin:0;

padding:0 0 0 8px;

}

legend {

;

}

address, caption, em, strong, th, i {

;

;

}

table caption {

margin-left:-1px;

}

hr {

solid #FFFFFF;

solid #E4E4E4;

0;

;

;

0;

;

}

ol, ul {

;

;

;

}

caption, th {

;

}

q:before, q:after, , {

content:"";

}

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

body {

,,;

;

;

;

;

;

;

;

;

}

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 {

%;

;

}

table {

;

}

input, select {

,,,;

%;

;

;

;

;

;

;

}

button {

;

}

th, em, strong, b, address, cite {

;

;

}

li {

;

;

;

}

img, fieldset {

border:0 none;

}

ins {

;

}

在《超越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 { }

/* Normalizes font-size for headers */

h1,h2,h3,h4,h5,h6 { %}

/* Removes list-style from lists */

ol,ul { }

/* Normalizes font-size and font-weight to normal */

address,caption,cite,code,dfn,em,strong,th,var { ; }

/* Removes list-style from lists */

table { ; border-spacing:0 }

/* Removes border from fieldset and img */

fieldset,img { border:0 }

/* Left-aligns text in caption and th */

caption,th { }

/* Removes quotation marks from q */

q:before,q:after { content:\}

那我们实际写代码的时候该怎么来css reset呢?

我个人推荐使用(和)的 css reset

Eric Meyers 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;

}

, ,

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-spacing:0;

}

fieldset,img {

border:0;

}

address,caption,cite,code,dfn,em,strong,th,var {

;

;

}

ol,ul {

;

}

caption,th {

;

}

h1,h2,h3,h4,h5,h6 {

%;

;

}

q:before,q:after {

content:\;

}

abbr,acronym { border:0;

}

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。