这是我参与「第四届青训营 」笔记创作活动的的第2天。
CSS是什么？
CSS全称是Cascading Style Sheets，就是层叠样式表。
它的作用是用来写页面的样式，也可以写一下动画，使人机交互更好。
CSS引入方法？
1.行内样式
<div style="color: pink; margin-top: 10px;border: 1px solid blue">行内样式</div>
2.内部样式表
<head>
<style>
p{
color:pink;
border:blue 1px solid;
}
</style>
</head>
3.链入外部样式表
<link rel="stylesheet" type="text/css" herf="1.css">
4.导入外部样式表
<style>
@import"1.css";
</style>
CSS怎么工作？
加载HTML----解析HTML--加载CSS，解析CSS，创建DOM树，添加样式到DOM节点--展示页面
常用选择器：
1.id选择器-不能重复
2.标签选择器
3.类选择器-可以重复
4.伪类选择器
| 伪类 | 作用 |
|---|---|
| a:link | 超链接点击之前 |
| a:visited | 链接被访问过之后 |
| a:hover | 标放到标签上的时候 |
| a:active | 鼠标点击标签，但是不松手时 |
| :first-child | 选择父元素的第一个子元素 |
| :nth-child(n) | 选择所有父元素的父元素的第n个子元素 |
| :nth-last-child(n) | 选择所有父元素元素倒数的第n个子元素 |
5.组合
| 名称 | 语法 | 说明 |
|---|---|---|
| 直接组合 | AB | 满足A和B |
| 后代组合 | A B | 选中B，如果它是A的子孙 |
| 亲子组合 | A>B | 选中B,如果它是A的子元素 |
| 兄弟选择器 | A~B | 选中B，如果它在A后，且和A同级 |
| 相邻选择器 | A+B | 选中B，如果它紧紧的在A后 |
颜色：
1.rgb
通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色。
表示方式：1.#000000 2.rgb(0,0,0,0);
2.hsl
HSL即色相、饱和度、亮度（英语：Hue, Saturation, Lightness）。
色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。
饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取0-100%的数值。
明度（V），亮度（L），取0-100%。
表示方式：hsl(0,0%,0%)
