CSS的4种导入方式
<!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>
</body>
</html>
/*外部样式*/
h1{color: yellow;
}
拓展：外部样式的两种写法
-
链接式
html
<!--外部样式--> <link rel="stylesheet" href="CSS/style.css"> -
导入式
css2.1
<!--导入式--> <style>@import url("css/style.css"); </style>
基本区别
- 从属关系：是HTML标签，不仅可以加载CSS文件，还可以定义RSS、rel连接属性等；而@import是CSS提供的语法规则，只能导入样式表1。
- 加载顺序：在页面加载时，标签引入的CSS会同时加载；而@import引入的CSS会在页面加载完毕后才加载2。
- 兼容性：@import是CSS2.1才有的语法，只能在IE5+及以上版本识别；而**标签作为HTML元素，没有兼容性问题3。
- DOM可控性：可以通过JavaScript操作DOM，插入*标签来改变样式；而@import*方式无法通过DOM方法插入样式1。