いろいろ、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; /*ずらす距離（左から）*/
}