html默認css樣式的標簽及去除(全局)

1.標簽的默認樣式和清除默認樣式（統一全局樣式）的代碼

大多數標簽都有自己的默認樣式，比如遇到的body默認外邊距，另外本例中ul前的圓點及左側的內邊距，另h1-h6字體大小各不相同，em默認為斜體，strong表示粗體。正因為有這些默認樣式，一個設計合理的頁面，即使沒有加載樣式，也能讓用戶很容易閱讀。但此時這些默認樣式對我們沒用，所以需要清除掉，為了方便，建議用標簽重定義方式，這樣可以很簡單地把全局的樣式給統一起來。另外頁面中的圖片添加鏈接后會默認添加個邊框，ul默認情況下會在列表前添加圓點，這些都是需要去掉的。

1.  
   body, ul, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd {
2.  
       margin: 0px;
3.  
       padding: 0px;
4.  
       font-size: 12px;
5.  
       font-weight: normal; }
6.  
   ul { list-style: none; }
7.  
   img { border-style: none; }

2.css去掉瀏覽器默認樣式

1.  
   /** 清除內外邊距 **/
2.  
   body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 結構元素 */
3.  
   dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
4.  
   pre, /* text formatting elements 文本格式元素 */
5.  
   form, fieldset, legend, button, input, textarea, /* form elements 表單元素 */
6.  
   th, td /* table elements 表格元素 */ {
7.  
   margin: 0;
8.  
   padding: 0;
9.  
   }
10.  
    /** 設置默認字體 **/
11.  
    body,
12.  
    button, input, select, textarea /* for ie */ {
13.  
    font: 14px/1.5 tahoma, \5b8b\4f53, sans-serif;
14.  
    }
15.  
    h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal;}
16.  
    address, cite, dfn, em, var { font-style: normal; } /* 將斜體扶正 */
17.  
    code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 統一等寬字體 */
18.  
    small { font-size: 12px; } /* 小於 12px 的中文很難閱讀, 讓 small 正常化 */
19.  
    /** 重置列表元素 **/
20.  
    ul, ol { list-style: none; }
21.  
    /** 重置文本格式元素 **/
22.  
    a { text-decoration: none; }
23.  
    a:hover { text-decoration: underline; }
24.  
    sup { vertical-align: text-top; } /* 重置, 減少對行高的影響 */
25.  
    sub { vertical-align: text-bottom; }
26.  
    /** 重置表單元素 **/
27.  
    legend { color: #000; } /* for ie6 */
28.  
    fieldset, img { border: 0; } /* img 搭車：讓鏈接里的 img 無邊框 */
29.  
    button, input, select, textarea { font-size: 100%; } /* 使得表單元素在 ie 下能繼承字體大小 */
30.  
    /* 注：optgroup 無法扶正 */
31.  
    /** 重置表格元素 **/
32.  
    table { border-collapse: collapse; border-spacing: 0; }
33.  
    /* 重置 HTML5 元素 */
34.  
    article, aside, details, figcaption, figure, footer,header, hgroup, menu, nav, section,
35.  
    summary, time, mark, audio, video {
36.  
    display: block;
37.  
    margin: 0;
38.  
    padding: 0;
39.  
    }
40.  
    mark { background: #ff0; }
41.  
    /* 設置placeholder的默認樣式 */
42.  
    :-moz-placeholder {
43.  
    color: #ddd;
44.  
    opacity: 1;
45.  
    }
46.  
    ::-moz-placeholder {
47.  
    color: #ddd;
48.  
    opacity: 1;
49.  
    }
50.  
    input:-ms-input-placeholder {
51.  
    color: #ddd;
52.  
    opacity: 1;
53.  
    }
54.  
    input::-webkit-input-placeholder {
55.  
    color: #ddd;
56.  
    opacity: 1;
57.  
    }

3.<a>標簽

我們在平時a標簽里面嵌套一些字體圖片，這是很常見的。但是我們並不需要點擊時候a標簽里面的字體變色。這個小知識點，很簡單：css樣式:
 

1.  
   a{
2.  
   text-decoration:none;
3.  
   color:#333;
4.  
   }

記住這個color一定要寫（可自己設定）

這樣你再點擊的時候字體就會是這個color的顏色。

<a>標簽的四中狀態

1.  
   a:hover, a:visited, a:link, a:active {
2.  
   // 做到只設置一次，就可以使所有a標簽的四種狀態都和本身顏色保持一致，樣式代碼自己寫
3.  
   }

4.<input>標簽

1.  
   input{
2.  
   border: none;
3.  
   appearance:none;
4.  
   -moz-appearance:none;
5.  
   outline:none;//input標簽聚焦不出現默認邊框:
6.  
   -webkit-appearance: none;//用於IOS下移除原生樣式
7.  
   }
8.  
   // or:
9.  
   input:focus{ outline:none; }//input標簽聚焦不出現默認邊框:
10.  
    border: none; appearance:none; -moz-appearance:none; outline:none;//input標簽聚焦不出現默認邊框: -webkit-appearance: none;//用於IOS下移除原生樣式 } //or: input:focus{ outline:none; }//input標簽聚焦不出現默認邊框:

input標簽placeholder樣式重設:

1.  
   :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:#3c8bee ;; opacity:1; font-size: 0.25rem;text-align: center; }
2.  
   ::-moz-placeholder { /* Mozilla Firefox 19+ */ color:#3c8bee ;; opacity:1; font-size: 0.25rem;text-align: center; }
3.  
   input:-ms-input-placeholder{ color:#3c8bee ;; opacity:1; font-size: 0.25rem;text-align: center; }
4.  
   input::-webkit-input-placeholder{ color:#3c8bee ;; opacity:1; font-size: 0.25rem;text-align: center; }

5.清除<ul><ol>的默認樣式

1.  
   ul, ol, {
2.  
   　　margin: 0;
3.  
   　　padding: 0;
4.  
   　　list-style: n；
5.  
   }

6.<img>

1.  
   img {
2.  
   　　vertical-align：top；
3.  
   　　border：none;
4.  
   }

7.<em><strong>

1.  
   em,strong {
2.  
   　　font-style:normal;
3.  
   　　font-weight:normal;
4.  
   }

8.button按鈕

1.  
   .button{
2.  
   border:0;
3.  
   outline: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; list-style: none; overflow-wrap: break-word; height: 22px;">

    

   outline:none;
4.  
   -webkit-appearance: none;//用於IOS下移除原生樣式
5.  
   }

9.select 標簽

1.  
   select {
2.  
   border: none;
3.  
   appearance:none;
4.  
   -moz-appearance:none;
5.  
   -webkit-appearance:none;
6.  
   /*在選擇框的最右側中間顯示小箭頭圖片*/
7.  
   background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;
8.  
   padding-right: 14px;
9.  
   }

10.清除ie瀏覽器input自帶的icon

1.  
   ::-ms-clear,::-ms-reveal{
2.  
   display: none;
3.  
   }

11.字體小於12px

1.  
   font-size: 12px;
2.  
   -webkit-transform: scale(0.84);
3.  
   -ms-transform: scale(0.84);
4.  
   -moz-transform: scale(0.84);
5.  
   -o-transform: scale(0.84);
6.  
   transform: scale(0.84);
7.  
   -webkit-text-size-adjust: none;