当样式需要应用于许多页面时，外部样式表将是一个理想的选择。使用外部样式表，您可以通过更改文件来更改整个网站的外观。

调用外部css文件的方法如下：

1.使用链接标签调用外部css文件

链接标签定义了文档和外部资源之间的关系，链接标签最常见的用途是链接样式表。

使用网页头部/头部标记对中的链接标记来调用外部CSS文件。

头

linkrel='样式表' type=' text/CSS ' href=' theme . CSS '/

/head

描述：

这种方法是先加载CSS文件，再加载网页文件的主体，所以显示的网页从一开始就有样式的效果，不会先显示没有样式的网页，再像导入一样显示样式化的网页。

2.使用@import规则调用外部css文件

@import rules，用于从其他样式表中导入样式规则，它必须在所有其他类型的规则之前。

使用@import命令将外部样式表信息导入页面，这些信息存在于样式和/style标记中。例如：

@ import '样式。不识别CSS '/window sie 4/ns4、macosxie5、Macintosh ie4/ie5/ns4

@ import ' style . CSS '/window sie 4/ns4，Macintosh ie4/ns4不识别

@ importurl(样式。CSS)//Windows NS 4，Macintosh NS 4不识别

@ import URL(' style . CSS ')//windows ns4，MAC OS x ie5，Macintosh ie4/ie5/ns4无法识别

@ importurl ('style。CSS')//Windows NS 4，Macintosh NS 4不识别

注意：

使用@import引入CSS可以轻松引入外部文件的CSS代码，方便维护和规划。但是，每次引入CSS文件时，都会向服务器添加一个连接请求。当访问量较大时，要权衡维护和性能。

两种方法的区别

Link是一个XHTML标记，除了加载CSS还可以定义RSS等事务。而@import属于CSS范畴，只能加载CSS；

当链接引用CSS时，在加载页面的同时加载；而@import要求页面完全加载，然后再加载。

链接是一个XHTML标签，不存在兼容性问题；而@import是在CSS2.1中提出的，低版本的浏览器不支持。

Ink支持使用Javascript控制DOM改变样式；而@import没有。

@import可以再次将其他样式表引入CSS文件；而link不支持。

本文转载自中文网站