Использование контекстуальных селекторов

В селекторе можно предварить имя элемента именами одного или нескольких элементов-предков (родительский, родительский плюс родительский родителя и т.д.), и правило будет применено только к элементам с этим именем, которые являются вложенными подобным образом. Селектор, который включает один или несколько элементов-предков, называется контекстуальным (contextual) селектором. Селектор, который не включает имен элементов-предков (подобно вышерассмотренным), называется родовым (generic) селектором.

Если определенное свойство для одного и того же элемента имеет одну установку в правиле с контекстуальным селектором, и другую установку в правиле с родовым селектором, установка в правиле с контекстуальным селектором доминирует, поскольку является более конкретизированной.

Предположим, что следующий элемент является корневым элементом XML-документа:

<MAPS>

<CITY>

<NAME>Витебск</NAME>

<STATE>Витебская область</STATE>

</CITY>

<STATE>Гродненская область</STATE>

</MAPS>

Следующие правила в присоединяемой таблице стилей заставят браузер отформатировать “ Витебская область ” обычным шрифтом, a “ Гродненская область ” - курсивом:

CITY STATE

{font-styte: normal}

STATE

{font-style: italic}

Хотя содержимое “ Витебская область ” элемента STATE отвечает обоим контекстуальным селекторам в правиле CITY STATE и родовому селектору в правиле STATE, селектор CITY STATE является более конкретным и, следовательно, имеет приоритет.

Не следует помещать запятые между именами элементов в контекстном селекторе. В противном случае правило будет применено ко всем элементам, но не к последнему дочернему элементу в списке.

Использование атрибута STYLE

В XML-документе можно использовать специальный атрибут STYLE вместо того, чтобы устанавливать одно или несколько свойств отдельного элемента в таблице стилей. Если значение свойства, установленного с помощью атрибута STYLE, конфликтует со значением свойства, установленного в таблице стилей, установка с помощью атрибута STYLE имеет приоритет. Таким образом, атрибут STYLE является удобным средством, чтобы переустановить для определенного элемента значение свойства, присвоенное для типа элемента в присоединенной таблице стилей. Тем не менее, использование атрибута STYLE нарушает принцип CSS -хранения информации о форматировании отдельно от определения содержимого документа и структуры XML-файла.

Чтобы установить одно или несколько значений свойств, включите объявления в значение атрибута STYLE в виде строки, заключенной в кавычки, отделяя индивидуальные объявления точкой с запятой, как это делается в объявлении блока в CSS. Например, таблица стилей в Листинге 1.3 задает для элементов TITLE курсивное начертание с размером шрифта в 10 пунктов. Однако, если включить следующий атрибут STYLE в начальный тег определенного элемента TITLE в документе, этот элемент будет отображен шрифтом normal (не курсивом), а размер шрифта составит 14 пунктов:

<TITLE STYLE='font-style: normal; font-size: 14pt'>

Приключения Гекльбери Финна

</TITLE>

Для валидных документов необходимо объявить атрибут STYLE в DTD перед его использованием. Это можно сделать, например, следующим образом:

<!ATTUST TITLE STYLE CDATA#IMPLJED>

Импорт других таблиц стилей

Можно воспользоваться директивой @import в таблице каскадных стилей, чтобы встроить в нее одну или несколько других таблиц стилей. Возможность импорта отдельных таблиц стилей позволяет хранить правила для связанных стилей в отдельных файлах, а затем объединять их при создании документов определенного типа.

Вот обобщенная форма записи директивы @import, где URLТаблСтил есть полный или относительный URL (Uniform Resource Locator) файла, содержащего таблицу каскадных стилей, которую можно импортировать:

@import url(URLТаблСтил);

Например, следующая директива (использующая относительный URL), помещенная в начале таблицы стилей в Листинге 1.3, импортирует таблицу стилей, содержащуюся в файле Book.css (который должен находиться в той же папке, что и основная таблица стилей):

/* Имя файла: Inventory01.сss */

@tmport url(Book.css);

BOOK

{display: block;

margin-top: 12pt;

font-size: 10pt}

/* продолжение таблицы стилей... */

Директива @import должна располагаться в начале таблицы стилей перед правилами. Можно поместить в начале таблицы стилей несколько директив @import.

При импортировании одной или нескольких таблиц стилей, браузер объединяет правила, содержащиеся в основной и импортируемых таблицах стилей. Однако в случае возникновения конфликта правил основная таблица стилей (из файла, в который осуществляется импорт) имеет приоритет над импортируемыми таблицами стилей. При импортировании несколько таблиц стилей, правила из таблицы стилей, импортированной последней, имеют приоритет над правилами из ранее импортированных таблиц стилей.

Задание значений URL

URL представляет собой стандартный Internet-адрес, такой как http://mspress.microsoft.com/. Директива @import и свойство background image требуют указания значения URL для задания местонахождения соответствующего ресурса (таблицы стилей или файла изображения). URL задается так, как указано ниже. Обратите внимание, что нельзя помещать пробелы между url и символом открывающей скобки (.

url(URL)

Можно использовать полностью заданный URL, как в следующих примерах:

@import url(http://www.my_domain.com/stylesheets/MyStyles.css);

INVENTORY

{background-image: url(file:///E:\Exarnple Code\Background.gif)}

Можно также использовать частичный URL, который задает местонахождение относительно местонахождения файла таблицы стилей, содержащего URL. Относительные URL в таблицах стилей работают - подобно URL в HTML-страницах. Например, если файл таблицы стилей находится в папке Example Code, следующий относительный URL будет эквивалентен полному URL из предыдущего примера (а именно, file:///E:\Example Code\Background.gif):

INVENTORY {background-image: url(Background.gif)}