2018IFE基础班 第三次任务 读书笔记

CSS-层叠：

    CSS的全称是Cascading Style Sheets，层叠样式表。其中Cascading很好的说明了它的应用形式，整个网站的外观是由一层又一层的样式重叠起来的。它的作用是告知浏览器将以什么方式呈现出文档给用户。

    加上选择器的配合，可以从网站整体的宏观和微观来对网页外观进行操作。但是如果有几个同样的属性重叠了怎么办呢？这时候就要由层叠样式表里的优先级属性来给层叠表样式进行排列，谁是老大谁说了算。

    其中有四个判定标准，分别对应个、十、百、千四位。

千位：当选择器位于dom元素的内联style属性时，+1

百位：当选择器中含有ID选择器时，+1

十位：当选择器中含有 class选择器 或者 伪类（例如“：hover”）及属性选择器时，+1

个位：当选择器中含有element选择器 或者 伪元素（例如“a”）时，+1

比如  #container  .class  a：hover  它的优先级数 就是 0121

接着如果两个选择器中的样式撞车了，这时候就判断优先级数，谁大听谁的

CSS为处理继承提供了四种特殊的通用属性值：

• inherit： 该值将应用到选定元素的属性值设置为与其父元素一样。
• initial ：该值将应用到选定元素的属性值设置为与浏览器默认样式表中该元素设置的值一样。如果浏览器默认样式表中没有设置值，并且该属性是自然继承的，那么该属性值就被设置为 inherit。
• unset ：该值将属性重置为其自然值，即如果属性是自然继承的，那么它就表现得像 inherit，否则就是表现得像 initial。
• revert ：如果当前的节点没有应用任何样式，则将该属性恢复到它所拥有的值。换句话说，属性值被设置成自定义样式所定义的属性（如果被设置）， 否则属性值被设置成用户代理的默认样式。

注意: initial 和 unset 不被IE支持。

body {
  color: green;
}

.inherit a {
  color: inherit;
}

.initial a {
  color: initial
}

.unset a {
  color: unset;
}

CSS 规则是样式表的主要组成块 —— 是你在 CSS 中最常见的块。但这有一些其它类型的块，你以后偶尔会碰上 —— CSS 规则只是被称为 CSS 语句中的一种。其它类型如下：

• @-规则(At-rules)在CSS中被用来传递元数据、条件信息或其它描述性信息。它由（@）符号开始，紧跟着一个表明它是哪种规则的描述符，之后是这种规则的语法块，并最终由一个半角分号（;）结束。每种由描述符定义的@-规则，都有其特有的内部语法和语义。一些例子如下：
  • @charset 和 @import （元数据）
  • @media 或 @document （条件信息，又被称为嵌套语句，见下方。)
  • @font-face （描述性信息）
  具体语法示例：

  @import 'custom.css';

  该@-规则向当前 CSS 导入其它 CSS 文件
• 嵌套语句 是@-规则中的一种，它的语法是 CSS 规则的嵌套块，只有在特定条件匹配时才会应用到文档上。特定条件如下：
  • @media 只有在运行浏览器的设备匹配其表达条件时才会应用该@-规则的内容；
  • @supports 只有浏览器确实支持被测功能时才会应用该@-规则的内容；
  • @document 只有当前页面匹配一些条件时才会应用该@-规则的内容。
  具体语法示例

  @media (min-width: 801px) {
    body {
      margin: 0 auto;
      width: 800px;
    }
  }

上述的嵌套语句只有在页面宽度超过801像素时才会应用。

一些属性比如 font，background，padding，border，和 margin 被称为简写属性 —— 这是由于它们允许你在一行设置多个属性，从而节省时间并使代码更整洁。

例如，像这行代码：

/* 在padding和margin这样的简写属性中，值赋值的顺序是top、right、bottom、left。 
   它们还有其他简写方式，例如给padding两个值，则第一个值表示top/bottom，第二个值表示left/right */
padding: 10px 15px 15px 5px;

和以下的所有代码做了相同的工作：

padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;

而这一行：

background: red url(bg-graphic.png) 10px 10px repeat-x fixed;

和以下这些做了相同的事：

background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-scroll: fixed;

我们不会试图彻底全面地教导你这些东西 —— 你会在后续的课程中遇到很多例子，建议你通过简写属性的名称在我们的 CSS参考 中查找以了解更多信息。