46

我只是想知道为什么font: inherit;在级联样式表中使用。

4

7 回答 7

41

就像其他答案所说的那样，它是从父元素继承 CSS 属性。

其他答案未能说明的是您为什么需要 this。因为毕竟 CSS 属性是继承的，对吧？

嗯，不。大多数是，默认情况下（但链接颜色不是从父元素继承的，例如）。但是考虑一下这种情况：

p { color: blue; }

div.important { color: red; }

<div class="important">
    <p>This is a text</p>
</div>

现在文本将是蓝色的，而不是红色的。如果我们希望<p>拥有其父级的样式而不是其默认样式，我们必须覆盖其 CSS。我们当然可以重复属性值 ( red)，但这违反了 DRY（不要重复自己）。相反，我们继承它：

div.important p { color: inherit; }
于 2012-10-14T08:44:10.953 回答
8

该声明font:inherit用于许多“CSS Reset”样式表中，这些样式表经常被复制到各种库和框架中。Eric Meyer最初的Reset CSS有font:inherit. 没有给出具体的动机。据说总体理由是“减少浏览器在默认行高、页边距和标题字体大小等方面的不一致”。但迈耶链接到他之前的一篇文章，他解释了这个想法，除其他外说：“我想要这一切，因为我不想把风格效果视为理所当然。这有两个目的。首先，它让我对文档的语义更加思考。重置到位后，我不选择strong因为设计要求大胆。相反，我选择正确的元素——无论是strongor emor bor h3or 什么——然后根据需要设置样式。”</p>

一些 HTML 元素在浏览器中具有字体属性的默认呈现：标题、表单字段、表格标题单元格、一些短语元素等。使用 CSS 重置，或者特别font: inherit意味着在支持该inherit值的浏览器上，所有这些元素都呈现在复制文本字体，除非样式表中另有规定。

因此，这是关于创作和设计的特定方法（或者，正如某些人可能会说的，意识形态或宗教）。它已获得普及并经常被常规应用。

于 2012-10-14T17:43:07.750 回答
3

fontCSS 属性是设置font-style, font-variant, font-weight, font-size, line-height, 和font-family;的简写属性。或者使用特定关键字将元素的字体设置为系统字体的方法。-MDN _

通过使用font: inherit;，它告诉元素从其父容器继承这些相关值。请参阅以下示例：

在第一组中：你可以看到浏览器默认设置了一些特殊的样式，h1更粗更大，它也自动继承了相关值body。但是，对于input元素，它不会继承任何这些值，因为它是一个被替换的元素并且服务于它的独特目的。

在第二组中：body它强制这些元素通过使用继承这些值font: inherit;。

现在，你看看它做了什么。何时使用它完全取决于您，例如，您可能希望<h1>在主页中为站点徽标使用标签，并且您可能希望使其看起来与其他页面上的显示没有区别。当然，它通常用于 CSS 重置框架。

body {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-style: italic;
}

.inherit {
  font: inherit;
}
<h1>Heading</h1>
<input type="button" value="Button">

<hr>

<h1 class="inherit">Heading</h1>
<input class="inherit" type="button" value="Button">

于 2018-10-11T02:42:42.453 回答
2

并非所有浏览器都继承所有元素的字体属性。Netscape 4.x 在继承方面出了名的糟糕。考虑以下样式：

body { background: black; color: white }

在 Netscape 4.x 中，颜色没有应用于表格元素，因此您最终会在黑色背景上的表格中使用默认的黑色文本。

字体属性对某些元素有相同的处理，特别是表单元素（以及旧浏览器的表格元素）。看到这样的定义并不少见：

table, form { font: inherit }
于 2012-10-14T12:21:21.007 回答
1

inherit用于从父元素获取属性。换句话说，继承父元素的属性。

默认属性是inherit，这意味着，假设你有div一个p.

<div>
    <p>Hello World!</p>
</div>

现在你给一个风格：

div {font-famlily: Tahoma;}
p {font-family: inherit;}

这font-family是从其父元素inherited 到的。pdiv

于 2012-10-14T08:31:37.527 回答
1

在 CSS 中使用{font:inherit;}是有意义的，因为各种用户代理（又名浏览器）都有用户代理样式表（阅读：默认样式表），例如

body
{
    font: -magic-font-from-user-preferences;
}

textarea, input
{
    font: monospace;
}

用于解决由于用户代理样式表而默认继承或不继承但内容作者希望继承字体系列的{font:inherit;}特殊情况。fontfont-family

inherit不幸的是，由于各种错误，具有该值的实际用户代理行为会有所不同。不过，结果行为可能比默认值更接近作者意图。

于 2014-06-23T06:19:49.923 回答
0

inherit在 CSS 中只是意味着它从父元素继承值，例如：

<div style="font-family: Arial;">
   <p style="font-family: inherit; /* This will inherit the font-family of the parent p*/">
      This text will be Arial..And inherit is default behavior of the browser
   </p>
</div>

这里从它的父<p>级继承font-family: Arial;div

您需要使用继承，例如在锚元素的情况下，颜色属性通常在用户代理样式表中设置为蓝色。如果你想强调继承值的重要性，你可以在作者或用户样式表中使用继承值，覆盖用户代理样式表声明。

更多参考

于 2012-10-14T08:30:12.877 回答