CSS继承

CSS继承

CSS继承是一种机制,允许子元素自动继承父元素的某些样式属性,从而减少重复代码。

以下是一些常见的具有继承性的CSS属性:
color : 文字颜色
font-family : 字体族名称
font-size : 字体大小
font-weight : 字体粗细
line-height :行高
text-align : 文本对齐方式
text-indent : 文本块首行缩进
margin : 外边距
padding : 内边距

以下是一些不具有继承属性的CSS属性:
border:边框样式
width:宽度
height:高度
background:背景样式
position:定位方式

需要注意的是,并非所有属性都具有继承性,即使在上述示例中,继承性也可能受到其他因素影响。另外,有时可以使用inherit 关键字来显式地指定子元素继承父元素的样式。

以下是一个实例,演示CSS的继承效果:

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <title>CSS继承示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            font-size: 16px;
            color: blue;
            text-align: center;
        }

        h1 {
            font-weight: bold;
            color: red; /* 覆盖继承的蓝色 */
        }

        p {
            line-height: 1.5; /* 继承body的font-family/font-size/color/text-align */
        }

        .container {
            margin: 20px;
            padding: 10px;
            background-color: lightgray;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Title</h1>
        <p>This is a paragraph of text.</p>
    </div>
</body>
</html>
相关推荐
Cache技术分享1 分钟前
203. Java 异常 - Throwable 类及其子类
前端·后端
wingring3 分钟前
Vue3 后台分页写腻了?我用 1 个 Hook 删掉 90% 重复代码
前端
LFly_ice4 分钟前
学习React-20-useId
前端·学习·react.js
要加油哦~7 分钟前
刷题 | 牛客 - 前端面试手撕题 - 中等 - 1-2/20 知识点&解答
前端·面试
Async Cipher16 分钟前
JSON-LD 的格式
前端·javascript
LFly_ice31 分钟前
学习React-18-useCallBack
前端·学习·react.js
How_doyou_do1 小时前
样式冲突修复组件
前端·javascript·html
IT_陈寒2 小时前
SpringBoot实战:这5个高效开发技巧让我节省了50%编码时间!
前端·人工智能·后端
isixe2 小时前
Uniapp IOS 和 Android 下的文件写入用户目录
前端·uni-app
蓝莓味的口香糖2 小时前
【npm】npm命令大全
前端·npm·node.js