这是我参与【第四届青训营】笔记创作活动的第二天。

CSS是什么

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

基础代码样式：

h1 {
    color:white;
    font-size:14px;
}

其中h1为选择器，color为属性，white为属性值，font-size:14px为声明。

在页面中使用css有外链、嵌入和内联三种方法。

CSS是如何工作的

graph TD
加载HTMl --> 解析HTMl
解析HTMl --> 创建DOM树
解析HTMl --> 加载CSS
创建DOM树 --> 展示页面
加载CSS --> 解析CSS --> |添加样式到DOM节点| 展示页面

选择器Selector

找出页面中的元素，给他们设置样式
使用多种方式选择元素
- 按照标签名、表名或id
- 按照属性
- 按照DOm树中的位置

可分为：通配选择器、标签选择器、id选择器、类选择器和属性选择器

伪类

不基于标签和属性定位元素
几种伪类
- 状态伪类
- 结构性伪类

组合

名称       语法     说明                         示例<br>
直接组合    AB      满足A同时满足B               input:focus
后代组合    A B     选中B,如果它是A的子孙         nav a
亲自组合    A>B     选中B,如果它是A的子元素       section>p
兄弟选择器  A~B     选中B,如果它在A后且和A同级    h2~p
相邻选择器  A+B     选中B,如果它紧跟在A后面       h2+p

颜色-HSL

Hue 色相（H）是色彩的基本属性，如红色、黄色等；取值范围是0-360。
Scturation 饱和度（S）是指色彩的鲜艳程度，越高越鲜艳；取值范围0=100%。
Lightness 亮度（l）是指颜色的明亮程度；越高颜色越亮；取值范围是0-100%。

字体

通用字体族

Serif 衬线体
Sans-Serif 无衬线体
Cursive 手写体
Fantasy
Monospace 等宽字体

调试CSS

右键点击页面，选择[检查]
使用快捷键
- Ctrl+shift+I(windows)
- cmd+opt+I(Mac)

个人总结

今天学的是CSS的一些初级理解。开始先学了CSS是怎样工作的，而后又学了关键的选择器。选择器的作用是找出页面中的元素，给他们设置样式，而选择器的类型多种多样。之后所学分别是伪类、组合、颜色、字体，最后是CSS的调试，整体来说都偏基础，期待后面的深入学习。

CSS初级理解|青训营笔记