HTML5 및 CSS3 프로그래밍을 위해 가상 클래스를 사용하여 스타일 링크를 사용하는 방법

HTML5 및 CSS3 웹 페이지에 스타일을 지정하면 추한 링크가 얼마나 염려 스럽습니까? 기본 링크 스타일은 유용하지만 색상 체계에 맞지 않을 수 있습니다.

표준 링크를 스타일링하는 방법

링크에 스타일을 추가하는 것은 쉽습니다. 결국 (링크를 정의하는 태그)는 HTML 태그 일 뿐이므로 모든 태그에 스타일을 추가 할 수 있습니다. 다음은 노란색 배경의 검은 색 링크 인 예제입니다.

a {color: black; background-color: yellow;}

잘 작동하지만 링크는 다른 요소보다 조금 복잡합니다. 링크에는 실제로 세 가지 상태가 있습니다.

• 정상: 이것은 표준 상태입니다. CSS가 추가되지 않은 경우 대부분의 브라우저는 방문하지 않은 링크를 파란색 밑줄이있는 텍스트로 표시합니다.

• 방문한 사람: 이 상태는 사용자가 링크를 방문하여 현재 페이지로 돌아올 때 활성화됩니다. 대부분의 브라우저는 자주색 밑줄이 그어진 스타일을 사용하여 링크가 방문되었음을 나타냅니다.

• 마우스 오버: 사용자의 마우스가 요소 위에 남아있을 때 마우스 오버 상태가 활성화됩니다. 대부분의 브라우저는 기본 설정에서 마우스 오버 상태를 사용하지 않습니다.

페이지의 태그에 스타일을 적용하면 스타일이 모든 앵커의 모든 상태에 적용됩니다.

링크 상태 스타일 지정 방법

각 상태에 다른 스타일을 적용 할 수 있습니다. 이 예에서 링크는 흰색 배경에 검은 색입니다. 방문한 링크는 노란색의 검은 색입니다. 마우스가 링크 위로 마우스를 가져 가면 링크는 검은 색 배경의 흰색입니다.

코드를 살펴본 후 코드가 어떻게 작동하는지 확인하십시오:

linkStates. html a {color: black; 배경색: 흰색;} a: 방문한 {색상: 검정색; background-color: # FFFF33;} a: 마우스 오버 (색상: 흰색; background-color: black;}

가상 클래스와 링크
이 링크는 정상
이 링크를 방문했습니다
마우스가이 링크 위로 마우스를 가져갑니다

코드의 HTML 부분. 사용자가 페이지와 상호 작용하는 동안 링크의 상태가 동적으로 변경됩니다. 스타일 시트는 다양한 상태에서 일어나는 일을 결정합니다. 코드를 결합하는 방법은 다음과 같습니다.

1. 먼저 태그의 스타일을 지정하여 일반 링크 스타일을 결정합니다.

   다른 가상 클래스를 정의하지 않으면 모든 링크가 일반 링크 스타일을 따릅니다.

2. 방문한 링크의 스타일 만들기.

   링크는 현재 브라우저 세션에서 해당 사이트를 방문한 후에이 스타일을 사용합니다. a: visited selector는 방문한 링크를 나타냅니다.

3. 올린 링크를위한 스타일을 만드십시오.

   a: 마우스 오버 스타일은 마우스가 링크 위로 마우스를 가져갈 때만 링크에 적용됩니다. 마우스가 링크를 떠나 자마자 스타일은 표준 또는 방문한 스타일로 되돌아갑니다.

최상의 링크 사례

링크 스타일에는 몇 가지 특별한 특징이 있습니다. 링크에 스타일을 적용하는 방법에 조금주의를 기울일 필요가 있습니다. 스타일을 링크에 적용 할 때 다음 사항을 고려하십시오.

• 순서가 중요합니다. 일반 앵커를 먼저 정의하십시오. 가상 클래스는 표준 앵커 스타일을 기반으로합니다.

• 여전히 링크처럼 보이는지 확인하십시오. 사용자가 뭔가를 링크로 생각한다는 사실을 알고 있어야합니다. 밑줄과 일반적으로 링크를 나타내는 색상을 제거하면 사용자가 혼란 스러울 수 있습니다. 일반적으로 문제없이 색상을 변경할 수 있지만 링크는 밑줄이 그어져 있거나 분명히 단추처럼 보이는 것이어야합니다.

• 방문한 링크를 테스트합니다. 방문한 링크를 테스트하는 것은 조금 까다 롭습니다. 링크를 방문한 후에도 계속 방문한 상태이기 때문입니다. 대부분의 브라우저에서 브라우저 기록을 삭제할 수 있으며 링크 상태를 방문하지 않은 상태로 정리해야합니다.

• 마우스를 올리면 글꼴 크기가 변경되지 않습니다. Hover는 페이지를 실시간으로 변경합니다. 일반적인 링크와 다른 글꼴 크기를 사용하는 마우스 오버 스타일은 문제를 일으킬 수 있습니다. 큰 글꼴을 받아들이도록 페이지가 다시 포맷되므로 많은 양의 텍스트를 화면에서 빠르게 이동할 수 있습니다. 색상이나 테두리를 호버에서 변경하는 것이 가장 안전하지만 글꼴 모음이나 글꼴 크기는 변경하지 않는 것이 가장 좋습니다.