Blogger Information
Blog 12
fans 0
comment 0
visits 6063
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
样式表的来源与优先级的实例演示
天空
Original
385 people have browsed it

样式表的来源与优先级

来源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>
Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post