zoukankan      html  css  js  c++  java
  • css学习の第一四弹—代码格式简写归纳

    一、代码简写方式归纳
    》》1.盒模型代码简写:
    外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左
    1、如果top、right、bottom、left的值相同,如下面代码:
    margin:10px 10px 10px 10px;
    可缩写为:
    margin:10px;
    2、如果top和bottom值相同、left和 right的值相同,如下面代码:
    margin:10px 20px 10px 20px;
    可缩写为:
    margin:10px 20px;
    3、如果left和right的值相同,如下面代码:
    margin:10px 20px 30px 20px;
    可缩写为:
    margin:10px 20px 30px;*****注释:在此处省略了左边的存在。
    》》2、颜色表示的缩写:
    关于颜色的css样式也是可以缩写的,当你设置的颜色是16进制的色彩值时,如果每两位的值相同,可以缩写一半。
    例子1:
    p{color:#000000;}
    可以缩写为:
    p{color: #000;}
    例子2:
    p{color: #336699;}
    可以缩写为:
    p{color: #369;}
    》》3、字体表示缩写:
    网页中的字体css样式代码也有他自己的缩写方式,下面是给网页设置字体的代码:
    body{
      font-style:italic;
      font-variant:small-caps; 
      font-weight:bold; 
      font-size:12px;
      line-height:1.5em; 
      font-family:"宋体",sans-serif;
    }
    这么多行的代码其实可以缩写为一句:
    body{
      font:italic small-caps bold 12px/1.5em "宋体",sans-serif;
    }
    注意:
    1、使用这一简写方式你至少要指定 font-size 和 font-family 属性,其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。
    2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
    一般情况下因为对于中文网站,英文还是比较少的,所以下面缩写代码比较常用:
    body{
      font:12px/1.5em "宋体",sans-serif;
    }
    只是有字号、行间距、中文字体、英文字体设置。
    *****注释:按照特定的顺序缩写,可以省略部分内容,但是总体顺序不变。
     
     
     
  • 相关阅读:
    *HDU2473 并查集
    *HDU3172 并查集
    *cf.4 贪心
    *HDU3635 并查集
    *HDU1325 并查集
    *HDU1829 并查集
    Node.js 学习笔记二
    Node.js 学习笔记 一
    AngularJS 学习笔记 一
    MongoDB 基础知识二
  • 原文地址:https://www.cnblogs.com/saber123/p/6881792.html
Copyright © 2011-2022 走看看