CSS02：四种CSS导入方式

莓有烦恼2025-07-06 14:14

CSS的4种导入方式

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>
</body> 
</html>

css 复制代码

/*外部样式*/
h1{
    color: yellow;
}

拓展：外部样式的两种写法

链接式

html

复制代码

<!--外部样式-->
<link rel="stylesheet" href="CSS/style.css">

导入式

css2.1

html 复制代码

<!--导入式-->
<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。