这是我参与「第五届青训营 」伴学笔记创作活动的第二天
课程重点
- CSS 代码构成
- CSS 使用方法
- CSS 流程之选择器组、文本渲染
- 调试 CSS
- CSS 选择器的特异度
- CSS 继承
- CSS 求值过程解析
- CSS 布局方式及相关技术
- CSS 盒模型 - 行级
- CSS 盒模型 - 块级
详细知识点介绍
CSS是什么？
- Cascading Style Sheets
- 用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
CSS代码构成
选择器(Selector)+属性(Property)+属性值(Value)+声明(Declaration)
三种使用方式
- 外链
- 嵌入
- 内联
CSS是如何工作的
选择器 Selector
- 找出页面中的元素，以便给他们设置样式
- 使用多种方式选择元素
- 按照标签名、类名或id
- 按照属性
- 按照DOM树中的位置
伪类(pseudo-classes)
- 不基于标签和属性定位元素
- 几种伪类
- 状态伪类
- 结构性伪类
组合(Combinators)
选择器组
调试CSS
- 右键点击页面，选择检查
- 使用快捷键
- Ctrl+Shift+I (Windows )
- Cmd+Opt+I (Mac )
选择器的特异度(Specificity)
继承
某些属性会自动继承其父元素的计算值，除非显式指定一个值
CSS求值过程
CodePen - 青训营/CSS/取值过程 (cdpn.io)
布局(Layout)是什么？
- 确定内容的大小和位置的算法
- 依据元素、容器、兄弟节点和内容等信息来计算
布局相关技术
- 常规流
- 浮动
- 绝对定位
盒模型
盒模型布局规则
Flex Box 是什么？
Grid 布局
CodePen - 青训营/CSS/网格模板 (cdpn.io)
CodePen - 青训营/CSS/grid-area (cdpn.io)
float 浮动
CodePen Embedded - 青训营/CSS/position
CodePen Embed - 青训营/CSS/position-fixed
学习CSS的几点建议
课后个人总结
学习完 CSS 后，可以知道：
- CSS 是用来控制网页的样式的，可以对页面的布局、颜色、字体、动画等进行调整。
- CSS 的选择器可以选取 HTML 元素并应用样式，可以根据标签名、类名、ID 来选择。
- CSS 可以通过层叠的方式来确定最终的样式，后面的样式会覆盖前面的样式。
- （自己补充的）CSS 还有一些高级的用法，如媒体查询、预处理器等，可以用来让网页在不同设备上更好的展现。
- （自己补充的）CSS 可以和 JavaScript 配合使用，实现更加丰富的交互和动画效果。
