요구 사항에 따라 링크 스타일을 지정할 수 있습니다. 링크는 일반 텍스트와 구별되는 스타일을 사용하는 것이 좋습니다. 다른 링크 상태에 대한 기본 링크 스타일은 다음과 같습니다 -
| 링크 상태 | 색상 |
|---|---|
| 활성 | #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"를 클릭하면 다음과 같은 출력을 얻습니다.
