这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
走进前端技术栈CSS
课程介绍
CSS 作为前端技术栈中关键一环，对页面元素及样式呈现起到了直接作用。本节课旨在通过对 CSS 的工作流程及原理、页面中 CSS 使用方法等详细解读，帮助前端新手建立对 CSS 的全面而深刻的认知。
课程重点
- CSS 代码构成
- CSS 使用方法
- CSS 流程之选择器组、文本渲染
- 调试 CSS
CSS是什么？
在页面中使用CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Blog</title>
<style>
h1 {
color: orange;
font-size: 24px;
}
p {
color: gray;
font-size: 14px;
line-height: 1.8;
}
</style>
</head>
<body>
<h1>Web框架的架构模式探讨</h1>
<p>在写干货之前，我想先探讨两个问题，
模式的局限性？模式有什么用？</p>
</body>
</html>
运行结果如下：
CSS是如何工作的
选择器Selector
- 找出页面中的元素，以便给他们设置样式
- 使用多种方式选择元素
- 按照标签名、类名或id
- 按照属性
- 按照DOM树中的位置
- 选择器有
- 通配选择器
- 标签选择器
- id选择器
- 类选择器
- 属性选择器
伪类（pseudo-classes）
- 不基于标签和属性定位元素
- 几种伪类
- 状态伪类
- 结构性伪类
组合（Combinators）
颜色-RGB
颜色-HSL
alpha透明度
通用字体族
字体font-family
- 使用建议
- 字体列表最后写上通用字体族
- 英文字体放在中文字体前面
使用Web Fonts
font-size
- 关键字
- small、medium、large
- 长度
- px、em
- 百分数
- 相对于父元素字体大小
line-height
text-align
spacing
text-indent
text-decoration
white-space
调试CSS
- 右键点击页面，选择检查
- 使用快捷键
- ctrl+shift+I(Windows)
- cmd+opt+I(Mac)
引用参考
字节青训营第二节课理解CSS
