css——css的三种导入方式
行内样式
内部样式
外部样式
三种导入方式的测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--2.内部样式-->
<style>
h1{
color:green;
}
</style>
<!--3.外部样式-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--1.行内样式;在标签元素中加一个style属性,然后编写样式即可-->
<!--<h1 style="color:red">标题党</h1>-->
<h1>标题</h1>
</body>
</html>
/*外部样式*/
h1{
color:blue;
}
三种样式的优先级:就近原则(离元素近的样式优先被实现)
拓展:实现外部样式的两种方式
1.链接式(任何情况推荐使用)
-
<link rel="stylesheet" href="css/style.css">
2.导入式 (css2.1特有,网页元素太多时不推荐使用)
-
<!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>