CSS 링크
링크마다 스타일이 다를 수 있습니다.
링크 스타일
링크 스타일은 모든 CSS 속성(예: 색상, 글꼴, 배경 등)을 사용할 수 있습니다.
특수 링크는 상태에 따라 스타일이 다를 수 있습니다.
네 가지 링크 상태는 다음과 같습니다.
a:link - 정상, 방문하지 않은 링크
a:visited - 사용자가 방문한 링크
a: hover - 사용자가 링크 위로 마우스를 가져갈 때
a:active - 링크가 클릭되는 순간
<!DOCTYPE html>
<html>
<head>
<style>
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */
</style>
</head>
<body>
<p><b><a href="#" target="_blank">这是一个链接</a></b></p>
<p><b>注释：</b>为了使定义生效，a:hover 必须位于 a:link 和 a:visited 之后！！</p>
<p><b>注释：</b>为了使定义生效，a:active 必须位于 a:hover 之后！！</p>
</body>
</html>여러 링크 상태에 대한 스타일로 설정되면 일부 시퀀스도 있습니다. 규칙:
a:hover는 a:link 및 a:visited를 따라야 합니다
a:active는 a:hover를 따라야 합니다
일반적인 링크 스타일
위 링크의 색상 변경 예시를 바탕으로 어떤 상태인지 확인해보세요.
다른 일반적인 방법을 통해 링크 스타일로 넘어가겠습니다.
텍스트 장식
텍스트 장식 속성 기본 링크에서 밑줄을 제거하는 데 사용됩니다:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
a:link {background-color:#B2FF99;} /* unvisited link */
a:visited {background-color:#FFFF85;} /* visited link */
a:hover {background-color:#FF704D;} /* mouse over link */
a:active {background-color:#FF704D;} /* selected link */
</style>
</head>
<body>
<p><b><a href="/css/" target="_blank">点击链接</a></b></p>
<p><b>注意:</b> hover必须在:link和 a:visited之后定义才有效.</p>
<p><b>注意:</b>active必须在hover之后定义是有效的.</p>
</body>
</html>
다음 섹션