内联样式：直接在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可以通过以下三种方式引入：
扫一扫
426
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
