CSS4：四种css导入方式

工一木子

于 2021-08-21 16:42:22 发布

阅读量210

点赞数

分类专栏： CSS学习

本文链接：https://blog.csdn.net/Prince140678/article/details/119841624

版权

CSS学习专栏收录该内容

24 篇文章 0 订阅

订阅专栏

本文介绍了CSS的四种导入方式，包括行内样式、内部样式、外部样式（链接式和导入式）。通过示例代码展示了如何在HTML中应用这些样式，强调了样式优先级的就近原则，并提供了实际的HTML和CSS文件内容作为演示。

摘要由CSDN通过智能技术生成

4、四种css导入方式

1.4、 CSS的3种导入方式

行内样式
内部样式

外部样式（拓展：外部样式有两种写法）

链接式(html标签）

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

导入式(css2.1特性，css 3.0基本淘汰了)

<style>
    /*外部样式之导入式*/
    @import url("css/style.css");
</style>

代码show

index.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>
        <h1>我是标题2</h1>
    </body>
</html>

style.css

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

index2.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*外部样式之导入式*/
            @import url("css/style.css");
        </style>
    </head>
    <body>
        <h1>我是标题</h1>
    </body>
</html>

工一木子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS4：四种css导入方式

4、四种css导入方式1.4、 CSS的3种导入方式行内样式内部样式外部样式（拓展：外部样式有两种写法）链接式(html标签）<link rel="stylesheet" href="css/style.css">导入式(css2.1特性，css 3.0基本淘汰了)<style> /*外部样式之导入式*/ @import url("css/style.css");</style>代码showin
复制链接

扫一扫

专栏目录