css中如何重置樣式

小編給大家分享一下css中如何重置樣式，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

    1、css初始化標(biāo)簽在所有瀏覽器中的margin、padding值（內(nèi)外邊距）

    body,h2,h3,h4,h5,h6,h7,hr,p,blockquote,/*structuralelements結(jié)構(gòu)元素*/

    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重置樣式標(biāo)簽的樣式**/

    h2{font-size:18px;/*18px/12px=1.5*/}

    h3{font-size:16px;}

    h4{font-size:14px;}

    h5,h6,h7{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;}/*統(tǒng)一等寬字體*/

    small{font-size:12px;}/*小于12px的中文很難閱讀，讓small正常化*/

    3、css重置列表元素樣式

    dl,ul,ol,menu,li{list-style:none}/*重置類表前導(dǎo)符號為onne,menu在HTML5中有效*/

    4、css重置文本格式元素樣式（鼠標(biāo)效果）

    /**重置鏈接a標(biāo)簽**/

    a{color:#666;text-decoration:none}/*重置鏈接a標(biāo)簽樣式*/

    a:active,a:hover{text-decoration:none}/*重置鏈接a標(biāo)簽的鼠標(biāo)滑動效果*/

    /*取消a標(biāo)簽點(diǎn)擊后的虛線框*/

    a{outline:none;}

    a:active{star:expression(this.onFocus=this.blur());}

    /**設(shè)置頁面文字等在拖動鼠標(biāo)選中情況下的背景色與文字顏色**/

    /*

    ::selection{color:#fff;background-color:#4C6E78;}

    ::-moz-selection{color:#fff;background-color:#4C6E78;}

    */

    5、css重置表單元素樣式

    legend{color:#000;}/*forie6*/

    fieldset,img{border:0none}/*重置fieldset（表單分組）、圖片的邊框?yàn)?*/

    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}/*圖片在當(dāng)前行內(nèi)的垂直位置*/

    6、css重置表格元素樣式

    caption{display:none;}/*重置表格標(biāo)題為隱藏*/

    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}/*重置嵌套引用*/

以上是“css中如何重置樣式”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！