CSSCSS 特性 ② ( CSS 继承性 )
Posted 韩曙亮
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSSCSS 特性 ② ( CSS 继承性 )相关的知识，希望对你有一定的参考价值。
文章目录
一、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>
以上是关于CSSCSS 特性 ② ( CSS 继承性 )的主要内容，如果未能解决你的问题，请参考以下文章
CSSCSS 层叠样式表 ② ( CSS 引入方式 - 内嵌样式 )
CSSCSS 选择器 ② ( ID 选择器 | 通配符选择器 | CSS 选择器使用注意事项 )
CSSCSS 特性 ① ( CSS 层叠性 | 样式冲突 | 就近原则选择样式 )
CSSCSS 特性 ③ ( CSS 优先级 | 优先级引入 | 选择器基本权重 )
CSSCSS 文本样式 ② ( font 字体设置 | CSS 2.0手册使用 | font-weight 字体粗细设置 | font-style 字体斜体设置 | font 字体样式综合写法 )