第四天，背景边框列表链接和更复杂的选择器-IFE

第四天，背景边框列表链接和更复杂的选择器

日期	总用时	学习目标
2018.08.01	4h	见下文

学习目标

CSS 背景
CSS 列表样式
CSS 的值和单位
层叠和继承

学习内容

学习笔记

CSS 背景？

元素的背景是指，在元素内容、内边距和边界下层的区域。默认情况下就是这样——在新的浏览器中，你可以使用 background-clip属性改变背景所占用的区域

background-color: 为背景设置一个纯色。
background-image: 指定在元素的背景中出现的背景图像。
这可以是静态文件，也可以是生成的渐变。
background-position:指定背景应该出现在元素背景中的位置。
background-repeat: 指定背景是否应该被重复(平铺)。
background-attachment: 当内容滚动时，指定元素背景的行为，例如，它是滚动的内容，还是固定的?
background: 在一行中指定以上五个属性的缩写。
background-size: 允许动态调整背景图像的大小

列表样式

list-style-type ：设置用于列表的项目符号的类型，例如无序列表的方形或圆形项目符号，或有序列表的数字，字母或罗马数字。
list-style-position ：设置在每个项目开始之前，项目符号是出现在列表项内，还是出现在其外。
list-style-image ：允许您为项目符号使用自定义图片，而不是简单的方形或圆形。

管理列表计数

start
reversed
value

CSS计数器提供用于自定义列表计数和样式的高级工具，但它们相当复杂。如果你想更深入了解，请查看如下资源：

@counter-style
counter-increment
counter-reset

CSS 的值和单位

数值

用于指定例如元素宽度、边框（border）宽度或字体大小；以及无单位整数。用于指定例如相对线宽或运行动画的次数。

长度和尺寸
- 绝对单位
  - px像素
  - mm, cm, in: 毫米（Millimeters），厘米（centimeters），英寸（inches）
  - pt, pc: 点（Points (1/72 of an inch)），十二点活字（ picas (12 points.)）
- 相对单位
  - em:1em与当前元素的字体大小相同（更具体地说，一个大写字母M的宽度）。CSS样式被应用之前，浏览器给网页设置的默认基础字体大小是16像素，这意味着对一个元素来说1em的计算值默认为16像素。但是要小心—em单位是会继承父元素的字体大小，所以如果在父元素上设置了不同的字体大小，em的像素值就会变得复杂。现在不要过于担心这个问题，我们将在后面的文章和模块中更详细地介绍继承和字体大小设置。em是Web开发中最常用的相对单位。
  - ex, ch: 分别是小写x的高度和数字0的宽度。这些并不像em那样被普遍使用或很好地被支持。
  - rem: REM（root em）和em以同样的方式工作，但它总是等于默认基础字体大小的尺寸；继承的字体大小将不起作用，所以这听起来像一个比em更好的选择，虽然在旧版本的IE上不被支持（查看关于跨浏览器支持 Debugging CSS.)
  - vw, vh: 分别是视口宽度的1/100和视口高度的1/100，其次，它不像rem那样被广泛支持
无单位的值:0
无单位的行高
- 另一个例子是 line-height,设置元素中每行文本的高度。你可以使用单位设置特定的行的高度，但使用一个无量纲的值往往更容易，它就像一个简单的乘法因子。例如，使用下面的HTML：
动画的数值

CSS动画能够让页面上的HTML元素动起来。我们来看一个例子，当我们把鼠标浮动到一个段落上的时候，它能够旋转起来。这个例子的HTML代码很简单：
```
<p>Hello</p>
```
```
  @keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

p {
  color: red;
  width: 100px;
  font-size: 40px;
  transform-origin: center;
}

p:hover {
  animation-name: rotate;
  animation-duration: 0.6s;
  animation-timing-function: linear;
  animation-iteration-count: 5;
}
```
这里你可可以看到一些我们我们之前没有明确提到的有趣单位 (<angle>s、 <time>s、 <timing-function>s、 <string>s...)，但是我们感兴趣的是这一行 animation-iteration-count: 5; ——此行控制着动画启动（这里是指光标浮动至段落上）时后会执行多少次，而且这是一个简短无单位纯数字（计算机中称之为整型）。

百分比

可以用于指定尺寸或长度——例如取决于父容器的长度或高度，或默认的字体大小。

还可以使用百分比值指定可以通过特定数值指定的大部分内容。这使我们可以创建，例如，其宽度总是会移动到其父容器宽度的一定百分比的框中。这可以与那些将其宽度设置为某个单位值（如px或ems）的框进行比较，它们的长度总是保持相同的长度，即使它们的父容器的宽度发生变化。

