4、四种css导入方式
1.4、 CSS的3种导入方式
-
行内样式
-
内部样式
-
外部样式(拓展:外部样式有两种写法)
-
链接式(html标签)
<link rel="stylesheet" href="css/style.css">
-
导入式(css2.1特性,css 3.0基本淘汰了)
<style> /*外部样式之导入式*/ @import url("css/style.css"); </style>
-
代码show
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 内部样式 -->
<style>
h1 {
color: green;
}
</style>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- 优先级:就近原则-->
<!-- 行内样式:在标签元素中,编写一个style属性,编写样式即可-->
<h1 style="color: red;">我是标题</h1>
<h1>我是标题2</h1>
</body>
</html>
style.css
/*外部样式*/
h1 {
color: gray;
}
index2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*外部样式之导入式*/
@import url("css/style.css");
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>