三种CSS导入方式
按照CSS样式书写的位置(或者引入的方式),CSS样式表可以分为以下三大类:
- 行内样式表(行内式),又称内联样式
- 内部样式表(嵌入式)
- 外部样式表(链接式)
三者之间的优先级:内联样式>内部样式>外部样式
CSS系列文章目录
1.外部样式表
外部样式表包括<link>链接式和@import导入式两种,之间的优先级遵循就近原则,其特点如下:
- css保存在.css文件中
- 在HTML中使用<link>标签或@import导入
链接式<link>的特点:
- 属于XHTML,无兼容问题
- 优先加载CSS文件到页面
导入式@import的特点:
- 属于CSS2.1,低版本的浏览器不支持
- 先加载HTML结构再加载CSS文件。
2.内部样式表
内部样式表的特点:
- 不适用外部css文件
- 将css放在HTML中<head>标签的<style>里
3.内联样式(不推荐使用)
内联样式的特点:
- 仅影响一个元素
- 在HTML元素的style属性中添加
示例源码及网页显示
.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>三种CSS导入方式</title>
<style type="text/css">
p{
background: #EE6412;
}
/* @import "setbackground.css"*/
</style>
<link type="text/css" rel="stylesheet" href="setbackground.css">
</head>
<body>
<h1>标题</h1>
<p style="background: #1FB1DD">这是一个普通的段落。</p>
<p>这更是一个普通的段落。</p>
</body>
</html>
.css
@charset "utf-8";
/* CSS Document */
h1{
background: #F4F924;
}
p{
background: #10E90E;
}
网页