「这是我参与「第五届青训营」伴学笔记创作活动的第2天」
一、本节课重点内容
CSS作为前端技术栈中关键一环，对页面元素及样式呈现起到了直接作用。本节课对CSS的工作流程及原理、页面中CSS使用方法等关键信息进行了详细解读。
二、详细知识点介绍
CSS是什么？
CSS是层叠样式表，作用是:
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
基本样式如下：
- h1-选择器（Selector），给页面中的元素定义样式。
- color-选择器（Property），用来设置样式的属性color。
- white-属性值（Value）
- font-size:14px;-声明（Declaration），合在一起
- 选择器Selector+{}--样式规则
CSS使用方法：外链、嵌入、内联
比较推荐外链、不太推荐内联（UI组件可以用）
简易的使用样式：
CSS是如何工作的：
选择器：
- 通配选择器：（星号*）-匹配所有
- 标签选择器：用标签来进行作用
- ID选择器：如果我们设置了一个id属性的值是logo，我们可以通过#logo去选中这个元素，去设置它的属性；并且，这个id的值应该在页面中是唯一的。
- 类选择器：class来设置样式，可以出现多次、重复
- 属性选择器：[disabled]{}表示只要属性有disabled这个值就可以进行选定
根据属性特定的值来进行选择：input[type="password"]，只会选择input，并且属性为password
属性的值匹配上某个条件的时候进行选择：herf值为.jpg的时候匹配上这个样式，所以“查看图片”被匹配上样式，同理可得“回到顶部”的样式匹配。
伪类：
状态伪类：不是具体的某个元素，是这个元素处与某种状态下才会被选中。
链接状态：默认-已访问-鼠标暂留-鼠标点击
输入框状态：默认-已访问-鼠标暂留-输入
结构伪类：根据你dom节点在dom树中出现的位置来确定是否选择这个元素
父级第一个孩子橙色，最后一个孩子无下边框。
组合：
p article下所有的p标签被选中；> p,article下的直接p标签被选中（是位于...）；h2 + p，h2标签下的两个p标签被选中。
选择器组：
颜色（rgb）：
颜色（hsl）：
透明度：alpha=1不透明 / =0透明
字体：
字体大小：
字重：（与字体本身相关）
行高：
空白符：（五种不同的属性）
调试CSS:
三、总结 本次课程中，我学到了css基本的样式与不同的选择器。 对我来说，不同的选择“组合”可能会稍有困惑，而选择器的选择学习思路则会比较清晰。
