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 的本质是为了样式复用
尽可能使用 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>