这是我参与⌈第五届青训营⌋伴学笔记创作活动第一天

微信图片_20230116161334.png

说到样式那必不可少的提到选择器!

常用的四类选择器（基本）

1、元素选择器

作用：选中对应元素/标签里面的内容

语法：标签名{}

微信图片_20230116162539.png

2、id选择器

作用：选中对应的id属性值的元素

语法：#属性值{}

3、类选择器

作用：选中对应的class属性值的元素

语法：.class性值{}

4、通配符选择器

作用：选中页面中所有的元素

语法：*{}

如何在页面中使用CSS

我们可以在页面中采用嵌入式

，在页面中直接使用CSS可以直观的看见元素的样式，而且方便在页面中直接进行修改

<style>
   li {
   margin: 0;
   list-style:none;
   }
   p {
   margin:1em 0;
   }
</style>

我们可以在页面中采用外链式

，在页面中使用外链式式很多项目开发用到的办法，可以是HTML代码与css样式代码进行分离，尤其式当样式非常多时，采用外链式是最明智的

<!--外链-->
<link rel="stylesheet" herf="/assets/stle.css">

我们可以在页面中采用内联式

，在页面中使用内联式可以很方便的在写的过程中突然有需要加入或删除元素样式，但如果添加过多会使代码整体不美观，看起来累赘

<p style="margin:1em 0">Example Content</p>

CSS是如何工作的

微信图片_20230116170953.png

只讲css部分的话，浏览器加载页面的html，对HTML进行解析，解析出来是树形的DOM树；解析css的时候会发现，通过前面笔记中写到的外链方式，或者内嵌方式，或者内联方式使用样式，然后对CSS进行加载和解析，通过一系列更具体地操作，会把DOM树的每一个结点解析出来，它的CSS属性是什么样的，从而得到所谓的渲染树，也就是说计算出来每个结点的位置在哪里，每个属性样式是什么样的，最后把它们渲染成一个真正的页面

颜色-RGB

微信图片_20230116172938.png

给元素添加颜色时，css可通过RGB颜色值的多少来指定需要的颜色，不同的RGB值可以呈现出不同的颜色一般可使用rgb(143,172,135)这样来指定或者采用#8fac87来表示

颜色-HSL

微信图片_20230116173659.png

我们也可以通过色相（H）、饱和度（S）和亮度（L）来描述颜色。通常，我们使用十六进制颜色代码，这很好，但是它们有几个问题：

它们是限制性的
他们很难通过阅读来理解

使用HSL，可以按角度（即度数）指定色调，并用百分比指定饱和度和亮度。一个0°色调与100%饱和度和亮度会给我们红色。同样，一个240°色调与50%饱和度和亮度将会导致紫蓝色阴影。

个人总结

这是我第一次参加青训，虽然我个人是学习过前端技术栈了，但是通过这两天的学习依然受益颇多。有些个人在学习过程中容易忽视掉的知识点通过这次课堂又进一步巩固了，也有很多地方是在之前学习时由于快速学习而遗漏的知识点，也通过这次课堂将其拾起。我觉得加入这次青训对我来说是一个正确的选择。

学习前端之CSS是什么？ | 青训营笔记