引入style的位置在head里与在body里的区别1

最新推荐文章于 2024-12-25 11:01:06 发布

原创最新推荐文章于 2024-12-25 11:01:06 发布 · 1.2w 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#样式位置

css 专栏收录该内容

8 篇文章

订阅专栏

本文探讨了HTML中style标签放置于head与body内的区别，重点分析了样式优先级及渲染顺序，解释了就近原则如何影响样式应用。

在使用css的时候少不了会在某一html页面通过style标签写自己的样式，但是在html页面中将style的内容放置在head和body里面有什么区别呢？

1、打开head里面的style，关闭body里面的style

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>测试style的位置在head里面与body里面的区别</title>
		<style type="text/css">
			/*head里面的style标签*/
			#test{
				width: 50px;
				height: 50px;
				background: red;
			}
		</style>
	</head>
	<body>
		<div id="test">123</div>
		<!--body里面的style标签-->
		<!--<style type="text/css">			
			#test{
				width: 100px;
				height: 50px;
				background: blue;
			}
		</style>-->
	</body>
</html>

效果：