仓酷云

标题: 带来一篇简化的CSS Reset:15套CSS重设实例 [打印本页]

---

作者: 蒙在股里    时间: 2015-1-16 00:01
标题: 带来一篇简化的CSS Reset:15套CSS重设实例
搜索引擎更加友好。相对与传统的table,采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。
网页制造WEB文章简介：CSS重设就是因为各类扫瞄器注释CSS款式的初始值有所分歧，招致计划师在没有界说某个CSS属性时，分歧的扫瞄器会依照本人的默许值来为没有界说的款式赋值，以是我们要先界说好一些CSS款式，来让一切扫瞄器都依照一样的划定规矩注释CSS，如许就可以制止产生这类成绩.
　　在现今网页计划/开辟理论中，利用CSS来为语义化的(X)HTML标志增加款式作风是主要的关头。在计划师们的妄想中都存在着如许的一个完善天下:一切的扫瞄器都可以了解和合用多有CSS划定规矩，而且出现不异的视觉效果(没有兼容性成绩)。可是，我们并没有生存在这个完善的天下，实际中产生的失贼却老是恰好相反，良多CSS款式在分歧的扫瞄器中有着分歧的注释和出现。
相干CSS文章：YaHoo办法:CSSReset重设扫瞄器的款式
　　现今盛行的扫瞄器(如:Firefox、Opera、InternetExplorer、Chrome、Safari等等)中，有一些都是以本人的体例往了解CSS标准，这就会招致有的扫瞄器对CSS的注释与计划师的CSS界说初志相抵触，使得网页的模样在某些扫瞄器下能准确依照计划师的设法显现，但有些扫瞄器却并没有依照计划师想要的模样显现出来，这就招致扫瞄器的兼容性成绩。更糟的是，有的扫瞄器完整忽视CSS的一些声明和属性。
　　正由于上述抵触和成绩仍然存在于这个”不完善的天下”，以是一些计划师想到了一种制止扫瞄器兼容性成绩的办法，那就是CSSReset，甚么是CSSReset？我们能够把它叫做CSS重设，也有人叫做CSS复位、默许CSS、CSS重置等。CSS重设就是因为各类扫瞄器注释CSS款式的初始值有所分歧，招致计划师在没有界说某个CSS属性时，分歧的扫瞄器会依照本人的默许值来为没有界说的款式赋值，以是我们要先界说好一些CSS款式，来让一切扫瞄器都依照一样的划定规矩注释CSS，如许就可以制止产生这类成绩。
　　明天网页教授教养总结搜集了15套CSS重设实例，您能够在前端开辟事情中举行参考和利用，有些是很简化的CSSReset，有些则长短常庞大十分周全的CSSReset，至于利用哪套，全看您的喜好或必要。
　　网页教授教养会常常更新前端开辟/网页计划等相干手艺及教程文章，接待定阅本博客来实时扫瞄本博客的最新教程及资本。
一.最简化的CSSReset(重设):

*{
padding:0;
margin:0;
}

　　这是最广泛最复杂的CSS重设，将一切元素的padding和margin值都设为0，能够制止一些扫瞄器在了解这两个属性默许值上的”不合”。

*{
padding:0;
margin:0;
border:0;
}

　　这是在上一个重设的基本上增加了对border属性的重设，初始值为0切实其实能制止一些成绩。

*{
outline:0;
padding:0;
margin:0;
border:0;
}

　　在前两个的基本上增加了outline属性的重设，避免一些抵触。

二.稀释有用型CSSReset(重设):

*{
vertical-align:baseline;
font-weight:inherit;
font-family:inherit;
font-style:inherit;
font-size:100%;
outline:0;
padding:0;
margin:0;
border:0;
}

　　该CSS重设办法出自PerishablePress，这是他经常使用的办法。
三.PoorMan的CSSReset:

html,body{
padding:0;
margin:0;
}
html{
font-size:1em;
}
body{
font-size:100%;
}
aimg,:linkimg,:visitedimg{
border:0px;
}

　　这个重设办法将html和body下元素的padding和margin都设为0，并分离为html标签和body标签下的一切元素设置了初始的字体巨细，最主要的是把有链接的图片的默许边框往失落了。
四.Siolon’sGlobalReset

