- ベストアンサー
スタイルシートの優先順位について
- スタイルシートの優先順位に関して質問があります。HTMLとCSSを使用した場合、特定の要素に対して複数のスタイルが適用され、結果として予期しないフォントサイズが表示されることがあります。なぜこのような現象が起こるのか、教えていただきたいです。
- FontChangeクラスとBodyタグのスタイルを使用した場合、要素に予期しないフォントサイズが適用されることがあります。このような状況が起こる原因について教えていただけますか？
- HTMLとCSSを使用してスタイルを適用する際、特定の要素に対して複数のスタイルが適用され、表示が崩れることがあります。このような問題が起こる原因について、詳しい説明をお願いします。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは font-sizeのemは親要素に対して比較されます http://www.tohoho-web.com/css/basic.htm#Unit http://www.hajimeteno.ne.jp/stylesheet/css1/p-font.html#font-size ですのでbodyにfont-sizeを設定していなければデフォルトで1emなのでそのまま1/10の0.1emになります 今回は親となるbodyに10emを設定していますのでその1/10となるわけですので1emとなります <style type="text/css"> <!-- body { font-size:10em; } .fontbase{ font-size:0.1em; } .FontChange{ font-size:0.1em; } --> </style> </head> <body> <div class="fontbase"> <p class="FontChange" >test</p> </div> なので↑のようにしてやるとbodyは10em、その子要素となる<div class="fontbase">は1/10の1emに、孫要素となる<p class="FontChange">は親（<div class="fontbase">）が1emですのでその1/10の0.1emとなります（0.1emが表示できるブラウザによりますが）
その他の回答 (1)
- benelli
- ベストアンサー率51% (78/152)
CSSの仕様ではem指定は絶対値ではなく相対値であると決められています。またfont-sizeの仕様には、相対値では親要素のフォントサイズを参照すると明記されています。 継承される以上、親要素BODYで指定された相対サイズを継承したP要素は、その場で絶対値指定をしない限りは親要素の影響を受けます。 優先順位を無視しているのではなく、継承のルールに則り正しく処理しているに過ぎないわけです。 http://www.y-adagio.com/public/standards/tr_css2/syndata.html#value-def-length http://www.y-adagio.com/public/standards/tr_css2/fonts.html#font-size-props
