CSS 링크

1 CSS 링크의 네 가지 상태:

a:link - 일반, 방문하지 않은 링크 a:visited - 사용자가 방문한 링크 a:hover - 마우스 포인터가 링크 위에 있습니다. a:active - 링크를 클릭하는 순간

해당 동작의 색상 속성을 설정해 보겠습니다. 이전 프로세스와 동일하게 먼저 index.html을 만든 다음 test.css 파일을 만듭니다. html. 다음은 html 파일의 내용입니다.

       
  php  

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-꾸밈 속성을 추가하고 전송 참조를 공백으로 변경해야 합니다. 수정 후 결과는 다음과 같습니다.