CSS：层叠样式表

CSS的功能

  • 设定元素样式
  • 设定元素布局

CSS的工作流

浏览器拉取到CSS之后会进行解析，浏览器基于选择器的不同类型找到不同的选择器，将不同的规则应用在对应的DOM节点中，并添加节点的依赖样式——渲染树。

元素样式来源

  • 默认样式

    由浏览器提供，例如h1、h2等

    1. <h1>hello</h1>

  • 自定义样式

    • 行内样式（内联样式）通过style属性实现
      1. <h1 style="color: red">hello</h1>
    • 文档样式（内部样式）通过上style标签实现
      1. <style>
      2.   h1 {
      3.     color: green;
      4.   }
      5. </style>
    • 外部样式通过引入外部CSS文件实现先用link标签引入外部css
      1. <link rel="stylesheet" href="demo.css" />
      在外部css中设置h1的样式
      1. h1 {
      2. color: blue;
      3. }

可以看到样式的优先级是内联样式>内部样式>外部样式>默认样式

  • 继承样式

    继承规则

    • 子级标签可以继承父级标签的颜色,字体,字号等样式
    • 子级标签无法继承父级标签的盒模型样式,例如border等样式无法被继承如
      1. <!DOCTYPE html>
      2. <html lang="en">
      3. <head>
      4. <meta charset="UTF-8" />
      5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      7. <title>Document</title>
      8. </head>
      9. <body>
      10. <style>
      11.   div {
      12.     color: green;
      13.     border: 1px solid black;
      14.   }
      15. </style>
      16. <div>
      17.   hello
      18.   <h1>hello</h1>
      19. </div>
      20. </body>
      21. </html>
      此处h1继承的border与父级div是一个border。

基本选择器和上下文选择器

  • 基本选择器

    • 通过标签选择

      在内部样式中直接写标签名即可
      1. <style>
      2.   h1 {
      3.     color: green;
      4.   }
      5. </style>

    • 通过class或id选择

      1. <style>
      2.   #userid {
      3.       /* id选择 */
      4.     color: green;
      5.   }
      6.   .username {
      7.       /* class选择 */
      8.     color: black;
      9.   }
      10. </style>

    • 通过其他属性选择

      id名前面添加“#”，class名前面加“.”在标签名后加[属性=“属性名”]
      1. <style>
      2.   h1[title="a"] {
      3.     color: red;
      4.   }
      5. </style>
      6. <h1 title="a">hello</h1>
      7. <h1 title="b">hello</h1>
      得到

    • 群组选择

      通过“，”分割各元素，可实现群组选择
      1. <style>
      2.   h1[title="a"],
      3.   h1[title="b"] {
      4.     color: red;
      5.   }
      6. </style>
      7. <h1 title="a">hello</h1>
      8. <h1 title="b">hello</h1>

  • 上下文选择器

    • 子元素选择

      通过>来实现选择子元素
      1. <!DOCTYPE html>
      2. <html lang="en">
      3. <head>
      4. <meta charset="UTF-8">
      5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
      6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
      7. <title>Document</title>
      8. </head>
      9. <body>
      10. <ul class="list">
      11.     <li class="item">item1</li>
      12.     <li class="item">item2</li>
      13.     <li class="item">item3</li>
      14.     <li class="item">item4</li>
      15.     <li class="item">item5</li>
      16. </ul>
      17. <style>
      18.     ul.list > li {
      19.         color: red;
      20.     }
      21. </style>
      22. </body>
      23. </html>

    • 后代元素选择

      通过父元素后面加空格，来实现后代元素选择
      1. <html lang="en">
      2. <head>
      3. <meta charset="UTF-8" />
      4. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      6. <title>Document</title>
      7. </head>
      8. <body>
      9. <ul class="list">
      10.   <li class="item">item1</li>
      11.   <li class="item">item2</li>
      12.   <ul class="item">
      13.     item3
      14.     <li class="chirld">name1</li>
      15.     <li class="chirld">name2</li>
      16.     <li class="chirld">name3</li>
      17.     <li class="chirld">name4</li>
      18.     <li class="chirld">name5</li>
      19.   </ul>
      20.   <li class="item">item4</li>
      21.   <li class="item">item5</li>
      22. </ul>
      23. <style>
      24.   ul.list li {
      25.     color: red;
      26.   }
      27. </style>
      28. </body>
      29. </html>

    • 相邻兄弟元素选择

      通过父元素后加“+”，来实现相邻元素单个选择，父元素后加“~”实现该子元素后所有子元素选择
      1. <!DOCTYPE html>
      2. <html lang="en">
      3. <head>
      4. <meta charset="UTF-8">
      5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
      6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
      7. <title>Document</title>
      8. </head>
      9. <body>
      10. <ul class="list">
      11.     <li class="item">item1</li>
      12.     <li class="item second">item2</li>
      13.     <li class="item">item3
      14.         <li class="chirld">name1</li>
      15.         <li class="chirld">name2</li>
      16.         <li class="chirld">name3</li>
      17.         <li class="chirld">name4</li>
      18.         <li class="chirld">name5</li>
      19.     </li>
      20.     <li class="item">item4</li>
      21.     <li class="item">item5</li>
      22. </ul>
      23. <style>
      24.     li.item.second + * {
      25.         color: red;
      26.     }
      27. </style>
      28. </body>
      29. </html>

选择器权重

  • 选择器权重的作用

    • 在css代码中,出现同一个元素,被多个选择器选择,只有权重最高的选择器代码生效

    • 权重让代码可以进行有效的升级,避免代码升级时反复修改代码

  • 权重的计算方式

    css将 id,class,tag看成一个”三位整数”,id -> 百位, class -> 十位, tag -> 个位,选择器每有一个tag,那么该选择器权重+1,每有一个class权重+10,每有一个id权重+100,将三者结果相加得到最终的权重

  • 为什么不推荐用id和tag

    • id会使该代码权重过高,导致代码更新较为麻烦,不具有弹性。

    • tag标签数量较少,而calss可以任意命名。