CSS-Learning | HTML文档应用CSS样式的方法

HTML中使用CSS

我们写好的CSS样式怎么应用到HTML文档中呢？

以下罗列了几种方法：

1.把样式放在style元素中，直接放到head部分

如果样式不多，又希望能立刻应用它们，可以使用这种方法。

<style>
	body {
		font-family: Avenir Next, SegeoUI, sans-serif;
		color: grey;
	}
</style>

为了使样式表能在多个页面中重用，通常最好把它保存在一个外部文件中

2.使用link元素

<link href="/c/base.css" rel="stylesheet" />

这行代码告诉浏览器把base.css文件下载下来并把它应用到网页上。

3.使用@import指令加载外部CSS文件

可以在HTML文档中的head部分把@import指令放在style中，也可以在外部样式表中使用它。

<style>
	@import url("/c/modeles.css");
</style>

使用link或者style在HTML中添加多个样式表或样式块时，它们声明的次序就是它们在HTML源码中出现的次序。向页面添加样式表时，要注意层叠机制，可参考我的上一篇博客CSS选择符的层叠机制、继承机制与选择符的特殊性。

选择以什么方式把CSS加载到页面中，影响了浏览器显示页面的速度，怎么样提升web性能就很重要了。