CSS는 "의사 클래스"라고 하는 일부 특수 효과를 위한 특정 도구를 준비합니다. 우리가 자주 사용하는 몇 가지가 있습니다. 아래에서는 링크 스타일을 정의하는 데 자주 사용되는 4가지 의사 클래스를 자세히 소개합니다.
링크 스타일 정의
CSS는 "의사 클래스"라고 하는 일부 특수 효과를 위한 특정 도구를 준비합니다. 우리가 자주 사용하는 몇 가지가 있습니다. 아래에서는 링크 스타일을 정의하는 데 자주 사용되는 네 가지 의사 클래스를 자세히 소개합니다:
:link
:visited
: hover
:active
링크 스타일을 정의해야 하기 때문에 하이퍼링크의 앵커 태그인 a가 필수적입니다. 앵커 태그와 가상 클래스 링크를 작성하는 방법은 링크 스타일을 정의하는 것입니다. 기본 메소드는 다음과 같이 작성됩니다.
a:link는 일반 링크의 스타일을 정의합니다.
a:visited는 방문한 링크의 스타일을 정의합니다.
a:hover는 스타일을 정의합니다. 마우스가 있는 위치 링크가 켜져 있을 때의 스타일
a:active, 마우스가 링크를 클릭할 때의 스타일을 정의합니다.
예:
코드는 다음과 같습니다:
a:link { color:#FF0000; text-decoration:underline; } a:visited { color:#00FF00; text-decoration:none; } a:hover { color:#000000; text-decoration:none; } a:active { color:#FFFFFF; text-decoration:none; }
위의 예에서 정의된 링크 색상은 빨간색, 방문한 링크는 녹색, 마우스를 위에 올렸을 때 링크는 검은색입니다. , 클릭 시 색상은 흰색입니다.
일반 링크와 방문한 링크의 스타일이 동일하고 마우스 오버 및 클릭 스타일이 동일하면 병합하여 정의할 수도 있습니다.
코드는 다음과 같습니다.
a:link, a:visited { color:#FF0000; text-decoration:underline; } a:hover, a:active { color:#000000; text-decoration:none; }
링크 정의 순서
링크 정의를 작성하더라도 규칙이 있습니다. 이 네 가지 항목을 작성하는 순서가 약간 틀리면 효과가 나타납니다. 링크가 손실될 수 있으므로 링크 스타일을 정의할 때마다 정의 순서(link--visited--hover-active)를 확인해야 합니다. 이는 우리가 종종 LoVe HAte 원칙이라고 부르는 것입니다(대문자는 첫 글자).
로컬 링크 스타일 정의
CSS에서 a:link{}와 같은 정의를 작성하면 전체 페이지의 링크 스타일이 변경되지만 일부 로컬 링크는 전문화되어야 합니다. 이 문제는 해결하기 어렵지 않습니다. 링크 스타일 정의 앞에 지정된 ID나 클래스를 추가하기만 하면 됩니다.
예:
코드는 다음과 같습니다:
#sidebar a:link, #sidebar a:visited { color:#FF0000; text-decoration:none; } #sidebar a:hover, #sidebar a:active { color:#000000; text-decoration:underline; }
호출 방법:
8bd8f5f601bef3de2be1c11f4668a4f0c4ad451ec986d07d936148c86296d071스크립트 홈 링크3499910bf9dac5ae3c52d5ede738348594b3e26ee717c64999d7867364b1b4a3
클래스 정의 방법은 id와 동일하며 #sidebar를 로 변경하면 됩니다. sidebar. , 그리고 또 다른 방법은 링크 스타일을 직접 정의하는 것인데, 이는 보다 직접적이지만 호출이 더 번거롭고 특정 링크마다 정의된 코드를 추가해야 합니다.
예:
코드는 다음과 같습니다.
a.redlink a:link, a.redlink a:visited { color:#FF0000; text-decoration:none; } a.redlink a:hover, a.redlink a:active { color:#000000; text-decoration:underline; background:#FFFFFF; }
호출 방법:
e388a4556c0f65e1904146cc1a846bee8e593e5d332ac66750cd74b316a1325d스크립트 하우스에 대한 링크 13499910bf9dac5ae3c52d5ede738348594b3e26ee717c64999d7867364b1b4a3
링크의 정의는 주로 색상(color), 텍스트 장식의 세 가지 속성을 갖습니다. (텍스트 장식) ) 및 배경
위 내용은 HTML은 클릭 후 하이퍼링크 글꼴 색상과 글꼴 색상을 설정합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!