这是我参与「第四届青训营 」笔记创作活动的第一天！
本篇笔记的基本内容
- css的基本定义
- 冲突筛选规则
CSS定义
css（层叠样式表）定义了如何显示html的元素，我们可以使用css来更改html元素的呈现效果。比如更改字体大小、颜色，添加动画等。
对于一个标题：
<body>
<h1>绿色</h1>
<body>
使用以下css代码可以将其颜色改变为绿色：
h1 {color:green;}
冲突筛选规则
参考文章：zhuanlan.zhihu.com/p/66972942
对于有冲突的css语句，需要按顺序经过以下三层筛选：
- 筛选来源
- 筛选针对性
- 语句出现的顺序
来源
这一层也有三个优先级：
- 带有
!important修饰的,代表最高的优先级。 - 用户在 html/css 源代码中书写的, 代表第二高的优先级。
- 浏览器中默认的css样式, 优先级最低。比如字体在浏览器中的默认字体为黑色，而链接则为蓝色加下划线。
针对性
在这一层，有一个共识：针对性越强，优先级越高。
一般在css中，针对性分为四个层级：
h1 { color: red; }针对的是所有的 h1 元素。 h1 这种形式被称为 tag selector(或 type selector) （标签选择器）.title { color: green; }针对的是 class=title 的所有元素。 .title 这种形式被称为 class selector （类选择器）#page-title { color: blue; }针对的是 id=page-title 的这一个元素。 #page-title 这种形式被称为 ID selector (ID选择器）- HTML 中写
<p style="color:orange; font-weight:bold;">some text</p>
的话，这种写法称为 inline style， 针对的就是当前这个 p 元素。
以上四个层级的针对性从上至下依次增强，也就是说，优先级的顺序是：inline style > ID选择器 > 类选择器 > 标签选择器。
出现顺序
这层的优先级判断方法很简单，谁在 css源代码中最后出现，谁的优先级就高。
总结
- 使用css可以优化html的样式
- 注意控制选择器的优先级
注意事项
- 使用 @import 可以将一张样式表导入另一张样式表中。比如：
@import "hello.css";
或
@import url("hello.css");
均可
- 简写属性遵循TRouBLe(top/right/bottom/left)的顺序规则
