CSS样式的加载

来源：互联网发布：网络打印机远程打印编辑：程序博客网时间：2024/05/22 09:06

1.样式的加载方法

行内样式

html内容和样式同时加载

e.g <h1 style="color:red;font-size:20px;">行内样式</h1>

嵌入样式

html内容和样式同时加载

e.g<style type="text/css">   样式内容...</style>

外部样式(常用)

html内容和样式同时加载

e.g<link href="***.css" rel="stylesheet" type="text/css" />

导入样式

在读取完html文件之后加载

e.g<style type="text/css">  @import url(***.css);</style>

注意在样式中(e.g color:red;) 分好和冒号必须在英文状态下书写

2.样式的优先级

1.！important>行内样式 > 内部样式 > 外部样式

注意:

<style>  body {    background-color: black;    font-family: Monospace;    color: green;  }  .pink-text {    color: pink;  }  .blue-text{    color:blue;    } #orange-text{    color:orange;  }</style><h1 class="pink-text blue-text"  id="orange-text">Hello World!</h1>1.在 HTML 中这些 class 如何排序是无所谓的。然而，在 <style> 部分中 class 声明的顺序却非常重要，第二个声明总是比第一个具有优先权。因为 .blue-text 是第二个声明，它覆盖了 .pink-text 属性。2.你声明的这个 CSS 在 pink-text类选择器的上面还是下面是无所谓的，因为 id 属性总是具有更高的优先级

2.也可以从选择器权值来考虑

标签选择器：权值为1
类选择器和伪类：权值为10
ID选择器：权值为100
通配符选择器：权值为0
行内样式：权值为1000

0 0