링크는 웹 페이지에서 매우 일반적이지만, 많은 웹 디자이너는 링크를 효과적으로 조작하고 관리하기 위해 CSS 를 사용하는 능력을 인식하지 못합니다. 방문, 마우스 오버 및 활성 상태로 링크를 정의 할 수 있습니다. 테두리와 배경을 사용하여 링크에 더 많은 pizzaz를 제공하거나 단추 나 이미지처럼 보이게 할 수도 있습니다.
대부분의 웹 디자이너는 "a"태그에 스타일을 정의하는 것으로 시작합니다.
a {color : red; }이렇게하면 링크의 모든 요소 가 스타일 지정됩니다 (마우스를 올리면 방문하고 활성 상태가됩니다). 각 부분을 개별적으로 스타일을 지정하려면 링크 의사 클래스를 사용해야합니다.
링크 가짜 클래스
정의 할 수있는 네 가지 기본 유형의 링크 의사 클래스가 있습니다.
- : link - 링크의 기본 스타일입니다.
- : 방문한 - 링크를 클릭 한 후
- : 마우스를 올리면 마우스가 링크 위로 움직입니다 (사전 클릭).
- : 활성 - 링크가 클릭 될 때 오른쪽
링크 의사 클래스를 정의하려면 CSS 의사 결정자의 a 태그와 함께 사용하십시오. 따라서 모든 링크의 방문한 색상을 회색으로 변경하려면 다음을 작성하십시오.
a : visited {color : gray; }하나의 링크 의사 클래스를 스타일 화하면 모든 스타일을 스타일 화하는 것이 좋습니다. 그렇게하면 외적인 결과에 놀라지 않을 것입니다. 따라서 방문한 색상을 회색으로 변경하고 링크의 다른 모든 가상 속성을 검정색으로 유지하려는 경우 다음과 같이 작성하십시오.
a : 링크, a : hover, a : 활성 {color : black; } a : 방문한 {색상 : 회색; }링크 색 변경
링크를 스타일링하는 가장 일반적인 방법은 마우스를 가져 가면 색상을 변경하는 것입니다.
a {color : # 00f; } a : hover {color : # 0f0; }그러나 : active 속성을 사용하여 링크가 클릭되는 방식에 영향을 미칠 수 있다는 것을 잊지 마십시오.
a {color : # 00f; } a : 활성 {색상 : # f00; }또는 : visited 속성을 사용하여 링크를 방문한 후 링크가 어떻게 보이는지 :
a {color : # 00f; } a : 방문한 {color : # f0f; }모두 정리하려면 다음과 같이하십시오.
a {color : # 00f; } a : 방문한 {color : # f0f; } a : hover {color : # 0f0; } a : 활성 {색상 : # f00; }아이콘이나 글 머리 기호를 추가하려면 링크에 배경 놓기
세련된 배경 기사처럼 링크에 배경을 넣을 수 있지만 배경을 조금만 가지고 놀면 관련 아이콘이있는 링크를 만들 수 있습니다. 텍스트가 크지 않은 한 약 15x15 픽셀 크기의 작은 아이콘을 선택하십시오. 링크의 한쪽면에 배경을 놓고 반복 옵션을 반복 없음으로 설정하십시오. 그런 다음 링크를 삽입하여 링크 안의 텍스트가 왼쪽이나 오른쪽으로 충분히 이동하여 아이콘을 볼 수 있도록하십시오.
a {패딩 : 0 2px 1px 15px; 배경 : #fff url (ball.gif) 왼쪽 중심 반복 없음; 색상 : # c00; }아이콘이 있으면 가져 오는 아이콘, 활성 아이콘 및 방문한 아이콘으로 다른 이미지를 설정하여 링크를 변경할 수 있습니다.
a {패딩 : 0 2px 1px 15px; 배경 : #fff url (ball.gif) 왼쪽 중심 반복 없음; 색상 : # c00; } a : hover {배경 : #fff url (ball2.gif) left center no-repeat; } a : 활성 {배경 : #fff url (ball3.gif) 왼쪽 중심 반복 없음; }단추처럼 보이는 링크 만들기
버튼은 매우 인기가 있지만 CSS가 나오기까지는 이미지를 사용하여 버튼을 만들어야합니다. 그러면 페이지로드 시간이 오래 걸릴 수 있습니다. 다행히도 CSS와 같은 버튼 효과를 쉽게 만들 수있는 테두리 스타일이 있습니다.
a {border : 4px 시작; 패딩 : 2px; 텍스트 장식 : 없음; } a : 활성 {border : 4px 삽입; }색상을 처음에 넣고 스타일을 삽입하면 브라우저는 예상대로 색상을 렌더링하지 못합니다. 색상이있는 테두리가있는 멋진 버튼이 있습니다.
a {border-style : 솔리드; border-width : 1px 4px 4px 1px; 텍스트 장식 : 없음; 패딩 : 4px; 테두리 색 : # 69f # 00f # 00f # 69f; }또한 버튼 링크의 마우스를 올리거나 활성 스타일에 영향을 줄 수 있습니다. 단지 의사 클래스를 사용하십시오.
a : link {border-style : solid; border-width : 1px 4px 4px 1px; 텍스트 장식 : 없음; 패딩 : 4px; 테두리 색 : # 69f # 00f # 00f # 69f; } a : hover {border-color : #ccc; }