いろいろ、CSSの本やら、ウェブサイトやらいっぱいあるのですが、なかなか分かりやすいものがないもので・・・この際、自分でまとめちゃおうっちゅうことになりましてん。
記念すべき、第一回目は、テキストリンクのCSSについてまとめてみました~。
基本的にコピー&ペーストで使えるようにしておりますよん。
1. 基本テキストリンクCSS:
a { color: #D63597; /*リンクの色*/ text-decoration: none; /*下線無し*/ } a:hover { color: #D63597; /*リンクの色*/ text-decoration: underline; /*下線あり*/ }
2. 色変えテキストリンクCSS:
a { color: #D63597; /*リンクの色*/ text-decoration: none; /*下線無し*/ } a:hover { color: #5ABCD9; /*リンクの色*/ text-decoration: underline; /*下線あり*/ }
3. 訪問済み打消しテキストリンクCSS:
a { color: #D63597; /*リンクの色*/ text-decoration: none; /*下線無し*/ } a:visited { color: #D63597;/*リンクの色*/ text-decoration: line-through; /*打ち消し線*/ } a:hover { color: #5ABCD9; /*リンクの色*/ text-decoration: underline; /*下線あり*/ }
4. 点線囲みテキストリンクCSS:
a { color: #D63597; /*リンクの色*/ border: 1px dotted #D63597; /*囲み線*/ padding: 2px;/*文字と囲み線のすきま*/ } a:hover { color: #5ABCD9; /*リンクの色*/ border: 1px dotted #5ABCD9;/*囲み線*/ padding: 2px;/*文字と囲み線のすきま*/ }
5. 斜体テキストリンクCSS:
a { color: #D63597; /*リンクの色*/ } a:hover { color: #5ABCD9; /*リンクの色*/ font-style:italic; /*フォントのスタイル*/ }
6. ずらしテキストリンクCSS:
a { color: #D63597; /*リンクの色*/ } a:hover { color: #5ABCD9; /*リンクの色*/ position:relative; top:1px; /*ずらす距離(上から)*/ left:1px; /*ずらす距離(左から)*/ }