웹 사이트를 디자인할 때 페이지 요소의 속성을 기반으로 다양한 스타일을 만들어야 하는 경우가 있습니다. 예를 들어 다양한 링크 유형에 대해 다양한 링크 아이콘을 표시해야 합니다. CSS 선택자는 특정 효과를 쉽게 얻을 수 있는 매우 유용한 기술입니다. 오늘은 개인화된 링크 스타일을 생성하여 CSS 속성 선택기를 소개하겠습니다.
먼저 데모를 살펴보겠습니다.
위 그림에서 볼 수 있듯이 각 링크 유형에 대해 서로 다른 스타일을 정의했습니다. 링크 a의 href 속성 값이 "mailto" 이메일 링크인 경우 링크 뒤에 메일 아이콘이 표시됩니다. 워드 파일이고, 링크 주소가 mp3이면 뒤에 워드 문서 아이콘이 표시되고, 링크 주소에 "qianduan.net"이 포함되어 있으면 홈페이지 아이콘이 표시됩니다
. 이러한 기능을 구현하는 것은 매우 쉽습니다. 먼저 CSS 속성 선택기의 구문을 살펴보겠습니다.
CSS 선택기는 CSS 2.1 버전이나 CSS 3 버전에 관계없이 IE7 및 IE8에서 지원되며 웹킷, Gecko 코어 및 Opera에서만 지원되지 않습니다.
자, 다음 스타일을 구현해 보겠습니다.
1. 링크의 기본 스타일 먼저 CSS Sprites 이미지를 준비하고 모든 아이콘을 이 a.gif에 통합했습니다.
| { 배경:url(a.gif) 오른쪽 4px 반복 없음; 오른쪽 패딩:18px; 색상:#369; 줄 높이:24px; } |
이러한 방식으로 모든 링크에 대한 기본 스타일을 정의했으며 모든 링크 오른쪽에 작은 빨간색 화살표 아이콘이 표시됩니다.
2. 개인화된 스타일 정의 이제 다양한 유형의 링크에 대해 각각의 스타일을 정의해 보겠습니다. 실제로 지금 해야 할 일은 다양한 배경 이미지 위치(Background-position)를 정의하는 것뿐입니다.
mailtomailto메일 링크는 href= 모양입니다. " mailto:[email protected]" 스타일의 경우 href 속성 값이 mailto로 시작하고 [att^=val] 형식을 사용합니다.
| a[href^="mailto:"] { 배경 위치:오른쪽 -242px; } |
| a[href$=".doc"] { 배경 위치:오른쪽 -160px } |
PDF, 엑셀, mp3 등의 형식의 문서도 이 방법을 통해 구현됩니다.
qianduan.net 필드가 포함된 링크 특정 문자열이 포함된 링크의 경우 [att*=val]을 사용할 수 있습니다.
| { 배경: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"] {ground-position:right -328px} |
그리고 그것을 사용할 때 추가 클래스를 추가할 필요가 없습니다:
| <a href="abc.doc">Word 문서</ 에이 > |