这是我参与「第五届青训营 」笔记创作活动的第3天,昨天主要学习了关于CSS的知识，本人目前在读大一，在学校上学期的时候就学过CSS的内容那时我感觉CSS挺简单的，学过青训营的CSS后我改变了对CSS的看法（呜呜呜，太难了）。下面昨天学的CSS:

CSS是什么？怎么使用CSS在页面中？CSS怎么工作？

CSS的全拼是Cascading Style Sheets，主要是用来定义页面元素的样式，即设置字体和颜色，设置位置和大小和添加动画效果。因此CSS本身是由一条一条的样式规则构成。

在页面中使用CSS有三种方法分别是：外链，嵌入，内联。

其中外链是最常用的，图中蓝色的部分（第二行，第五行和第八行，第十一行）就是三种方法对应的标签，外链要使用的话需要在文件的外面建立一个CSS文件，其它的两个方法在文件里面就可以实现，下图所展示的代码对CSS的使用运用了嵌入的方法：

内联的使用由图一可知在标签内部添加style即可。

由图表分析大致是：在解析HTML文件时将CSS的元素加载处理并进行分析，然后将分析的CSS内容添加到DOM树中最后展示成页面。

CSS代码的标准

由上图可知上图包含选择器 属性值 声明，选择器就是选择元素为它们设置样式，从上图会发现选择器有两个其实选择器不止两个，下面来讲解：

选择器

选择器细分有：通配选择器，标签选择器，id选择器，类选择器（常用），属性选择器。

通配选择器

通配选择器的表示是用一个：*(星号)，星号就是匹配所有，而对它的引用就是在代码中直接输上星号。

标签选择器

标签选择器就是标签本身，对标签选择器的引用是在CSS代码中直接将要设置样式的标签写入，就像上图要对h1内的内容设置样式一样，只需要在style内写入h1标签就可以对标签内的内容进行设置样式。

id选择器

id选择器的引用是在原代码的标签内添加id 并为id进行命名，然后再在CSS代码中输入标签内id命名的内容并在内容前加上#，#logo在CSS代码中表示的就是标签h1的内容，而在#logo中的内容就是对标签h1内容的样式设置。重要的是：id的命名（值）最好是唯一的。

类选择器

类选择器的使用就和id选择器的使用大致相同（可参考以上id选择器的使用），不同的是类选择器的命名（值）可以相同，还有一点类选择器在CSS代码中的引用与id选择器不同，需要把#替换成 . 。

在类选择器中还有伪类选择器，伪类选择器有两种，一种是状态（一个元素处在一个特定的状态下才会被选中），另一种是结构（根据DOM节点在DOM树中出现的位置来决定是否选中这个元素）。

属性选择器

这个选择器是通过元素的属性或属性值来选中这个元素。

选择器的优先级

同时在一个页面中可写多个选择器，这些选择器有优先级，优先级由选择器的特异值来决定（选择器的特殊程度），那么选择器的特异度怎么计算？从这个连接中可以找到计算的方式，链接的那头是另一位作者。

下面这张图是在CSS代码中两个元素组合在一起所代表的意思

CSS中如何设置颜色，字体？

在CSS中对颜色的设置要用到RGB，HSL,alpha。rgb关系到这个元素是什么颜色，它是通过对红，绿，蓝三种颜色混合比率分配从而进一步得到一个新的颜色（分配的值是0~255）。HSL关系着这个颜色的鲜艳程度，亮亦或是暗。alpha是对这个元素透明度的设置，0是透明，1是不透明，0到1之间的数值关系透明程度。

字体的设置中有一个font-family，其里面可以写好几个字体（因为不同的浏览器支持不同的字体）。因此涉及到了字体组，下面是通用字体族：

还有对字体大小的设置用到的标签是：font-size，line-hight是对行高的设置。

小结：这些内容还是有些复杂的，这是CSS一部分后期补上另一部分。