CSS 为什么和不从body继承字体和字号

在本文中，我们将介绍为什么在HTML中使用和元素时，它们不会从body元素继承字体和字号的问题。我们将探讨这个问题的原因，并提供解决方案和示例代码。

阅读更多：CSS 教程

问题描述

在HTML中，和元素用于用户输入文本的区域。通常情况下，我们希望这些输入区域的字体和字号能够与整个页面的样式保持一致。然而，我们可能会观察到以下情况：即使在body元素中定义了字体和字号，和元素的文本仍然使用默认的字体和字号。

问题原因

这个问题的原因在于和元素具有自己的默认样式，并且不从父元素继承字体和字号。这是因为这些元素的设计目的是为了通过用户自定义的样式来进行定制，而不是自动继承页面的样式。

解决方案

要解决这个问题，我们可以使用CSS来手动设置和元素的字体和字号。下面是一些解决方案的示例代码：

textarea, input[type="text"] {
  font-family: inherit;
  font-size: inherit;
}

在上面的代码中，我们使用了inherit关键字来继承父元素的字体和字号。通过将这段代码添加到页面的CSS样式表中，和元素将会继承body元素的字体和字号。

示例说明

让我们来看一个具体的示例，以更好地理解这个问题和解决方案。

HTML代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: Arial, sans-serif;
      font-size: 16px;
    }

    textarea, input[type="text"] {
      font-family: inherit;
      font-size: inherit;
    }
  </style>
</head>
<body>
  <textarea rows="4" cols="50">This is a textarea input.</textarea>
  <br>
  <input type="text" value="This is a textfield input.">
</body>
</html>

在上面的示例中，我们在body元素中定义了字体和字号。然后，我们使用CSS选择器来将字体和字号设置为inherit，以便和元素继承这些样式。