- 締切済み
スタイルシートでリンクに装飾することについて教えてください
今、自分の日記にスタイルシートを使っています。 スタイルシートでリンクに点線の下線をつけているんですが、 これをページ内のリンク部分の一部だけに適用するようにしたいのですが どうしたらできますか？ 今、ソースはこうなっています。 a:link,a:hover,a:active,a:visited { text-decoration : none ; border-bottom : 1px dashed #99E ; } これに何か付け加えて指定したらできると思うのですが 自分で調べてもわかりませんでした。 ぜひ教えてください。よろしくお願いします。
- oh-oh-oh
- お礼率98% (72/73)
- その他（インターネット・Webサービス）
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
みんなの回答
head内にstyle要素でスタイルシートを一括指定したい場合は、クラス指定をしたり、セレクタの指定を工夫して、スタイルを指定すればよいと思います。 クラス指定でスタイルを適用する範囲を絞り込む場合は、 a.noUL:link, a.noUL:visited, a.noUL:hover, a.noUL:active { text-decoration : none ; border-bottom : 1px dashed #99E ; } このように、「.クラス名」という形でセレクタを指定します(上記例では、クラス名は「noUL」)。 :link、:visited、:hover、:activeの擬似クラス名は、クラス名の後に続けて記述します。 このクラスで定義されたスタイルを適用したい要素には、 <a href="***.html" class="noUL">りんく</a> のように、「class="クラス名"」という属性を追加します。 他に、特定の要素内にある特定の要素に対してのみ、そのスタイルを適用するように、スタイルの適用範囲を絞り込む指定方法もあります。 こちらの場合は、「親要素のセレクタ 対象のセレクタ」のように、親要素になるものと、その中身の対象とを半角スペースで区切って記述します。 たとえば、以下のようにします。 div.noUL a:link, div.noUL a:visited, div.noUL a:hover, div.noUL a:active{ text-decoration : none ; border-bottom : 1px dashed #99E ; } こうすると、クラス名noULを持つdiv要素内にあるリンク要素にのみ、上記のスタイルが適用されるようになります。 このスタイルを適用させる部分は、下記のようになります。 <div class="noUL"><a href="***.html">りんく</a></div> このスタイルを適用させたい一部のリンクが複数あって、それがソース上で一箇所に集中しているのであれば、こちらの指定が手軽でよいでしょう。 参考URLに、「とほほのWWW入門」のスタイルシートの扱いについての基本的なところをまとめたページを紹介しておきます。 参考になさってください。 参考になれば幸いです。
例えばこんな感じ。 <A href="****.htm" style="border-bottom-width : 1px;border-bottom-style : dotted;border-bottom-color : fuchsia;text-decoration : none;">リンク1</A> 一部に指定したい場合は 一部にスタイルシートを適用すればいいだけだと思うが・・・
お礼
すみません・・・。聞き方が悪かったです。 ＞これをページ内のリンク部分の一部だけに適用するようにしたい・・・ですが これを日記の文中のリンク部分には下線を表示させて、 日記の外の自分のサイトや他のサイトへのリンク部分には下線を表示させないようにしたかったのです。 私が借りているところでは<head>内しか扱えないのでこれはできないようです。 回答してくださってありがとうございました。
お礼
lead1976さん、これほど丁寧に答えてくださってありがとうございます。 それなのに本当に申し訳ないのですが私はスタイルシートがあまりわかってないのでlead1976さんの回答がよくわかりませんでした。それにdoconimoさんのお礼にも書きましたが私の聞き方が悪かったようです。 ＞これをページ内のリンク部分の一部だけに適用するようにしたい・・・ですが日記の文中のリンク部分には下線を、日記の外の自分のサイトや他のサイト、メールなどのリンク部分は下線が表示されないようにしたかったのです。でも私が借りているところではスタイルシートは<head>内しか変えれないので私がやりたかったようにはできないようです。 「とほほのWWW入門」で自分でももっと勉強して、質問する際は回答する人がわかりやすいように答えれるように今後気をつけたいと思います。 回答してくださって本当にありがとうございました。