CSS样式的加载

1.样式的加载方法

1. 行内样式

html内容和样式同时加载

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

2. 嵌入样式

html内容和样式同时加载

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

3. 外部样式(常用)

html内容和样式同时加载

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

4. 导入样式

在读取完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