1.外部样式
使用 link
标签引入外部样式文件,需要注意以下几点。
- link 标签放在
head
标签内部 - 样式文件要以
.css
为扩展名 - 一个页面往往需要引入多个样式文件
属性 | 说明 |
---|---|
rel | 定义当前文档与被链接文档之间的关系 |
href | 外部样式文件 |
type | 文档类型 |
<link rel="stylesheet" href="my.css" type="text/css">
2.嵌入样式
使用 style
标签可以在文档内部定义样式规则。
<style>
body {
background: red;
}
</style>
3.内联样式
可以为某个标签单独设置样式。
<h1 style="color:green;">行内样式</h1>
4.导入样式
使用 @import
可以在原样式规则中导入其他样式表,可以在外部样式(.css文件中)、style
标签中使用。
但导入样式一定要放在样式规则前面定义,否则不生效。
<style>
@import url("my.css");
body {
background: red;
}
</style>
5.@import与link的区别
加载顺序上的区别
-
当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,
-
而@import引用的CSS会等到页面全部被下载完再被加载。
-
所以有时候浏览
@import
加载CSS
的页面时开始会没有样式,后面样式加载出来后网页会闪烁。
dom支持上的区别
-
link
支持使用Javascript
控制DOM
去改变样式 -
而
@import
不支持。