[分享]Css内联和外联的层级

发布于 2024-11-11 15:30:42

CSS作为网页设计中的重要环节，可分为内联和外联两大类型。其中内联样式和外联样式的层级关系，是我们在实际工作和学习中需要了解和掌握的知识点。下面通过简单介绍，来了解一下内联样式和外联样式的具体层级关系...

CSS作为网页设计中的重要环节，可分为内联和外联两大类型。其中内联样式和外联样式的层级关系，是我们在实际工作和学习中需要了解和掌握的知识点。下面通过简单介绍，来了解一下内联样式和外联样式的具体层级关系。

内联样式是直接写在HTML标记中的样式，例如下面这样：
<div style="color: red;">Hello world</div>
这里就将字体颜色设为红色了。

内联样式的层级是最高的，它会覆盖掉外联样式和内部样式。这就意味着，如果一个元素同时拥有内联样式和外联样式，那么内联样式的属性将会覆盖外联样式的属性。同样的道理，如果它还有内部样式，那么内联样式会覆盖内部样式。

外联样式是通过<link>标签引入外部的CSS文件，例如下面这样：
<head>
    <link rel="stylesheet" href="style.css">
</head>
在style.css文件中定义了下面的样式：
div {
    color: blue;
}
然后，在HTML文件中使用<div>标记，内容为Hello World，即：
<div>Hello World</div>
那么此时的字体颜色就会变成蓝色。

外联样式的层级介于内联样式和内部样式之间，它的优先级取决于它自身的权重以及是否使用了！important声明。如果在外联样式中使用了!important，那么它的优先级就会变得更高，可以覆盖内部样式，但还是被内联样式所覆盖。

内部样式是将CSS代码直接写在HTML文件头部的<style>标签中，例如下面这样：
<head>
    <style>
        div {
            color: green;
        }
    </style>
</head>
此时，如果还是使用<div>Hello World</div>，那么字体颜色将会变成绿色。

内部样式的层级介于内联样式和外联样式之间，但是它的优先级仅高于外联样式。这意味着，当一个元素同时拥有内部样式和外联样式时，内部样式的属性将会覆盖外联样式的属性。

css 教程

一个月内的热帖推荐

[分享]Css内联和外联的层级

91云脑