这是我参与「第四届青训营 」笔记创作活动的的第2天。
第二天由浅至深地介绍和讲解了CSS相关的知识点。
以下是第二节课主要内容的总结：
CSS基础知识
CSS是什么
- 层叠样式表 Cascading Style Sheets
- 用来定义页面元素的样式
设置字体和颜色
设置位置和大小
添加动画效果
CSS基础代码结构
- 选择器：选中页面元素，给元素定义样式
- 属性和属性值：共同组成声明
在页面中使用CSS
- 外链
<link rel="stylesheet" href="/assets/style.css"> - 嵌入
<style>
li {margin: 0; list-style: none; }
p {margin: lem 0; }
</style> - 内联
<p style="margin: lem 0">Example Content</p>
CSS是如何工作的
- 浏览器加载HTML
- 解析HTML（创建DOM树）
- 加载和解析CSS
- 添加样式到DOM节点
- 展示页面
CSS选择器
选择器 Selector
- 找出页面中的元素，以便给他们设置样式
- 使用多种方式选择元素
按照标签名、类名或id
按照属性
按照DOM树中的位置
选择器类别
- 通配选择器
- 标签选择器
- id选择器
- 类选择器
- 属性选择器
伪类
- 不基于标签和属性定位元素
- 几种伪类
状态伪类 (链接、输入框等）
结构伪类
组合 Combinators
| 名称 | 语法 | 说明 | 示例 |
|---|---|---|---|
| 直接组合 | 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：是色彩的基本属性，如红色，黄色等；取值范围是0-360。
- 饱和度 Saturation：是色彩的鲜艳程度，越高越鲜艳；取值范围0-100%。
- 亮度 Lightness：指颜色的明亮程度；越高颜色越亮；取值范围是0-100%。
（透明度 Alpha：alpha = 1 完全不透明）
字体 font-family - 通用字体族
- 衬线体 Serif（e.g. 宋体）
- 无衬线体 Sans-Serif（e.g. 黑体、微软雅黑）
- 手写体 Cursive（e.g. 楷体）
- Fantasy（e.g. Comic Sans MS）
- 等宽字体 Monospace（e.g. 中文字体）
（也可以使用Web Fonts）
font-family使用建议
- 字体列表最后写上通用字体族
- 英文字体放在中文字体前面
font-size
- 关键字：small、medium、large
- 长度：px、em
- 百分数：相对于父元素字体大小
调试CSS
- 右键点击页面，选择“检查”
- 使用快捷键
Ctrl+Shift+I(Windows) Cmd+Opt+I(Mac)
选择器的特异度
- 特异度越大，优先级越高
- id > (伪)类 > 标签
继承
- 某些属性会自动继承其父元素的计算值，除非显式指定一个值
- 一般与文字相关的属性可以继承，和模型相关的不可以
初始值
- CSS中，每个属性都有一个初始值
background-color的初始值为transparent
margin-left的初始值为0 - 可以使用initial关键字显式重置为初始值
background-color: initial
CSS布局
布局相关的属性
- width宽度
- height高度
- padding内边距
- border边框
- margin外边距
块级 vs. 行级
| Block Level Box | Inline Level Box |
|---|---|
| 不和其他盒子并列摆放 | 和其他行级盒子一起放在一行或拆开成多行 |
| 适用所有的盒模型属性 | 盒模型中的width、height不适用 |
块级排版上下文
- Block Formatting Context (BFC)
- 某些容器会创建一个BFC
根元素
浮动、绝对定位、iline-block
Flex子项和Grid子项
overflow值不是visible的块盒
display:flow-root;
行级排版上下文
- Inline Formatting Context (IFC)
- 只包含行级盒子的容器会创建一个IFC
- IFC内的排版规则
盒子在一行内水平摆放
一行放不下时，换行显示
text-align 决定一行内盒子的水平对齐
vertical-align决定一个盒子在行内的垂直对齐
避开浮动（float）元素
