웹 사이트를 디자인 할 때는 때때로 다른 링크 유형에 대해 페이지 요소의 속성을 기반으로 다른 스타일을 만들어야합니다. 다른 링크 아이콘이 표시됩니다. CSS 선택기는 매우 유용한 기술이며,이를 통해 특정 효과를 쉽게 달성 할 수 있습니다. 오늘 우리는 개인화 된 링크 스타일을 만들어 CSS의 속성 선택기를 소개 할 것입니다.
먼저 데모를 살펴 보겠습니다.
위 그림에서 볼 수 있듯이 각 링크마다 다른 스타일을 정의합니다. 링크 A의 HREF 속성 값이 "Mailto"링크 인 경우 링크가있을 때 이메일의 아이콘이 표시됩니다 Word 파일이 사용되면 링크 주소가 MP3에 표시되면 링크 주소가 "Qianduan.net"이 표시되면 ... 홈페이지 아이콘이 표시됩니다.
실제로 이러한 기능을 구현하는 것은 매우 쉽습니다.
CSS 2.1 또는 CSS 3 버전에 관계없이 IE7 및 IE8은 CSS 선택기를 지원하며 IE6 아래의 브라우저 만 지원하지 않습니다.
좋아,이 스타일을 구현합시다.
1. 기본 링크 스타일 먼저 CSS 스프라이트 이미지를 준비하고 모든 아이콘을이 A.GIF에 통합합니다.
| A { 배경 : URL (a.gif) 비 반복 오른쪽 4px; 패딩-오른쪽 : 18px; 색상 :#369; 라인 높이 : 24px; } |
이러한 방식으로 모든 링크의 기본 스타일을 정의하고 모든 링크의 오른쪽에 작은 빨간색 화살표 아이콘이 표시됩니다.
2. 개인화 된 스타일을 정의하십시오. 이제 우리는 다양한 유형의 링크에 대한 스타일을 정의합니다.
MailTomailto Mail 링크는 href = "[email protected]"의 스타일입니다.
| a [href^= "mailto :"] {{ 배경 -위치 : 오른쪽 -242px; } |
우리는 일반적으로 모든 DOC 파일 링크가 href = "abc.doc"형식이라고 생각합니다. 이는 링크 주소가 .doc로 끝나는 것을 의미하므로 [att $ = val]의 형식을 사용해야합니다. 스타일은 다음과 같습니다.
| a [href $ = ". doc"] { 배경 위치 : 오른쪽 -160px } |
PDF, Excle, MP3 형식의 문서도 이러한 방식으로 구현됩니다.
특정 문자열이 포함 된 링크 용 Qianduan.net 필드가 포함 된 링크 [ATT*= val]을 사용할 수 있습니다.
| A { 배경 : URL (a.gif) 비 반복 오른쪽 4px; 패딩-오른쪽 : 18px; 색상 :#369; 라인 높이 : 24px; } a [href^= "mailto :"] {배경 -위치 : 오른쪽 -242px;} a [href $ = ". doc"] {배경 -위치 : 오른쪽 -161px} a [href $ = ". xls"] {배경 -위치 : 오른쪽 -282px} a [href $ = ". pdf"] {배경 -위치 : 오른쪽 -79px} a [href $ = ". mp3"] {배경 -위치 : 오른쪽 -204px} a [href $ = ". swf"] {배경 -위치 : 오른쪽 -120px} a [href $ = ". rar"] {배경 -위치 : 오른쪽 -38px} a [href*= "qianduan.net"] {배경 -위치 : 오른쪽 -328px} |
그리고 우리가 그것을 사용할 때, 우리는 추가 클래스를 추가 할 필요가 없습니다.
| <a href = "abc.doc"> Word 문서 </a> |