这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
今天主要对CSS进行学习，掌握了一些相关知识。
本次课程的重点是CSS的代码构成以及使用方法，CSS中选择器组、文本渲染，以及CSS调试。
下面是主要的知识点：
1.CSS介绍
什么是CSS？
CSS全称Cascading Style Sheets，它可以用来定义页面元素的样式。可以用于设置字体和颜色，设置位置和大小，以及添加动画效果。
基本格式如下：
选择器用于选中页面元素，给所选元素规定样式
2.CSS使用方法
CSS使用方法有三种，外链(推荐)，嵌入和内联(不推荐)
下面具体介绍一下：
外链就是就是把 CSS 代码保存在一个单独的文件中，用link标签引入HTML里面。
具体形式举例如下：
嵌入就是直接把样式代码嵌入HTML中。
具体形式举例如下：
内联就是把标签样式直接写在标签的style属性里面，不需要选择器了。
3.CSS工作原理
首先浏览器加载 HTML，然后解析HTML，再把HTML 和 CSS转化成 DOM 。DOM在计算机内存中表示文档。它把文档内容和其样式结合在一起。浏览器显示 DOM 的内容。
4.CSS具体部分介绍
（1）选择器
选择器用于选择页面中的元素
可以按照标签名，类名或id也可以按照属性也可以按照DOM树
中的位置选择元素。
分类：
通配选择器：选择所有的元素并设置属性 举例如下：
标签选择器：通过标签设置属性。 举例如下：
id选择器：通过id设置属性。（注意这里id是唯一的）
类选择器：通过类选择并设置属性。（可以出现多次）
举例如下：
属性选择器：通过属性选择并设置属性
举例如下：
伪类：不基于标签和属性定位元素，可以用于选择。 分为状态伪类和结构性伪类， 可以用伪类选择器选择不同的链接的状态。
举例如下：
状态伪类：
组合方式：
直接组合（不分隔）
后代选择器(以空格分隔)
子元素选择器(以大于 > 号分隔）
相邻兄弟选择器（以加号 + 分隔）
普通兄弟选择器（以波浪号 ～ 分隔）
举例：
（2）颜色
颜色有RGB和HSL属性 先说一下RGB:
RGB通过调节不同颜色比例来显示不同的颜色
表示方法:
1.rgb（红色的数量，绿色的数量，蓝色的数量）
！注意：数量范围0~255
2.#8fac87
！注意：每两位分别代表颜色的数量
再说一下HSL:
HSL分为下面三个：
1.Hue：色相(H)是色彩的基本属性，如红色、黄色等;取值范围是0-360
2.Saturation：饱和度(S)是指色彩的鲜艳程度，越高越鲜艳;取值范围0-100%。
3.Lightness：亮度(L)指颜色的明亮程度;越高颜色越亮;取值范围是0-100%。
使用时的基本格式：
hsl（色彩的基本属性值，色彩的鲜艳程度值，颜色的明亮程度值）
（3）alpha 透明度
透明度为1时是不透明的，为0为全透明的。
举例：
（4）字体 font-family
举例：
我们用Web Fonts来渲染字体
举例如下：
最后介绍一下字的属性：
font-size表示字尺寸大小
font-style表示字样式
font-weight 字重 用100-900表示
line-height 行高
white-space 控制换行：其中nowrap 强制不换行，pre 保留所有的，pre-wrap 自动换行，保留空格，pre-line 合并空格，保留换行。
总结：通过对CSS的学习，我掌握了一些基本的CSS的内容，其中我认为难点在于对CSS语法的学习。同样通过自己学习，以及查阅资料也解决了一些自己的疑问，比如我知道了行内样式添加多个style属性，只会加载第一个style里面的样式。
