7

我想在我的 HTML 文档中设置文本的字体样式和字体大小。

<html>
<head>
    <title>Style inheritance</title>
    <style type="text/css">
    <!--
    body    {
            background-color: #000000;
            font-family: sans-serif;
            color: #EEEEEE;
            margin: 0;
            font-size: 22pt;
    }
    -->
    </style>

</head>
<body>
    test text
    <form>
        <input type="text">
    </form>
</body>
</html>

我曾经了解到，每个 HTML 元素都会继承其父元素的样式属性。在我的例子中，所有的子元素都body应该有 size 22pt。

input但是为什么这对, select,textarea等不起作用？

4

4 回答 4

19

input, select, textarea button- 它们默认不继承，但您可以将其设置为使用 css 继承

input, select, textarea, button {font-family: inherit;}

现场演示：http: //jsfiddle.net/rvjKE/

body {
  font-family: courier;
}

input {
  width: 250px;
}

input.inherit {
  font-family: inherit;
}
<div>simple text should be courier</div>
<input type="text" value="input text - does not inherit" /><br/>
<input type="text" class="inherit" value="input text - inherit from css" />

于 2012-06-28T17:54:47.390 回答
3

仅当没有样式表在元素上设置该属性时（或inherit已设置值），元素才继承该属性。表单域通常在浏览器样式表中有它们的设置。

因此，您需要显式设置它们的属性以覆盖浏览器默认值。*如果您希望所有元素都具有某些属性，则可以使用通用选择器执行此操作，例如

* { font: 100% Calibri, sans-serif; }

您可以在需要时轻松地为特定元素覆盖它，因为通用选择器的特异性非常低。

于 2012-06-28T19:02:32.037 回答
0

这是因为它们是用户界面元素，默认情况下采用用户操作系统的外观和感觉。至少，他们曾经如此。现在不同的浏览器使用不同的默认样式，但它们通常往往非常相似。

无论如何，这个想法是允许网站所有者修改界面元素周围的外观，同时仍然保持用户输入元素的默认外观。强迫您单独更改样式是唯一的方法。

于 2012-06-28T17:56:40.103 回答
-3

您可以使用formCSS 选择器来设置输入样式

form{
    font-family: sans-serif;
    color: #EEEEEE;
    font-size: 22pt;
}
于 2012-06-28T17:56:17.280 回答