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

最新推荐文章于 2024-05-23 22:59:55 发布

张学恒

最新推荐文章于 2024-05-23 22:59:55 发布

阅读量162

点赞数

分类专栏： CSS 文章标签： css html css3 html5 前端

本文链接：https://blog.csdn.net/Watremelon/article/details/124553487

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

一：先看实际例子：
二：四种方式
- 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
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS02 三种css导入方式(DAY 54)

文章目录一：先看实际例子：1：如果不带行内标签，谁先执行？2：测试是否如猜测的一样，下面的覆盖上面的3：结论：html里面，下面的标签会覆盖上面的标签。4：就近原则二：四种方式1：链接式2：导入式一：先看实际例子：1：如果不带行内标签，谁先执行？是html里面的标签?还是外部导入的css标签？从结果可以得知，html里面的标签执行的顺序，从上到下，越靠近下面，越优先执行。2：测试是否如猜测的一样，下面的覆盖上面的3：结论：html里面，下面的标签会覆盖上面的标签。4：就近原则
复制链接

扫一扫