Latest web development tutorials
×

CSS コース

CSS コース CSS 簡単な紹介 CSS 文法 CSS Id と Class セレクタ CSS 作ります CSS 背景(background) CSS テキスト(text) CSS フォント(Fonts) CSS リンク(link) CSS リストスタイル(ul) CSS テーブル(table) CSS ボックスモデル CSS フレーム(border) CSS 輪郭(outline) CSS マージン(margin) CSS 充填(padding) CSS グループ化とネスト CSS サイズ(Dimension) CSS ディスプレイ(display) CSS 検索します(position) CSS フロート(float) CSS 整列します(align) CSS セレクタの組み合わせ CSS 擬似クラス CSS 擬似要素 CSS ナビゲーションバー CSS ドロップダウンメニュー CSS イメージギャラリー CSS 透視画像/不透明な CSS 画像モザイク技術 CSS メディアタイプ CSS 属性セレクタ CSS サマリー CSS 例

CSS3 コース

CSS3 コース CSS3 簡単な紹介 CSS3 フレーム(border) CSS3 背景 CSS3 段階的変化 CSS3 テキストエフェクト CSS3 フォント CSS3 2D 変更 CSS3 3D 変更 CSS3 トランジション CSS3 アニメーション CSS3 マルチカラム CSS3 ユーザーインターフェース

CSS レスポンシブデザイン

Viewport グリッドビュー メディアクエリ ビデオ(video) フレーム

CSS リファレンスマニュアル

CSS リファレンスマニュアル CSS セレクタ CSS スピーチリファレンス CSS Web セーフフォント CSS アニメーション CSS ユニット CSS カラー CSS カラー値 CSS 色名 CSS 16進数の色

CSSリンク(リンク)

異なるリンクは、異なるスタイルを有することができます。


リンクスタイル

スタイルリンクは、あなたが(そのような色、フォント、背景など)の任意のCSSプロパティを使用することができます。

特別リンクは彼らが何であるかの状態に応じて、異なるスタイルを持つことができます。

4リンクの状態は以下のとおりです。

  • A:リンク - ノーマル、未訪問のリンク
  • A:訪問 - ユーザーがリンクを訪問しました
  • :ホバー - リンク時を超えるユーザーマウスを置い
  • A:アクティブ - リンクは瞬間をクリックします

A:リンク{色:#FF0000の;} / *未訪問のリンク* /
A:訪問{色:#00FF00;} / *訪問済みリンク* /
A:ホバー{色:#1 FF00FF;} / *リンク*にマウスを移動/
A:アクティブ{色:#1 0000FF;} / *マウスクリック* /

»をお試しください

リンクステートのスタイルの数に設定すると、注文のいくつかのルールがあります。

  • A:linkや::後で訪問ホバーはAに従わなければなりません
  • A:アクティブに従う必要があります。背後にカーソルを移動

一般的なリンクのスタイル

リンクの色の変更上記の例によれば、それはであるものの状態を確認します。

リンクのスタイルにいくつかの他の一般的な方法を見てみましょう:

テキストの装飾

テキストの装飾の属性は、主にリンクの下線を削除するために使用されます。

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

»をお試しください

背景色

背景色プロパティは、リンクの背景色を指定します。

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

»をお試しください


例

より多くの例

ハイパーリンクの異なるスタイルを追加します。
この例では、ハイパーリンクに他のスタイルを追加する方法を示します。

[詳細] - [リンク]ボックスを作成します。
この例では、我々は、CSSプロパティの数がボックスとして表示される組み合わせ、より高度な例を示しています。