2010-11-30 5 views
1

なぜCSSルールは、入力や選択などのHTMLコントロールに自動的にカスケードされず、その中にテキストの表示をスタイルするのですか?htmlコントロールのCSSカスケード規則

例:テキストを赤で表示するbodyタグにCSSクラスが適用されています。 カスケード規則のため、そのHTMLドキュメント内のすべてのテキストが赤で表示されます(オーバーライドされない限り)。しかし、もし私がその文書にテキストボックスコントロールを持っていれば、スタイルはテキストボックスにカスケード表示されず、そのテキストを赤で表示します。

誰かがそれについて話している参考文献に私を指摘できますか?

答えて

5

理由は、ブラウザによって決定されるデフォルトのCSSスタイルです。

  • inputselectデフォルト色/サイズ/パディングを持っているなど
  • 他のほとんどの要素は、色とサイズのためinheritを使用しています。
  • もう1つの例は、フォントサイズがtableで、デフォルトでは継承されず、固定されており、開発者が上書きする必要があります。

    <html> 
    
    <style type="text/css"> 
    body { color:red; font-size:36px; } 
    </style> 
    
    <body> 
    Hello 
    <input type="text" value="test value"/> 
    <table><tr><td>cell value</td></tr></table> 
    </body> 
    </html> 
    

    あなたがfont-sizecolorinputによって継承されていなかったことがわかります。

は、この例のHTMLを試してみてください。また、セルの値は既定のフォントサイズのままでした。今styleブロックに次のCSSを追加します。

input { color:inherit; font-size:inherit; } 
table { font-size:inherit; } 

あなたは今、期待どおりに継承することがわかります。

あなたが本当にやりたいことは、リセットスタイルシートを使用することです。テーブルは、多くの開発者にとって望ましくない既定のスタイルが付加された要素の1つで、すべてのブラウザが若干異なる場合があります。これは多くの人がリセットcssスタイルシートを使用する理由です。これらのスタイルシートは、ほとんどの要素を均一なサイズとゼロマージン、パディングなどにリセットします。例については、http://meyerweb.com/eric/tools/css/reset/またはGoogleを参照してください。

最もリセットスタイルシートは(ほとんどの開発者はそれらを継承し、代わりに明示的にサイズ/色を設定したいしたくない)inputselect継承の色をしないので、あなたのスタイルシートでそれらを設定する必要があります。

input, select { ... } 

は(他の回答により示唆されるように)ため* { ... }任意の目的と注意してください。このは、CSSの「カスケード」部分であるを破り、ネストされた要素で期待されるようにカスケードしないルールを引き起こします。あなたが* { color:red; }を使用して、次のHTMLがある場合:

<h1 style="color:green;">Hello <i>world</i></h1> 

をあなたは緑こんにちはと赤世界になってしまいます。 (<i>*と一致しているため、新しい要素ではスタイルが赤にリセットされ、カラーはもはやカスケードされません)。

+0

+1は「{*}に注意してください。あなたはそれについて絶対に正しいです。 ;) – NotMe

+0

@Chrisは難しい方法を学んだ;) – Nicole

0

一部のhtml要素には、doctypeとブラウザ(さらにはブラウザのバージョン)に基づいて設定されたデフォルトスタイルがあります。これらのスタイルには、余白、幅、パディング、またはテキストの色などがあります。

しかし、「色:赤;」のような特定のものが必要な場合は、

* { color: red;} 

*(アスタリスク)は、すべてを一致し、すべての要素が赤で、そのフォントの色を表示させるような:すべてに適用するために、あなたが使用する必要があります。より具体的なCSSルールが適用されていない限り

詳細はthis pageをご覧ください。私は信じて

(これは権利ではない場合、誰かが私を修正)規則のリストを秋です:

  1. ブラウザのデフォルト
  2. 一般的なCSSルール(input { blah }
  3. IDルール(#topdiv { blah }
  4. 特定のCSSルール(class="xx"
  5. スタイル設定(style='color:blue;

暗黙的で明示的に継承されたスタイルがどこにあるのかわかりませんが、そのアイデアを得るべきです。