css-three ways to import css
Inline style
Internal style
Exterior style
Test of three import methods
<!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;
}
The priority of the three styles: the principle of proximity (styles close to the element are implemented first)
Expansion: Two ways to achieve external styles
1. Linked (recommended for any situation)
-
<link rel="stylesheet" href="css/style.css">
2. Imported (specific to css2.1, not recommended when there are too many web elements)
-
<!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>