HTML5与CSS3基础教程-第7章 CSS构造块

第7章 CSS构造块

《HTML5与CSS3基础教程（第8版）》 第7章读书笔记

• 2020/03/04

• CSS继承： 见博客CSS之继承 (p126 - 129)。

• CSS引用方法： （p129）

  1. 外部文件导入（推荐）
  2. 嵌入式引用
  3. 内联样式（不推荐，尽量少用）

• CSS冲突时的优先级： （p130 - 131）

  1. 越特殊的越优先； 2. 越晚的越优先； 3.!important优先级最高

  1. 越特殊的越优先： 声明CSS时候的选择器越特殊，则该CSS的优先级越高。

     比如：适配符*适用于所有元素，所以*的优先级很低；id选择器一般适用于单个元素，所有id选择器的优先级很高。

     因为ID选择器的特殊性高于class选择器，所以ID选择器的适用面更窄，而且可能会导致矫枉过正，降低灵活性，要慎重使用，建议多使用类选择器。

  2. 越晚的越优先： CSS的样式声明，出现的越晚，优先级越高。所以嵌入样式表与外部样式表的优先级取决于他们在HTML中的相对位置，靠后的优先级高。

     比如：①CSS文件中对同一选择的多个声明，冲突的部分选择最后的那次声明；②直接定义在HTML元素省的内联声明方式，比外部样式或在其之上的嵌入式引用出现的晚，所以优先级最高。

     同一元素的多个类选择器

     比如：<div class="color1 color2">content</div>

     在chrome中尝试，和在元素中的声明顺序没关系（不是后面的color2优先级最高），而是和color1 和color2在css文件中的声明先后顺序有关。（接受评论讨论）

  3. !important： 优先级别最高，但是不推荐使用。

• em单位： （p132）

  • 一个em的长度大约与对应元素的字号相等；
  • 当em用于元素的字号定义时，则em的值继承自父元素的字号大小。

• rem单位： 10.6章节。

• HSL、RGBA、HSLA格式是在CSS3引入的（RGB不是），CSS3还扩展了原有的16个基本颜色名称。

• 使用CSS优先级适配老浏览器： （p137）

  比如CSS的alpha透明度是在IE9之后才支持的，可以通过CSS的优先级适配IE9-。

  .alpha{
      background-color: #3c8f00
      background-color: hsla(95, 100%, 28%, .75);
  }
  

  通过声明2次background-color来达到适配IE9-的目的。主流浏览器因为可以识别第二次声明，所以会将第一条覆盖，而IE9-不可以识别第二条，所以使用第一条的声明。

  在IE9-使用alpha透明度的方案： （p138）

  ​ 方案1：使用1x1像素的店半透明PNG作为重复的背景。然后像上述CSS优先级一样适配。（详见10.10章节）

  ​ 方案2：使用IE专有的Gradient滤镜（不推荐，性能低而且语法复杂）。