这是我参与「第五届青训营 」笔记创作活动的第1天。
在上一节，我们学习了HTML基础，这节课我们将开始学习CSS中的基本概念。
本节重点：
- CSS选择器有哪些，他们的作用是什么
- CSS选择器的组合使用
- CSS中常见的字体相关属性
CSS引入方法
1、外链
通过link标签引入外部CSS文件：
<link rel="stylesheet" href="/assets/style.css">
2、嵌入
<style>
li { margin: 0; list-style: none;}
p { margin: 1em 0;}
</style>
3、内联
<p style="margin: 1em 0">hello</p>
CSS选择器
通配选择器 *
选择所有元素
属性选择器
使用属性选择器，我们可以选中拥有某个属性的元素，使用时通过[]包裹起相应的属性，例如：
如果我们想选中属性值为某个具体值的元素，可以使用”=“，例如：
除了”=“号进行严格匹配，还支持模糊匹配，我们可以用”^=“匹配开头，用”$=“匹配结尾，例如：
伪类选择器
伪类选择器不基于标签和属性定位元素。伪类主要分为状态性伪类和结构性伪类。
状态性伪类：只有处于某种状态才会被选中。常见的状态性伪类如下：
- link：匹配未曾访问的链接
- visited：用户访问后
- hover：鼠标悬浮在元素上时
- active：用户激活后
- focus：有焦点时
结构性伪类：根据dom节点在dom树中的位置进行选择。例如：
- first-child
- last-child
选择器的组合使用
不同选择器可以一起使用，中间没有空格隔开时，表示一个元素需要同时满足几个选择器的要求才能被选中，例如：
//只有又是input标签，同时类名为error的元素才会被选中
input.error {
width: 20px;
}
各种组合方式总结：
注意：
>选中的是直接子元素，不包括孙元素，曾孙元素；
+选中的是紧跟在后面的一个元素;
颜色
RGB
写法：rgb（143, 172, 135），另一种表示方式是用#十六进制表示，例如#8fac87
HSL
写法：hsl（18, 91%, 84%）。它由三部分组成：
hsl相比rgb的优点是可以更直观的看出颜色的饱和度和亮度。
alpha
alpha表示透明度，它的取值范围是0~1。当值为0时表示完全透明，为1时完全不透明。
使用方法是把作为第四个值它加到RGB、HSL模型中，使用函数rgba（），hsla（），也可以写成十六进制，例如：
字体
字体族font-family
font-family的值可以有多个用逗号隔开，这样做的目的是提高兼容性，例如写了两种不同的字体值，当浏览器不支持第一种字体时，会自动的使用第二种字体，以此类推。
此外，font-family的值最后可以指定通用字体族，表示某一类风格的字体。建议写代码时始终加上，如果前面所有字体都不支持，至少可以保证最终的字体是同一类别。
除了使用系统自带的字体，我们还可以使用Web Fonts引入自定义字体，通过@font-face关键字进行引入，例如：
其中src指定了字体文件所在的地址。
字体大小font-size
font-size的值有几种不同的表示方法，如下：
字体风格font-style
常用的值有italic，意大利斜体
字体粗细font-weight
常用取值：bold加粗
行高line-height
表示两行文字基准线之间的距离
当line-height的值不加px，表示的是字体大小的倍数，一般建议用1.6，例如：
line-height: 1.6;
text-align文字对齐方式
可以设置文字的对齐方式。
letter-spacing字母间距
设置字母的间距。
word-spacing单词间距
设置单词的间距。
text-indent首行缩进
可以实现首行缩进。
white-space处理空白
white-space可以设置如何处理元素的空白。
不同的取值效果如下：
（图片来源：www.w3school.com.cn/cssref/pr_t…）
当想保留多个空格时，我们可以设置属性值为pre。
本节小结
这节课我们先是学习CSS的引入方式，接着学习CSS规则的匹配方式----各种CSS选择器的应用，然后简单地了解CSS中颜色的表示方法，最后我们着重学习了跟字体有关的CSS属性。下节课我们将进一步深入地学习CSS的其他概念以及应用。
