CSS02 三种css导入方式(DAY 54)

文章目录

一：先看实际例子：
二：四种方式
- 1：链接式
- 2：导入式

一：先看实际例子：

在这里插入图片描述

1：如果不带行内标签，谁先执行？

是html里面的标签?还是外部导入的css标签？
在这里插入图片描述

从结果可以得知，html里面的标签执行的顺序，从上到下，越靠近下面，越优先执行。

2：测试是否如猜测的一样，下面的覆盖上面的

在这里插入图片描述

3：结论：html里面，下面的标签会覆盖上面的标签。

在这里插入图片描述

4：就近原则

优先级最高的是写在body里的行内样式，其次是写在head里面的，谁在下面，也就是离body里面的h1标签越近，则优先级越高。

二：四种方式

1：链接式

html
在这里插入图片描述

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

2：导入式

css2.1特有的
在这里插入图片描述

<!--    导入式  会先出现结构，再去渲染，不推荐用-->
    <style>
        @import url("css/style.css");
    </style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

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

<!--    内部样式-->
    <style>
        h1{
            color: red;
        }
    </style>

</head>


<body>

<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: green;"> 我是 标题的</h1>

</body>
</html>

如果有多个，用分号隔开
在这里插入图片描述

0 条评论