可继承的 CSS 属性

可继承的 CSS 属性

属性	描述	默认值	示例
color	设置文本的颜色	initial（通常为黑色）	color: red; 设置所有文本为红色
font-family	设置文本的字体系列	initial（用户代理样式表）	font-family: Arial, sans-serif; 设置所有文本使用 Arial 字体和 sans-serif 字体作为备选方案
font-size	设置文本的字体大小	medium	font-size: 16px; 设置所有文本的字体大小为 16 像素
font-style	设置文本的字体样式，如斜体	normal	font-style: italic; 设置所有文本为斜体
font-weight	设置文本的字体粗细	normal	font-weight: bold; 设置所有文本为粗体
font-variant	设置小型大写字母的显示方式	normal	font-variant: small-caps; 设置所有文本为小型大写字母
line-height	设置行高	normal	line-height: 1.5; 设置行高为 1.5 倍字体大小
letter-spacing	设置字符间距	normal	letter-spacing: 2px; 设置字符间距为 2 像素
word-spacing	设置单词间距	normal	word-spacing: 4px; 设置单词间距为 4 像素
text-align	设置文本的水平对齐方式	initial（依赖于浏览器）	text-align: center; 设置所有文本居中对齐
text-indent	设置文本的缩进	0	text-indent: 20px; 设置文本缩进 20 像素
text-transform	控制文本的大小写转换	none	text-transform: uppercase; 设置所有文本为大写
visibility	设置元素的可见性	visible	visibility: hidden; 隐藏所有元素但仍占据布局空间
cursor	设置指针悬停在元素上时显示的光标	auto	cursor: pointer; 设置光标为手指形状
list-style	设置列表项的标志、位置和图像	disc outside none	list-style: square inside; 设置列表项为方形标志且位于列表项内
list-style-type	设置列表项标志的类型	disc	list-style-type: circle; 设置列表项为圆形标志
list-style-position	设置列表项标志的位置	outside	list-style-position: inside; 设置列表项标志位于列表项内
list-style-image	设置列表项标志的图像	none	list-style-image: url('image.png'); 设置列表项标志为指定图像
direction	设置文本的书写方向（从左到右或从右到左）	ltr	direction: rtl; 设置文本从右到左书写
text-decoration	设置文本的装饰，如下划线、上划线和删除线	none	text-decoration: underline; 设置文本下划线
text-shadow	设置文本的阴影	none	text-shadow: 2px 2px 5px gray; 设置文本的阴影
white-space	设置如何处理元素中的空白字符	normal	white-space: nowrap; 设置文本不换行
quotes	设置嵌套引号的类型	none	quotes: '«' '»' '“' '”'; 设置引号样式

示例

继承字体样式

HTML:

<div class="parent">
    This is the parent element.
    <div class="child">This is the child element.</div>
</div>

CSS:

.parent {
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: blue;
}

.child {
    /* No need to set font-family, font-size, and color */
}

在这个例子中，.child 元素会继承 .parent 元素的 font-family, font-size 和 color 属性。

其他说明

• 某些属性在特定上下文中是继承的，例如表单元素的 font-family。
• 在 CSS 中，如果要强制子元素继承父元素的属性，可以使用 inherit 关键字。例如，color: inherit;。

这些是 CSS 中一些常用的可继承属性及其详细描述。通过理解和使用这些属性，可以更好地控制网页的样式和布局。