CSS 링크
1 CSS 링크의 네 가지 상태:
a:link - 일반, 방문하지 않은 링크 a:visited - 사용자가 방문한 링크 a:hover - 마우스 포인터가 링크 위에 있습니다. a:active - 링크를 클릭하는 순간
해당 동작의 색상 속성을 설정해 보겠습니다. 이전 프로세스와 동일하게 먼저 index.html을 만든 다음 test.css 파일을 만듭니다. html. 다음은 html 파일의 내용입니다.
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>css test</title> <script src="app.js"></script> <link rel="stylesheet" type="text/css" href="test.css"> </head> <body > <a href="http://www.php.cn">php</a> </body> </html>
CSS 파일의 내용은 다음과 같습니다.
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */먼저 효과를 살펴보겠습니다. 방문하지 않은 색상입니다.
마우스를 움직일 때의 링크 색상입니다.
링크의 색상은 다음과 같습니다. 클릭함:
클릭한 후의 색상입니다.
여기서 주목해야 할 것은 이 네 가지 속성을 설정해야 하는 순서: a:hover는 After :link에 있어야 하고 a:visited, a:active는 a:hover 뒤에 있어야 합니다
1.2 CSS 링크 배경색 설정
이는 해당 속성인 background-color를 수정하는 것만큼 간단합니다. 실험하고 싶다면 지금 바로 CSS 파일을 바꾸거나 추가하세요.
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}실험해 보세요. 여기서는 스크린샷을 하나씩 찍지 않겠습니다
1.3 링크 밑줄 수정
링크 아래 밑줄이 항상 필요한 것은 아니지만 때로는 모양에 영향을 줍니다. 따라서 여기서는 link 속성에 text-꾸밈 속성을 추가하고 전송 참조를 공백으로 변경해야 합니다. 수정 후 결과는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>css test</title>
<script src="app.js"></script>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body >
<a href="http://www.php.cn">php</a>
</body>
</html>
