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;