リンクは、ある Web ページから別の Web ページへの接続であり、CSS はさまざまな属性を通じてさまざまな方法でリンクのスタイルを設定できます。
1.リンクスタイル
リンクは Web サイトの重要な部分であり、ほとんどすべての Web ページでリンク スタイルを合理的に設計することで、Web ページの外観にポイントを加えることができます。リンクには、リンク、訪問済み、アクティブ、ホバーという 4 つの異なる状態があります。次の疑似クラス セレクターを使用して、リンクの 4 つの状態に異なるスタイルを設定できます。
(1) a: リンク => これは通常の未訪問のリンクです。
(2) a: 訪問済み => これはユーザーが少なくとも 1 回訪問したことのあるリンクです
(3) a:hover => マウスをホバーするとリンクになります
(4) a: active => 先ほどクリックされたリンクです。
文法:
a:link{色:色の名前;}
color_name には、色名 (緑)、16 進値 (#5570f0)、または RGB 値 (rgb(25, 255, 2)) などの任意の形式を使用できます。ユーザーがタブ キーを使用してリンクを参照するときにフォーカスするために使用される別の状態「a:focus」があります。
リンクのデフォルト値:
(1) デフォルトでは、作成されたリンクには下線が付きます。
(2) リンク上にマウスを置くと手のアイコンに変わります。
(3) 通常/未訪問のリンクは青色です。
(4) 訪問したリンクは紫色で表示されます。
(5 )アクティブなリンクは赤色です。
(6) リンクがフォーカスされると、その周囲に輪郭が表示されます。
例えば:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>CSS リンク</title><style>p{font-size:25px;text-align:center;}</style></head ><body><p><ahref=https://www.dotcpp.com/>簡単なリンク</a></p></body></html>
表示される結果は次のとおりです。
2.CSSでリンクスタイルを設定するにはどうすればよいですか?
リンクの基本的な CSS プロパティをいくつか示します。
(1) 色属性
この CSS プロパティは、リンク テキストの色を変更するために使用されます。
文法:
{色:色の名前;}
(2) font-family属性
このプロパティは、font-family プロパティを使用してリンクのフォント タイプを変更するために使用されます。
文法:
{フォントファミリー:ファミリー名;}
(3) text-decoration属性
この属性は主に、リンクに対する下線やその他の変更を削除または追加するために使用されます。
文法:
a{テキスト装飾:なし;}
例:
<style>/*視認性を高めるためにフォント サイズを設定します*/p{font-size:2rem;}/*text-decoration 属性を使用して下線を削除します*/a{text-decoration:none;}/*次の方法も使用できます次のスタイルに下線を追加します。 text-decoration:underline;*/</style>
(4) 背景色属性
このプロパティは、リンクの背景色を設定するために使用されます。
文法:
a{背景色:色名;}