<div>
  <div class="boxes">Fixed width layout with pixels</div>
  <div class="boxes">Liquid layout with percentages</div>
</div>

div .boxes {
  margin: 10px;
  font-size: 200%;
  color: white;
  height: 150px;
  border: 2px solid black;
}

.boxes:nth-child(1) {
  background-color: red;
  width: 650px;
}

.boxes:nth-child(2) {
  background-color: blue;
  width: 75%;
}

在这里，我们给两个divs一些 margin, height, font-size, border and color 。然后我们给第一个div和第二个div不同的 background-colors，所以我们可以很容易地区分开他们。我们还将第一个div的 width 设置为650px，将第二个div的宽度设置为75％。这样做的效果是，第一个div始终具有相同的宽度，即使视口大小被调整（当视口变得比屏幕更窄时，它将从屏幕上消失），而第二个div的宽度随着视口（viewport ）的变化而变化，使其始终保持其父元素的75％。在这个例子中，div的父元素是<body>元素，默认情况下是视口宽度的100％

我们也可以设置font-size的百分比为200%。它将和你预计的工作方式有一点不同，但这是讲得通的，它的新大小是相对于父容器的字体大小的，就像em一样。在这种情况下，父容器的字体大小为16px——页面的默认值，所以计算的值为16px的200%，或32px。这和em的风格确实很类似—200%基本上和2em一样。

这两种不同的框布局类型通常称为动态（流体）布局（如浏览器视口大小的变化），固定宽度布局（不管怎样都保持不变）：

可以使用动态布局来确保标准文档始终适合于屏幕，并且可以在不同的移动设备屏幕大小上表现良好。
一个固定宽度的布局可以用来保持在线地图的大小相同；浏览器视口可以在地图上滚动，只在一个时间内查看一定数量的地图。您可以立即看到的量取决于您的视口有多大。

颜色

用于指定背景颜色，字体颜色等。

关键词

最简单、最古老的颜色类型在CSS颜色关键词。这些都是特定的字符串代表特定的颜色值。例如,下面的代码:

十六进制值

p:nth-child(1) {
  background-color: #ff0000;
}

RGB

p:nth-child(3) {
  background-color: rgb(224,176,255);
}

HSL
- 色调：颜色的底色调。这个值在0到360之间，表示色轮周围的角度。
- 饱和度：饱和度是多少？这需要一个从0-100%的值，其中0是没有颜色（它将显示为灰色），100%是全彩色饱和度。
- 明度：颜色有多亮或明亮？这需要一个从0-100%的值，其中0是无光（它会出现全黑的），100%是充满光的（它会出现全白）。
```
/* equivalent to the blue keyword */
p:nth-child(2) {
  background-color: hsl(240,100%,50%);
}
```

RGBA 和 HSLA

  /* Transparent red */
 p:nth-child(1) {
   background-color: rgba(255,0,0,0.5);
   position: relative;
   top: 30px;
   left: 50px;
 }

 /* Transparent blue */
 p:nth-child(2) {
   background-color: hsla(240,100%,50%,0.5);
 }

不透明度（Opacity）

/* Red with opacity */
p:nth-child(2) {
 background-color: rgb(255,0,0);
 opacity: 0.5;
}

坐标位置: 例如，以屏幕的左上角为坐标原点定位元素的位置。

函数: 例如，用于指定背景图片或背景图片渐变

background-color: rgba(255,0,0,0.5);
background-color: hsla(240,100%,50%,0.5);

/* calculate the new position of an element after it has been rotated by 45 degress */
transform: rotate(45deg);
/* calculate the new position of an element after it has been moved across 50px and down 60px */
transform: translate(50px, 60px);
/* calculate the computed value of 90% of the current width minus 15px */
width: calc(90%-15px);
/* fetch an image from the network to be used as a background image */
background-image: url('myimage.png');

层叠和继承

层叠

重要性（Importance）

在CSS中，有一个特别的语法可以让一条规则总是优先于其他规则：!important。把它加在属性值的后面可以使这条声明有无比强大的力量。

#winning {
background-color: red;
border: 1px solid black;
}

.better {
  background-color: gray;
  border: none !imporatant;
}

p {
  background-color: blue;
  color: white;
  padding: 5px;
}

