スタイルシートでオンマウスで下線を表示させないには

質問

以下のような外部スタイルシートを作ったのですがうまくいきません。

p.menu a{
font-size: 12px;

}
p.menu a:link{
text-decoration:none
}
p.menu a:visited{
text-decoration:none;
}
p.menu a:hover{
text-decoration:none;
}
p.menu a:active{
text-decoration:none;
}

noline a{
text-decoration:none;
}

以下はHTMLの抜粋です。

<noline>
<TR>
<TD>●<a href="http://www.hogehoge.net/" style="text-decoration:none" target="_blank"><font color="black" onMouseover="this.color='#ff8800'" onMouseout="this.color='black'">ああああ</font></a></TD>
</TR>
</noline>

結局外部スタイルシートを使わずにWEBPAGEを作成しましたがとても手間がかかりました。今後のために原因を知っておきたいので宜しくお願いします。

回答No.2

NYOI · ベストアンサー

p.menu a で指定した場合は、適用されるのは
<p class="menu"></p>の内部にある<a>タグだけです。
スタイルシートをそのまま生かすなら、htmlの方は
<noline>
<TR>
<TD>
<p class="menu">
●<a href="http://www.hogehoge.net/" target="_blank">
ああああ</a>
</p>
</TD>
</TR>
</noline>
って感じですかね。

お礼

回答ありがとうございます。
まだスタイルシートをよく理解していないようです。
参考になりました。

回答No.1

yambejp

こんな感じですかねぇ？

<style type="text/css">
.noline {
font-size: 12px;
text-decoration:none;
color:#000000;
}
a:hover.noline{
color:#ff8800;
}
</style>
<TABLE>
<TR>
<TD>●<a href="http://www.hogehoge.net/" target="_blank" class="noline">ああああ</a></TD>
</TR>
</TABLE>

お礼

丁寧にありがとうございます。
うまくできました。
スタイルシートがよく分かってないようなので
勉強していきます。