Global 全局樣式基本設置

 1.  默認字體設置,邊距設置html

     html { java

           font-family: sans-serif; /* 默認字體 */ web

           font-size: 100%; /* 在用戶調整窗口大小時,字體大小作相應調整。 */ chrome

           -ms-text-size-adjust: 100%; /* IE瀏覽器 */ 瀏覽器

          -webkit-text-size-adjust: 100%; /* FireFox瀏覽器 */ app

}ide

2.  去除默認邊距svg

     body{ 字體

        margin: 0; /* 外邊距 */ spa

        padding: 0; /* 內邊距 */

        border: 0; /* 邊框 */

}

3.   連接相關樣式

     a {

         text-decoration: none; /* 去除默認下劃線 */

}

     a:focus {

         outline:thin dotted; /* 處理「outline」在Chrome瀏覽器中和其它瀏覽器之間的不一致 */

}

      a:active, a:hover {

          outline: 0;

}

4.   排版相關樣式

     h1 {

         /* 使h1標籤在section標籤和article標籤的留白和字體樣式統一。可同時兼容Firefox 4+、Safari 5和Chrome等不一樣的瀏覽器 */

         font-size: 2em;

         margin: 0.67em 0;

}

    abbr[title] {

         border-bottom: 1px dotted; /* 解決首字母樣式在IE8/九、Safari 5和chrome瀏覽器中未定義的問題 */

}

     b, strong {

          font-weight: bold; /* 添加加粗樣式,應用於Firefox 4+、Safari 5和Chrome */

}

     dfn {

        font-size:italic; /* 添加斜體樣式,應用於Safari 5和chrome */

}

    hr {

        /* 解決其在Firefox中的兼容性問題 */

       -moz-box-sizing: content-box;

        box-sizing: content-box;

        height: 0;

}

  mark {

       /* 解決其在IE8/9中樣式未定義的問題 */

       background: #ff0;

       color: #000;

}

      code, kbd, pre, samp {

           /* 更正關聯字體在Safari 5和Chrome中的老式設置 */

         font-family: monospace, serif;

         font-size: 1em;

}

        pre {

              /* 提升pre標籤格式化文本在全部瀏覽器中的可讀性 */

              white-space: pre-wrap;

}  

        q {

           /* 設置相一致的引號類型 */

           quotes: "\201C" "\201D" "\2018" "\2019";

}

        small {

            /* 統一全部瀏覽器中字體大小不一致的兼容性問題 */

            font-size: 80%;

}  

         sub, sup {

              /* 在全部瀏覽器中,防止「sub」和「sup」標籤影響「line-height」屬性 */

              font-size: 75%;

             line-height: 0;

             position: relative;

            vertical-align: baseline;

}

    sup {

       top: -0.5em;

 }

    sub {

     bottom: -0.25em;

}

5.  內嵌文本相關樣式

    img {

      border: 0; /* 在IE8/9瀏覽器中,當img標籤中包含a標籤時,去除img邊框屬性。 */

}

   svg:not(:root) {

       overflow: hidden;

}

6.  表單文本相關樣式

fieldset {

     /* 定義一致的邊框、內邊距和外邊距 */

   border: 1px solid #c0c0c0;

    margin: 0 2px;

    padding: 0.35em 0.625em 0.75em;

}

    legend {

       border: 0; /* 更改「color」屬性在IE8/9瀏覽器中沒有被繼承的問題 */

      padding: 0; /* 去除外邊距,如此即便人們將字段集歸零也不會失去樣式 */

}

     button, input, select, textarea {

          font-family: inherit; /* 更改關聯字體屬性在IE8/9瀏覽器中沒有被繼承的問題 */

       font-size: 100%; /* 更改字體大小屬性在IE8/9瀏覽器中沒有被繼承的問題 */

      margin: 0; /* 調整邊距設置在Firefox 4+, Safari 5, 和 Chrome瀏覽器中的兼容性問題 */

}

button, input {

     line-height: normal; /* 調整Firefox 4+瀏覽器下,客戶端樣式表中設置了「!important」的「line-height」屬性的input表單 */

}

button, select {

text-transform: none; /**

* 調整「button」和「select」的「text-transform」繼承不一致性的問題 * 其餘表單控件元素不繼承「text-transform」屬性

* 修正「button」標籤在Chrome, Safari 5+, and IE 8+中的樣式繼承問題

* 修正「select」標籤在Firefox 4+ 和Opera中的樣式繼承問題 */

}

button, html input[type="button"], /* 避免webKit bug發生在Android 4.0.* 設備上,破壞原生「audio」和「video」控制組件 */

input[type="reset"], input[type="submit"] {

      -webkit-appearance: button; /* 改正iOS設備中「input」類型表單樣式不可用的問題 */

      cursor: pointer; /* 加強光標樣式在input表單和其餘表單的可用性和一致性 */

}

button[disabled], html input[disabled] { cursor: default; /* 爲禁用表單重設定默認光標樣式 */ }

input[type="checkbox"], input[type="radio"] {

     box-sizing: border-box; /* 調整IE 8/9中尺寸屬性設置爲「內容框」的盒子模型 */

padding: 0; /* 去除IE 8/9中的多餘的外邊距留白部分 */

}

input[type="search"] {

-webkit-appearance: textfield; /* 兼容Safari 5 and Chrome上 「searchfield」 上設置 「appearance」屬性 */

-moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 兼容Safari 5 and Chrome上 「border-box」 上設置 「box-sizing」屬性 */

box-sizing: content-box; }

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {

-webkit-appearance: none; /* 去除OS X系統上Safari 5和Chrome中容器內邊距和搜索取消按鈕屬性 */ }

button::-moz-focus-inner, input::-moz-focus-inner {

//Firefox 4+瀏覽器中,去除容器內邊距和邊框屬性 border: 0; padding: 0; }

textarea {

overflow: auto; /* IE 8/9中,去除默認垂直滾動條屬性 */ vertical-align: top; /* 提升全部瀏覽器中的文本可讀性和版式 */ }

相關文章
相關標籤/搜索