html中引入外部css样式的方法有两种:
<link>标签
@import规则
下面就来给大家介绍一下这两种方法。
1、通过<link>标签调用外部css样式
在网页的<head></head>标签对中使用<link>标记来引入外部样式表文件,使用html规则引入外部css。
<link> 标签定义文档与外部资源的关系,<link> 标签最常见的用途是链接样式表。
示例:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="/html/csstest1.css" > </head> <body> <h1>我通过外部样式表进行格式化。</h1> <p>我也一样!</p> </body> </html>
说明:
这种方法会以网页文件主体装载前装载CSS文件,因此显示出来的网页从一开始就是带样式的效果的,它不会象导入式那样先显示无样式的网页,然后再显示有样式的网页。
2、通过@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>
说明:
这种方法会在整个网页装载完后再装载CSS文件,因此这就导致了一个问题,如果网页比较大则会儿出现先显示无样式的页面,闪烁一下之后,再出现网页的样式。这是导入式固有的一个缺陷。
两种调用外部css样式方法的区别:
@import是 CSS 提供的语法规则,只有导入样式表的作用;link是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等。
加载页面时,link标签引入的 CSS 被同时加载;@import引入的 CSS 将在页面加载完毕后被加载。
@import是 CSS2.1 才有的语法,故只可在 IE5+ 才能识别;link标签作为 HTML 元素,不存在兼容性问题。
可以通过 JS 操作 DOM ,插入link标签来改变样式;由于 DOM 方法是基于文档的,无法使用@import的方式插入样式。
link引入的样式权重大于@import引入的样式。
以上就是html怎么引入一个外部css样式?的详细内容,更多请关注0133技术站其它相关文章!