ife2018 零基础学院 day 4
第四天，背景边框列表链接和更复杂的选择器
背景，边框，列表，链接相关属性
背景
元素的背景是指，在元素内容、内边距和边界下层的区域。
| 属性 | 描述 |
|---|---|
| background-color | 为背景设置一个纯色。 |
| background-image | 把图像设置为背景。线性渐变是通过linear-gradient()函数传入的，它是一个background-image属性的值。 |
| background-position | 指定背景应该出现在元素背景中的位置。 |
| background-repeat | 指定背景是否应该被重复(平铺)。 |
| background-attachment | 当内容滚动时，指定元素背景的行为 |
| background | 在一行中指定以上五个属性的缩写。 简写属性，作用是将背景属性设置在一个声明中。 |
| background-size | 允许动态调整背景图像的大小。 |
边框
元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。
每个边框有 3 个方面：宽度（border-width）、样式（border-style），以及颜色（border-color）。
列表
列表有三种：无序列表、有序列表、描述列表
可以在 <ul> 或 <ol> 元素上设置的三个属性：
- list-style-type ：设置用于列表的项目符号的类型，例如无序列表的方形或圆形项目符号，或有序列表的数字，字母或罗马数字。
- list-style-position ：设置在每个项目开始之前，项目符号是出现在列表项内，还是出现在其外。
- list-style-image ：允许您为项目符号使用自定义图片，而不是简单的方形或圆形。
链接
链接存在时处于不同的状态，每一个状态都可以用对应的 伪类 来应用样式:
- a:link - 普通的、未被访问的链接
- a:visited - 用户已访问的链接
- a:hover - 鼠标指针位于链接的上方
- a:active - 链接被点击的时刻
- a:focus - 链接被选中。一个链接当它被选中的时候 (比如通过键盘的 Tab 移动到这个链接的时候，或者使用编程的方法来选中这个链接 HTMLElement.focus()) 它可以使用 :focus 伪类来应用样式。
CSS 各种选择器的概念，使用方法及使用场景
简单选择器（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）
概念：
匹配处于相关的确定位置的一个或多个元素，例如每个段落的第一个字，或者某个元素之前生成的内容。
使用方法：
伪元素（Pseudo-element）跟伪类很像，但它们又有不同的地方。它们都是关键字 —— 但这次伪元素前缀是两个冒号 (::) —— 同样是添加到选择器后面达到指定某个元素的某个部分。
组合器（Combinators）
这里不仅仅是选择器本身，还有以有效的方式组合两个或更多的选择器用于非常特定的选择的方法。例如，你可以只选择divs的直系子节点的段落，或者直接跟在headings后面的段落。
| Combinators | Select |
|---|---|
| A B | 匹配任意元素，满足条件：B是A的后代结点（B是A的子节点，或者A的子节点的子节点） |
| A > B | 匹配任意元素，满足条件：B是A的直接子节点 |
| A + B | 匹配任意元素，满足条件：B是A的下一个兄弟节点（AB有相同的父结点，并且B紧跟在A的后面） |
| A ~ B | 匹配任意元素，满足条件：B是A之后的兄弟节点中的任意一个（AB有相同的父节点，B在A之后，但不一定是紧挨着A） |
多用选择器（Multiple selectors）
这些也不是单独的选择器；这个思路是将以逗号分隔开的多个选择器放在一个CSS规则下面， 以将一组声明应用于由这些选择器选择的所有元素。
| Combinators | Select |
|---|---|
| A,B | 匹配满足A（和/或）B的任意元素 |
CSS 选择器的优先级
CSS 是 Cascading Style Sheets 的缩写，这暗示层叠（cascade）的概念是很重要的。在最基本的层面上，它表明CSS规则的顺序很重要，但它比那更复杂。什么选择器在层叠中胜出取决于三个因素（这些都是按重量级顺序排列的——前面的的一种会否决后一种）：
重要性（Importance）
在CSS中，有一个特别的语法可以让一条规则总是优先于其他规则：
!important。
相互冲突的声明将按以下顺序适用，后一种将覆盖先前的声明：
- 在用户代理样式表的声明 (例如：浏览器在没有其他声明的默认样式).
- 用户样式表中的普通声明（由用户设置的自定义样式）。
- 作者样式表中的普通声明（这是我们设置的样式，Web开发人员）。
- 作者样式表中的重要声明
-
用户样式表中的重要声明
专用性（Specificity）
一个选择器具有的专用性的量是用四种不同的值（或组件）来衡量的，它们可以被认为是千位，百位，十位和个位——在四个列中的四个简单数字： - 千位：如果声明是在style 属性中该列加1分（这样的声明没有选择器，所以它们的专用性总是1000。）否则为0。
- 百位：在整个选择器中每包含一个ID选择器就在该列中加1分。
- 十位：在整个选择器中每包含一个类选择器、属性选择器、或者伪类就在该列中加1分。
-
个位：在整个选择器中每包含一个元素选择器或伪元素就在该列中加1分。
源代码次序（Source order）
如果多个相互竞争的选择器具有相同的重要性和专用性，那么第三个因素将帮助决定哪一个规则获胜——后面的规则将战胜先前的规则。
上一篇： 老公跟闺蜜有一腿
下一篇： 12 认识进程与线程 (进阶)