7

HTML ドキュメントのテキストの font-style と font-size を設定したいと考えています。

<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 要素は、その親要素のスタイル プロパティを継承することを以前に学びました。私の場合、 のすべての子要素はbodysize を持つ必要があります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 に答える