引用样式的方式有哪几种？他们的优先级排序怎么样？

最新推荐文章于 2024-03-21 08:00:00 发布

@少年啊

最新推荐文章于 2024-03-21 08:00:00 发布

阅读量1.4k

点赞数

分类专栏：面试题文章标签： css

本文链接：https://blog.csdn.net/qq_45942606/article/details/116837470

版权

面试题专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一共有4中方式，分别为内联、内嵌、外联、导入。

1、内联（行内样式） - 在标签内直接写样式，style=""

<div style="width: 300px;height: 300px"></div>

2、内嵌（内部样式） - 在head标签里，加一个style标签，在style里写样式

<head>
    <meta charset="UTF-8"/>
    <title>document</title>
    <style>
        div {
            background-color: red;
        }
    </style>
</head>

3、外联（外部样式） - 新建一个.css文件，通过link来引入样式

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

4、导入（导入样式） - 在head标签里，加一个style标签，再写@import url()，跟用link的方式差不多

<head>
    <meta charset="UTF-8"/>
    <title>document</title>
    <style>
        @import url(css/index.css);
    </style>
</head>

5、优先级

1、就近原则
2.理论上：内联>内嵌>外联>导入
3.实际上：内嵌、外联、导入在同一个文件头部，在CSS选择器权值相同的情况下，谁离相应的代码近，谁的优先级高

@少年啊

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
引用样式的方式有哪几种？他们的优先级排序怎么样？

一共有4中方式，分别为内联、内嵌、外联、导入。1、内联（行内样式） - 在标签内直接写样式，style=""<div style="width: 300px;height: 300px"></div>2、内嵌（内部样式） - 在head标签里，加一个style标签，在style里写样式<head> <meta charset="UTF-8"/> <title>document</title> <s
复制链接

扫一扫