css系列-样式4种声明方式

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不支持。