*{
vertical-align:baseline;
font-family:inherit;
fo

nt-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:20px0;
}
li,dd,blockquote{
margin-left:40px;
}
table{
border-collapse:collapse;
border-spacing:0;
}

五.ShaunInman’sGlobalReset

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

网页制造WEB文章简介：CSS重设就是因为各类扫瞄器注释CSS款式的初始值有所分歧，招致计划师在没有界说某个CSS属性时，分歧的扫瞄器会依照本人的默许值来为没有界说的款式赋值，以是我们要先界说好一些CSS款式，来让一切扫瞄器都依照一样的划定规矩注释CSS，如许就可以制止产生这类成绩.
六.Yahoo(YUI)CSSReset:

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;
}

七.EricMeyer’sCSSReset

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:“”“”;
}

八.CondensedMeyerReset:

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;
}
fieldset,img{
border:0;
}
table{
border-collapse:collapse;
border-spacing:0;
}
ol,ul{
list-style:none;
}
address,caption,cite,code,dfn,em,strong,th,var{
font-weight:normal;
font-style:normal;
}
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;
}

九.AteneuPopularCSSReset

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
}

十.ChrisPoteet’sResetCSS

*{
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:20px0;
}
li,dd,blockquote{
margin-left:40px;
}
table{
border-collapse:collapse;
border-spacing:0;
}

网页制造WEB文章简介：CSS重设就是因为各类扫瞄器注释CSS款式的初始值有所分歧，招致计划师在没有界说某个CSS属性时，分歧的扫瞄器会依照本人的默许值来为没有界说的款式赋值，以是我们要先界说好一些CSS款式，来让一切扫瞄器都依照一样的划定规矩注释CSS，如许就可以制止产生这类成绩.
十一.TantekCelikResetCSS

: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}
aimg,:linkimg,:visitedimg{border:none}
address{font-style:normal}

十二.ChristianMontoyaResetCSS

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:1em0;
padding:0;
}
li,dd,blockquote{
margin-left:1em;
}
formlabel{
cursor:pointer;
}
fieldset{
border:none;
}
input,select,textarea{
font-size:100%;
font-family:inherit;
}

十三.RudeworksResetCSS

*{
margin:0;
padding:0;
border:none;
}
html{
font:62.5%“LucidaGrande”,Lucida,Verdana,sans-serif;
text-shadow:#0000px0px0px;
}
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:001em0;
}
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,“LucidaConsole”,courier,mono-space;
}
del{
text-decoration:line-through;
}
ins,dfn{
border-bottom:1pxsolid#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;
}
aabbr,aacronym{
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;
}
aimg{
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:0auto;
text-align:left;
}

十四.Anieto2KResetCSS

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
}

十五.CSSLabCSSReset

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;
}
aimg,iframe{
border:none;
}
ol,ul{
list-style:none;
}
input,textarea,select,button{
font-size:100%;
font-family:inherit;
}
select{
margin:inherit;
}
/*Fixesincorrectplacementofnumbersinol’sinIE6/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;}

　　好了，CSS重设今朝先总结到这里，这15套重设办法实在都是有配合点的，大概有的完成办法分歧，但年夜部分都是统一个目标，就是为了让更多的扫瞄器能显现一样的效果。有了这些CSS重设作为材料和参考，大概会对你的事情有所匡助乃至进步效力，可是，究竟这些重设都是他人写的，你完整也能够为本人量身定制一套CSS重设。假如您有甚么定见或是意见，接待宣布批评。

属性值就追加上去，重复的属性值就以最后一个为准。这里要注意的是，样式的先后不是根据页面上应用的名字顺序，而是样式表里的样式顺序。

---

作者: 简单生活    时间: 2015-1-17 23:52
俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

---

作者: 海妖    时间: 2015-1-26 23:51
HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

---

作者: 再现理想    时间: 2015-2-5 06:00
Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

---

作者: 精灵巫婆    时间: 2015-2-11 07:34
还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

---

作者: 因胸联盟    时间: 2015-3-2 00:51
HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

---

作者: 若相依    时间: 2015-3-11 03:26
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

---

作者: 再见西城    时间: 2015-3-17 20:10
每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

---

作者: 活着的死人    时间: 2015-3-25 00:51
由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

---

欢迎光临 仓酷云 (http://ckuyun.com/)

Powered by Discuz! X3.2