zoukankan      html  css  js  c++  java
  • Global 全局样式基本设置

     1.  默认字体设置,边距设置

         html {

               font-family: sans-serif; /* 默认字体 */

               font-size: 100%; /* 在用户调整窗口大小时,字体大小做相应调整。 */

               -ms-text-size-adjust: 100%; /* IE浏览器 */

              -webkit-text-size-adjust: 100%; /* FireFox浏览器 */

    }

    2.  去除默认边距

         body{

            margin: 0; /* 外边距 */

            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/9、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; /* 提高所有浏览器中的文本可读性和版式 */ }

  • 相关阅读:
    小学四则运算APP 最后阶段
    小学四则运算APP 第三阶段冲刺-第一天
    小学四则运算APP 第二阶段冲刺-第五天
    小学四则运算APP 第二次冲刺 第四天
    小学四则运算APP 第二阶段冲刺-第三天
    小学四则运算APP 第二次冲刺-第二天
    小学四则运算APP 第二个冲刺 第一天
    小学四则运算APP 第一个冲刺 第八天
    小学四则运算APP 第一个冲刺 第七天
    小学四则运算APP 第一个冲刺阶段 第六天
  • 原文地址:https://www.cnblogs.com/fanxiaowu/p/4397738.html
Copyright © 2011-2022 走看看