- ベストアンサー
Aタグの色・装飾を 一部のページだけ変えたい
外部CSSファイルでa:link, a:visited, a:hover, a:focus, a:active の background-color, color, text-decoration 設定しています。 一部のページのみ、これらを変更するにはどうしたら良いでしょうか？よろしくお願いします。
- chigasakinet
- お礼率83% (5/6)
- HTML
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
カスケードスタイルシートは、 「後から記述した方が優先される」 「外部CSSよりも、<HEAD>～</HEAD>内に記載された方が優先される」 「<HEAD>～</HEAD>内に記載された方よりも、タグ毎に個別にSTYLE属性を使って、<A STYLE="">～</A>で記述した方が優先される」 等々の決まりがあるので、 変更したいページのみ、<HEAD>～</HEAD>の中にスタイルを記述するとか、で対応できるかと思います。 ---別案--- 外部CSSファイルでやりたいのであれば、 <link href="style.css" rel="stylesheet" type="text/css"> ↑ これは普通のページ用。 <link href="style.css" rel="stylesheet" type="text/css"> <link href="style2.css" rel="stylesheet" type="text/css"> ↑ これは変更したいページ用 この場合、後から記述した「style2」の方が優先されますので、 style2のファイルに変更をしたいスタイルだけ記述すればいいです。 この方法の場合、 > 一部のページ これが複数あったとしても、外部CSSのメリットを生かしたまま変更ができると思います。
その他の回答 (3)
もとい、一部のページですね・・・#1さんの通り、CSS指定を変えればいいです。御免なさい
お礼
回答ありがとうございました！
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Class属性実験</title> <style> a.searchengineitem:hover{color:red;} a:hover{color:green;} </style> </head> <body> <h1>各場所へのリンク</h1> <h2>検索エンジン</h2> <ul id="searchengines"> <li><a href="http://www.yahoo.co.jp/" class="searchengineitem">Yahoo</a></li> <li><a href="http://www.google.co.jp/" class="searchengineitem">Google</a></li> </ul> <h2>その他のサイト</h2> <ul id="othersites"> <li><a href="http://oshiete.goo.ne.jp?" class="othersite">教えてgoo</a></li> <li><a href="http://whois.jp/" class="othersite">Whoisサービス</a></li> </ul> </body> </html>
- 345itati
- ベストアンサー率48% (795/1639)
そのページだけ外部CSSの参照を止めてa:link, a:visited, a:hover, a:focus, a:active の background-color, color, text-decorationの部分を書き換えてページに直接挿入。 もしくは違う外部CSSファイルを作成してそちらを参照する。
お礼
回答ありがとうございます。 ～の部分を書き換えてページに直接挿入。の所、 もう少し具体的にお教えいただけたら嬉しいのですが、、、 よろしくお願いします。
お礼
解決しました。ありがとうございます。 上記のlink href=で上手く表示されなかったので (単純ミスしてるんだと思います、、、) <!-- @import "style.css"; @import "style2.css"; --> にしてみたら上手く表示されました。 →変更をしたいスタイルだけ記述 でOKなんですね、 勉強になりました。