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>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <style> a:link {color:#FF0000;} /* 未被访问的链接 */ a:visited {color:#00FF00;} /* 已被访问的链接 */ a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */ a:active {color:#0000FF;} /* 正在被点击的链接 */ </style> </head> <body> <a href="#" target="_blank">这是一个链接</a> 注释：为了使定义生效，a:hover 必须位于 a:link 和 a:visited 之后！！ 注释：为了使定义生效，a:active 必须位于 a:hover 之后！！ </body> </html>

제출하다 코드 재설정

자동운전