你可以看到第三条规则 color 和 padding 被运用了, 但 background-color没有，为什么？实际上，这三种情况都应该应用，因为在源顺序后面的规则通常会覆盖较早的规则。
然而, 在前面的规则被运用了,因为 IDs/class 选择器优先于element选择器。 (对此，你将在下一章中学到更多)
这两个元素都有 class并带有 better属性, 但是第二个元素有 id 值为winning 。因为比起class而言id专用性更高(在一个页面上id是唯一的, 但很多元素可以拥有相同的class — ID 选择器在它们的目标中是非常优先的)，红色背景色和1pixel的黑色边框都应应用于第二元素，第一个元素获得灰色背景色，没有边框，如类所指定。
第二个元素获得红色背景色，但没有边框。为什么？因为 !important 在第二条规则中的声明——在 border: none之后写入它意味着尽管id具有更高的优先性，该声明也将优先于前面规则中的边界值声明

相互冲突的声明将按以下顺序适用，后一种将覆盖先前的声明：

在用户代理样式表的声明 (例如：浏览器在没有其他声明的默认样式).
用户样式表中的普通声明（由用户设置的自定义样式）。
作者样式表中的普通声明（这是我们设置的样式，Web开发人员）。
作者样式表中的重要声明
用户样式表中的重要声明

###### 专用性（Specificity）

专用性基本上是衡量选择器的具体程度的一种方法——它能匹配多少元素。如上面所示的示例所示，元素选择器具有很低的专用性。类选择器具有更高的专用性，所以将战胜元素选择器。ID选择器有甚至更高的专用性, 所以将战胜类选择器. 战胜ID选择器的唯一方法是使用 !important。

一个选择器具有的专用性的量是用四种不同的值（或组件）来衡量的，它们可以被认为是千位，百位，十位和个位——在四个列中的四个简单数字：

  1. 千位：如果声明是在style 属性中该列加1分（这样的声明没有选择器，所以它们的专用性总是1000。）否则为0。
  2. 百位：在整个选择器中每包含一个ID选择器就在该列中加1分。
  3. 十位：在整个选择器中每包含一个类选择器、属性选择器、或者伪类就在该列中加1分。
  4. 个位：在整个选择器中每包含一个元素选择器或伪元素就在该列中加1分

|选择器 |千位 |百位 |十位 |个位 |合计值|
|--|--|--|--|--|--|
|h1 |0 |0 |0 |1 |0001|
|#indentifier |0 |1| 0| 0| 0100|
|h1 + p::first-letter| 0| 0| 0| 3| 0003|
|li > a[href*="zh-CN"] > .inline-warning |0 |0 |2 |2 |0022|
|没有选择器, 规则在一个元素的style属性里|1 |0 |0 |0 |1000|

###### 源代码次序（Source order）

如上所述，如果多个相互竞争的选择器具有相同的重要性和专用性，那么第三个因素将帮助决定哪一个规则获胜——后面的规则将战胜先前的规则。例如

p {
  color: blue;
}

/* This rule will win over the first one */
p {
  color: red;
}

继承

控制继承

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

inherit：该值将应用到选定元素的属性值设置为与其父元素一样。
initial ：该值将应用到选定元素的属性值设置为与浏览器默认样式表中该元素设置的值一样。如果浏览器默认样式表中没有设置值，并且该属性是自然继承的，那么该属性值就被设置为 inherit。
unset ：该值将属性重置为其自然值，即如果属性是自然继承的，那么它就表现得像 - inherit，否则就是表现得像 initial。

revert ：如果当前的节点没有应用任何样式，则将该属性恢复到它所拥有的值。换句话说，属性值被设置成自定义样式所定义的属性（如果被设置），否则属性值被设置成用户代理的默认样式。

<ul>
  <li>Default <a href="#">link</a> color</li>
  <li class="inherit">Inherit the <a href="#">link</a> color</li>
  <li class="initial">Reset the <a href="#">link</a> color</li>
  <li class="unset">Unset the <a href="#">link</a> color</li>
</ul>

body {
  color: green;
}

.inherit a {
  color: inherit;
}

.initial a {
  color: initial
}

.unset a {
  color: unset;
}

###### 重新设置所有的属性值
CSS速写属性 all 能够被应用到每一个继承属性，一次性应用所有的继承属性。这里的值可以是继承属性里的任何一个 (inherit, initial, unset, or revert)。对于撤销对样式的修改，这是非常方便的一种方式。然后你就可以在开始新的修改之前，返回到一个已知的开始点。

待深入的知识

基本CSS理解

作业

更复杂的简历

疑问

Flag

系统的学习前端，坚持66天

第四天，背景边框列表链接和更复杂的选择器-IFE