- ベストアンサー
CSSでリンクパターンを2つにする
CSSでリンクの色のパターンを2つに変えたい場合、head内にどう記述すればよいのでしょうか。 具体的には、 ========================== リンク1・リンク2・リンク3 ここにはコメントをいれます。 リンク4・リンク5・リンク6 ========================== 上記ように表示させ、 link.visited.active.hover.focusを上のリンクと下のリンクで変えたいんです。 大変困っています。 至急ご回答頂けるとありがたいです。
- hikage_tokage
- お礼率66% (84/126)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
たとえば、クラスで区分すればよいでしょう。↓ <html> <head> <style type="text/css"> <!-- a.aa:link { color: #800000; } a.aa:visited { color: #808000; } a.aa:active { color: #cccc00; } a.aa:hover { color: #8000cc; } a.bb:link { color: #008000; } a.bb:visited { color: #008080; } a.bb:active { color: #00cccc; } a.bb:hover { color: #cc8000; } --> </style> </head> <body> <a class="aa" href="test1.htm">リンク1</a><br> <a class="aa" href="test2.htm">リンク2</a><br> <a class="aa" href="test3.htm">リンク3 </a><br><br> ここにはコメントをいれます。 <br><br> <a class="bb" href="test4.htm">リンク4</a><br> <a class="bb" href="test5.htm">リンク5</a><br> <a class="bb" href="test6.htm">リンク6</a> </body> </html>
その他の回答 (1)
- cyokokichi
- ベストアンサー率21% (32/152)
<div class="aaa"> リンク1・ リンク2・ リンク3 </div> <p> ここにはコメントをいれます。 </p> <div class="bbb"> リンク4・ リンク5・ リンク6 </div> <style type="text/css"> div.aaa a:link{スタイル} div.bbb a:link{スタイル} その他も同じです。 </style> divの代りはaが出現できるものならなんでも良いと思います。 セレクタ、CSS、スタイルシートで検索すると参考になるWebページがいっぱいあります。 ご自分に合ったWebページを見つけてください。
お礼
ありがとうございます。 <div>でくくればリンクの記述が少なくて便利ですね。 今度使わせてもらいます。
お礼
ありがとうございます。 理解しました。 すみやかな解答、感謝致します。