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

CSS样式介绍及优先级讲解

程序员文章站 2022-05-01 22:17:55
...

CSS样式介绍及优先级讲解

    

  1. <!DOCTYPE html>
    2. 

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

    4. 

  4. <head>
    5. 

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

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

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

  8.     <title>CSS</title>
    9. 

  9.     <link rel="stylesheet" href="./css/style1.css" />
    10. 

  10. </head>
    11. 

    12. 

  12. <body>
    13. 

  13.     <!-- css作用元素的样式，和布局？-->
    14. 

  14.     <!-- 内部style属性的优先级更高，style标签优先级更低。内部是内联样式 -->
    15. 

  15.     <div>
    16. 

  16.         <h1 style="color: red">Hello World</h1>
    17. 

  17.         <h1>baidu.cn</h1>
    18. 

  18.         <h1>前端开发教程</h1>
    19. 

  19.         <p>ceshi</p>
    20. 

  20.     </div>
    21. 

    22. 

  22.     <!-- HTML,结构化的文本文档，它内部的所有元素，必须使用“标签”进行描述 -->
    23. 

  23.     <!-- 只要放到了HtmL中的内容，并且要被浏览器进行解析或处理的，必须要放到一个“标签”中 -->
    24. 

  24.     <!-- 1.找到要被添加样式的元素
    25. 

  25.         selecytor:选择器
    26. 

  26. 2.为匹配的元素，设置样式规则 -->
    27. 

    28. 

  28.     <!-- <style>
    29. 

  29.         /* 样式的优先级如下 */
    30. 

  30.         /* 行内样式（元素本行的）>文档样式（文档中设置）>默认样式（系统自带） */
    31. 

  31.         /* 行内样式（元素本行的）>文档样式（文档中设置）>外部样式link */
    32. 

  32.         默认样式>继承父的样式(和文本相关的字体颜色等能继承，盒模型的属性不行)
    33. 

  33.         h1 {
    34. 

  34.             /* 样式声明：使用的是“名值对” */
    35. 

  35.             color: rgb(76, 0, 255);
    36. 

  36.             color:green;
    37. 

  37.             样式来源，和优先级有关，也和书写顺序相关
    38. 

  38.             层叠样式表，后面的覆盖前面的；
    39. 

  39.         }
    40. 

  40.         /* 选择器{
    41. 

  41.             一个或多个样式声明
    42. 

  42.         } */
    43. 

  43.     </style> -->
    44. 

  44. </body>
    45. 

    46. 

  46. </html>
    47.

上一篇： 6.1传输层的作用

下一篇： 5-IP协议相关技术

推荐阅读