CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSを使用したリンクの色の設定

CSSを使用すると、リンクに色を付けることができます。 colorプロパティは、要素のテキストの色を設定するために使用されます。

疑似セレクターの順序は、次のように指定されます。-：link、：visited、：hover、：active。

構文

CSSカラープロパティの構文は次のとおりです-

Selector {
   color: /*value*/
}

例

次の例は、CSSカラープロパティ-

を示しています。 
<!DOCTYPE html>
<html>
<head>
<style>
#demo::after {
   content: " (visited) ";
   font-style: italic;
}
a:link {
   color: lime;
}
a:visited {
   color: green;
}
a:hover {
   color: orange;
}
a:active {
   color: gold;
}
</style>
</head>
<body>
<h2>Demo Links</h2>
<a id="demo" href="">This is demo text 1.</a>
<hr>
<p>
<a href="#">This is demo text 2.</a>
</p>
</body>
</html>

出力

これにより、次の出力が得られます-

CSSを使用したリンクの色の設定

2番目のリンクにカーソルを合わせると、次の出力が得られます-

CSSを使用したリンクの色の設定

2番目のリンクをクリックすると、次の出力が得られます-

CSSを使用したリンクの色の設定

例

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: auto;
   font-size: 1.4em;
   background-color: lightseagreen;
   width: 100px;
   text-align: center;
}
a:link {
   color: rebeccapurple;
}
</style>
</head>
<body>
<div>
<a id="demo" href="">Demo link.</a>
</div>
</body>
</html>

出力

これにより、次の出力が得られます-

CSSを使用したリンクの色の設定


  1. CSSを使用して放射状グラデーションの形状を設定する

    放射状グラデーションの形状を設定するには、radial-gradient（）関数を使用します。この関数は、放射状のグラデーションを背景画像として設定します。関数の最初のパラメータは、以下に示すように、必要な形状として設定されます- background-image: radial-gradient(ellipse,rgb(217, 255, 0),rgb(255, 0, 0),rgb(14, 239, 255)); 以下は、CSS-を使用して放射状グラデーションの形状を設定するためのコードです。 例 <!DOCTYPE html>> <html> <hea

  2. CSSを使用したロケーションカラーの設定停止

    カラーストップの位置は、パーセンテージまたは絶対長として設定できます。たとえば、線形グラデーションの場合 background-image: linear-gradient(    rgb(61, 255, 2) 40%,    rgb(0, 174, 255) 80%,    rgb(255, 29, 29) 20% ); 以下は、CSS-を使用して線形グラデーションで位置の色の停止を設定するためのコードです。 例 <!DOCTYPE html> <html> <head> <style&