css中重置樣式的方法有哪些

小編給大家分享一下css中重置樣式的方法有哪些，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

在網頁設計開發時，讓人最頭疼的莫過于讓頁面兼容各大瀏覽器，準確些是兼容它們“默認”的CSS樣式表。那么，“抹掉”這些css默認樣式表成了首要問題，也就有了CSS默認樣式表重置一說。為了讓頁面在各不同瀏覽器之間顯示效果一致，清除和重置css默認樣式就變成必需要做的事情了。

下面就給大家分享一些常用css默認樣式重置代碼，僅供大家參考。

1、css初始化標簽在所有瀏覽器中的margin、padding值（內外邊距）

body, h2, h3, h4, h5, h6, h7, hr, p, blockquote, /* structural elements 結構元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表單元素 */
th, td /* table elements 表格元素 */ {
  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重置樣式標簽的樣式 **/
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: courier new, 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; } /* for ie6 */
fieldset,img {border:0 none}  /* 重置fieldset（表單分組）、圖片的邊框為0*/
button, input, select, textarea { 
     font-size: 100%; /* 使得表單元素在ie下能繼承字體大小， */
     vertical-align:middle;  /* 重置表單控件垂直居中*/
} 
/* 注：optgroup 無法扶正 */

/* 重置表單button按鈕效果 */
button {border:0 none;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}  /* 重置嵌套引用*/

看完了這篇文章，相信你對css中重置樣式的方法有哪些有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！