前军教程网

关于网站的CSS引用我们可以有以下四种方式：

• 内联样式（行间样式）

在标签的style属性后添加样式。

// 通过html属性style实现，写在body标签中
<div style="color:green; font-size:18px;">行内式</div>

• 嵌入式样式表（内部样式表）

在style标签内添加，加上head标签内部。

// 在style标签中写入css样式，在body中引用
div{ ? color: red; ? font-weight: bold;}

<div>嵌入式</div>

• 外部样式表

将css样式编写在扩展名为 .css 的文件中，再导入样式，导入在head标签内部。

// 随便命名一个style.css 文件，将样式写在其中
div{ ? 
  color: blue;
}
// 然后在html文件中引入style.css文件
<link href="style.css" type="text/css" rel="stylesheet" />

<div>链接式</div>

• @import可以用来导入其他css文件

相当于原来的css文件中包含了被导入的css文件的样式，两者合并在一个文件中（不推荐使用）。

// 创建一个index.css 文件，在里面编写我们自身的样式
div{ ? 
  color: orange; ? 
  font-size: 20px; ? 
  width: 200px; ? 
  height: 40px;
}
// 使用@import方式导入上面的index.css 文件
<style> 
  @import url(index.css)
</style>

<div></div>

前三者样式的显示优先级：

遵循就近原则：行内样式 > 嵌入式样式 > 外部样式。