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

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

背景

MDN 背景
W3School 背景

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

属性	描述
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）

概念：

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

使用方法：

伪元素（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。

相互冲突的声明将按以下顺序适用，后一种将覆盖先前的声明：
1. 在用户代理样式表的声明 (例如：浏览器在没有其他声明的默认样式).
2. 用户样式表中的普通声明（由用户设置的自定义样式）。
3. 作者样式表中的普通声明（这是我们设置的样式，Web开发人员）。
4. 作者样式表中的重要声明
5. 用户样式表中的重要声明

专用性（Specificity）

一个选择器具有的专用性的量是用四种不同的值（或组件）来衡量的，它们可以被认为是千位，百位，十位和个位——在四个列中的四个简单数字：
1. 千位：如果声明是在style 属性中该列加1分（这样的声明没有选择器，所以它们的专用性总是1000。）否则为0。
2. 百位：在整个选择器中每包含一个ID选择器就在该列中加1分。
3. 十位：在整个选择器中每包含一个类选择器、属性选择器、或者伪类就在该列中加1分。
4. 个位：在整个选择器中每包含一个元素选择器或伪元素就在该列中加1分。

源代码次序（Source order）

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

ife2018 零基础学院 day 4相关推荐

ife2018 零基础学院 day 3
ife2018 零基础学院第三天:让简历有点色彩什么是CSS,CSS是如何工作的! 摘自CSS如何工作什么是CSS CSS是一种用于向用户指定文档如何呈现的语言 - 它们如何被指定样式.布局等. ...
ife 零基础学院 day 2
第二天:给自己做一个在线简历吧最后的验证,提出了几个问题,尝试解答一下 HTML是什么,HTML5是什么 HTML的定义摘抄自w3school的HTML 简介 HTML 是用来描述网页的一种语言. ...
day1开始在百度前端技术学院零基础学院学习前端开发
2020年10月14日第一天:为什么有那么多人要做前端? 学习总用时:1小时30分钟今天的目标是大概知道什么是Web,什么是HTML,CSS,JavaScript. Web(World Wide ...
圆方圆学院零基础入门学习Python（绝对干货，值得学习）
圆方圆学院零基础入门学习Python(绝对干货,值得学习) 链接: pan.baidu.com/s/1Shpd1G8L- 提取码: bup7
autojs入门视频教程,Auto.js Pro安卓全分辨率免ROOT引流脚本开发零基础到进阶教程,飞云脚本学院2019年全力打造高清品质,不容错过的年度大作
课程大纲(更新中-) 基础课程 [已完成]01安装Visual Studio Code(时长9分33秒)在线观看 [已完成]02安装Auto.js Pro(时长5分48秒)在线观看 [已完成]03解读 ...
辛巴学院-Unity-剑英陪你零基础学c#系列(四)函数和封装
辛巴学院:正大光明的不务正业. 国庆长假结束了,我的心情是这样的: 你总是起不早,起不早独自一个人沉睡到天亮你无怨无悔的梦着那副本我知道你根本就不想上班你总是起不早,起不早放假总是短暂,上班 ...
百度前端技术学院--零基础--第二天给自己做一个在线简历吧
百度前端技术学院–零基础–第二天给自己做一个在线简历吧课程目标通过简单的实践,更加清楚地了解HTML是什么,HTML5是什么.学习基本的HTML标签,理解HTML语义化概念任务描述用code ...
html作业百度网盘,百度学院任务一：零基础HTML编码作业.html
百度学院学习零基础HTML编码网站一级标题导航链接一导航链接二导航链接三导航链接四文章一级标题文章二级标题文章作者文章发表时间百度前端技术学院的课程任务是由百度前端工程师专为对前端 ...
autojs零基础入门视频教程,跟我学Auto.js Pro安卓免ROOT引流脚本开发教程,飞云脚本学院2019最新录制
课程大纲(更新中-) 基础课程 [已完成]01安装Visual Studio Code(时长9分33秒)在线观看 [已完成]02安装Auto.js Pro(时长5分48秒)在线观看 [已完成]03解读 ...

ife2018 零基础学院 day 4