CSS引入的方式有哪些? link和@import的区别是?
CSS可以通过以下三种方式引入:
- 内联样式:直接在HTML元素中使用”style”属性来定义样式。这种方法的优先级最高,但不利于样式的复用和维护。
例如:<div style="color: red;">This is a red text.</div>
- 内部样式:在HTML文档的
<head>
中使用<style>
标签来定义样式。这种方法可以在一个HTML文档中复用样式,但在多个HTML文档中仍然需要重复定义。
例如:<head> <style> .red-text { color: red; } </style> </head> <body> <div class="red-text">This is a red text.</div> </body>
- 外部样式:通过
<link>
标签或者@import
规则来引入外部的CSS文件。这种方法可以在多个HTML文档中复用样式,是最推荐的方法。
例如:<head> <link rel="stylesheet" href="styles.css"> </head>
或者
<head> <style> @import url('styles.css'); </style> </head>
<link>
和@import
的主要区别在于:
- 加载顺序:
<link>
是HTML方式,与页面同时加载;@import
是CSS方式,需要等到页面加载完才加载CSS。 -
兼容性:
<link>
标签几乎被所有浏览器所支持;@import
是CSS2.1提出的,低版本的浏览器可能不支持。 -
使用限制:
<link>
可以定义RSS等其他事务;@import
只能加载CSS。 -
DOM可控:
<link>
是HTML标签,因此可以通过JS操作DOM,插入标签来改变样式;而@import
不行。
因此,一般情况下更推荐使用<link>
方式来引入CSS。