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;}  /* 正在被点击的链接 */

먼저 효과를 살펴보겠습니다. 방문하지 않은 색상입니다.

QQ截图20161208104329.png

마우스를 움직일 때의 링크 색상입니다.

QQ截图20161208104336.png

링크의 색상은 다음과 같습니다. 클릭함:

QQ截图20161208104343.png

클릭한 후의 색상입니다.

QQ截图20161208104348.png

여기서 주목해야 할 것은 이 네 가지 속성을 설정해야 하는 순서: 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-꾸밈 속성을 추가하고 전송 참조를 공백으로 변경해야 합니다. 수정 후 결과는 다음과 같습니다.

QQ截图20161208104515.png

지속적인 학습

새로운 파일

<!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>

제출하다 코드 재설정

자동운전