CSS 与 HTML 关联方式详解

首发地址： http://ieun.gitee.io/blog/pages/c5f19f/

概要

CSS 与 HTML 关联方式共有三种：内联式、嵌入式、外联式，其中还包括了一种特殊的 @import 指令。本篇文章将详细介绍这四种关联方式以及它们之间的区别。

内联式

将样式代码通过 style 属性写在 HTML 标签中。多条 CSS 样式之间使用;隔开。

<p style="color:red;font-size:12px"></p>

嵌入式（内部样式表）

将样式代码写在<style></style>标签中。通常情况下<style></style>标签写在<head></head>中，其涉及了页面渲染问题，后续会总结输出。

<head> <style type="text/css">          span {         color: red;font-size:12px；      }    </style>
</head>

外联式（外部样式表）

将样式代码写在单独的 CSS 文件中，通过 <link> 标签引用。通常情况下<link>标签也是写在<head></head>中。

<head> <link href="demo.css" rel="stylesheet" type="text/css" />
</head>

@import

@import 指令可用于内部样式表和外部样式表，且必须放在其他 CSS 规则之前，否则不起作用。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>@charset "utf-8";@import './demo.css';.test {color: red;}/* 放在此处无效 *//* @import './demo.css'; */</style>
</head>
<body><div class="test">测试 @import </div>
</body>
</html>

四种关联方式区别

内联式、嵌入式、外联式都是在页面加载时，同时加载的。HTML 页面从头开始解析，当遇到 CSS 样式时就会开始加载并解析样式，此过程不会阻塞 HTML 的解析。

当一个页面中通过 <link> 引入多个外部样式表时，浏览器会并行下载多个 CSS 文件，以提高性能。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="./demo.css"><link rel="stylesheet" href="./demo1.css">
</head>
<body>
</body>
</html>

而 @import 指令引入的样式，是在开始解析 CSS 后，遇到 @import 指令时，才开始加载的，也就是串行加载，会导致页面渲染时间变长。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="./demo.css">
</head>
<body>
</body>
</html>

demo.css 内容：

@import './demo1.css';
.test {background: green;
}

demo1.css 内容：

.test {background: red;
}

除此之外，<link> 与 @import 指令的其他区别：

<link> 是 HTML 标签，除了可以链接外部资源（样式、favicon）外，还可以通过设置不同的 rel 属性做其他事情，如超链接型 link(rel="search")，用于链接到站内搜索页面；
<link> 可以通过 DOM 操作，如动态加载样式；
@import 是 CSS2.1 提供的语法，不兼容 IE5 及以下浏览器，只能用于引入 CSS 文件；
样式的优先级问题：权重相同的情况下，@import引入的样式优先级低于书写在@import指令后的样式（CSS 层叠特性）。我个人理解产生这种问题的原因是，@import相当于一个占位符，通过它引入的样式最终会填充到@import书写的位置，而与@import引入样式的加载时间无关。由于浏览器的流式渲染，使用 @import 可能会触发重排、重绘等问题。

请避免使用 @import