CSS样式层叠

Css是用来干嘛的？

• 美化静态HTML页面
• 实现表现和内容分离
• 便于页面风格的统一和修改（样式重用，提高开发效率）

HTML中使用CSS的方法

1. 行内样式：混合在HTML标签里面，对每个元素单独定义样式

   行内样式

   
   

2. 页面的内部样式：在与之间添加样式（重用性差，容易冗余）

   2. charset="UTF-8" />
   3. name="viewport" content=" />
   5. rel="stylesheet" href="style.css" />
   
   
3. 链接外部样式资源：使用Link标签，只需要把公共的CSS单独保存为一个文件，其他页面就可以分别调用自身的CSS文件，如果要改变网站风格，修改公共的CSS文件就可以了，是开发常用的HTML+CSS使用方式
   2. charset="UTF-8" />
   3. name="viewport" content=" />
   5. rel="stylesheet" href="style.css" />
   
   

4. 导入外部样式：import方式导入CSS样式表，和链接外部样式资源类似

   四种样式也有优先级，按照就近原则：行内样式 > 页面内部样式 > 链接外部样式资源 > 导入外部样式

   
   

样式引入实例

2. charset="UTF-8" />
3. name="viewport" content=" />
7. rel="stylesheet" href="sytle1.css" />
12. class="nav">
13. class="title">标题
15. class="girad">
18. style="background-color: blue">1
19. 2
20. 3
21. 4

CSS优先级和继承

CSS的冲突，就是优先级

CSS优先级规则

1. CSS层叠样式表引入方法的优先级：内联式>内嵌式>链接式>导入式
2. 在多个外部样式中，后出现的样式的优先级高于先出现的样式，也就是覆盖
3. 选择器的优先级：ID样式>class样式>标记样式
4. !important,这个样式的优先级就会默认提升到顶级，就像root权限一样

离代码越近，优先级越高

实例

2. class="gridtable" cellpadding="15" cellspacing="2">
5. class="row1" id="test">
6. rowspan="2"> href="#">酒店
7. href="#">海外酒店
8. href="#">团购
10. class="row1">
11. href="#">特价酒店
12. href="#">民宿
14. class="row2">
15. rowspan="2"> href="#">机票
16. href="#">火车票
17. href="#">汽车票
19. class="row2">
20. href="#">特价机票
21. href="#">专车.出租车
23. class="row3">
24. rowspan="2"> href="#">旅游
25. href="#">目的地攻略
26. href="#">游轮
28. class="row3">
29. href="#">周边游
30. href="#">定制旅行
32. class="row4">
33. href="#">景点.玩乐
34. href="#">美食
35. href="#">购物
37. class="row4">
38. href="#">礼品卡
39. href="#">WIFI电话卡
40. href="#">签证

1. /** CSS 代码片段 **/
2. #test {
3. background-color: #e46766;
4. }
5. /* 0,1,0 */
6. .gridtable {
7. width: 608px;
8. height: 57px;
9. margin: 0 auto;
10. text-align: center;
11. }
12. /* 0,1,1 */
13. .gridtable a {
14. text-decoration: none;
15. color: #1f0c13;
16. }
18. .row1 {
19. background-color: #267bd9;
20. }
21. /* 0,1,1 */
22. .row1 a {
23. color: #ffffff;
24. }
26. .row2 {
27. background-color: #267bd9;
28. }
30. .row3 {
31. background-color: #2e9415;
32. }
33. .row4 {
34. background-color: #e58a1a;
35. }