这是我参与「第五届青训营 」伴学笔记创作活动的第2天

$\color{Cyan}今日课程小结$

本节课首先学习了css相关的概念，作用，使用方式，工作模式，然后学习了选择器（selector）--通配选择器，标签选择器，id选择器，类选择器，属性选择器，伪类选择器，以及选择器的用法组合，后面就是具体的页面设置如颜色，rgb,hsl,alpha透明度，字体font-family,font-size再往后是line-height,text-align,spacing,text-indent,text-decoration``,white-space，通过这些学习我们简单了解了前端技术栈，在后面的深入中，继续了解了选择器的特异度，继承，css布局中的常规流，块状布局和行级布局，flex布局和grid布局

$\color{CadetBlue}个人感悟$

相比于HtmL，Css的东西相对来说更加宽泛和细致，但相对来说难度上并没有得到特别大的提升，想要学好并没有那么困难，需要去个人下功夫整体和学习

以下是笔记的详细内容

什么是Css

$\color{red}C$ascading $\color{blue}S$tryle $\color{green}S$heets

• 用来定义页面元素的样式
• 设置字体和颜色
• 设置位置和大小
• 添加动画效果

基础的模式

如何在页面中使用css

$\color{red}外链（最常用）$+嵌入+$\color{blue}内联（可视性差）$

CSS是如何工作的

打开一个浏览器，加载HTML，然后解析HTML,在解析的同时加载CSS，同时解析CSS,在DOM树建立的同时，将样式加到DOM数上形成渲染树，展示给用户

个人理解：CSS帮助DOM节点提升可读性和舒适性，优化了用户体验

CSS的选择器Selector

统配选择器（全部选择）

标签选择器（选择特定标签）

id选择器（选取只有唯一的id）

类选择器

（选择已经标记好的属性名，可出现多次）

属性选择器（选择某些属性或者特定的值）

一些特殊用法

<p><a href="#top"> </a>顶部</p>
a[href^="#"]（这种如果href开头为#会选择）
<p><a href="a.jpg">图片</a></p>
a[href$=".jpg"] （这种如果href结尾为jpg会选择）

伪类选择器（状态性伪类和结构性伪类）

link是链接样式，vivisted是访问过样式，hover鼠标经过，active为按下后样式

结构伪类

根据你这个节点在DOM树中出现的位置选中

 li:first-child {（第一节点）
   color: coral
 }

 li:last-child {（最后节点）
    border-bottom: none;
 }

组合选择器（具体看下图）

选择器组（多种选择器组合，逗号分开）

颜色

$\color{red}R$ $\color{green}G$ $\color{blue}B$(三原色组合)

通过十六进制混合三原色

HSL

颜色的不同属性组成，色相，饱和度，亮度

好处：易操作，易判断，易修改，可以通过三者混合调整

指定颜色（in English）

ALPHA透明度（不透明度，1为不透明）

（ps:个人原因没有及时整理完今天课程，明天补上）