CSS的4中引用方式与优先级
2019-07-13 本文已影响9人
Frontend晚枫
-
目前来说，CSS共有4种用法，分别是内联式 嵌入式 链接式以及导入式
1.内联式，即元素直接使用style属性进行样式操作，缺点是：HTML页面不纯净，文件体积大，不利于蜘蛛爬行，后期维护不方便。
<p style="color: cadetblue">样式演示</p>
2.嵌入式，即在head部分使用style标签进行样式操作，优缺点：页面使用公共CSS代码，也是每个页面都要定义的，如果一个网站有很多页面，每个文件都会变大，后期维护难度也大，如果文件很少，CSS代码也不多，这种样式还是很不错的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p{
text-align: center;
}
</style>
</head>
<body>
<p>样式演示</p>
</body>
</html>
3.链接式，即在head部分使用link标签引入外部CSS文件进行样式操作，优缺点：实现了页面框架代码与表现CSS代码的完全分离，使得前期制作和后期维护都十分方便
-
html部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="../css/test.css"> </head> <body> <p>样式演示</p> </body> </html> -
CSS部分
p{ color: aquamarine; }
4.导入式，即在head部分使用link标签引入外部CSS文件，外部CSS文件中在导入另一个CSS文件进行样式操作
-
html部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="../css/test.css"> </head> <body> <p>样式演示</p> </body> </html> -
CSS部分
@import url(./test1.css); p{ color: aquamarine; } -
第二：四种CSS引入方式的优先级顺序
1.就近原则
2.理论上：行内>内嵌>链接>导入
3.实际上：内嵌、链接、导入在同一个文件头部，谁离相应的代码近，谁的优先级高
心得：
1、如果同一个css定义分布在两个css文件中，那么样式取后引入的css文件。
2、最好将第三方组件的css放在html靠前位置，自定义的css放到html后面位置。
