CSSサンプル vol.1 テキストリンク

はいはい。今日から始まりました、CSSサンプルのコーナーでございます。

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

デザインblogランキング

コメント No Comments »   はてなブックマーク   del.icio.us

この記事に関連する記事



この記事に対するコメントを残す




この記事のトラックバックURL

広告掲載のお問い合わせはこちら

検索

Google

カテゴリーアーカイブ

最近の記事

タグ・クラウド

月別アーカイブ

Agile Media Network パートナーブログ