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

CSSを使用したリンクのさまざまな状態のスタイリング

CSS疑似セレクター、つまり：active、：hover、：link、：visitedを使用して、リンクのさまざまな状態のスタイルを設定できます。適切な機能のために、これらのセレクターの順序は次のように指定されます：-：link、：visited、：hover、：active。

構文

CSSのtext-indentプロパティの構文は次のとおりです-

a:(pseudo-selector) {
   /*declarations*/
}

例

次の例は、リンクのさまざまな状態のスタイルを示しています-

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin-left: 20px;
   display: flex;
   float: left;
}
a:link {
   color: navy;
   text-decoration: none;
}
a:visited {
   color: yellowgreen;
}
a:hover {
   color: orange;
   text-decoration: wavy underline;
}
a:active {
   color: red;
}
</style>
</head>
<body>
<div>
<div>
<a href="#">Demo link </a>
</div>
<div>
<a href="">Demo visited link</a>
</div>
</div>
</body>
</html>

出力

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

CSSを使用したリンクのさまざまな状態のスタイリング

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

CSSを使用したリンクのさまざまな状態のスタイリング

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

CSSを使用したリンクのさまざまな状態のスタイリング

例

<!DOCTYPE html>
<html>
<head>
<style>
div {
   display: flex;
   float: left;
}
a {
   margin: 20px;
   padding: 10px;
   border: 2px solid black;
   text-shadow: -1px 0px black, 0px -1px black, 0px 1px black, 1px 0px black;
   font-size: 1.1em;
}
a:link {
   text-decoration: none;
}
a:visited {
   color: blueviolet;
}
a:hover {
   color: orange;
   font-size: 150%;
   font-weight: bold;
   box-shadow: 0 0 5px 1px grey;
}
a:active {
   color: red;
   box-shadow: inset 0 0 15px red;
}
</style>
</head>
<body>
<div>
<a href="#">Kapow!</a>
<a href="">Dishoom</a>
</div>
</body>
</html>

出力

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

CSSを使用したリンクのさまざまな状態のスタイリング

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

CSSを使用したリンクのさまざまな状態のスタイリング

最初のリンクをクリックすると、次の出力が返されます。

CSSを使用したリンクのさまざまな状態のスタイリング


  1. text-decoration-colorCSSを使用してリンクの下線の色を変更する方法

    CSS text-decoration-colorは、text-decoration-lineの色を変更するために使用されます。 構文 CSStext-decoration-colorプロパティの構文は次のとおりです- Selector {    text-decoration-color: /*value*/ } 例 次の例は、CSStext-decoration-colorプロパティを示しています。 <!DOCTYPE html> <html>    <head>       &l

  2. CSSでのデータ属性（data- *）の使用

    data- *属性を使用して、要素に関する追加情報を格納できます。次の例は、CSSデータ-*属性を示しています。 例 <!DOCTYPE html> <html> <head> <style> dl {    margin: 2%; } p {    width: 60%;    background-color: lightgreen;    padding: 2%;    color: white;    text-alig