【CSS】CSS入门笔记第二弹~_css 父元素
在CSS中,一个元素可以通过其父元素的样式进行格式化,这种方式称为级联(Cascading)。CSS级联的基本规则是:子元素将继承父元素的某些样式,并可以覆盖这些样式。
以下是一些常见的继承样式属性:
- 字体系列属性:
font-family
- 字体大小属性:
font-size
- 字体样式属性:
font-style
(例如,italic
) - 字体加粗属性:
font-weight
- 文本系列属性:
line-height
- 文本颜色:
color
请注意,并非所有属性都会被子元素继承。例如,边距(margin
)和填充(padding
)默认不会被继承。
以下是一个简单的示例,演示父元素如何影响子元素的样式:
<!DOCTYPE html>
<html>
<head>
<style>
/* 父元素的样式 */
.parent {
color: blue; /* 字体颜色继承到子元素 */
font-size: 20px; /* 字体大小继承到子元素 */
line-height: 1.5; /* 行高继承到子元素 */
font-weight: bold; /* 字体加粗继承到子元素 */
font-style: italic; /* 字体样式(斜体)继承到子元素 */
/* margin和padding不会被继承 */
}
/* 子元素的样式 */
.child {
/* 子元素可以在此定义特定样式来覆盖继承的样式 */
}
</style>
</head>
<body>
<div class="parent">
父元素的文本
<p class="child">
子元素的文本
</p>
</div>
</body>
</html>
在这个例子中,.parent
类定义了一些字体样式属性,这些属性会被应用到类 child
的 <p>
元素上,并且由于继承,也会应用到 <p>
元素内的文本。同时,.child
类可以定义其他样式来覆盖从 .parent
继承来的属性。
评论已关闭