博客列表 >样式表的来源与优先级的实例演示

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

天空
天空原创
2022年03月21日 20:00:15384浏览

样式表的来源与优先级

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