CSS的三种导入方式（源码实例）

最新推荐文章于 2024-06-05 16:49:46 发布

思诚代码块

最新推荐文章于 2024-06-05 16:49:46 发布

阅读量2.7k

点赞数 3

分类专栏： CSS 系列笔记+源码展示文章标签： css 前端网页

本文链接：https://blog.csdn.net/weixin_47556601/article/details/122699616

版权

CSS 系列笔记+源码展示专栏收录该内容

19 篇文章 4 订阅

订阅专栏

大家好，今天我们来分享一下css的四种导入方式

行内样式：
上源码：

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

</head>
<body>
<!--行内样式；在标签元素当中，编写一个style属性，编写样式即可-->
<h1 style="color: red">我是标题</h1>
</body>
</html>

显示效果：
在这里插入图片描述

css有一个很大的特点：结构与表现分离

就是HTML（负责结构）和css（负责表现），把这两个分开写
上面的代码当中，你可以看见他俩是写在一起的
当然，这样也是可以的，但是当网页源码比较多的时候。我们尽量分开写

我们来看下一个：内部样式表

看源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*这是内部样式表*/
        h1{
            color: blue;

        }
    </style>

</head>
<body>
<!--行内样式；在标签元素当中，编写一个style属性，编写样式即可-->
<h1 style="color: red">我是标题</h1>
</body>
</html>

但是你会发现，这两个样式对同一块HTML 规定内容的颜色不一样

这里就涉及到一个样式优先级的问题

就是先执行哪一个

看效果：
在这里插入图片描述
结果执行了行内样式的红色
即：就优先级而言，行内样式（>）大于内部样式

下面来讲外部样式：

写style文件

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

这是外部样式

通过刚才的测试，我们知道，行内样式的优先级>内部样式的优先级

加上外部样式再来测试

在这里插入图片描述

即：行内样式>外部样式

去掉行内样式
即外部样式和内部样式的优先级对比

看结果：

在这里插入图片描述

即：内部样式的优先级>外部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*这是内部样式表*/
        h1{
            color: blue;

        }
    </st	yle>
    <link rel="stylesheet" href="style.css">
    有一个就近原则，就是代码当中的样式谁离   <h1 >我是标题</h1> 最近，就听谁的

</head>
<body>
<!--行内样式；在标签元素当中，编写一个style属性，编写样式即可-->
<h1 >我是标题</h1>
</body>
</html>

style代码

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

显示现在的结果：
在这里插入图片描述
拓展：

外部样式的两种方式

第一种：链接式

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

第二种：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*导入式*/
        @import url(style.css);"";
    </style>
</head>
<body>
<h1>你真棒</h1>
</body>
</html>

看结果：

在这里插入图片描述
这个导入式比较老，使用的比较少

好了，关于CSS的三种导入方式就讲到这里了，谢谢大家

思诚代码块

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS的三种导入方式（源码实例）

大家好，今天我们来分享一下css的四种导入方式行内样式：上源码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><h1 style="color:
复制链接

扫一扫