样式表的三种来源及示例
外部引入公共样式
语法：
<link rel="stylesheet" href="引入的样式地址">说明：一般放在网页的
<head>……</head>标签中示例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>样式表来源</title><link rel="stylesheet" href="style.css"></head><body>……</body></html>
在当前文档中
语法：
<style>……</style>说明：
- 一般放在网页的
<head>……</head>标签中 - 具体的样式需要写在
<style>……</style>标签中
- 一般放在网页的
示例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>样式表来源</title><style>.love {color: red;font-size: 20px;}</style></head><body><p class="love">我喜欢CSS</p></body></html>
行内样式(当前元素的属性)
语法：
style="具体的样式写在这里"说明：直接在对应的标签内写上对应的样式即可
示例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>样式表来源</title></head><body><p style="color: red; font-size: 20px">我喜欢CSS</p></body></html>
CSS 优先级冲突的解决方案
样式表的来源优先级
规则：外部引用 < 文档中引用 < 行内引用
冲突解决方案：
- 把多个文档都适用的公共的样式表通过外部引用的方法进行使用
- 把当前文档中多个元素公用的样式写在当前文档的样式（
<style>……</style>）中 - 把某一个元素特有的样式在其行内样式标签中
style="..."使用
选择器的优先级及其冲突解决方案
- 选择器的优先级：id > class > tag
- 选择器的优先级解决方案规则：
- 只有 tag 便签的情况下，tag 的数量越多，就越优先
- 只有 class 的情况下，class 的数量越多，就越优先
- 只有 id 的情况下，id 的数量越多，就越优先
- 有两个或两个以上的选择器时，id 的优先级最高，其次是 class，最后是 tag
使用技巧：两组选择器都对应同一元素时，判断哪一组的优先级别最高，可以先分别统计出每一组选择器具体包含多少个 id、class 和 tag，然后就可以根据上面的解决方案来做出判断了
示例 1：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>样式表来源</title><style>p {color: blanchedalmond;font-size: 10px;}p.love {color: blue;font-size: 50px;}main p.love {color: rgb(0, 255, 119);font-size: 30px;}div main p.love {color: rgb(80, 27, 194);font-size: 40px;}#lv {color: rgb(75, 54, 104);font-size: 60px;}div main p#lv {color: rgb(19, 226, 157);font-size: 80px;}.love {color: red;font-size: 20px;}</style></head><body><div class="container"><main><p class="love" id="lv">我喜欢CSS</p></main></div></body></html>
- 分析：上面的代码中，一共出现了七组选择器样式，最终的样式到底以哪一组为准呢？我们具体来看:
| 编号 | 选择器 | id | class | tag | 标识 | 优先级别 |
|---|---|---|---|---|---|---|
| 1 | p |
0 | 0 | 1 | 0,0,1 |
7 |
| 2 | p.love |
0 | 1 | 1 | 0,1,1 |
5 |
| 3 | main p.love |
0 | 1 | 2 | 0,1,2 |
4 |
| 4 | div main p.love |
0 | 1 | 3 | 0,1,3 |
3 |
| 5 | #lv |
1 | 0 | 0 | 1,0,0 |
2 |
| 6 | div main p#lv |
1 | 0 | 3 | 1,0,3 |
1 |
| 7 | .love |
0 | 0 | 1 | 0,1,0 |
6 |
说明：按照上面所说的选择器的优先级解决方案规则，我们对上面七组选择器先进行统计，按照“同类型看数量(数量越多，级别越高)，不同类型看优先级(id>class>tag)”的原则来判断即可，最终我们得出结论：编号为6的这一组(div main p#lv)选择器的级别是最高的，其次是编号为5的这一组(#lv)级别是第二高的，以此类推，编号为1的这一组(p)级别是最低的。
-最终显示ide效果如下所示(div main p#lv优先级最高，故最终以它为准)：
源码的顺序
- 规则：同等级别下，后面出现的样式会覆盖前面的样式
- 示例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>样式表来源</title><style>.love {color: red;font-size: 20px;}.love {color: blue;font-size: 50px;}</style></head><body><p class="love">我喜欢CSS</p></body></html>
最终显示的效果如下所示：
注意事项
- 选择器中最好少用id（级别太高，不够灵活）
- 尽可能不用tag标签（为了更方便地复用）
- 选择器尽可能推荐使用class来实现
