使用link标签调用外部CSS文件(推荐此方法)
在head放置<link>来调用外部的wcss.css文件来实现html引用css文件。
<link rel="stylesheet" href="css文件路径" type="text/css" />
link标签通常放置在一个网页的头部标签head标签内的用于链接外部css文件、链接收藏夹图标(favicon.ico),<link> 标签最常见的用途是链接外部样式表,外部资源。
链接外部css样式时候link标签的内容结构解释:
href 值为外部资源地址,这里是css的地址
rel 定义当前文档与被链接文档之间的关系,这里是外部css样式表即stylesheet
type 规定被链接文档的 MIME 类,这里是值为text/css
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="/html/csstest1.css" > </head> <body> <h1>我通过外部样式表进行格式化。</h1> <p>我也一样!</p> </body> </html>
说明:
这种方法会以网页文件主体装载前装载CSS文件,因此显示出来的网页从一开始就是带样式的效果的,它不会象导入式那样先显示无样式的网页,然后再显示有样式的网页。
使用@import调用外部CSS文件
CSS @import规则,用于从其他样式表导入样式规则。这些规则必须先于所有其他类型的规则,@import不能在条件组的规则中使用。
语法:
@import url("文件路径");
示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 实例2. 内联样式引入green.css,link标签引入yellow.css --> <style type="text/css"> @import url("green.css"); </style> <link rel="stylesheet" href="yellow.css"> </head> <body> <div style="width: 50px; height: 50px;"></div> <!-- 盒子为黄色背景,黑色边框,即yellow.css生效 --> </body> </html>
注:
使用@import引入CSS可以很方便的引入外部文件的CSS代码,方便维护和规划。但是每多引入一个CSS文件,就会对服务器增加一次连接请求,当访问量较大时,需在维护性和性能上进行权衡。
以上就是怎么调用css文件?的详细内容,更多请关注0133技术站其它相关文章!