zoukankan      html  css  js  c++  java
  • css网页重置样式表(多版本)

    Eric reset.css

     1 html, body, div, span, applet, object, iframe, 
     2 h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
     3 a, abbr, acronym, address, big, cite, code, 
     4 del, dfn, em, font, img, ins, kbd, q, s, samp, 
     5 small, strike, strong, sub, sup, tt, var, 
     6 dl, dt, dd, ol, ul, li, 
     7 fieldset, form, label, legend, 
     8 table, caption, tbody, tfoot, thead, tr, th, td { 
     9 margin: 0; 
    10 padding: 0; 
    11 border: 0; 
    12 outline: 0; 
    13 font-weight: inherit; 
    14 font-style: inherit; 
    15 font-size: 100%; 
    16 font-family: inherit; 
    17 vertical-align: baseline; 
    18 } 
    19 /* remember to define focus styles! */ 
    20 :focus { 
    21 outline: 0; 
    22 } 
    23 body { 
    24 line-height: 1; 
    25 color: black; 
    26 background: white; 
    27 } 
    28 ol, ul { 
    29 list-style: none; 
    30 } 
    31 /* tables still need 'cellspacing="0"' in the markup */ 
    32 table { 
    33 border-collapse: separate; 
    34 border-spacing: 0; 
    35 } 
    36 caption, th, td { 
    37 text-align: left; 
    38 font-weight: normal; 
    39 } 
    40 blockquote:before, blockquote:after, 
    41 q:before, q:after { 
    42 content: ""; 
    43 } 
    44 blockquote, q { 
    45 quotes: "" ""; 
    46 } 
    47 
    48 /*Eric Meyer在他的网站也给出了一个新的写法,在文中他还提到了 Internet Explorer 中解决 inherit 的问题(我研究之后也想简单写一下),值得研究(查看原文:Reset Reloaded)。其实这两个reset.css差别并不大,可以选择其中之一或者合并使用。 
    49 reset.css是每个页面都必须的样式文件(或者你已经把它内置到相关的CSS文件中了),是我们实现跨浏览器设计的不可缺少的一环。 
    50 原文连接:http://www.dudo.org/article.asp?id=243*/

    Normailze.css

      1 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
      2 
      3 /* Document
      4    ========================================================================== */
      5 
      6 /**
      7  * 1. Correct the line height in all browsers.
      8  * 2. Prevent adjustments of font size after orientation changes in iOS.
      9  */
     10 
     11 html {
     12   line-height: 1.15; /* 1 */
     13   -webkit-text-size-adjust: 100%; /* 2 */
     14 }
     15 
     16 /* Sections
     17    ========================================================================== */
     18 
     19 /**
     20  * Remove the margin in all browsers.
     21  */
     22 
     23 body {
     24   margin: 0;
     25 }
     26 
     27 /**
     28  * Render the `main` element consistently in IE.
     29  */
     30 
     31 main {
     32   display: block;
     33 }
     34 
     35 /**
     36  * Correct the font size and margin on `h1` elements within `section` and
     37  * `article` contexts in Chrome, Firefox, and Safari.
     38  */
     39 
     40 h1 {
     41   font-size: 2em;
     42   margin: 0.67em 0;
     43 }
     44 
     45 /* Grouping content
     46    ========================================================================== */
     47 
     48 /**
     49  * 1. Add the correct box sizing in Firefox.
     50  * 2. Show the overflow in Edge and IE.
     51  */
     52 
     53 hr {
     54   box-sizing: content-box; /* 1 */
     55   height: 0; /* 1 */
     56   overflow: visible; /* 2 */
     57 }
     58 
     59 /**
     60  * 1. Correct the inheritance and scaling of font size in all browsers.
     61  * 2. Correct the odd `em` font sizing in all browsers.
     62  */
     63 
     64 pre {
     65   font-family: monospace, monospace; /* 1 */
     66   font-size: 1em; /* 2 */
     67 }
     68 
     69 /* Text-level semantics
     70    ========================================================================== */
     71 
     72 /**
     73  * Remove the gray background on active links in IE 10.
     74  */
     75 
     76 a {
     77   background-color: transparent;
     78 }
     79 
     80 /**
     81  * 1. Remove the bottom border in Chrome 57-
     82  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
     83  */
     84 
     85 abbr[title] {
     86   border-bottom: none; /* 1 */
     87   text-decoration: underline; /* 2 */
     88   text-decoration: underline dotted; /* 2 */
     89 }
     90 
     91 /**
     92  * Add the correct font weight in Chrome, Edge, and Safari.
     93  */
     94 
     95 b,
     96 strong {
     97   font-weight: bolder;
     98 }
     99 
    100 /**
    101  * 1. Correct the inheritance and scaling of font size in all browsers.
    102  * 2. Correct the odd `em` font sizing in all browsers.
    103  */
    104 
    105 code,
    106 kbd,
    107 samp {
    108   font-family: monospace, monospace; /* 1 */
    109   font-size: 1em; /* 2 */
    110 }
    111 
    112 /**
    113  * Add the correct font size in all browsers.
    114  */
    115 
    116 small {
    117   font-size: 80%;
    118 }
    119 
    120 /**
    121  * Prevent `sub` and `sup` elements from affecting the line height in
    122  * all browsers.
    123  */
    124 
    125 sub,
    126 sup {
    127   font-size: 75%;
    128   line-height: 0;
    129   position: relative;
    130   vertical-align: baseline;
    131 }
    132 
    133 sub {
    134   bottom: -0.25em;
    135 }
    136 
    137 sup {
    138   top: -0.5em;
    139 }
    140 
    141 /* Embedded content
    142    ========================================================================== */
    143 
    144 /**
    145  * Remove the border on images inside links in IE 10.
    146  */
    147 
    148 img {
    149   border-style: none;
    150 }
    151 
    152 /* Forms
    153    ========================================================================== */
    154 
    155 /**
    156  * 1. Change the font styles in all browsers.
    157  * 2. Remove the margin in Firefox and Safari.
    158  */
    159 
    160 button,
    161 input,
    162 optgroup,
    163 select,
    164 textarea {
    165   font-family: inherit; /* 1 */
    166   font-size: 100%; /* 1 */
    167   line-height: 1.15; /* 1 */
    168   margin: 0; /* 2 */
    169 }
    170 
    171 /**
    172  * Show the overflow in IE.
    173  * 1. Show the overflow in Edge.
    174  */
    175 
    176 button,
    177 input { /* 1 */
    178   overflow: visible;
    179 }
    180 
    181 /**
    182  * Remove the inheritance of text transform in Edge, Firefox, and IE.
    183  * 1. Remove the inheritance of text transform in Firefox.
    184  */
    185 
    186 button,
    187 select { /* 1 */
    188   text-transform: none;
    189 }
    190 
    191 /**
    192  * Correct the inability to style clickable types in iOS and Safari.
    193  */
    194 
    195 button,
    196 [type="button"],
    197 [type="reset"],
    198 [type="submit"] {
    199   -webkit-appearance: button;
    200 }
    201 
    202 /**
    203  * Remove the inner border and padding in Firefox.
    204  */
    205 
    206 button::-moz-focus-inner,
    207 [type="button"]::-moz-focus-inner,
    208 [type="reset"]::-moz-focus-inner,
    209 [type="submit"]::-moz-focus-inner {
    210   border-style: none;
    211   padding: 0;
    212 }
    213 
    214 /**
    215  * Restore the focus styles unset by the previous rule.
    216  */
    217 
    218 button:-moz-focusring,
    219 [type="button"]:-moz-focusring,
    220 [type="reset"]:-moz-focusring,
    221 [type="submit"]:-moz-focusring {
    222   outline: 1px dotted ButtonText;
    223 }
    224 
    225 /**
    226  * Correct the padding in Firefox.
    227  */
    228 
    229 fieldset {
    230   padding: 0.35em 0.75em 0.625em;
    231 }
    232 
    233 /**
    234  * 1. Correct the text wrapping in Edge and IE.
    235  * 2. Correct the color inheritance from `fieldset` elements in IE.
    236  * 3. Remove the padding so developers are not caught out when they zero out
    237  *    `fieldset` elements in all browsers.
    238  */
    239 
    240 legend {
    241   box-sizing: border-box; /* 1 */
    242   color: inherit; /* 2 */
    243   display: table; /* 1 */
    244   max-width: 100%; /* 1 */
    245   padding: 0; /* 3 */
    246   white-space: normal; /* 1 */
    247 }
    248 
    249 /**
    250  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
    251  */
    252 
    253 progress {
    254   vertical-align: baseline;
    255 }
    256 
    257 /**
    258  * Remove the default vertical scrollbar in IE 10+.
    259  */
    260 
    261 textarea {
    262   overflow: auto;
    263 }
    264 
    265 /**
    266  * 1. Add the correct box sizing in IE 10.
    267  * 2. Remove the padding in IE 10.
    268  */
    269 
    270 [type="checkbox"],
    271 [type="radio"] {
    272   box-sizing: border-box; /* 1 */
    273   padding: 0; /* 2 */
    274 }
    275 
    276 /**
    277  * Correct the cursor style of increment and decrement buttons in Chrome.
    278  */
    279 
    280 [type="number"]::-webkit-inner-spin-button,
    281 [type="number"]::-webkit-outer-spin-button {
    282   height: auto;
    283 }
    284 
    285 /**
    286  * 1. Correct the odd appearance in Chrome and Safari.
    287  * 2. Correct the outline style in Safari.
    288  */
    289 
    290 [type="search"] {
    291   -webkit-appearance: textfield; /* 1 */
    292   outline-offset: -2px; /* 2 */
    293 }
    294 
    295 /**
    296  * Remove the inner padding in Chrome and Safari on macOS.
    297  */
    298 
    299 [type="search"]::-webkit-search-decoration {
    300   -webkit-appearance: none;
    301 }
    302 
    303 /**
    304  * 1. Correct the inability to style clickable types in iOS and Safari.
    305  * 2. Change font properties to `inherit` in Safari.
    306  */
    307 
    308 ::-webkit-file-upload-button {
    309   -webkit-appearance: button; /* 1 */
    310   font: inherit; /* 2 */
    311 }
    312 
    313 /* Interactive
    314    ========================================================================== */
    315 
    316 /*
    317  * Add the correct display in Edge, IE 10+, and Firefox.
    318  */
    319 
    320 details {
    321   display: block;
    322 }
    323 
    324 /*
    325  * Add the correct display in all browsers.
    326  */
    327 
    328 summary {
    329   display: list-item;
    330 }
    331 
    332 /* Misc
    333    ========================================================================== */
    334 
    335 /**
    336  * Add the correct display in IE 10+.
    337  */
    338 
    339 template {
    340   display: none;
    341 }
    342 
    343 /**
    344  * Add the correct display in IE 10.
    345  */
    346 
    347 [hidden] {
    348   display: none;
    349 }

    Reset.css

     1 body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,figure,figcaption,main,footer,nav,header,fieldset,legend,input,textarea,select{margin:0;padding:0} 
     2 body{font:12px "宋体","Arial Narrow",HELVETICA;background:#fff;}
     3 a{color:#172c45;text-decoration:none} 
     4 a:hover{color:#cd0200;/*text-decoration:underline*/} 
     5 em{font-style:normal}
     6 li{list-style:none}
     7 img{border:0;vertical-align:middle;display:inline-block;} 
     8 table{border-collapse:collapse;border-spacing:0;}
     9 p{word-wrap:break-word}
    10 .ind{text-indent:2em} 
    11 .ind10{text-indent:10px;}
    12 .noborder{border:0;}
    13  
    14 .clear{zoom:1}
    15 .clear:after{content:"."; display:block; clear:both; height:0; visibility:hidden;}

    sina reset.css

    1 html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:; }
    2 fieldset, img { border:none; }
    3 img{ vertical-align:top;}
    4 address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; }
    5 ul, ol { list-style:none; } 
    6 body { color:#333; font:16px/20px "SimSun","宋体","Arial Narrow",HELVETICA; background:#fff;/* overflow-y:scroll;*/ overflow-x:hidden;}
    7 a { color:#666; text-decoration:none; }
    8 a:visited { color:#666; }
    9 a,input{outline:none;}

    Sohu reset.css

    1 body{font-family:"5B8B4F53","Arial Narrow",HELVETICA;text-align:center;margin:0 auto;padding:0;background:#FFF;font-size:12px;color:#333;} 
    2 body > div{text-align:center;margin-right:auto;margin-left:auto;} 
    3 div,form,ul,ol,li,span,p{margin:0;padding:0;border:0;}
    4 img,a img{border:0;margin:0;padding:0;}
    5 h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-size:12px;font-weight:normal;}
    6 ul,ol,li{list-style:none}
    7 table,td,input{font-size:12px;padding:0} /* 默认链接颜色 */ 
    8 a{outline-style:none;color:#333;text-decoration:none}
    9 a:hover{color:#c00;text-decoration:underline;}

    Tencent reset.css

     1 body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} 
     2 body{font:12px "宋体","Arial Narrow",HELVETICA;background:#fff;}
     3 a{color:#172c45;text-decoration:none} 
     4 a:hover{color:#cd0200;text-decoration:underline} 
     5 em{font-style:normal}
     6 li{list-style:none}
     7 img{border:0;vertical-align:middle} 
     8 table{border-collapse:collapse;border-spacing:0}
     9 p{word-wrap:break-word}
    10 .ind{text-indent:2em} 
    11 .ind10{text-indent:10px;}
    12 .noborder{border:0;}
    13  
    14 .clear{zoom:1}
    15 .clear:after{content:"."; display:block; clear:both; height:0; visibility:hidden;}

    Yahoo!reset.css

     1 html{color:#000;background:#FFF;} 
     2 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form, 
     3 fieldset,input,textarea,p,blockquote,th,td { 
     4 margin:0; 
     5 padding:0; 
     6 } 
     7 table { 
     8 border-collapse:collapse; 
     9 border-spacing:0; 
    10 } 
    11 fieldset,img { 
    12 border:0; 
    13 } 
    14 address,caption,cite,code,dfn,em,strong,th,var { 
    15 font-style:normal; 
    16 font-weight:normal; 
    17 } 
    18 ol,ul { 
    19 list-style:none; 
    20 } 
    21 caption,th { 
    22 text-align:left; 
    23 } 
    24 h1,h2,h3,h4,h5,h6 { 
    25 font-size:100%; 
    26 font-weight:normal; 
    27 } 
    28 q:before,q:after { 
    29 content:''; 
    30 } 
    31 abbr,acronym { border:0; 
    32 } 

    Douyou reset.css

    @charset "utf-8";
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0}fieldset,img{border:0}:focus{outline:0}address,caption,cite,code,dfn,em,th,var,optgroup{font-style:normal;font-weight:normal}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}abbr,acronym{border:0;font-variant:normal}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}code,kbd,samp,tt{font-size:100%}input,button,textarea,select{*font-size:100%}body{line-height:1.5}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}caption,th{text-align:left}sup,sub{font-size:100%;vertical-align:baseline}:link,:visited ,ins{text-decoration:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
    /* CSS Document */
    * {margin: 0;padding: 0;}body,html {overflow-y: auto;overflow-x: hidden;}
    .clearfix{margin-right:auto;margin-left:auto;*zoom:1}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0}.clearfix:after{clear:both}
    b,em,i{font-style:normal;font-weight:normal;}
    body{margin:0;font-family:"Microsoft Yahei",Arial,Tahoma,Helvetica,"SimSun","Hiragino Sans GB",sans-serif;font-size:14px;line-height:20px;color:#333;position:relative;}
    html,body{width:100%;min-width:1200px;margin:0 auto;overflow-x:hidden;min-height:1000px;background-color:#f4f4f5;}
    button,input,select,textarea,th{background:#fff;font-size:12px;line-height:1.5em;font-family:"Microsoft Yahei",Arial,Tahoma,Helvetica,"SimSun","Hiragino Sans GB",sans-serif;}
    a{color:#333;text-decoration:none;}
    a:hover,a:focus{-webkit-transition:color 150ms ease-in 0ms,background-color 150ms ease-in 150ms;-moz-transition:color 150ms ease-in 0ms,background-color 150ms ease-in 150ms;-ms-transition:color 150ms ease-in 0ms,background-color 150ms ease-in 150ms;-o-transition:color 150ms ease-in 0ms,background-color 150ms ease-in 150ms;transition:color 150ms ease-in 0ms,background-color 150ms ease-in 150ms;}
    .rotate360:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);}
    a:hover{color:#0091ff;}
    .rotate360{-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}
    .fl{float:left;}
    .fr{float:right;}
    .w1200{width:1200px;margin:0 auto;}
    .w1168{width:1168px;margin:0 auto;}
    .h30{width:100%;height:30px;}
    .h20{width:100%;height:20px;}
    .h16{width:100%;height:16px;}
    .h12{width:100%;height:12px;}
    .hide{display:none;}
    a,img,i{display:inline-block;cursor: pointer;}
    img{vertical-align: top;border: 0;}
    .bg{background-color: #fff;}
  • 相关阅读:
    工作之经验之谈
    周记 2015.05.16
    NIO 02 (转)
    NIO 01 (转)
    周记 2015.05.09
    周记 2015.05.04
    JVM 内存知识总结
    Git内部原理(1)
    c/c++[001]:start
    CNN Mini-Fashion数据集以及Pytorch初体验
  • 原文地址:https://www.cnblogs.com/liguanlong/p/12005914.html
Copyright © 2011-2022 走看看