- 締切済み
cssでハイパーリンクの線を消したい
<style type="text/css"> a.noline { text-decoration: none; } </style> <a href="http://www.yahoo.co.jp/">yahooを開く</a> これで、リンクの線が消えると思ったら、消えません。 どこがまちがってますか?
- みんなの回答 (2)
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
そうではなくて、 a.noline { の.はクラスセレクタと言って class属性の値リストにnolineを含むa要素というセレクタです。 class属性は、複数の値を半角スペースで区切った値のリストになっています。 <p><!-- 段落の開始 --> <span id="YAMADA" class="name first female">山田</span>君と<span id="ORUKA" <span id="TANAKA" class="name second male">田中</span>は、今日は欠席しました。そのために、この班は5人で実験を行なうことになりました。 </p> <p> 今日は、塩酸と水酸化ナトリウムの中和実験をしました。 </p> このように、classは、複数の値を半角スペースでもつことができます。idはそのページ内で一箇所しかありませんが、classはそうではない。 name:このspanは名前 first|second:1列2列 female|male:女性|男性 ここで、 span.name{font-weight:bold;}だと名前は太字 span.female{color:red;}だと女性は赤 span.male{color:blue;}だと男性は青 HTMLは文書構造だけを書きます。 a.nolineとは、classの値に一つにnolineをもつ a 要素と言う意味です。 <a href="http://www.yahoo.co.jp/">yahooを開く</a> はclass属性を持ちませんから、このスタイルは適用されません。 もしこのa要素にスタイルを適用させたければ a[href="http://www.yahoo.co.jp/"]{text-decoration:none;} と属性セレクタで指定すれば良いです。 すべてのa要素でしたら a{text-decoration:none;} ★ まずHTMLをきちんと文書構造だけをマークアップすること ★ その文書構造を使ってセレクタを使ってスタイルを適用させたい要素を指定すること ★ スタイルは、text-decoration:none;というふうに、プロパティ:値;と記述する この順番です。 a[href="http://www.yahoo.co.jp/"]{text-decoration:none;} a{text-decoration:overline;} と書かれていたら、すべてのa要素は上に線が引かれます。しかし、href属性の値にhttp://www.yahoo.co.jp/をもつa要素には、適用されません。 これは、a[href="http://www.yahoo.co.jp/"]のほうが、より詳しく指定されているためです。これを詳細度といいます。 a[href="http://www.yahoo.co.jp/"]の詳細度は 0011 a{text-decoration:overline;}の詳細度は 0001 5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html ) 6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html )
- dezimac
- ベストアンサー率56% (2365/4208)
クラス指定をしているからです。 a.noline { text-decoration: none; } としているなら <a href="hoge" class="noline">nolineクラス指定したのだけ装飾無し</a> 全てのリンクで装飾無しにしたいなら a { text-decoration: none; } <a href="hoge">全て装飾無し</a>