こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

スタイルシートで。。

こんにちは。

外部CSSをリンクさせてCSSを反映させています。
そこで質問です。
リンク箇所には下線がでるようにしていますが、リンクのある画像にまで下線がついてしまうのです。
画像だけには適用させない、というようなタグはありますか?

ちなみにこういうのを記述してます
a:link{color:#cccccc;text-decoration:none;border-bottom: #ffffff 1px dashed;}
a:visited{color:#cccccc;text-decoration:none;border-bottom: #ffffff 1px dashed;}
a:active{color:#cccccc;text-decoration:none;border-bottom : #ffffff 1px dashed;}
a:hover{color:#cccccc ;text-decoration:none;background-color : #688999; border-bottom : #ffffff 1px dashed;}


なにか回避方はありませんでしょうか?
教えてください、よろしくお願いいたします。

投稿日時 - 2004-11-11 12:08:02

QNo.1079616

困ってます

質問者が選んだベストアンサー

以下では、どうですか!?

<html><head><title>TEST</title>
<style type="text/css"><!--
a { text-decoration:none; border-bottom:1px #f00 dashed; }
a.ancNoBorder { border: none !important; }
--></style>
</head><body>
<p><a href="#">アンカー</a></p>
<p>
<a class="ancNoBorder" href="#"><img src="fig.gif" border="0"></a>
</p>
</body></html>


【蛇足】
“id”は、オブジェクトを特定するための識別句です。
1つのページに同一の“id”を複数適用することは、出来ません。

#keyword { color:red }
   :
<p id="keyword">text 01</p>
<p id="keyword">text 02</p>

は間違い。“class”にしましょう!

投稿日時 - 2004-11-11 13:02:51

お礼

ご回答ありがとうございます。
今お教えたいただいた方法でやってみたら・・
なりました!!
けっこう一年近く悩んでたんですが、説明のしかたがわからなくて質問もできずにいました・・。
!importantってよくわからないんですが、いろいろ勉強したくなってきました。
永い間の悩みが解消できました。
ありがとうございました。

投稿日時 - 2004-11-11 13:28:52

ANo.2

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.3

外部ファイルに

a img{
   border-style: none;}

を追加してみてください。
私はこれで画像リンクの下線を外しています。

投稿日時 - 2004-11-11 13:06:00

お礼

ご回答ありがとうございます。
お教えいただいた分は以前試したのですが反映されなくって・・・。
ありがとうございました。

投稿日時 - 2004-11-11 13:30:27

ANo.1

ちょっと手間かもしれませんが、<a>タグに属性をつけてCSSのほうで
ノーマル用と画像用で分けて記述すれば大丈夫ではないでしょうか。

idとかclassとか。

例えばこんな

普通のリンク用
<a id="normal">xxxxx</a>

画像用
<a id="graphic">xxxxx</a>

でCSSで
#normal a {
設定
}

とか。

投稿日時 - 2004-11-11 12:41:25

お礼

ご回答ありがとうございました。

そうですね、分ければいいかもしれません。
ありがとうございました。

投稿日時 - 2004-11-11 13:25:51

あなたにオススメの質問