>웹 프론트엔드 >CSS 튜토리얼 >CSS 페이지 레이아웃(하이퍼링크 스타일)에 대한 상식 요약

CSS 페이지 레이아웃(하이퍼링크 스타일)에 대한 상식 요약

yulia
yulia원래의
2018-09-20 16:09:563145검색

CSS에는 많은 지식이 있으며 우리가 그것을 모두 기억하는 것은 불가능합니다. 여가 시간에 CSS 페이지 레이아웃에 대한 몇 가지 일반적인 지식을 정리했습니다. 이 기사에서는 CSS 하이퍼링크 스타일에 대한 일반적인 지식을 공유할 것입니다. 도움이 필요한 친구들이 참고하면 도움이 될 것 같아요.

웹 페이지를 디자인할 때 의사 클래스를 통해 링크 스타일을 제어하고, 사용자가 웹 페이지를 탐색하도록 안내하고, 풍부한 대화형 요소를 추가할 수 있습니다.

1. 링크의 속성

하이퍼링크의 레이블은 3499910bf9dac5ae3c52d5ede73834855db79b134e9f6b82c0b36e0489ee08ed입니다. 웹 페이지의 하이퍼링크는 일반적으로 텍스트나 그림을 연결하는 데 사용됩니다. 하이퍼링크에는 링크의 다양한 상태를 나타내는 4개의 의사 클래스가 있습니다.

a: 링크(하이퍼링크 방문 전 스타일)

a: 방문함(링크 주소 방문 후 스타일)

a: hover(마우스를 가리키고 있을 때의 스타일)

a: 활성(링크 주소 방문 후 스타일) 마우스 클릭) 및 해제)

2. 링크 설정 순서 및 상속

설정 순서

4개의 의사 클래스 설정은 고정된 순서로 이루어져야 합니다. 그렇지 않으면 원하는 효과를 얻을 수 없습니다. 순서는 다음과 같습니다: a: 링크, a: 방문, a: hover, a: 활성.

상속

우리는 텍스트 수정이 상속될 수 없다는 것을 알고 있습니다. 요소에 대해 텍스트 스타일이 정의되면 해당 텍스트 스타일이 사용됩니다. 하위 요소에서는 스타일을 취소할 수 없습니다. 그러나 의사 클래스를 사용하여 하이퍼링크를 정의하고 텍스트 수정을 사용하면 하위 요소가 원래 링크 스타일을 재정의할 수 있습니다.

3. 예

<html>
<head>
<style type="text/css">
    a:link{color:red;}
    a:visited{color:green;}
    a:hover{color:yellow;}
    a:active{color:orange;}
</style>
</head>
<body>
    <a href="https://www.baidu.com"> 超链接 </a>
</body>
</html>

위 내용은 CSS 페이지 레이아웃(하이퍼링크 스타일)에 대한 상식 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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