CSS | 青训营课堂笔记总结

这是我参与【第五届青训营】伴学笔记创作活动的第二天！

课程重点

1. CCS代码的构成
2. CSS使用方法
3. CSS流程之选择器组、文本渲染
4. 调试CSS

具体分析

1.CSS是用来定义页面元素的样式，其中包括设置字体、颜色、位置、大小、动画等。

基础代码样式为：

其中：

• selector（选择器）：用来选中页面中元素，并给其中的元素定义样式。
• Property（选择器）：某属性对应某一个属性值（value）。
• Declaration（声明）：属性和属性值用冒号连接成为一条，多条声明用分号隔开，并放在一个大括号里，形成一个声明块。
• 注：选择器+大括号成为一条规则

在页面中使用CSS样式有三种方式：1.外链 2.嵌入 3.内联

2.CSS的工作方式：打开一个页面后，浏览器会加载这个页面的HTML，然后对HTML进行解析，并展现一个DOM树，之后对CSS进行解析，会发现HTML里会运用一些外链、嵌入、内联的方式去使用到CSS，并对所有的CSS样式进行一个解析和分析，通过这一系列的操作，会把DOM树的每一个节点，都给解析出来，并形成一个渲染树，最后把解析出来的CSS附加到渲染树行，就可以形成最终的页面了。

3.选择器（selector）：找出页面中的元素，以便给他们设置样式
分为五种：标签选择器、类选择器、id选择器、通配选择器、属性选择器

伪类：不基于标签和属性定位元素。
分为两种：状态伪类和结构伪类

组合：直接组合、后代组合、亲子组合、兄弟选择器、相邻选择器

选择器组：同时给多个选择器对应相同的样式

RBG颜色

颜色-HSL

• Hue：色相（H）是色彩的基本属性。
• Saturation：饱和度（S）是指色彩的鲜艳程度。
• Lightness：亮度（L）是指颜色的明亮程度，越高颜色越亮。

字体：font-family
使用建议：1.字体列表最后写上通用字体族2.英文字体放在中文字体前面

Font-size：关键字、长度、百分数