divの継承について

質問

次のような場合、<font color=red>テスト</font>の文字だけ小さくなってしまいました。フォントサイズが継承されなかったようなのですが、どのようにしたら同じ大きさで表示できるでしょうか？

<div class="sample"><a href="http://www.sample.com/"><font color=red>テスト</font>リンクです</a></div>

以下は外部CSSファイルに記載
.sample{ font-size: 12pt; color:#0000FF;}
.sample{ font-size: 12pt; color:#0000FF;}
.sample a:link{ font-size: 12pt;}
.sample a:visited{ font-size: 12pt;}
.sample a:hover{ font-size: 12pt;}
.sample a:active{ font-size: 12pt;}

回答No.1

cipher_roy · ベストアンサー

インライン中でフォントの色を変えるのであれば、

<span class="clr">テスト</span>

として、さらにcssに

.sample{ font-size: 12pt; color:#0000FF;}
.sample span.clr{ font-size: 12pt; color:#FF0000;}

とした方が良いでしょう。

cssとhtmlタグを半端にごちゃ混ぜにすると、せっかく設定をしても
却ってちゃんと反応してくれない原因を作る元になります。

お礼

どうもありがとうございます。
勉強になりました。

回答No.2

snowize

何はともあれ「スタイルシートを使うべき項目」と「廃止予定のタグ」を認識した上で、混ぜるな危険の心構えでやってみるといいですよ。
仕様がどうのという以前に、ブラウザがバグる可能性が考えられます。

お礼

どうもありがとうございます。