zoukankan      html  css  js  c++  java
  • css初始化表(normalize.css)

    为什么要初始化CSS?

      建站老手都知道,这是为了考虑到浏览器的兼容问题,其实不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面差异。当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。最简单的初始化方法就是: * {padding: 0; margin: 0;} 。有很多人也是这样写的。这确实很简单,但有人就会感到疑问:*号这样一个通用符在编写代码的时候是快,但如果网站很大,CSS样式表文件很大,这样写的话,他会把所有的标签都初始化一遍,这样就大大的加强了网站运行的负载,会使网站加载的时候需要很长一段时间。写过css的都知道每个网页引进的css首先都需要初始化,而出名的css reset有YUI css reset(QQ、淘宝等都出现他的影子),业内用的最多的还有Erik Meyer’s CSS Reset。CSS初始化是指重设浏览器的样式。不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一。如果没对CSS初始化往往会出现浏览器之间的页面差异。每次新开发网站或新网页时候通过初始化CSS样式的属性,为我们将用到的CSS或html标签更加方便准确,使得我们开发网页内容时更加方便简洁,同时减少CSS代码量,节约网页下载时间。

    雅虎工程师提供的CSS初始化示例代码

    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;
    }
    
    body {
    background: #fff;
    color: #555;
    font-size: 14px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    
    td, th, caption {
    font-size: 14px;
    }
    
    h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    font-size: 100%;
    }
    
    address, caption, cite, code, dfn, em, strong, th, var {
    font-style: normal;
    font-weight: normal;
    }
    
    a {
    color: #555;
    text-decoration: none;
    }
    
    a:hover {
    text-decoration: underline;
    }
    
    img {
    border: none;
    }
    
    ol, ul, li {
    list-style: none;
    }
    
    input, textarea, select, button {
    font: 14px Verdana, Helvetica, Arial, sans-serif;
    }
    
    table {
    border-collapse: collapse;
    }
    
    html {
    overflow-y: scroll;
    }
    
    .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }
    
    .clearfix {
    *zoom: 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
    }
    
    body {
    font: 12px "宋体", "Arial Narrow", HELVETICA;
    background: #fff;
    -webkit-text-size-adjust: 100%;
    }
    
    a {
    color: #2d374b;
    text-decoration: none
    }
    
    a:hover {
    color: #cd0200;
    text-decoration: underline
    }
    
    em {
    font-style: normal
    }
    
    li {
    list-style: none
    }
    
    img {
    border: 0;
    vertical-align: middle
    }
    
    table {
    border-collapse: collapse;
    border-spacing: 0
    }
    
    p {
    word-wrap: break-word
    }

    新浪官网 样式初始化

    body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img, div {
    margin: 0;
    padding: 0;
    border: 0;
    }
    
    body {
    background: #fff;
    color: #333;
    font-size: 12px;
    margin-top: 5px;
    font-family: "SimSun", "宋体", "Arial Narrow";
    }
    
    ul, ol {
    list-style-type: none;
    }
    
    select, input, img, select {
    vertical-align: middle;
    }
    
    a {
    text-decoration: none;
    }
    
    a:link {
    color: #009;
    }
    
    a:visited {
    color: #800080;
    }
    
    a:hover, a:active, a:focus {
    color: #c00;
    text-decoration: underline;
    }

    淘宝官网 样式初始化

    body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
        margin: 0;
        padding: 0;
    }
    
    body, button, input, select, textarea {
        font: 12px/1.5 tahoma, arial, \5b8b\4f53;
    }
    
    h1, h2, h3, h4, h5, h6 {
        font-size: 100%;
    }
    
    address, cite, dfn, em, var {
        font-style: normal;
    }
    
    code, kbd, pre, samp {
        font-family: couriernew, courier, monospace;
    }
    
    small {
        font-size: 12px;
    }
    
    ul, ol {
        list-style: none;
    }
    
    a {
        text-decoration: none;
    }
    
    a:hover {
        text-decoration: underline;
    }
    
    sup {
        vertical-align: text-top;
    }
    
    sub {
        vertical-align: text-bottom;
    }
    
    legend {
        color: #000;
    }
    
    fieldset, img {
        border: 0;
    }
    
    button, input, select, textarea {
        font-size: 100%;
    }
    
    table {
        border-collapse: collapse;
        border-spacing: 0;
    } 

    网易官网 样式初始化

    html {
        overflow-y: scroll;
    }
    
    body {
        margin: 0;
        padding: 29 px00;
        font: 12px "\5B8B\4F53", sans-serif;
        background: #ffffff;
    }
    
    div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote, p {
        padding: 0;
        margin: 0;
    }
    
    table, td, tr, th {
        font-size: 12px;
    }
    
    li {
        list-style-type: none;
    }
    
    img {
        vertical-align: top;
        border: 0;
    }
    
    ol, ul {
        list-style: none;
    }
    
    h1, h2, h3, h4, h5, h6 {
        font-size: 12px;
        font-weight: normal;
    }
    
    address, cite, code, em, th {
        font-weight: normal;
        font-style: normal;
    } 
  • 相关阅读:
    Sprinig.net 双向绑定 Bidirectional data binding and data model management 和 UpdatePanel
    Memcached是什么
    Spring.net 网络示例 codeproject
    jquery.modalbox.show 插件
    UVA 639 Don't Get Rooked
    UVA 539 The Settlers of Catan
    UVA 301 Transportation
    UVA 331 Mapping the Swaps
    UVA 216 Getting in Line
    UVA 10344 23 out of 5
  • 原文地址:https://www.cnblogs.com/ssjd/p/12909144.html
Copyright © 2011-2022 走看看