Разработка электронного портала (2011), страница 8

Существуют четыре типаселекторов атрибутов:•простой выбор атрибутов•выбор на основании конкретного значения атрибута•выбор по частичному значения атрибута•выбор конкретного атрибутаПростой выбор атрибутовДля того чтобы выбрать элементы с определенным атрибутом независимо отзначения этого атрибута используется простой селектор атрибутов.

Например, чтобывыбрать все элементы IMG, имеющие атрибут ALT, и заключить их в рамку можнозаписатьIMG[ALT]{border:3px solid red;}Для того чтобы выделить полужирным шрифтом элементы, содержащие какуюлибо информацию в атрибуте TITLE, которую большинство браузеров отображает как«всплывающую подсказку» при прохождении курсора над элементом, можно написать:*[title]{font-weight:bold}Аналогичным образом можно оформить только те элементы А, в которых есть атрибутHREF.Также можно осуществить выбор на основании наличия нескольких атрибутов.

Этоделается путем простого объединения селекторов атрибутов. Например, чтобы выделитьполужирным шрифтом текст любой гиперссылки HTML, которая имеет атрибут HREF иатрибут TITLE, можно написать:A[HREF][TITLE] {font-weight:bold}Выбор на основании конкретного значения атрибутаВ дополнение к выбору элементов по атрибутам можно еще более сузить выбор,чтобы охватить только те элементы, атрибуты которых имеют определенное значение.Например, пусть мы хотим выделить полужирным шрифтом гиперссылку, указывающуюна определенный документ веб-сервера. Это могло бы выглядеть примерно так:a[href=”http://adres.net/about.html”] {font-weight:bold}Для любого элемента может быть определено любое сочетание атрибута и значения.Однако если эта конкретная комбинация не встретится в документа, селектор не выберетничего.Как и в случае с выбором атрибутов, можно объединить несколько селекторов,чтобы выбрать один элемент.

Например, чтобы удвоить размер шрифта любойгиперссылки, у которой атрибут HREF имеет значение http://www.w3.org/ и атрибут titleимеет значение W3C Home, напишитеa[href=”http://www.w3.org/”][title=” W3C Home ”]{font-size:200%}Выбор по частичному значению атрибутаЛюбой атрибут, допускающий наличие разделенного пробелами списка слов,допускает и выбор на основании любого из этих слов.

Классический пример в HTML –атрибут CLASS, значением которого может быть несколько разделенных пробелами слов.Например:<P CLASS=”paragraph warning”>При работе важно содержать в порядке рабочееместо</P>Допустим,требуется задать стиль абзацев, атрибут CLASS которых содержит словоwarning. Это можно сделать посредством следующего селектора атрибутов:p[class~=”warning”]{font-weight:bold;}Обратите внимание на наличие в селекторе тильды (~).

Именно этот символсинтаксически задает выбор по одному из значений атрибута (значения атрибутапредставляют собой список разделенных пробелами слов).Эта конструкция селектора эквивалентна обозначению классов с помощьюпредшествующей точки. Таким образом, записи p.warning и p[class~=”warning”]эквивалентны в случае применения к HTML-документам.

Естественно, нужно помнить,что точечная нотация может быть применена только к атрибуту CLASS, а селектор с ~=может быть применен к любому атрибуту.Современные браузеры поддерживают также селекторы выбора по части слова,являющегося значением атрибута.ТипОписание[title^=”abc”]Выбирает любой элемент, значение атрибута title которогоначинается с ”abc”[title$=”abc”]Выбирает любой элемент, значение атрибута title которогозаканчивается ”abc”[title*=”abc”]Выбирает любой элемент, значение атрибута title которогосодержит подстроку ”abc”Выбор конкретного атрибутаДанный тип селектора имеет форму [атрибут|=”значение”] и позволяет отобратьатрибуты по ”значению” или значению со знаком минус в конце.

Допустим, в HTMLдокументе имеются наборы рисунков, каждый из которых хранится в файле с именем,например, figure-1.gif или figure-3.gif. Все эти изображения можно выбрать посредствомследующего селектора:img[src|=”figure”]{border:1px solid gray}Использование структуры документаВажной особенностью CSS является возможность использования структурыдокумента при определении стилей, а именно использование определений иерархическихотношений элементов WEB-страницы. В иерархической структуре страницы каждыйэлемент является родительским, дочерним или сестринским, или быть одновременно итем, и другим, и третьим. Рассмотрим документ, представленный на рис. .<HTML><HEAD><TITLE> Пример документа </TITLE></HEAD><BODY><H1> <I> Раздел 1 </I></h1><P><OL><LI> Пушки А.С.

</LI><UL><LI> Руслан и Людмила<LI> Медный всадник</UL><LI>Достоевский Ф.М.<UL><LI>Идиот<LI>Преступление и наказание<UL></LI></OL></P><BODY></HTML>Древовидная структуру, соответствующая данному документу, представлена нарис. .Рис. . Древовидная структура документаГоворят, что элемент является родителем другого элемента, если в иерархииэлементов документа он находится прямо над этим элементом. И, наоборот, элементявляется дочерним элементом другого элемента, если он находится прямо под этимэлементом.Термины родительский и дочерний элементы – это частные случаи терминовпредок и потомок. Между ними существует разница: если в иерархическомпредставлении элементов документа элемент находится на один уровень выше другого, томежду ними существуют родительско-дочерние отношения.

Если путь от одного элементак другому пересекает два или более уровней, между элементами существуют отношенияпредок-потомок, но не родительско-дочерние. (конечно, дочерний элемент также являетсяпотомком, а родитель – предком).Селекторы потомковОпределение селекторов потомков – это создание правил, действующих лишь врамках заданной структуры. Например, требуется задать стили только для тех элементовem, которые происходят от элементов h1 Можно задать атрибут class для каждогоэлемента em, находящегося в h1, но эта процедура практически настолько же длительная,как и применение тега font.

Очевидно, намного эффективнее объявить правила, которыесоответствуют только элементам em, находящимся внутри элементов h1. Для этогонапишем следующее:h1 em {color:gray;}Это правило сделает серым любой текст элемента em, который является потомкомэлемента h1. Текст других элементов em, например находящихся в абзаце или блоке, небудет выбран этим правилом.В селекторе потомков часть правила, соответствующая селектору, состоит из двухили более разделенных пробелами селекторов. Пробел между селекторами – это примеркомбинатора. Каждый комбинатор-пробел, если читать его справа налево, может бытьистолкован как «находящийся в», «который представляет собой часть» или «являющийсяпотомком».

Таким образом, h1 em можно прочитать как «любой элемент em, которыйявляется потомком элемента h1». (Если прочитать селектор слева направо, можетполучиться примерно следующее: «для любого h1, содержащего em, к em будутприменены следующие стили».)Количество селекторов в последовательности не ограничено.Выбор дочерних элементовВ некоторых случаях не требуется выбирать любой элемент-потомок; напротив,необходимо сузить диапазон выбора до дочернего элемента другого элемента.Предположим, надо выбрать элемент strong, только если он является дочерним элементом(а не просто потомком) элемента h1. Для этого используется символ-комбинаторселектора дочерних элементов, которым является символ «больше» (>):h1 > strong{color:red;}Это правило сделает красным элемент strong для первого из следующих далее h1 ине сделает для второго:<h1>Это <strong>очень</strong> важно </h1><h1>Это <em> действительно <strong>очень</strong></em> важно </h1>Прочитанный справо налево селектор h1 > strong переводится как «выбираемлюбой элемент strong, являющийся дочерним элементом h1».