CSS_选择器优先级和盒模型常用属性简写

CSS_选择器优先级和盒模型常用属性简写

1.选择器组合实现优先级提权方式

<h3 class="on off" id="foo">PHP中文网</h3>

• 相同的声明,按照顺序后面有效，覆盖前面的

  /* 根据顺序,下面声明的红色有效 */
  h3 {
    color: blue;
  } 
  h3 {
    color: red;
  }

• 不同的选择器，按照规则 id > class > tag

/* 根据规则,id（#foo）声明有效 */
#foo {
    color: violet;
}
.on {
    color: skyblue;
}
h3 {
    color: red;
}

• 选择器优先级计算公式: [id选择器的数量, class选择器的数量, tag选择器的数量] ；
  tag级向class级进位,class级向id级进位；
  权重高的选择器组合就可以提权

  /* [0,0,1] */
  h3 {
    color: red;
  }
  /* [0,0,2] */
  body h3 {
    color: blue;
  }
  /* [0,1,0] */
  .on {
    color: yellow;
  }
  /* [0,1,1] */
  h3.on {
    color: green;
  }
  /* [0,1,2] */
  body h3.on {
    color: violet;
  }
  /* [0,1,3] */
  html body h3.on {
    color: teal;
  }
  /* [0,2,0] */
  .on.off {
    color: skyeblue;
  }
  /* [1,0,0] */
  #foo {
    color: teal;
  }
  /* [1,0,1] */
  h3#foo {
    color: red;
  }
  /* [1,0,2] */
  body h3#foo {
    color: blue;
  }
  /* [1,0,3] */
  html body h3#foo {
    color: red;
  }
  /* [1,1,0] */
  #foo.on {
    color: green;
  }

  2.字体与字体图标

• 字体属性
  <h2 class="title">php中文网</h2>

  .title {
            /* 字体名称 */
            font-family: monospace;
            /* 字体大小尺寸 */
            font-size: 36px;
            /* 字体样式 */
            font-style: italic;
            /* 字体粗细 */
            font-weight: bolder;
        }

  可以简写为

  .title {
            font: italic bolder 36px monospace;
        }

• 字体图标

• 阿里图标下载一个VIP图标，解压并以此练习

1. 引入生成的 fontclass 代码
   <link rel="stylesheet" href="iconfont/iconfont.css">
2. 挑选相应图标并获取类名，应用于页面
   <span class="iconfont icon-vip"></span>
3. 已经正常显示，感觉有点小，CSS调整下尺寸
   .iconfont { font-size: 36px; }

3.盒模型常用属性的简写

• 边框（border）样式的简写

1. 每个边框(top,right,bottom,left)可以设置三个属性: 宽度、样式、颜色
   例如top

   border-top-width: 2px;
   border-top-color: red;
   border-top-style: solid;

2. 可简写为 border-top: 2px red solid;
3. 如四个边框相同，可简写为border: 2px red solid;

• 内边距（padding）和外边距（margin）样式的简写，基本规则类似，上右下左

  /* 按顺时针方向, 上 右 下 左 顺序依次填写 */
  padding: 10px 5px 15px 20px;
  /* 将背景色裁切到到内容区 */
  background-clip: content-box;
  /* 左右相等，上下不相等，使用三值语法 */
  padding: 10px 20px 15px;
  /* 左右相等，上下也相等，使用二值语法 */
  padding: 10px 30px;
  /* 如果四个方向全相等，使用单值语法 */
  padding: 10px;

  /* 同样按顺时针方向, 上 右 下 左 顺序依次填写 */
  margin: 5px 8px 10px 15px;
  /* 三值,左右相等，上下不等 */
  margin: 10px 30px 15px;
  /* 二值,左右相等,上下也相等 */
  margin: 10px 15px;
  /* 单值,四个方向全相等 */
  margin: 8px;