CSS 基础知识
1. 层叠解决样式冲突的 3 种方案
1.样式表的来源 2.选择器的优先级 3.源码的顺序
2. 样式表的来源（自定义样式）
- 当前文档:
<style> - 当前元素的属性:
style="..." - 外部公共样式：
<link > 引入
3. 选择器的优先级
tag < class < id < style(当前元素属性)
4. 源码的顺序
当前选择器，以元素最后定义的属性为准
5. 用户代理样式（非自定义样式）
- 用户代理：就是浏览器
- 展示浏览器的默认样式
6. 选择器的优先级方案
| 案例 | id | class | tag | 标示 |
|---|---|---|---|---|
html body header h1 |
0 | 0 | 4 | 0,0,4 |
body header.page-header h1 |
0 | 1 | 3 | 0,1,3 |
.page-header .title |
0 | 2 | 0 | 0,2,0 |
#page-title |
1 | 0 | 0 | 1,0,0 |
7. 注意
- 尽可能不使用
!important 尽可能不要用
id为什么要少用或不用
id?- 原因级别太高，丧失了灵活性
- 为什么尽可能不用 tag?
- 因为 css 的本质是为了
样式复用
- 因为 css 的本质是为了
- 尽可能使用
class来完成样式表
8. 继承(inherit)
- 有的属性可以被继承，如颜色，字体，有的不行，如盒模型
- 两个关键字
inherit: 继承initail: 初始值(依赖浏览器)
9. 案例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><style>/* 1.简单优先级 */.title {color: red;}#page-title {color: green;}/* 2.复杂优先级 *//*0,0,4 */html body header h1 {color: red;}/* 0,1,3 */body header.page-header h1 {color: sienna;}/* 0,2,0 */.page-header .title {color: slateblue;}/* 1,0,0 *//* 不建议使用id，级别太高，平常建议使用class */#page-title {color: rgb(128, 0, 96);}</style><title>CSS测试</title></head><body><header class="page-header"><!-- 标签元素优先级最高style > id > class > tag(html标签)--><!-- <h1 id="page-title" class="title" style="color: hotpink">我在php中文网学习php</h1> --><h1 id="page-title" class="title">我正在php中文网学习php</h1></header></body></html>