这是我参与「第四届青训营 」笔记创作活动的第2天
一、什么是CSS
CSS (Cascading Style Sheets) 层叠样式表，又称级联样式表，用来定义页面元素的样式：
- 设置字体和颜色
- 这只位置和大小
- 添加动画效果
1. CSS语法
CSS规则由两个主要的部分构成：选择器及一条或多条声明。
- 选择器通常是需要改变样式的HTML元素
- 每条声明由一个属性和一个值组成
- 属性是希望设置的样式属性，每个属性有一个值
- CSS引入方式
- 内联样式：在相关的标签内使用style属性
<p style="font-size:20px;color:red;">这是一条内联样式</p>
缺点：缺乏整体性和规划性，维护成本高。
- 嵌入样式：使用style标签在文档头部定义嵌入样式
特点：单个页面内的CSS代码具有统一性和规划性，便于维护，但多个页面之间容易混乱。
- 外链样式：每个页面使用style标签链接到样式表，style标签在文档头部
<link rel="stylesheet" href="/assets/style.css">
特点：样式要应用到很多页面时，可以通过改变一个文件改变整个站点的外观。
二、CSS是如何工作的
1. CSS常用属性
1.1颜色属性
- RGB：通过调试三色色调组合颜色。例如，rgb（143，172，135）
- HSL：通过调试色相、饱和度、亮度来调配颜色。例如：hsl (0，100%，50%)
- alpha：调试透明度。例如：rgba (255，0，0，1)； hsla (0，100%，50%，1)
1.2字体属性
- font-family : 指定元素的字体
（课上截图代码）
-
font-size : 设置文本大小
- 关键字：small、medium、larg
- 长度：px、em
- 百分数：相对于父元素字体大小
2. CSS选择器（Selector）
- 找出页面中的元素，以便设置样式
- 可使用多种方式选择元素
2.1 通配选择器
与任何原色匹配。
2.2 ID选择器
针对有一个特定的边=标签使用，id只能使用一次，以#来定义。
2.3 类选择器
针对想要设置的所有标签使用，用圆点定义。
2.4属性选择器
针对想要设置的某种属性使用，用方括号定义。
总结与思考
通过CSS第一节课的学习，深入了解了CSS的作用，为了让页面呈现美观一致性。通过这杰课的学习，我了解到CSS不同属性有不同的使用方式和适用环境，这让我更加重视在构建HTML元素样式的时候，对CSS使用的思考，只有真正思考过每个元素的设计，才能写出更加规范化的代码，更利于之后的维护工作。这节课也让我认识到对于CSS的学习我害只是了解了皮毛，还需要学习更多充实知识体系。
