>  기사  >  웹 프론트엔드  >  HTML은 클릭 후 하이퍼링크 글꼴 색상과 글꼴 색상을 설정합니다.

HTML은 클릭 후 하이퍼링크 글꼴 색상과 글꼴 색상을 설정합니다.

巴扎黑
巴扎黑원래의
2017-06-03 13:53:578039검색

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.