博客列表 >css样式来源与css优先级冲突的解决方案

css样式来源与css优先级冲突的解决方案

α清尘
α清尘原创
2020年10月10日 14:34:34588浏览

css是什么

  • css是cascade style sheet的简称,是层叠样式表
  • css并不是编程语言
  • css的核心包含层叠,单位(px,em,rem,fr,vh,vw),定位,浮动等等。

css的样式来源有哪些

css的样式来源有三种

  1. 当前文档 <style>
  2. 当前元素的属性 style=""
  3. 通过<link>引入外部公共样式

实例:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>css层叠样式</title>
  7. <!-- 1.通过link引入外部公共样式 -->
  8. <link rel="stylesheet" href="css/css.css">
  9. <!-- 2.在当前文档中写入style样式 -->
  10. <style>
  11. h2{ color: aquamarine;}
  12. </style>
  13. </head>
  14. <body>
  15. <!-- 3.在行内设置当前元素的属性设置样式 -->
  16. <h2 style="color: burlywood;">自定义样式表的来源</h2>
  17. <!-- 选择器的优先级
  18. id选择器>class类选择器>tag标签选择器
  19. -->
  20. </body>
  21. </html>

css优先级冲突的解决方案

  • 样式表的来源
  • 选择器的优先级
  • 源码的顺序

同一属性的样式定义,后边定义的样式会覆盖前边定义的样式
css样式的优先级:行内样式>内嵌样式>外部链接样式
选择器的优先级:id选择器>class类选择器>标签选择器

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议