다양한 매개변수를 포함하는 요소의 스타일을 변경하기 위해 속성 선택기가 CSS에 도입되었습니다. 이를 통해 특정 매개변수 또는 해당 값의 존재 여부에 따라 태그 스타일을 설정할 수 있습니다. 참고: 속성 선택기는 Internet Explorer 버전 7.0 이상에서 지원되며 예제가 올바르게 작동하려면 올바른 <!DOCTYPE>을 추가해야 합니다. 이러한 선택기의 몇 가지 일반적인 용도를 살펴보겠습니다.
단순 속성 선택기
특정 속성이 지정된 경우 요소의 스타일을 설정합니다. 이 경우 그 의미는 중요하지 않습니다. 이러한 선택기를 사용하는 구문은 다음과 같습니다.
[атрибут]{ Описание правил стиля } Селектор[атрибут]{ Описание правил стиля }
선택기 이름과 대괄호 사이에는 공백이 허용되지 않습니다. 예제 12.1에서는 제목 매개변수가 추가될 때 <Q> 태그의 스타일이 어떻게 지정되는지 보여줍니다. 예제 12.1. 매개변수에 따른 요소 유형
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1251"><title>Селекторы атрибутов</title><style type="text/css">Q{
font-style: italic;/* Курсивное начертание */
quotes:"\00AB""\00BB";/* Меняем вид кавычек в цитате */}Q[title]{
color: maroon;/* Цвет текста */}</style></head><body><p>Продолжая известный закон Мерфи, который гласит:<q>Если неприятность
может случиться, то она обязательно случится</q>, можем ввести свое наблюдение:<q title="Из законов Фергюсона-Мержевича">После
того, How веб-page будет корректно отображаться в одном браузере, выяснится,
что она неправильно показывается в другом</q>.</p></body></html>
예제의 결과는 그림 1에 나와 있습니다. 12.1 이 예에서는 title 매개변수가 추가되면 7lt;Q> 컨테이너 내부의 텍스트 색상이 변경됩니다. Q[제목] 선택기의 경우 속성이 Q 선택기에서 상속되므로 속성을 반복할 필요가 없습니다.
값이 있는 속성 선택기
특정 매개변수에 특정 값이 지정된 경우 요소의 스타일을 설정합니다. 응용 프로그램 구문은 다음과 같습니다.
[атрибут="meaning"]{ Описание правил стиля } Селектор[атрибут="meaning"]{ Описание правил стиля }
첫 번째 경우에는 지정된 속성 값을 포함하는 모든 요소에 스타일이 적용됩니다. 두 번째에서는 특정 선택자에게만 해당됩니다. 예제 12.2에서는 A 태그에 매개변수가 포함된 경우 링크 스타일을 변경하는 방법을 보여줍니다 target="_blank". 이 경우 링크가 새 창에서 열리고 이를 표시하기 위해 스타일을 사용하여 링크 텍스트 앞에 작은 그림을 추가합니다. 예제 12.2. 새 창에서 링크를 여는 스타일
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1251"><title>Селекторы атрибутов</title><style type="text/css">A[target="_blank"]{
background:url(blank.gif) no-repeat 02px;/* Параметры фонового рисунка */
padding-left:15px;/* Смещаем текст вправо */}</style></head><body><p><a href="link1.html">Обычная link</a>|<a href="link2" target="_blank">Ссылка в новом окне</a></p></body></html>
예제의 결과는 아래에 나와 있습니다(그림 12.2). 이 예에서는 속성을 사용하여 링크에 그림이 추가됩니다 background. 그 기능은 반복되는 배경 이미지를 생성하는 것이지만 인수를 통해 배경 반복을 취소하여 no-repeat단일 이미지를 생성할 수 있습니다.
속성이 특정 값으로 시작합니다.
속성이 지정된 값으로 시작하는 경우 요소의 스타일을 설정합니다. 응용 프로그램 구문은 다음과 같습니다.
[атрибут^="meaning"]{ Описание правил стиля } Селектор[атрибут^="meaning"]{ Описание правил стиля }
첫 번째 경우에는 지정된 속성 값으로 시작하는 모든 요소에 스타일이 적용됩니다. 두 번째에서는 특정 선택자에게만 해당됩니다. 귀하의 사이트가 일반 링크와 외부 링크(다른 사이트로 연결되는 링크)의 스타일을 분리해야 한다고 가정해 보겠습니다. A태그에 새 클래스를 추가하는 것을 방지하기 위해 속성 선택기를 사용합니다. 외부 링크는 주소에 프로토콜을 추가하는 것이 특징입니다. 예를 들어 HTTP 프로토콜은 하이퍼텍스트 문서에 액세스하는 데 사용됩니다. 따라서 외부 링크는 http:// 키워드로 시작하고 A예제 12.3과 같이 이를 선택기에 추가합니다. 예제 12.3. 외부 참조 스타일 변경
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1251"><title>Селекторы атрибутов</title><style type="text/css">A[href^="http://"]{
font-weight: bold;/* Жирное начертание */}</style></head><body><p><a href="link1.html">Обычная link</a>|<a href="http://htmlbook.ru" target="_blank" rel="nofollow">Внешняя link на сайт htmlbook.ru</a></p></body></html>
예제의 결과는 아래에 나와 있습니다(그림 12.3) . 이 예제에서는 외부 링크가 굵게 강조 표시되어 있습니다. 또한 예제 12.2에 표시된 기술을 사용하여 링크에 작은 이미지를 추가하면 해당 링크가 다른 사이트로 연결된다는 것을 나타낼 수 있습니다.
속성이 특정 값으로 끝납니다.
속성이 지정된 값으로 끝나는 경우 요소의 스타일을 설정합니다. 응용 프로그램 구문은 다음과 같습니다.
[атрибут$="meaning"]{ Описание правил стиля } Селектор[атрибут$="meaning"]{ Описание правил стиля }
첫 번째 경우 스타일은 지정된 속성 값으로 끝나는 모든 요소에 적용됩니다. 두 번째에서는 특정 선택자에게만 해당됩니다. 이러한 방식으로 예제 12.4에 표시된 것처럼 ru 도메인 사이트와 com과 같은 다른 도메인 사이트의 스타일을 자동으로 분리할 수 있습니다. 예제 12.4. 다양한 도메인에 대한 스타일
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1251"><title>Селекторы атрибутов</title><style type="text/css">A[href$=".ru"]{/* Если link заканчивается на .ru */
background:url(ru.gif) no-repeat;/* Параметры фонового рисунка */
padding-left:10px;/* Смещаем текст вправо */}A[href$=".com"]{/* Если link заканчивается на .com */
background:url(com.gif) no-repeat;
padding-left:10px;}</style></head><body><p><a href="http://www.yandex.com" rel="nofollow">Yandex.Com</a>|<a href="http://www.yandex.ru" rel="nofollow">Yandex.Ru</a></p></body></html>
이 예에는 서로 다른 도메인( com및 ) 으로 연결되는 두 개의 링크가 포함되어 있습니다 ru. 동시에 이러한 각 링크에는 스타일을 사용하여 추가된 자체 배경 이미지가 있습니다. 스타일 속성은 매개변수가 ".ru" 또는 ".com"으로 끝나는 링크에만 추가됩니다 href. 도메인 이름에 슬래시( http://www.yandex.ru/ ) 또는 페이지 주소( http://www.yandex.ru/fun.html )를 추가하면 끝 부분과 스타일이 적용되지 않습니다. 이 경우 속성의 어느 위치에나 특정 값이 위치할 수 있는 선택기를 사용하는 것이 좋습니다.
값은 속성의 어느 위치에서나 나타납니다.
값이 일부인 특정 속성이 있는 선택기에 스타일을 적용해야 하는 경우 옵션이 있습니다. 그러나 인수가 이 값으로 시작하는지 아니면 끝나는지는 정확히 알 수 없습니다. 그런 다음 다음 구문을 사용해야 합니다.
[атрибут*="meaning"]{ Описание правил стиля } Селектор[атрибут*="meaning"]{ Описание правил стиля }
값은 시작, 끝 또는 사이 등 인수의 어느 위치에나 나타날 수 있습니다. 가장 중요한 것은 그것이 그것의 일부라는 것입니다. 따라서 예제 12.5에서는 "htmlbook"이라는 단어가 나타나는 링크 스타일의 변경을 보여줍니다. 예제 12.5. 다양한 사이트에 대한 스타일
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1251"><title>Селекторы атрибутов</title><style type="text/css">[href*="htmlbook"]{
background: yellow;/* Желтый цвет фона */}</style></head><body><p><a href="http://www.htmlbook.ru/html/" rel="nofollow">Tagи HTML</a>|<a href="http://stepbystep.htmlbook.ru" rel="nofollow">Шаг за шагом</a>|<a href="http://webimg.ru" rel="nofollow">Графика для Веб</a></p></body></html>
참고: 속성 선택기는 Internet Explorer 버전 7.0 이상에서 지원되며 예제가 올바르게 작동하려면 올바른 <!DOCTYPE>을 추가해야 합니다. 이러한 선택기의 몇 가지 일반적인 용도를 살펴보겠습니다.
이 예에서는 title 매개변수가 추가되면 7lt;Q> 컨테이너 내부의 텍스트 색상이 변경됩니다. Q[제목] 선택기의 경우 속성이 Q 선택기에서 상속되므로 속성을 반복할 필요가 없습니다.
이 예에서는 속성을 사용하여 링크에 그림이 추가됩니다 
. 이 예제에서는 외부 링크가 굵게 강조 표시되어 있습니다. 또한 예제 12.2에 표시된 기술을 사용하여 링크에 작은 이미지를 추가하면 해당 링크가 다른 사이트로 연결된다는 것을 나타낼 수 있습니다.
다른 유형의 인수 선택자가 있지만 거의 사용되지 않으므로 설명을 생략합니다. 원본 소스 링크: http://stepbystep.htmlbook.ru/?id=54
GO TO FULL VERSION