这是我参与第四届青训营笔记创作活动的第1天，CSS学习的部分学习笔记。对于CSS中对于选择器、字体、颜色等有了新的了解和认识并且对CSS有了新的认识。
第二部分 CSS
1.CSS是什么？
英文全称：
Cascading Style Sheets。用来定义页面元素的样式 1.设置字体和颜色 2.设置位置和大小 3.添加动画效果
2.CSS的最基础代码
h1 {
color: white;
font-size: 14px;
}
注意：
1.选择器：用来选中页面中的一些元素设置样式 2.属性：元素设置样式 3.属性值：设置具体的样式
3.在页面中使用CSS
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
<!-- 外链 -->
<link rel="stylesheet" href="style.css">
<!-- 嵌入 -->
<style>
li {
margin: 0;
list-style: none;
}
p {
margin: 1em 0;
}
</style>
</head>
<body>
<!-- 内联 -->
<p style="margin: 1em 0;">Example Content</p>
</body>
</html>
注意：
1.外链需要确定
.css后缀文件的位置（或确定位置关系） 2.内联不建议采用（不推荐），可能会在某些场景中使用到
4.一个例子
分析：
1.例子中对
h1设置了字体颜色和字体大小 2.例子中对p设置了字体颜色、字体大小以及行间距 3.行间距line-height: 1.8;表示行间距设置为字体大小的1.8倍，计算可以知道具体的行间距
5.CSS是如何工作的
6.选择器Selector
找出页面中的元素，以便给他们设置样式
使用多种方式选择元素： 1.按照标签名、类名和
id2.按照属性 3.按照DOM树中的位置
7.通配符选择器
注意：
1.选中所有的标签
8.标签选择器
注意：
1.选择同一类标签
9.id选择器
注意：
1.
id只能选择某一个元素 2.设置id时，只能出现一次
10.类选择器
注意：
1.类选择器可以出现多次
11.属性选择器
注意：
1.选择某个元素且该元素带有的某个属性
注意：
1.选择某个元素且该元素有某个属性且该属性的属性值为指定的值
注意：
1.也可以通过代码匹配特定的属性值（例如，$以什么结尾）
12.伪类选择器
不基于标签和属性定位元素
几种伪类 1.状态伪类 2.结构性伪类
注意：
1.状态伪类：不依赖与元素的值，而是当元素处于某种状态时才产生的变化（例如，鼠标点击、鼠标悬停） 2.
:focus光标聚焦在输入框
注意：
结构伪类：
DOM节点出现在DOM树中的位置决定是否选中
注意：
1.通过元素在父级元素中的位置进行选择 2.
input.error表示选中的元素既是input标签，也是.error类
13.后代和兄弟选择器
14.选择器组
注意：
1.同时给多个选择器设置相同的元素
15.颜色-RGB
注意：
1.
RGB(0,0,0)黑色，RGB(255,255,255)白色
16.颜色-HSL
注意：
1.设置按钮，当点击按钮时按钮会变暗或者变亮时，推荐使用
HSL来表示
17.颜色-关键字
18.颜色-透明度
注意：
1.
alpha为1时，不透明，逐渐调低是会越来越透明
19.字体font-family
注意：
1.设置字体种类
注意：
1.当计算机没有第一种字体时会使用第二种字体，还没有则使用第三种
注意：
1.可以使用互联网提供的字体 2.可以使用字体图标，最大的优点是放大不会失真
20.字体大小
关键字：
small、medium、large长度：px、em百分数：相对于父元素字体大小
注意：
1.
font-weight表示字体的粗细
21.行高
\