今天学习CSS部分的内容太多，就先写一部分
认识CSS
什么是CSS？
css（层叠式样表）是一门用来掌握浏览器如何显示HTML元素，充分展示你喜欢的设计样式的语言
CSS用来干什么？
CSS可以用于给文档添加样式，例如改变标题和链接的颜色及大小。也可以用于创建布局或者做一些特效。
CSS语法
例如，我们要给<p>添加样式，就如下所示
p{
color: red；
font-size: 18px;
}
语法由一个选择器开头，选择了将来要添加样式的HTML元素，接着输入一对大括号，内部定义一个或多个属性: 值的声明。每个声明都指定了我们我们所选择元素的一个属性，后面是我们想赋的值。
冒号前是属性，冒号后是值。不同的CSS属性对应不同的合法值。一个CSS样式表可以包含很多个规则。
CSS是如何构成的
首先，我们来了解在HTML文档中调用CSS的三种方法
- 外部样式表
外部样式表是指将CSS编写在扩展名为.css的文件中，并在HTML文档中使用<link>元素引用它。
<html>
<head>
<link rel="stylesheet" href=".../xxx.css">
</head><body>
...
</body>
</html>
上面的例子即为引用xxx.css作为外部样式表。
- 内部样式表
内部样式表即为直接在<head>的<style>中直接编写CSS。
<html>
<head>
<style>
p{
color: red;
font-size: 18px;
}
</style>
</head><body>
...
</body>
</html>
上面的例子即为内部样式表，这样的办法适用于不能更改.css文件时，但是在需要更改CSS时要修改每个页面文件中对应的CSS内容。
- 内联样式
内联样式表存在于HTML元素的style属性之中。其特点是每个CSS表只影响一个元素 。
<html>
<head>
...
</head><body>
<h1 style="font-size: 18px;color: red;">...</h1>
<h1>...</h1>
</body>
</html>
这就是内联样式的实例，对特定的h1元素(第一个h1标签)来更改样式，这样修改比较灵活，但是对于大面积的应用就远不及前两个用法。
选择器
上面我们说过CSS语法的开头就是选择器，那么选择器到底是什么，有什么规则呢？
选择器通俗来说就是作用于哪些元素，但它的写法有很多，如下：
h1{
}
a:link{
}
.class{
}
id{
}
*{
}
.box p{
}
.box p:first-child{
}
h1,h2,.intro{
}
在这里，就不做解释了，具体的用法可以参考（ https://www.w3school.com.cn/cssref/css_selectors.asp ）
属性和值
在大括号内，我们定义了许多属性：值的声明，这些属性都是针对（包含它的选择器）（对应的元素）的属性，值则为属性的值。
在每个CSS之间，最好留上一行空格，这样我们能够更加一目了然的去查看CSS的内容。
CSS的优先级
优先级即为分配给指定CSS声明的一个权重，它由（匹配的选择器中）（每一种选择器类型的数值）决定。当优先级与多个CSS声明中任意一个声明的优先级相等时，最后一个声明会被应用。
下面列表中，选择器类型的优先级是递增的
- 类型选择器（例如 p）和伪元素（例如::before）
- 类选择器（例如.example），属性选择器（例如[type="radio"]）和伪类（例如:link)
- ID选择器（例如#example)
通配选择符（universal selector）（）关系选择符*（combinators）（+,>,~,'',||）和 否定伪类（negation pseudo-class）（:not）对优先级没有影响。（但是，在 :not() 内部声明的选择器会影响优先级）。
内联样式（style=“...”）总会覆盖外部样式表的任何样式，所以可以看成是具有最高的优先级。
内联样式>内部样式>外部样式
- 权重如何计算
从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名或者伪元素+1。
body #content，data img:hover
上面的语句最终的权重值是122（#content是一个id选择器 +100，.data +10，:hover +10，body和img +2.
另外一种方法就是id选择器的数量为a，class和其他属性数量为b，元素名和伪元素名的数量为c。结合起来即为权重。
下面是选择器的分类（E为元素）
| 选择器 | 选择符 |
|---|---|
| 元素选择器 | *（通配符），E（类型选择符），E#id（id选择符），E.class（class选择符） |
| 关系选择器 | E F（包含选择符），E>F（子选择符），E+F（相邻选择符），E~F（兄弟选择符） |
| 属性选择器 | E[att]，E[att="val"]，E[att~="val"]，E[att^="val"]，E[att$="val"]，E[att*="val"]，E[att|="val"] |
| 伪类选择器 | E:link，E:visited，E:hover，E:active，E:focus，E:not，E:firstchild，E:lastchild，E:nth-child(n)，E:nth-of-type(n)，E:checked，E:disabled（我们下面详细了解） |
| 伪元素选择器 | E:before/E::before，E:after/E::after，E::placeholder（我们下面详细了解） |
| 选择符 | 名称 | 对象 |
|---|---|---|
| * | 通配选择符 | 所有元素对象 |
| E | 类型选择符 | 以文档语言对象类型作为选择符 |
| E#myid | id选择符 | 以唯一标识符id属性等于myid的E对象作为选择符 |
| E#myclass | class选择符 | 以class属性包含myclass的E对象作为选择符 |
| E[att] | 属性选择符 | 选择具有att属性的E元素 |
| E[att="val"] | 属性选择符 | 选择具有att属性且属性值等于val的E元素 |
| E[att~="val"] | 属性选择符 | 选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素 |
| E[att^="val"] | 属性选择符 | 选择具有att属性且属性值为以val开头的字符串的E元素 |
| E[att$="val"] | 属性选择符 | 选择具有att属性且属性值为以val结尾的字符串的E元素 |
| E[att*="val"] | 属性选择符 | 选择具有att属性且属性值为包含val的字符串的E元素 |
| E[att|="val"] | 属性选择符 | 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择 |
| E:link | 伪类选择符 | 设置超链接a在未被访问前的样式 |
| E:visited | 伪类选择符 | 设置超链接a在其链接地址已被访问过时的样式 |
| E:hover | 伪类选择符 | 设置元素在其鼠标悬停时的样式 |
| E:active | 伪类选择符 | 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式 |
| E:focus | 伪类选择符 | 设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式 |
| E:not(s) | 伪类选择符 | 匹配不含有s选择符的元素E |
| E:firstchild | 伪类选择符 | 匹配父元素的第一个子元素E |
| E:lastchild | 伪类选择符 | 匹配父元素的最后一个子元素E |
| E:nth-child(n) | 伪类选择符 | 匹配父元素的第n个子元素E |
| E:nth-of-type(n) | 伪类选择符 | 匹配父元素的倒数第n个子元素E |
| E:checked | 伪类选择符 | 匹配用户界面上处于选中状态的元素E。(input type为radio或checkbox时) |
| E:disabled | 伪类选择符 | 匹配用户界面上处于禁用状态的元素E |
| E:before/E::before | 伪元素选择符 | 设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用 |
| E:after/E::after | 伪元素选择符 | 设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用 |
| E::placeholder | 伪元素选择符 | 设置对象文字占位符的样式 |
