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

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

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

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

<link> 标签定义文档与外部资源的关系,<link> 标签最常见的用途是链接样式表。

在网页的<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中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