怎么链接一个外部的css文件？

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。那么怎么链接一个外部的css文件？下面本篇文章就来给大家介绍一下。

链接一个外部的css文件有两种方法，分别是：使用link标签链接外部css和使用@import规则链接外部css。下面给大家介绍一下：

1、使用link标签链接外部css文件

在网页的<head></head>标签对中使用<link>标记可调用外部CSS文件。

<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>

说明：

这种方法会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页。

2、使用@import规则链接外部css文件

@import规则，用于从其他样式表导入样式规则，这些规则必须先于所有其他类型的规则。

使用@import命令用以把外部样式表信息导入页面中，它是存在于在< style>和< /style>标记中的。例如：

<style type="text/css"> 
@import "example.css"; 
@import "style/other.css"; 
</style>

也在css中直接使用，调用另一个CSS文件

@import url(CSS文件路径地址);

注：

使用@import引入CSS可以很方便的引入外部文件的CSS代码，方便维护和规划。但是每多引入一个CSS文件，就会对服务器增加一次连接请求，当访问量较大时，需在维护性和性能上进行权衡。

更多前端开发知识，请查阅 HTML中文网！！

以上就是怎么链接一个外部的css文件？的详细内容，更多请关注html中文网其它相关文章！