CSS的四种导入方式

1. 行内样式

<!--行内样式：在标签元素中编写style属性，写样式即可-->

<h1 style="color:red;">字体样式测试</h1>

2. 内部样式

<head>
<!--内部样式-->
    <style>
        <h1>
          color : green;
        </h1>
    </style>
</head>

3. 外部样式

链接式(html) : html和css分离，在html中引用css文件

<link rel="stylesheet" href="css/css.css">

导入式(CSS2.1)

<head>
<style>
    @import url("css/css.css")
</style>
</head>

Link和import的区别

区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。所以会出现一开始没有css样式，闪烁一下出现样式后的页面(网速慢的情况下)
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。

代码练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导入方式练习</title>

<!--内部样式-->
    <style>
        <h1>
          color : green;
        </h1>
    </style>

<!--外部样式
1.链接式
-->

    <link rel="stylesheet" href="css/css.css">

<!--外部样式
2.导入式
-->

    <style>
        @import url("css/css.css")
    </style>

</head>
<body>

<!--
样式优先级: 就近原则
代码编译顺序是由上及下的，下边的样式会把上边的覆盖
-->

<!--行内样式：在标签元素中编写style属性，写样式即可-->

<h1 style="color:red;">字体样式测试</h1>

</body>
</html>

知识点总结：

导入优先级：

就近原则：代码编译顺序是由上及下的，下边的样式会把上边的覆盖

链接式和导入式的区别

@import：
- 属于CSS范畴，只能加载CSS
- 需要页面网页完全载入以后加载，会出现网页刚加载出来时没有样式，闪烁一下后出现样式的情况
- 有兼容问题
- 不支持使用Javascript控制DOM去改变样式
Link
- XHTML标签，除了加载CSS外，还可以定义RSS等其他事务
- 引用CSS时，在页面载入时同时加载
- 无兼容问题
- 支持使用Javascript控制DOM去改变样式