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