文章目录
- 一、CSS 继承性
- 1、样式的继承性
- 2、代码示例
一、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>
