CSS通用样式

1、新建一个reset.css文件，代码如下： 

  

   

    

     

    
    

     

      @charset 
      "utf-8";
     
    
   

    

     

    
    

     

      /* CSS Document */
     
    
   

    

     

    
    

     

      /*Reset*/
     
    
   

    

     

    
    

     

      *{
      box-sizing:content-box;}
     
    
   

    

     

    
    

     

      body, 
      h1, 
      h2, 
      h3, 
      h4, 
      h5, 
      h6, 
      hr, 
      p, 
      blockquote, 
      /* structural elements 结构元素 */ 
      dl, 
      dt, 
      dd, 
      ul, 
      ol, 
      li, 
      /* list elements 列表元素 */ 
      pre, 
      /* text formatting elements 文本格式元素 */ 
      fieldset, 
      lengend, 
      button, 
      input, 
      textarea, 
      /* form elements 表单元素 */ 
      th, 
      td { 
      /* table elements 表格元素 */ 
      margin: 
      0; 
      padding: 
      0; }
     
    
   

    

     

    
    

     

      html,
      body{ 
      width:
      100%; 
      height:
      100%; 
      color:
      #6e6e6e; 
      font-family:
      '微软雅黑'}
     
    
   

    

     

    
    

     

      /* 设置默认字体 */
     
    
   

    

     

    
    

     

      body, 
      button, 
      input, 
      select, 
      textarea { 
      /* for ie */ 
      /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
     
    
   

    

     

    
    

     

      font: 
      14px/
      1 Tahoma, Helvetica, Arial, 
      "微软雅黑", sans-serif,; 
      /* 用 ascii 字符表示，使得在任何编码下都无问题 */  }
     
    
   

    

     

    
    

     

      h1 { 
      font-size: 
      18px; 
      /* 18px / 12px = 1.5 */  
      font-family:
      '微软雅黑'}
     
    
   

    

     

    
    

     

      h2 { 
      font-size: 
      24px; 
      font-weight:normal; 
      color:
      #323232; 
      font-family:
      '微软雅黑'}
     
    
   

    

     

    
    

     

      h3 { 
      font-size: 
      14px; 
      font-weight:normal; 
      font-family:
      '微软雅黑' }
     
    
   

    

     

    
    

     

      h4, 
      h5, 
      h6 { 
      font-size: 
      100%; 
      font-weight:normal; 
      font-family:
      '微软雅黑' }
     
    
   

    

     

    
    

     

      p{ 
      font-size:
      14px; 
      line-height:
      34px; 
      font-family:
      '微软雅黑'}
      /* 段落默认字号和行高 */
     
    
   

    

     

    
    

     

      address, 
      cite, 
      dfn, 
      em, 
      var { 
      font-style: normal; } 
      /* 将斜体扶正 */
     
    
   

    

     

    
    

     

      code, 
      kbd, 
      pre, 
      samp, 
      tt { 
      font-family: 
      "Courier New", Courier, monospace; } 
      /* 统一等宽字体 */
     
    
   

    

     

    
    

     

      small { 
      font-size: 
      12px; } 
      /* 小于 12px 的中文很难阅读，让 small 正常化 */
     
    
   

    

     

    
    

     

      /* 重置列表元素 */
     
    
   

    

     

    
    

     

      ul, 
      ol { 
      list-style: none; 
      font-family:
      '微软雅黑' }
     
    
   

    

     

    
    

     

      select{ 
      border-style:none;}
     
    
   

    

     

    
    

     

      /* 重置文本格式元素 */
     
    
   

    

     

    
    

     

      a { 
      text-decoration: none; 
      color:
      #6e6e6e; 
      font-size:
      44px; 
      outline:none; 
      font-family:
      '微软雅黑'}
     
    
   

    

     

    
    

     

      span{ 
      font-size:
      14px; 
      font-family:
      '微软雅黑'}
     
    
   

    

     

    
    

     

      a
      :hover { 
      text-decoration: none; }
     
    
   

    

     

    
    

     

      abbr
      [title], 
      acronym
      [title] { 
      /* 注：1.ie6 不支持 abbr; 2.这里用了属性选择符，ie6 下无效果 */ 
      border-bottom: 
      1px dotted; 
      cursor: help; }
     
    
   

    

     

    
    

     

      q
      :before, 
      q
      :after { 
      content: 
      ''; }
     
    
   

    

     

    
    

     

      /* 重置表单元素 */
     
    
   

    

     

    
    

     

      input{ 
      border:none;}
     
    
   

    

     

    
    

     

      legend { 
      color: 
      #000; } 
      /* for ie6 */
     
    
   

    

     

    
    

     

      fieldset, 
      img { 
      border: none; } 
      /* img 搭车：让链接里的 img 无边框 */
     
    
   

    

     

    
    

     

      /* 注：optgroup 无法扶正 */
     
    
   

    

     

    
    

     

      button, 
      input, 
      select, 
      textarea { 
      font-size: 
      100%; 
      /* 使得表单元素在 ie 下能继承字体大小 */ }
     
    
   

    

     

    
    

     

      /* 重置表格元素 */
     
    
   

    

     

    
    

     

      table { 
      border-collapse: collapse; 
      border-spacing: 
      0; 
      width:
      100%;}
     
    
   

    

     

    
    

     

      /* 重置 hr */
     
    
   

    

     

    
    

     

      hr { 
      border: none; 
      height: 
      1px; }
     
    
   

    

     

    
    

     

      /* 让非ie浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */
     
    
   

    

     

    
    

     

      html { 
      overflow-y: scroll;}
     
    
   

    

     

    
    

     

      *
      :focus {
      outline: none;} 
     
    
   

    

     

    
    

     

      /* 版心 */
     
    
   

    

     

    
    

     

      .w100{ 
      width:
      100%; 
      /*min-width:1080px;*/ 
      clear:both;}
     
    
   

    

     

    
    

     

      .w1200{ 
      width:
      1200px; 
      margin:
      0 auto;}
     
    
   

    

     

    
    

     

      .w1300{ 
      width:
      1300px; 
      margin:
      0 auto;}
     
    
   

    

     

    
    

     

      .w1000{ 
      width:
      1000px; 
      margin:
      0 auto;}
     
    
   

    

     

    
    

     

      .w1080{ 
      width:
      1080px; 
      margin:
      0 auto;}
     
    
   

    

     

    
    

     

      /*常用样式*/
     
    
   

    

     

    
    

     

      .fl{ 
      float:left;}
     
    
   

    

     

    
    

     

      .fr{ 
      float:right;}
     
    
   

    

     

    
    

     

      .tc{ 
      text-align:center;}
     
    
   

    

     

    
    

     

      .tr{ 
      text-align:right;}
     
    
   

    

     

    
    

     

      .tl{ 
      text-align:left;}
     
    
   

    

     

    
    

     

      .f12{ 
      font-size:
      12px;}
     
    
   

    

     

    
    

     

      .f14{ 
      font-size:
      14px;}
     
    
   

    

     

    
    

     

      .f15{ 
      font-size:
      15px;}
     
    
   

    

     

    
    

     

      .f16{ 
      font-size:
      16px;}
     
    
   

    

     

    
    

     

      .f18{ 
      font-size:
      18px;}
     
    
   

    

     

    
    

     

      .f20{ 
      font-size:
      20px;}
     
    
   

    

     

    
    

     

      .f22{ 
      font-size:
      22px;}
     
    
   

    

     

    
    

     

      .f24{ 
      font-size:
      24px;}
     
    
   

    

     

    
    

     

      .f36{ 
      font-size:
      36px;}
     
    
   

    

     

    
    

     

      .f30{ 
      font-size:
      30px;}
     
    
   

    

     

    
    

     

      .f32{ 
      font-size:
      32px;}
     
    
   

    

     

    
    

     

      .lh24{ 
      line-height:
      24px;}
     
    
   

    

     

    
    

     

      .lh32{ 
      line-height:
      32px;}
     
    
   

    

     

    
    

     

      .lh36{ 
      line-height:
      36px;}
     
    
   

    

     

    
    

     

      .mt14{ 
      margin-top:
      14px;} 
     
    
   

    

     

    
    

     

      .mt20{ 
      margin-top:
      20px;}
     
    
   

    

     

    
    

     

      .t2{ 
      text-indent:
      2em;}
     
    
   

    

     

    
    

     

      .t_ul{ 
      text-decoration:underline;}
     
    
   

    

     

    
    

     

      .blue{ 
      color:
      #0568a4;}
     
    
   

    

     

    
    

     

      .blue_ul{ 
      color:
      #0568a4; 
      font-size:
      16px; 
      text-decoration:underline;}
     
    
   

    

     

    
    

     

      .red{ 
      color:
      #e20000; 
      font-size:
      14px;}
     
    
   

    

     

    
    

     

      .ma{ 
      margin:
      0 auto;}
     
    
   

    

     

    
    

     

      select {
     
    
   

    

     

    
    

     
  
      /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
     
    
   

    

     

    
    

     
  
      border: solid 
      1px 
      #f8f9fb;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
  
      /*很关键：将默认的select选择框样式清除*/
     
    
   

    

     

    
    

     
  
      appearance:none;
     
    
   

    

     

    
    

     
  
      -moz-appearance:none;
     
    
   

    

     

    
    

     
  
      -webkit-appearance:none;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
  
      /*在选择框的最右侧中间显示小箭头图片*/
     
    
   

    

     

    
    

     
  
      background:
      url(../images/arrawDown.png) no-repeat scroll 
      90% center;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
  
      /*为下拉小箭头留出一点位置，避免被文字覆盖*/
     
    
   

    

     

    
    

     
  
      padding-right: 
      14px;
     
    
   

    

     

    
    

     

      }
      /* 重置文本格式元素 */
     
    
   

    

     

    
    

     

      .mt_userMessage 
      select{ 
      background:
      url(../images/arrawDown02.png) no-repeat scroll right center;}
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
     
    
   

    

     

    
    

     

      ::-webkit-scrollbar  
     
    
   

    

     

    
    

     

      {  
     
    
   

    

     

    
    

     
    
      width: 
      6px;  
     
    
   

    

     

    
    

     
    
      height: 
      6px;  
     
    
   

    

     

    
    

     
    
      background-color: 
      #F5F5F5;  
     
    
   

    

     

    
    

     

      }  
     
    
   

    

     

    
    

     
  
     
    
   

    

     

    
    

     

      /*定义滚动条轨道 内阴影+圆角*/  
     
    
   

    

     

    
    

     

      ::-webkit-scrollbar-track  
     
    
   

    

     

    
    

     

      {  
     
    
   

    

     

    
    

     
    
      -webkit-box-shadow: inset 
      0 
      0 
      6px 
      rgba(
      0,
      0,
      0,
      0.3);  
     
    
   

    

     

    
    

     
    
      border-radius: 
      10px;  
     
    
   

    

     

    
    

     
    
      background-color: 
      #F5F5F5;  
     
    
   

    

     

    
    

     

      }  
     
    
   

    

     

    
    

     
  
     
    
   

    

     

    
    

     

      /*定义滑块 内阴影+圆角*/  
     
    
   

    

     

    
    

     

      ::-webkit-scrollbar-thumb  
     
    
   

    

     

    
    

     

      {  
     
    
   

    

     

    
    

     
    
      border-radius: 
      10px;  
     
    
   

    

     

    
    

     
    
      -webkit-box-shadow: inset 
      0 
      0 
      6px 
      rgba(
      0,
      0,
      0,.
      3);  
     
    
   

    

     

    
    

     
    
      background-color: 
      #ccc;  
     
    
   

    

     

    
    

     

      }
     
    
  

2、在页面上使用外部样式调用：

<link rel="stylesheet" href="../css/reset.css" type="text/css">