仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 960|回复: 6
打印 上一主题 下一主题

[DIV+CSS] 来一发重置默许款式:css reset

[复制链接]
海妖 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:07:33 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

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标准化的影响下,网页设计人员已经把这一要求作为行业标准。
因胸联盟 该用户已被删除
沙发
发表于 2015-1-18 05:15:36 | 只看该作者
学Dreamweaver技术的过程其实是一个增加信心的过程。
活着的死人 该用户已被删除
板凳
发表于 2015-1-25 14:07:19 | 只看该作者
使用所见即所得的接口,亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。
冷月葬花魂 该用户已被删除
地板
发表于 2015-2-2 22:30:02 | 只看该作者
俗话说:兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中,我们难免会遇到各种各样的问题。
若天明 该用户已被删除
5#
发表于 2015-2-8 17:13:38 | 只看该作者
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。
柔情似水 该用户已被删除
6#
发表于 2015-3-8 08:40:13 | 只看该作者
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程,随着互联网(Internet) 的家喻户晓。
admin 该用户已被删除
7#
发表于 2015-3-15 22:29:00 | 只看该作者
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心,坚持不懈的决心。在自己无法解决某些问题时,就需要虚心请教别人.
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-23 03:54

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表