CSSの標準リンクスタイル
要件に応じてリンクのスタイルを設定できます。リンクには、通常のテキストと区別できるスタイルを設定することをお勧めします。さまざまなリンク状態のデフォルトのリンクスタイルは次のとおりです-
| リンク状態 | 色 |
|---|---|
| アクティブ | ＃EE0000 |
| フォーカス | ＃5E9ED6またはWindowsとMacの場合は、同様の青い輪郭の色合い、 ＃F07746 Linuxのアウトライン、テキストの色は同じまま |
| ホバー | ＃0000EE |
| リンク | ＃0000EE |
| 訪問済み | ＃551A8B |
注 −上記の色は、新しいバージョンのブラウザで変更される場合があります。適切な機能のために、疑似セレクターの順序は次のように指定されます：-：link、：visited、：hover、：active。
例
次の例は、標準のリンクスタイルを示しています
<!DOCTYPE html>
<html>
<head>
<style>
* {
text-align: center;
}
</style>
</head>
<body>
<h2>Learn JDBC</h2>
<a href="">Click here</a>
<br/><br/>
<a href="#">And here <img src="https://www.tutorialspoint.com/jdbc/images/jdbc-mini-logo.jpg"></a>
</body>
</html> 出力
これにより、次の出力が得られます-
リンクのアクティブ状態は、次の出力に示されています-
例
<!DOCTYPE html>
<html>
<head>
<style>
#one {
color: black;
text-decoration: none;
}
#two {
font-style: italic;
box-shadow: inset 0 0 8px coral;
}
table, td {
font-size: 1.4em;
padding: 8px;
text-align: center;
border: thin solid;
}
</style>
</head>
<body>
<table>
<tr>
<td><a id="one" href="#">1</a>(non standard link)</td>
<td id="two"><a href="#">2</a></td>
</tr>
<tr>
<td><a href="">3</a></td>
<td><a href="#">4</a></td>
</tr>
</table>
</body>
</html> 出力
これにより、次の出力が得られます-
「2」をクリックすると、次の出力が得られます
-
CSSを使用したリンクのさまざまな状態のスタイリング
CSS疑似セレクター、つまり：active、：hover、：link、：visitedを使用して、リンクのさまざまな状態のスタイルを設定できます。適切な機能のために、これらのセレクターの順序は次のように指定されます：-：link、：visited、：hover、：active。 構文 CSSのtext-indentプロパティの構文は次のとおりです- a:(pseudo-selector) { /*declarations*/ } 例 次の例は、リンクのさまざまな状態のスタイルを示しています- <!DOCTYPE html> <html> &l
-
CSSでアイコンバーを作成するにはどうすればよいですか？
CSSでアイコンバーを作成するためのコードは次のとおりです- 例 <!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&g