欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
    在网页设计开发时,让人最头疼的莫过于让页面兼容各大浏览器,准确些是兼容它们“默认”的CSS样式表。那么,“抹掉”这些css默认样式表成了首要问题,也就有了CSS默认样式表重置一说。为了让页面在各不同浏览器之间显示效果一致,清除和重置css默认样式就变成必需要做的事情了。
    下面就给大家分享一些常用css默认样式重置代码,仅供大家参考。
    1、css初始化标签在所有浏览器中的margin、padding值(内外边距)
    body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,/*structuralelements结构元素*/
    dl,dt,dd,ul,ol,li,/*listelements列表元素*/
    pre,/*textformattingelements文本格式元素*/
    form,fieldset,legend,button,input,textarea,/*formelements表单元素*/
    th,td/*tableelements表格元素*/{
    margin:0;
    padding:0;
    }
    2、css重置页面元素样式
    body{background:#fff}/*重置body页面背景为白色*/
    body,th,td,input,select,textarea,button{/*重置页面文字属性*/
    font-size:12px;line-height:1;font-family:"微软雅黑","黑体","宋体";color:#666;
    }
    /**css重置样式标签的样式**/
    h1{font-size:18px;/*18px/12px=1.5*/}
    h2{font-size:16px;}
    h3{font-size:14px;}
    h4,h5,h6{font-size:100%;}
    address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:normal}/*将斜体扶正*/
    code,kbd,pre,samp{font-family:couriernew,courier,monospace;}/*统一等宽字体*/
    small{font-size:12px;}/*小于12px的中文很难阅读,让small正常化*/
    3、css重置列表元素样式
    dl,ul,ol,menu,li{list-style:none}/*重置类表前导符号为onne,menu在HTML5中有效*/
    4、css重置文本格式元素样式(鼠标效果)
    /**重置链接a标签**/
    a{color:#666;text-decoration:none}/*重置链接a标签样式*/
    a:active,a:hover{text-decoration:none}/*重置链接a标签的鼠标滑动效果*/
    /*取消a标签点击后的虚线框*/
    a{outline:none;}
    a:active{star:expression(this.onFocus=this.blur());}
    /**设置页面文字等在拖动鼠标选中情况下的背景色与文字颜色**/
    /*
    ::selection{color:#fff;background-color:#4C6E78;}
    ::-moz-selection{color:#fff;background-color:#4C6E78;}
    */
    5、css重置表单元素样式
    legend{color:#000;}/*forie6*/
    fieldset,img{border:0none}/*重置fieldset(表单分组)、图片的边框为0*/
    button,input,select,textarea{
    font-size:100%;/*使得表单元素在ie下能继承字体大小,*/
    vertical-align:middle;/*重置表单控件垂直居中*/
    }
    /*注:optgroup无法扶正*/
    /*重置表单button按钮效果*/
    button{border:0none;background-color:transparent;cursor:pointer}
    img{vertical-align:top}/*图片在当前行内的垂直位置*/
    6、css重置表格元素样式
    caption{display:none;}/*重置表格标题为隐藏*/
    table{width:100%;border-collapse:collapse;border-spacing:0;table-layout:fixed;}/*重置table属性*/
    7、清除浮动
    /*清除浮动*/
    .clear{clear:both;}
    /*清除浮动--推荐使用*/
    .clearfix:before,.clearfix:after{content:'';display:table;}
    .clearfix:after{clear:both;}
    8、css重置嵌套引用
    blockquote,q{quotes:none}/*重置嵌套引用的引号类型*/
    blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}/*重置嵌套引用*/





本文转载自中文网

 

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c57366.shtml