跳转到帖子
在手机APP中查看

一个更好的浏览方法。了解更多。
OKCCN - XenForo & IPS Plugin Marketplace

主屏幕上的全屏APP，带有推送通知、徽章等。

在iOS和iPadOS上安装此APP
  1. 在Safari中轻敲分享图标
  2. 滚动菜单并轻敲添加到主屏幕。
  3. 轻敲右上角的添加按钮。
在安卓上安装此APP
  1. 轻敲浏览器右上角的三个点菜单 (⋮) 。
  2. 轻敲添加到主屏幕或安装APP。
  3. 轻敲安装进行确认。
  • 选择语言

CSS Inheritance

Cavalry
在 教程

推荐的帖子

  • 行政经理

CSS Inheritance

CSS Inheritance

CSS inheritance is about what happens if no value is specified for a property on an element.

If no value is specified for a property, the value can either be inherited from the parent element, or be set to its initial (default) value.

For CSS inheritance, properties are categorized in two types:

  • inherited properties
  • non-inherited properties

Inherited Properties

Inherited properties are, by default, set to the computed value of the parent element.

Properties related to text, such as color, font-family, font-size, line-height, and text-align, are typically inherited. This ensures consistent text styling throughout a document.

In the following example, the text inside the <strong> element will appear in 20px and in blue, since the <strong> element inherits the color and the font-size value from the parent (<p>) element.

Example

The color and font-size properties are inherited:

<style>
p {
  color: blue;
  font-size: 20px;
}
</style>

<body>
<p>This is a paragraph with some <strong>important</strong> text.</p>
</body>

Try it Yourself »

Non-inherited Properties

If there is not set a value for a non-inherited property, the value is set to the initial (default) value of that property.

Properties related to the box model or layout, like border, background, margin, padding, width, and height, are typically not inherited.

In the following example, the <strong> element, inside the <p> element, will not have an additional border (since the initial value of border-style is none).

Example

The border property is not inherited:

<style>
p {
  border: 1px solid red;
}
</style>

<body>
<p>This is a paragraph with some <strong>important</strong> text.</p>
</body>

Try it Yourself »

The inherit Keyword

The inherit keyword is used to explicitly specify inheritance. It works on both inherited and non-inherited properties.

In the following example, the <strong> element, inside the <p> element, will have an additional border, since we have used the inherit keyword to explicitly specify that the border value should be inherit.

Example

Explicitly set the inheritance with the inherit keyword:

<style>
p {
  border: 1px solid red;
}

strong {
  border: inherit;
}
</style>

<body>
<p>This is a paragraph with some <strong>strong</strong> text.</p>
</body>

Try it Yourself »


  • 引用

    • 参与讨论

    你可立刻发布并稍后注册。 如果你有帐户，立刻登录发布帖子。

    游客
    回帖…
    转到主题列表

    帐户

    导航

    搜索

    搜索

    配置浏览器推送通知
    Chrome (安卓)
    1. 轻敲地址栏旁的锁形图标。
    2. 轻敲权限 → 通知。
    3. 调整你的偏好。
    Chrome (台式电脑)
    1. 点击地址栏中的挂锁图标。
    2. 选择网站设置。
    3. 找到通知选项并调整你的偏好。