【CSS】CSS 特性 ② ( CSS 继承性 )

韩曙亮

发布于 2023-03-30 19:42:06

1.2K0

发布于 2023-03-30 19:42:06

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

文章目录

一、CSS 继承性

1、样式的继承性

CSS 样式具有继承性 , 字标签自动继承父标签的 CSS 样式 , 如下标签结构中 ,

	<div>
		<p>CSS 继承性测试</p>
	</div>

如果为 div 标签设置字体为红色 , 那么在 div 标签下的字标签 p 标签会自动继承父标签 div 标签的样式 , 其文本也为红色 ;

子标签继承父标签样式 , 可以降低 CSS 代码复杂性 , 便于维护 ;

不是所有的 CSS 样式都可以继承 , 可继承的样式有 :

文本相关的 CSS 样式 , text-xxx 样式 ;
字体相关的 CSS 样式 , font-xxx 样式 ;
线相关的 CSS 样式 , line-xxx 样式 ;
字体颜色相关 CSS 样式 , color 样式 ;

元素的宽高样式 , 背景设置 , 明显不可以继承 ;

2、代码示例

在下面的代码中 , 为 div 盒子设置了文本颜色为红色的样式 ;

	<style>
		div {
			color: red;
		}
	</style>

由于 CSS 样式具有继承性 , div 盒子的字标签默认的字体都是红色的 ;

代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>CSS 继承性</title>
	<base target="_blank"/>
	<style>
		div {
			color: red;
		}
	</style>
</head>
<body>
	<div>
		<p>CSS 继承性测试</p>
	</div>
</body>
</html>