Значение атрибута начинается с определенного текста

Устанавливает стиль для элемента в том случае, если значение атрибута тега начинается с указанного текста. Синтаксис применения следующий.

[атрибут^=" значение" ] { Описание правил стиля }
Селектор[атрибут^=" значение" ] { Описание правил стиля }

В первом случае стиль применяется ко всем элементам, у которых значение атрибута начинаются с указанного текста. А во втором — только к определенным селекторам. Использование кавычек не обязательно.

Предположим, что на сайте требуется разделить стиль обычных и внешних ссылок — ссылки, которые ведут на другие сайты. Чтобы не добавлять к тегу < a> новый класс, воспользуемся селекторами атрибутов. Внешние ссылки характеризуются добавлением к адресу протокола, например, для доступа к гипертекстовым документам используется протокол HTTP. Поэтому внешние ссылки начинаются с ключевого слова http: //, его и добавляем к селектору A, как показано в примере 13.3.

Пример 13.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=utf-8" >

< title> Селекторы атрибутов< /title>

< style type=" text/css" >

A[href^=" http: //" ] {

font-weight: bold /* Жирное начертание */

}

< /style>

< /head>

< body>

 

< p> < a href=" 1.html" > Обычная ссылка< /a> |

< a href=" http: //htmlbook.ru" target=" _blank" > Внешняя

ссылка на сайт htmlbook.ru< /a> < /p>

 

< /body>

< /html>

Результат примера показан ниже (рис. 13.3).

Рис. 13.3. Изменение стиля для внешних ссылок

В данном примере внешние ссылки выделяются жирным начертанием. Также можно воспользоваться показанным в примере 13.2 приемом и добавлять к ссылке небольшое изображение, которое будет сообщать, что ссылка ведет на другой сайт.

Значение атрибута оканчивается определенным текстом

Устанавливает стиль для элемента в том случае, если значение атрибута оканчивается указанным текстом. Синтаксис применения следующий.

[атрибут$=" значение" ] { Описание правил стиля }
Селектор[атрибут$=" значение" ] { Описание правил стиля }

В первом случае стиль применяется ко всем элементам у которых значение атрибута завершается заданным текстом. А во втором — только к определенным селекторам.

Таким способом можно автоматически разделять стиль для сайтов домена ru и для сайтов других доменов вроде com, как показано в примере 13.4.

Пример 13.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=utf-8" >

< title> Селекторы атрибутов< /title>

< style type=" text/css" >

A[href$=".ru" ] { /* Если ссылка заканчивается на.ru */

background: url(images/ru.png) no-repeat 0 6px; /* Добавляем фоновый рисунок */

padding-left: 12px; /* Смещаем текст вправо */

}

A[href$=".com" ] { /* Если ссылка заканчивается на.com */

background: url(images/com.png) no-repeat 0 6px;

padding-left: 12px;

}

< /style>

< /head>

< body>

 

< p> < a href=" http: //www.yandex.com" > Yandex.Com< /a> |

< a href=" http: //www.yandex.ru" > Yandex.Ru< /a> < /p>

 

< /body>

< /html>

В данном примере содержатся две ссылки, ведущие на разные домены — com и ru. При этом к каждой такой ссылке с помощью стилей добавляется своя фоновая картинка (рис. 13.4). Стилевые свойства будут применяться только для тех ссылок, атрибут href которых оканчивается на «.ru» или «.com». Заметьте, что добавив к имени домена слэш (http: //www.yandex.ru/) или адрес страницы (http: //www.yandex.ru/fun.html), мы изменим тем самым окончание и стиль применяться уже не будет. В этом случае лучше воспользоваться селектором, у которого заданный текст встречается в любом месте значения атрибута.

Рис. 13.4. Добавление картинки к ссылкам

⇐ Предыдущая12345678910Следующая ⇒

Поделиться: