CSS引入的方式有哪些? link和@import的区别是?

CSS三种引入方式及区别

原创于 2024-10-01 17:51:43 发布 · 187 阅读

CC 4.0 BY-SA版权

文章标签：

42 篇文章

订阅专栏

内联样式：直接在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不行。

CSS可以通过以下三种方式引入：