CSS样式标签重置初始化

发布时间:2020-06-28编辑:脚本学堂
本文主要介绍div+css网页布局时, 哪些css标签需要初始化,以及代码不同风格的写法,需要了解的朋友参考一下。

使用DIV+CSS布局页面的时候,我们都会把CSS上的一些标签重置一下,为何要初始化CSS标签呢,在你实践中就会得到答案。假如不初始化CSS标签,在CSS的结构上或者代码量上会有所复杂,布局上会出现一系列的问题。。。不知这样解释可懂。
下面是两段初始化CSS标签的代码,每个人的写法风格都各不相同,这些自己要总结实践了,下面的初始化CSS标签代码仅作参考使用。。。
初始化CSS标签代码一:
 

复制代码 代码示例:
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;}

初始化CSS标签代码二:
 

复制代码 代码示例:
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;}
/ * 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;}
 

以上就是两段初始化CSS标签的代码。。。初始化后的CSS标签,布局一切都在你的构思中。。。浏览器的不同版本差异不大,不过还是有区别的。
平时我布局的时候,习惯给a标签加上:
 

复制代码 代码示例:

a {
    text-decoration:none;
    hide-focus: expression_r(this.hideFocus=true); / * for ie 5+ * /
    star:expression_r(this.onFocus=this.blur()); / * for Ie* /
    outline: none; / * for firefox 1.5 + * /

}
这段代码就是去掉图片上的链接的虚线,上面的那代码:focus { outline: 0;}应该也是这个意思。还有 
.Clear {height:0px; font:0px/0px Arial, Helvetica, sans-serif; clear:both;}

 是用来干啥的,自己实践一下就明白了