css继承了封建皇朝严格的等级制度

笔墨三千，绘君绝世倾城

已于 2022-04-20 15:56:29 修改

阅读量218

点赞数 1

分类专栏： css 文章标签： css css3 html5 html

于 2022-04-20 15:54:17 首次发布

本文链接：https://blog.csdn.net/weixin_57181037/article/details/124292015

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

行内样式

就是对元素/标签内的属性进行赋值

# 设置行内样式背景颜色为红色，宽高为200px

<body>
    <div style="background: red; width: 200px; height: 200px">我是行内样式</div>
</body>

内部样式

# 设置内部样式背景颜色为绿色，宽高为200px

<title>内部样式</title>
		<style type="text/css">
			div{
				background-color: green;
				width: 200px;
				height: 200px;
			}
		</style>

外部样式：

新建一个css文件，路径在同级目录下；

# 设置外部样式背景颜色为红色，宽高为200px

在body元素下添加<link rel="stylesheet" type="text/css" href="css/index.css"/>，引入外部样式标签

div{
	background-color: red;
	width: 200px;
	height: 200px;
}

在封建皇朝时代，存在严格的等级制度，分三六九等，上下级。在css样式中同样存在严格的等级，这里暂且称之为优先级。优先级遵从就近原则。行内样式>内部样式>外部样式。

！important

意思是重要的，于样式属性后面加；加了之后就近原则就会被打破。

如果在外部/内部样式是中添加，行内样式的某部分属性将会被覆盖，覆盖的只是添加！important的属性会被覆盖掉。其余未添加！important的属性还是会坚持就近原则的。

同一属性的比较！important是老大哥，不同属性的比较将无意义。例如：

color和background-color都有表示添加颜色的意思，color是添加字体颜色，background-color是添加背景颜色，不是同一属性。

# 以内部/行内样式为例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>！important</title>
		<style type="text/css">
			div{
				background-color: red!important;
				width: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div style="background-color: black; width: 100px; height: 100px;">我是外部样式</div>
	</body>
</html>

笔墨三千，绘君绝世倾城

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
css继承了封建皇朝严格的等级制度

css继承了封建皇朝严格的等级制度# 设置内部样式背景颜色为红色，宽高为200px<body> <div style="background: red; width: 200px; height: 200px">我是行内样式</div></body>内部样式# 设置内部样式背景颜色为绿色，宽高为200px<title>内部样式</title> <style type="text/
复制链接

扫一扫