欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

CSS：层叠样式表

程序员文章站 2022-05-24 23:51:28
...

CSS：层叠样式表

CSS的功能

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

CSS的工作流

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

元素样式来源

  • 默认样式

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

    1. <h1>hello</h1>

    CSS：层叠样式表

  • 自定义样式

    • 行内样式（内联样式）通过style属性实现
      1. <h1 style="color: red">hello</h1>
      CSS：层叠样式表
    • 文档样式（内部样式）通过上style标签实现
        

      1. <style>
        2. 

      2.   h1 {
        3. 

      3.     color: green;
        4. 

      4.   }
        5. 

      5. </style>
        6.
      CSS：层叠样式表
    • 外部样式通过引入外部CSS文件实现
      先用link标签引入外部css
      1. <link rel="stylesheet" href="demo.css" />
      在外部css中设置h1的样式
        

      1. h1 {
        2. 

      2. color: blue;
        3. 

      3. }
        4.
      CSS：层叠样式表

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

  • 继承样式

    继承规则

    • 子级标签可以继承父级标签的颜色,字体,字号等样式
    • 子级标签无法继承父级标签的盒模型样式,例如border等样式无法被继承
      如
        

      1. <!DOCTYPE html>
        2. 

      2. <html lang="en">
        3. 

      3. <head>
        4. 

      4. <meta charset="UTF-8" />
        5. 

      5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        6. 

      6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        7. 

      7. <title>Document</title>
        8. 

      8. </head>
        9. 

      9. <body>
        10. 

      10. <style>
        11. 

      11.   div {
        12. 

      12.     color: green;
        13. 

      13.     border: 1px solid black;
        14. 

      14.   }
        15. 

      15. </style>
        16. 

      16. <div>
        17. 

      17.   hello
        18. 

      18.   <h1>hello</h1>
        19. 

      19. </div>
        20. 

      20. </body>
        21. 

      21. </html>
        22.
      CSS：层叠样式表
      CSS：层叠样式表
      此处h1继承的border与父级div是一个border。

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

  • 基本选择器

    • 通过标签选择

      在内部样式中直接写标签名即可
        

      1. <style>
        2. 

      2.   h1 {
        3. 

      3.     color: green;
        4. 

      4.   }
        5. 

      5. </style>
        6.

    • 通过class或id选择

        

      1. <style>
        2. 

      2.   #userid {
        3. 

      3.       /* id选择 */
        4. 

      4.     color: green;
        5. 

      5.   }
        6. 

      6.   .username {
        7. 

      7.       /* class选择 */
        8. 

      8.     color: black;
        9. 

      9.   }
        10. 

      10. </style>
        11.

    • 通过其他属性选择

      id名前面添加“#”，class名前面加“.”
      在标签名后加[属性=“属性名”]
        

      1. <style>
        2. 

      2.   h1[title="a"] {
        3. 

      3.     color: red;
        4. 

      4.   }
        5. 

      5. </style>
        6. 

      6. <h1 title="a">hello</h1>
        7. 

      7. <h1 title="b">hello</h1>
        8.
      得到
      CSS：层叠样式表

    • 群组选择

      通过“，”分割各元素，可实现群组选择
        

      1. <style>
        2. 

      2.   h1[title="a"],
        3. 

      3.   h1[title="b"] {
        4. 

      4.     color: red;
        5. 

      5.   }
        6. 

      6. </style>
        7. 

      7. <h1 title="a">hello</h1>
        8. 

      8. <h1 title="b">hello</h1>
        9.
      CSS：层叠样式表

  • 上下文选择器

    • 子元素选择

      通过>来实现选择子元素
        

      1. <!DOCTYPE html>
        2. 

      2. <html lang="en">
        3. 

      3. <head>
        4. 

      4. <meta charset="UTF-8">
        5. 

      5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
        6. 

      6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
        7. 

      7. <title>Document</title>
        8. 

      8. </head>
        9. 

      9. <body>
        10. 

      10. <ul class="list">
        11. 

      11.     <li class="item">item1</li>
        12. 

      12.     <li class="item">item2</li>
        13. 

      13.     <li class="item">item3</li>
        14. 

      14.     <li class="item">item4</li>
        15. 

      15.     <li class="item">item5</li>
        16. 

      16. </ul>
        17. 

      17. <style>
        18. 

      18.     ul.list > li {
        19. 

      19.         color: red;
        20. 

      20.     }
        21. 

      21. </style>
        22. 

      22. </body>
        23. 

      23. </html>
        24.
      CSS：层叠样式表

    • 后代元素选择

      通过父元素后面加空格，来实现后代元素选择
        

      1. <html lang="en">
        2. 

      2. <head>
        3. 

      3. <meta charset="UTF-8" />
        4. 

      4. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        5. 

      5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        6. 

      6. <title>Document</title>
        7. 

      7. </head>
        8. 

      8. <body>
        9. 

      9. <ul class="list">
        10. 

      10.   <li class="item">item1</li>
        11. 

      11.   <li class="item">item2</li>
        12. 

      12.   <ul class="item">
        13. 

      13.     item3
        14. 

      14.     <li class="chirld">name1</li>
        15. 

      15.     <li class="chirld">name2</li>
        16. 

      16.     <li class="chirld">name3</li>
        17. 

      17.     <li class="chirld">name4</li>
        18. 

      18.     <li class="chirld">name5</li>
        19. 

      19.   </ul>
        20. 

      20.   <li class="item">item4</li>
        21. 

      21.   <li class="item">item5</li>
        22. 

      22. </ul>
        23. 

      23. <style>
        24. 

      24.   ul.list li {
        25. 

      25.     color: red;
        26. 

      26.   }
        27. 

      27. </style>
        28. 

      28. </body>
        29. 

      29. </html>
        30.
      CSS：层叠样式表

    • 相邻兄弟元素选择

      通过父元素后加“+”，来实现相邻元素单个选择，父元素后加“~”实现该子元素后所有子元素选择
        

      1. <!DOCTYPE html>
        2. 

      2. <html lang="en">
        3. 

      3. <head>
        4. 

      4. <meta charset="UTF-8">
        5. 

      5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
        6. 

      6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
        7. 

      7. <title>Document</title>
        8. 

      8. </head>
        9. 

      9. <body>
        10. 

      10. <ul class="list">
        11. 

      11.     <li class="item">item1</li>
        12. 

      12.     <li class="item second">item2</li>
        13. 

      13.     <li class="item">item3
        14. 

      14.         <li class="chirld">name1</li>
        15. 

      15.         <li class="chirld">name2</li>
        16. 

      16.         <li class="chirld">name3</li>
        17. 

      17.         <li class="chirld">name4</li>
        18. 

      18.         <li class="chirld">name5</li>
        19. 

      19.     </li>
        20. 

      20.     <li class="item">item4</li>
        21. 

      21.     <li class="item">item5</li>
        22. 

      22. </ul>
        23. 

      23. <style>
        24. 

      24.     li.item.second + * {
        25. 

      25.         color: red;
        26. 

      26.     }
        27. 

      27. </style>
        28. 

      28. </body>
        29. 

      29. </html>
        30.
      CSS：层叠样式表

选择器权重

  • 选择器权重的作用

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

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

  • 权重的计算方式

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

  • 为什么不推荐用id和tag

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

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

上一篇： DOM基础及php读取xml内容操作的方法

下一篇： 程序员如何提升自己的价值

推荐阅读