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

背景，边框，列表，链接相关属性

背景

元素的背景是指，在元素内容、内边距和边界下层的区域。

属性	描述
background-color	为背景设置一个纯色。
background-image	把图像设置为背景。线性渐变是通过linear-gradient()函数传入的，它是一个background-image属性的值。
background-position	指定背景应该出现在元素背景中的位置。
background-repeat	指定背景是否应该被重复(平铺)。
background-attachment	当内容滚动时，指定元素背景的行为
background	在一行中指定以上五个属性的缩写。简写属性，作用是将背景属性设置在一个声明中。
background-size	允许动态调整背景图像的大小。

边框

W3School 边框

 MDN 边框

元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。

每个边框有 3 个方面：宽度（border-width）、样式（border-style），以及颜色（border-color）。

列表

W3SChool 列表

 MDN 列表

列表有三种：无序列表、有序列表、描述列表

可以在 <ul> 或 <ol> 元素上设置的三个属性：

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

链接

W3School 链接

 MDN 链接

链接存在时处于不同的状态，每一个状态都可以用对应的伪类来应用样式:

a:link - 普通的、未被访问的链接

a:visited - 用户已访问的链接

a:hover - 鼠标指针位于链接的上方

a:active - 链接被点击的时刻

a:focus - 链接被选中。一个链接当它被选中的时候 (比如通过键盘的 Tab 移动到这个链接的时候，或者使用编程的方法来选中这个链接 HTMLElement.focus()) 它可以使用 :focus 伪类来应用样式。

CSS 各种选择器的概念，使用方法及使用场景

MDN 选择器

 W3C 选择器

简单选择器（Simple selectors）

通过元素类型、class 或 id 匹配一个或多个元素。

类型选择器（又名元素选择器）

在 W3C 标准中，元素选择器又称为类型选择器（type selector）。

此选择器只是一个选择器名和指定的HTML元素名的不区分大小写的匹配。这是选择所有指定类型的最简单方式。

针对某个HTML元素设置样式

html {color:black;}

h1 {color:blue;}

类选择器

类选择器由一个点“.”以及类后面的类名组成。类名是在HTML class文档元素属性中没有空格的任何值。由你自己选择一个名字。同样值得一提的是，文档中的多个元素可以具有相同的类名，而单个元素可以有多个类名(以空格分开多个类名的形式书写)。

.类型名A{}，对类型名为A的元素设置样式，一个HTML文档中可以匹配多个元素

ID选择器

ID选择器由哈希/磅符号 (#)组成，后面是给定元素的ID名称。任何元素都可以使用id属性设置唯一的ID名称。由你自己选择的ID是什么。这是选择单个元素的最有效的方式。

#ID名A{}，对ID名为A的元素设置样式，一个HTML文档中只能匹配一个元素

属性选择器（Attribute selectors）

通过属性 / 属性值匹配一个或多个元素。

CSS 2 引入了属性选择器。

[attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。

[attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。

[attr~=val]：该选择器仅选择 attr 属性的值（以空格间隔出多个值）中有包含 val 值的所有元素，比如位于被空格分隔的多个类（class）中的一个类。

把包含标题（title）的所有元素变为红色，可以写作：

*[title] {color:red;}

伪类（Pseudo-classes）

伪类和伪元素

概念：

匹配处于确定状态的一个或多个元素，比如被鼠标指针悬停的元素，或当前被选中或未选中的复选框，或元素是DOM树中一父节点的第一个子节点。

使用方法：

一个 CSS 伪类（pseudo-class）是一个以冒号(:)作为前缀的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类（pseudo-class）。

伪元素（Pseudo-elements）

概念：

匹配处于相关的确定位置的一个或多个元素，例如每个段落的第一个字，或者某个元素之前生成的内容。