了解CSS | 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第2天
一. CSS是什么？
- Cascading Style Sheets
- 用来定义页面元素的样式
二. 基础结构
三. 在页面中使用CSS
- 外链：使用link标签，在HTML中引用外部CSS文件；
- 嵌入：写在HTML文件中，且包含在
<style></style>代码块中； - 内联：直接在HTML标签上定义该标签的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是如何工作的
通过DOM树将解析出来的CSS附加到DOM树上，形成一个渲染树，最后展示页面。
六. 选择器
- 找出页面只的元素，以便給他们设置样式
- 使用多种方式选择元素
- 按照标签名、类名或id
- 按照属性
- 按照DOM树中的位置
1. 通配选择器
👆 通配选择器：使用
*定义，表示选取页面中的所有元素(标签)。
2. 标签选择器
👆标签选择器：表示选取页面中指定的标签名称。
3. id选择器
👆id选择器：表示选取页面中指定的id名称。
4. 类选择器
👆类选择器：表示选取页面中指定的类名称。
5. 属性选择器
属性选择器：表示选取页面中指定的属性。
👆
[disabled]：表示只要包含指定的属性就匹配。
👆
[type="password"]：表示属性值需要完全匹配。
[href^="#"]：表示属性值开头为"#"的属性就匹配。[href$=".jpg"]：表示属性值结尾为".jpg"的属性就匹配。
七. 伪类
- 不基于标签和属性定位元素
- 几种伪类
- 状态伪类
- 结构性伪类
1. 状态伪类
- 链接
- link：默认状态
- visited：已访问状态
- hover：鼠标在链接上面的状态
- active：点击状态
- focus：聚集状态
2. 结构性伪类
八. 组合
👇组合样例
九. 选择器组
选择器组：将多个选择器进行组合，并用","隔开，可与多个元素(标签)匹配。
十. 颜色
十一. 字体和段落
1. font-family
- 字体列表最后最后写上通用字体族
- 英文字体放在中文字体前面
👆Web Fonts：统一字体族，将字体文件放在服务器上
- tips：中文字体文件相对较大，在使用时，可以对字体文件进行裁切。
2. font-size
- 关键字
- small、medium、large
- 长度
- px、em
- 百分数
- 相对于父元素字体大小
3. font-style
4. font-weight
font-weight范围：[100, 900]
5. line-height
默认的HTML行高非常不适合阅读，当涉及多段文字就需要设置行高。
推荐大家使用"1.6"这样的数字作为行高。
6. font
类似选择器组，可以将style，weight，size等都写在font中。
7. text-aglin
- left：居左对齐
- center：居中对齐
- right：居右对齐
- justify：分散对齐
8. spacing
- letter-spacing：字符间距
- word-spacing：单词间距
9.text-indent
10. text-decoration
- none
- underline
- line-through
- overline
11. white-space
- normal
- nowrap
- pre
- pre-wrap
- pre-line
十二. 调试CSS
当看到一些非常好的页面时，我们就可以通过右键点击页面，选择检查，来学习这些代码，这也是CSS比较好的一点。
今天课程时间较长，所以分成两部分：了解和深入CSS，明天来学习下一部分。
