HTML内嵌&内联&外联——它们之间的优先级如何？

杨不旧

已于 2022-02-19 14:29:48 修改

阅读量1.7k

点赞数 1

分类专栏： HTML 文章标签： html 前端 css

于 2021-11-13 23:52:54 首次发布

本文链接：https://blog.csdn.net/qq_45152044/article/details/121312095

版权

HTML 专栏收录该内容

11 篇文章 3 订阅

订阅专栏

准备工作

新建一个html文件敲入如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <span>我是一个span标签</span>
    </div>
</body>
</html>

运行初始界面（记住此页面，方便清晰看到后面页面发生的变化）： 这里只截一部分界面
在这里插入图片描述
------------------------------------------------------------------------------分------割-----线-------------------------------------------------------------------------------

1、内联

什么样子才叫内联？

修改代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body style="background-color: pink;"><!--  我在这里改变了body样式 即加了一个背景颜色   -->
    <div>
        <span>我是一个span标签</span>
    </div>
</body>
</html>

修改代码后运行的界面：
在这里插入图片描述
------------------------------------> 这就叫内联

------------------------------------------------------------------------------分------割-----线-------------------------------------------------------------------------------

2、内嵌

什么样子才叫内嵌？

修改代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: blue; /*这里将body的背景颜色改为蓝色（blue）*/
        }
    </style>
</head>
<body>
    <div>
        <span>我是一个span标签</span>
    </div>
</body>
</html>

修改代码后运行的界面：
在这里插入图片描述
------------------------------------> 这就叫内嵌

------------------------------------------------------------------------------分------割-----线-------------------------------------------------------------------------------

3、外联

什么样子才叫外联？

修改代码：

html里的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <link rel="stylesheet" href="./web.css"> <!-- 这里引入了外部css文件 -->

</head>
<body>
    <div>
        <span>我是一个span标签</span>
    </div>
</body>
</html>

新建一个css文件，代码如下：

body{
    background-color: red; 这里将body的背景颜色改为红色（red）
}

修改代码后运行的界面：
在这里插入图片描述
------------------------------------> 这就叫外联

------------------------------------------------------------------------------分------割-----线-------------------------------------------------------------------------------

4、内嵌、内联、外联之间的优先级

修改html里的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <link rel="stylesheet" href="./web.css"> <!-- 这里引入了外部css文件 -->

    <style>
        body{
            background-color: blue;   /*这里将body的背景颜色改为蓝色（blue）*/
        }
    </style>

</head>
<body style="background-color: pink;"><!--  这里将body的背景颜色改为粉色（pink）   -->
    <div>
        <span>我是一个span标签</span>
    </div>
</bodystyle=>
</html>

css文件里的代码：

body{
    background-color: red; 这里将body的背景颜色改为红色（red）
}

运行后的界面：
在这里插入图片描述
得出他们之间优先级结论：内联>内嵌、外联

------------------------------------------------------------------------------分------割-----线-------------------------------------------------------------------------------

4.1 那么内联和外联之间的优先级关系呢？

修改html里的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <link rel="stylesheet" href="./web.css"> <!-- 这里引入了外部css文件 -->

    <style>
        body{
            background-color: blue;   /*这里将body的背景颜色改为蓝色（blue）*/
        }
    </style>

</head>
<body>
    <div>
        <span>我是一个span标签</span>
    </div>
</body>
</html>

css文件里的代码：

body{
    background-color: red; 这里将body的背景颜色改为红色（red）
}

运行后的界面：
在这里插入图片描述
得出结论：内嵌的优先级一定大于外联的优先级，可靠吗？再往下看，尤其注意看上下html中<head></head>中的变化

------------------------------------------------------------------------------分------割-----线-------------------------------------------------------------------------------

修改html里的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: blue;   /*这里将body的背景颜色改为蓝色（blue）*/
        }
    </style>

    <link rel="stylesheet" href="./web.css"> <!-- 这里引入了外部css文件 -->

</head>
<body>
    <div>
        <span>我是一个span标签</span>
    </div>
</body>
</html>

css文件里的代码：

body{
    background-color: red; 这里将body的背景颜色改为红色（red）
}

运行后的界面：
在这里插入图片描述
得出结论：
内嵌、外联引入css的优先级取决于谁离这个<body></body>标签近，谁就高。
外联和内嵌谁写在下面就会覆盖上面的css 前提条件：选择器（修改body–>修改body的背景颜色）使用是相同的！

杨不旧

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML内嵌&内联&外联——它们之间的优先级如何？

准备工作新建一个html文件敲入如下代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g
复制链接

扫一扫