css就近原则_CSS的引入方式和优先级

1.CSS的引入方式

CSS一共有四种引入方式，内联样式、内部样式表、外部样式表和@import引入。

1.1 内联样式

使用style属性引入样式。

123

缺点：HTML页面不纯净，文件体积大，不利于后期维护。

1.2 内部样式表

在style标签中写CSS代码。style标签一般放在head中。

a{

text-decoration: none;

color: black;

display: inline-block;

}

百度一下

缺点：在页面中编写CSS代码，不利于CSS代码复用，也会增加文件体积，不利于后期维护。

1.3 外部样式表

使用link标签引入CSS文件。link标签一般放在head中。

优点：实现了HTML代码和CSS代码的完全分离，使得前期制作和后期维护都很方便。

1.4 @import引入

在style标签中使用@import url('css文件')引入CSS文件。

@import "css/test.css";

/* 或者使用：*/

@import url('css/test.css');

@import引入的CSS样式，在HTML初始化时，会被导入到HTML或者CSS文件中，成为文件中的一部分，类似第二种内嵌样式。

这种方式和外部样式表一样导入CSS文件，但效率不如外部样式表，不建议使用。

2.CSS的优先级

CSS的优先级遵循就近原则，一般来说，内联样式的优先级最高，内部样式表、外部样式表和@import引入，后声明的优先。

@import "css/orange.css";

p{

color: green;

}

123

456

任意交换style标签、link标签和@import的位置，可以发现后声明的样式会覆盖先声明的。