首发地址: 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