CSS教程-引入

Computer

插入CSS的三种方法

如何插入CSS样式?

要想在html文件中使用CSS添加样式, 主要有一下三种方法:

  • 外部样式表 External style sheet
  • 内部样式表 Internal style sheet
  • 行内样式表 Inline style

外部样式表 External style sheet

外部样式表即把CSS代码单独写在一个文件里, 然后在html里引入这个样式表.
好处是使代码结构变得清晰.

1
2
3
<head>
<link rel="stylesheet" type="text/css" href="路径/文件名.css">
</head>
1
2
3
4
5
6
7
8
9
10
11
/*文件名.CSS*/


body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

内部样式表 Internal style sheet

内部样式表即将CSS代码写在html文件的头标签head中的style标签中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!--文件名.html-->


<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>

行内样式表 Inline style

行内样式表即把CSS的代码直接写到html标签中

1
2
3
4
<!--文件名.html-->


<h1 style="color:blue;margin-left:30px;">我是标题, 而且还是蓝色的.</h1>

优先度

优先度高的能够覆盖优先度低的样式

行内样式表(写在html的标签中) > 外部样式表和内部样式表(写在html的head部分) > 浏览器默认