|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
CSS的极大优势表现在简洁的代码,对于一个大型网站来说,可以节省大量带宽,而且众所周知,搜索引擎喜欢清洁的代码。
重置默许款式
比来看到一个词叫cssreset。甚么叫做cssreset呢?我了解为重置css,也就是重置默许款式。我在HTML下的默许款式中讲到,一些标签元素在HTML下有一个默许属性值,我们在写css页面的时分,为了不在css中反复界说它们,我们必要重置默许款式(cssreset)。每一个人的用法和写法都纷歧样。找到一篇关于cssreset的查询拜访文章,能够看看外洋利用cssreset的比例查询拜访。
这里有一篇总结cssreset对照周全的文章,枚举了多种cssreset的写法,能够看看。
译文地点检察
原文地点检察
接上去我也检察了国际的两个网站,用Firebug按F12看看他们的cssreset怎样写的?
淘宝(www.taobao.com):
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:010px;
text-align:left;
}
select{
font-size:12px;
}
table{
border-collapse:collapse;
}
fieldset,img{
border:0none;
}
fieldset{
margin:0;
padding:0;
}
fieldsetp{
margin:0;
padding:0008px;
}
legend{
display:none;
}
address,caption,em,strong,th,i{
font-style:normal;
font-weight:400;
}
tablecaption{
margin-left:-1px;
}
hr{
border-bottom:1pxsolid#FFFFFF;
border-top:1pxsolid#E4E4E4;
border-width:1px0;
clear:both;
height:2px;
margin:5px0;
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:"";
}
百度有啊(www.youa.com):(架构基础上是仿照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:0none;
}
ins{
text-decoration:none;
}
在《超出css》一书中倡议我们做网站入手下手重置一切默许款式:
/*Normalizesmargin,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}
/*Normalizesfont-sizeforheaders*/
h1,h2,h3,h4,h5,h6{font-size:100%}
/*Removeslist-stylefromlists*/
ol,ul{list-style:none}
/*Normalizesfont-sizeandfont-weighttonormal*/
address,caption,cite,code,dfn,em,strong,th,var{font-size:normal;font-weight:normal}
/*Removeslist-stylefromlists*/
table{border-collapse:collapse;border-spacing:0}
/*Removesborderfromfieldsetandimg*/
fieldset,img{border:0}
/*Left-alignstextincaptionandth*/
caption,th{text-align:left}
/*Removesquotationmarksfromq*/
q:before,q:after{content:}
那我们实践写代码的时分该怎样来cssreset呢?
我团体保举利用(EricMeyer和YUI)的cssreset
EricMeyersReset:
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;
}
/*remembertodefinefocusstyles!*/
:focus{
outline:0;
}
/*remembertohighlightinsertssomehow!*/
ins{
text-decoration:none;
}
del{
text-decoration:line-through;
}
/*tablesstillneedcellspacing="0"inthemarkup*/
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;
}
分离他们的cssreset写法,再依据本人的实践情形,必定能写出切合本人网站的完善的cssreset。
业界越来越关注DIV+CSS的标准化设计,大到各大门户网站,小到不计其数的个人网站,在Div+CSS标准化的影响下,网页设计人员已经把这一要求作为行业标准。 |
|