当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。
调用外部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>标记中的。例如:
@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别 @import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识别 @import url(style.css) //Windows NS4, Macintosh NS4不识别 @import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别 @import url("style.css") //Windows NS4, Macintosh NS4不识别
注:
使用@import引入CSS可以很方便的引入外部文件的CSS代码,方便维护和规划。但是每多引入一个CSS文件,就会对服务器增加一次连接请求,当访问量较大时,需在维护性和性能上进行权衡。
两种方法的区别
link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;而@import属于CSS范畴,只能加载CSS;
link引用CSS时,在页面载入时同时加载;而@import需要页面网页完全载入以后加载。
link是XHTML标签,无兼容问题;而@import是在CSS2.1提出的,低版本的浏览器不支持。
ink支持使用Javascript控制DOM去改变样式;而@import不支持。
@import可以在CSS文件中再次引入其他样式表;而link不支持。
更多CSS相关知识,可访问 CSS教程 !!
以上就是html如何调用css文件?的详细内容,更多请关注易知道|edz.cc其它相关文章!