君语贤
时光静好,与君语;细水流年,与君同;繁华落尽,与君老...

首页>前端设计>css>正文

CSS清除默认样式

2019-01-24 标签:清除默认样式

方案一:

/*清除内外边距*/
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,/*structuralelements结构元素*/
dl,dt,dd,ul,ol,li,/*listelements列表元素*/
pre,/*textformattingelements文本格式元素*/
fieldset,lengend,button,input,textarea,/*formelements表单元素*/
th,td{/*tableelements表格元素*/
margin:0;
padding:0;
}
/*设置默认字体*/
body,
button,select,textarea{/*forie*/
/*font:12px/1Tahoma,Helvetica,Arial,"宋体",sans-serif;*/
font:12px/1Tahoma,"5b8b4f53",sans-serif;/*用ascii字符表示,使得在任何编码下都无问题*/
}
h1{font-size:18px;/*18px/12px=1.5*/}
h2{font-size:16px;}
h3{font-size:14px;}
h4,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}/*将斜体扶正*/
code,kbd,pre,samp,tt{font-family:"CourierNew",Courier,monospace;}/*统一等宽字体*/
small{font-size:12px;}/*小于12px的中文很难阅读,让small正常化*/
/*重置列表元素*/
ul,ol{list-style:none;}
/*重置文本格式元素*/
a{text-decoration:none;}
a:hover{text-decoration:underline;}
abbr[title],acronym[title]{/*注:1.ie6不支持abbr;2.这里用了属性选择符,ie6下无效果*/
border-bottom:1pxdotted;
cursor:help;
}
q:before,q:after{content:'';}
/*重置表单元素*/
legend{color:#000;}/*forie6*/
fieldset,img{border:none;}/*img搭车:让链接里的img无边框*/
/*注:optgroup无法扶正*/
button,textarea{
font-size:100%;/*使得表单元素在ie下能继承字体大小*/
}
/*重置表格元素*/
table{
border-collapse:collapse;
border-spacing:0;
}
/*重置hr*/
hr{
border:none;
height:1px;
}

方案二:

html,body,div,span,applet,object,iframe,
h1,
a,abbr,acronym,address,big,code,
del,img,ins,q,s,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,embed,
figure,figcaption,footer,header,hgroup,
menu,nav,output,ruby,section,summary,
time,mark,audio,video{
margin:0;
padding:0;
border:0;
font:inherit;
font-size:100%;
vertical-align:baseline;
}
html{
line-height:1;
}
ol,ul{
list-style:none;
}
table{
border-collapse:collapse;
border-spacing:0;
}
caption,td{
text-align:left;
font-weight:normal;
vertical-align:middle;
}
q,blockquote{
quotes:none;
}
q:before,q:after,blockquote:before,blockquote:after{
content:"";
content:none;
}
aimg{
border:none;
}
article,figure,main,menu,summary{
display:block;
}

方案三

/**清除内外边距**/
body,/*textformattingelements文本格式元素*/
form,fieldset,td/*tableelements表格元素*/{
margin:0;
padding:0;
}
/**设置默认字体**/
body,textarea/*forie*/{
font:14px/1.5tahoma,5b8b4f53,sans-serif;
}
h1,h6{font-size:100%;font-weight:normal;}
address,samp{font-family:couriernew,courier,monospace;}/*统一等宽字体*/
small{font-size:12px;}/*小于12px的中文很难阅读,让small正常化*/
/**重置列表元素**/
ul,ol{list-style:none;}
/**重置文本格式元素**/
a{text-decoration:none;}
a:hover{text-decoration:underline;}
sup{vertical-align:text-top;}/*重置,减少对行高的影响*/
sub{vertical-align:text-bottom;}
/**重置表单元素**/
legend{color:#000;}/*forie6*/
fieldset,img{border:0;}/*img搭车:让链接里的img无边框*/
button,textarea{font-size:100%;}/*使得表单元素在ie下能继承字体大小*/
/*注:optgroup无法扶正*/
/**重置表格元素**/
table{border-collapse:collapse;border-spacing:0;}
/*重置HTML5元素*/
article,
summary,time,video{
display:block;
margin:0;
padding:0;
}
mark{background:#ff0;}


图文推荐
热门标签
H5包含选择器居中处理内容页图片水纹效果css3注意自适应小图标hot控制设置边框样式DIV控制垂直居中块元素基本空隙定位雪碧图