ASCII码 ASCII码

样式表的来源与优先级的实例演示

发布于：2022-03-22 10:23:41  栏目：技术文档

样式表的来源与优先级

来源1：代理样式/浏览器样式/默认样式（继承自HTML）

例如：<h2>PHP中文网</h2>

来源2：自定义样式

自定义样式1：行内样式，style属性

~<h1 style="color: blue;">PHP中文网</h1>~

自定义样式2：文档样式/内部样式，style标签
  1.     <h1>晚上好</h1>
  2.     <h1>吃了吗</h1>
  3.     <h1>xxx</h1>
  4.     <style>
  5.         h1{
  6.             color: blue;
  7.         }
  8.     </style>
自定义样式3：外部样式，css文档
  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>自定义样式来源与优先级</title>
  6.     <style>
  7.        @import url('static/style.css')；
  8.     </style>
  9. </head>

优先级1：自定义样式会覆盖默认样式

例如：<h2 style="color: red;">PHP中文网</h2>

优先级2：书写顺序，写在后面的同名属性会覆盖前面的（优先级相同情况下）

  1.     <div style="color: blue;">
  2.         <h1 style="color: red;">php.cn</h1>
  3.     </div>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行