Опубликован: 24.01.2007 | Доступ: свободный | Студентов: 9049 / 1428 | Оценка: 4.28 / 4.09 | Длительность: 20:51:00
Лекция 7:

Отображение XML-документов с использованием таблиц каскадных стилей

Присвоение значений в таблицах каскадных стилей

В таблицах каскадных стилей вы можете присваивать значения свойствам на нескольких различных уровнях (подобно каскаду водопада, в котором поток падает, проходя по нескольким ступеням). Ниже дано описание основных уровней, на которых вы можете присваивать значение свойству. Уровни представлены в порядке их приоритетов – от высшего к низшему. Когда браузер готовится отобразить элемент, и значение его определенного свойства, например, font-size, конфликтует со значением, присвоенным этому элементу на других уровнях, браузер использует значение, присвоенное на наивысшем уровне приоритета.

  1. Если вы присвоили значение свойству в атрибуте STYLE для определенного элемента в XML-документе, браузер использует это значение при отображении элемента. Например, он отобразит следующий элемент полужирным:
    <TITLE STYLE="font-weight:bold">Leaves of Grass</TITLE>
  2. Если вы не установили свойство в атрибуте STYLE, браузер использует значение свойства, объявленного в правиле CSS с контекстуальным селектором (т.е. селектором, который определяет элемент с одним или несколькими его элементами-предками, о чем говорилось ранее в разделе "Использование контекстуальных селекторов"). Предположим, что следующий элемент является элементом Документ XML-документа:
    <MAPS>
    	<CITY>
    		<NAME>Santa Fe</NAME>
    		<STATE>New Mexico</STATE>
    	</CITY>
    	<STATE>California</STATE>
    </MAPS>

    Допустим также, что присоединенная таблица стилей содержит следующие правила:

    CITY STATE
    	{font-style:normal}
    STATE
    	{font-style:italic}

    Браузер использует правило CITY STATE для форматирования элемента "New Mexico" STATE, поскольку оно имеет контекстуальный селектор, и, следовательно, имеет приоритет над правилом STATE, имеющим родовой селектор. Надпись "New Mexico" в результате будет отображена обычным шрифтом.

  3. Если вы не объявили значение определенного свойства в правиле, имеющем соответствующий контекстуальный селектор, браузер использует значение, объявленное в правиле с родовым селектором (т.е. селектором, который включает только имя элемента). Например, для второго компонента рассматриваемой таблицы стилей браузер не найдет соответствующего контекстуального правила для элемента "California" STATE, поэтому использует родовое правило STATE, в результате чего надпись "California" будет отображена курсивом.
  4. Если вы не объявили значение для определенного свойства для элемента в родовом правиле, браузер использует установку свойства, объявленную для ближайшего элемента-предка (родителя, родителя родителя и т.д.). Например, в таблице стилей из Листинга 7.1 правило для элемента TITLE не присваивает значение для свойства font-size:
    TITLE
    	{font-style:italic}

    Следовательно, браузер будет использовать установку свойства font-size для родительского элемента BOOK (элемент BOOK является родителем для элемента TITLE в XML-документе, использующем таблицу стилей):

    BOOK
    	{display:block;
    	margin-top:12pt;
    	font-size:10pt}

    В результате текст элемента TITLE будет отображен с размером шрифта 10 пунктов.

    Этот процесс имеет место только для наследуемого свойства. Для ненаследуемого свойства браузер будет использовать значение свойства по умолчанию (см. раздел "Наследование установок свойств" ранее в этой лекции).

  5. Если таблица стилей не содержит установку свойства для какого-либо родительского элемента, браузер использует свою собственную установку. Такой установкой может быть значение по умолчанию, встроенное в браузер, либо значение, заданное пользователем браузера. Например, поскольку в рассматриваемой таблице стилей из Листинга 7.1 не установлено значение для свойства font-family, браузер использует свое собственное значение этого свойства для отображения всех элементов. [В Internet Explorer 5 это шрифт Times New Roman, если только пользователь браузера не выберет другое семейство шрифтов, воспользовавшись командой Internet Options (Свойства обозревателя) из меню Tools (Сервис)].

    Этот процесс имеет место только для наследуемых свойств. Для ненаследуемых свойств браузер использует значение свойства по умолчанию. Как вы можете видеть из этого списка, основной принцип здесь следующий: если вы присвоили свойству значения, конфликтующие на различных уровнях, браузер отдает предпочтение более конкретизированному правилу. Например, установленное для элемента свойство является само по себе более конкретизированным, чем установка для родителя элемента, поэтому имеет приоритет. Вы можете воспользоваться этим принципом и в более сложных случаях. (Например, если дочерний элемент элемента-родителя имеет и контекстуальное, и родовое правило, как вы думаете, какое из них браузер использует для дочернего элемента? Правильно: браузер использует контекстуальное правило!)

    Примечание. Порядок приоритетов не является незыблемым. Можно сделать так, что установка свойства в браузере будет иметь приоритет над установкой свойства в таблице стилей, присоединенной к вашему XML-документу. Это дает возможность пользователям управлять форматированием (например, пользователь с ослабленным зрением может использовать увеличенный шрифт). В Internet Explorer 5, например, пользователь может присвоить установке свойств в браузере наивысший приоритет по отношению к установкам свойств в таблице стилей, выбрав команду Options (Свойства обозревателя) из меню Tools (Сервис), щелкнув на кнопке Accessibility (Оформление) на вкладке General (Общие) в диалоговом окне Internet Options (Свойства обозревателя) и выбрав соответствующие опции.

    Что произойдет, если для определенного свойства установлены конфликтующие значения на одном и том же уровне? В таком случае браузер использует последнюю установку, которую он обработал. Например, если два родовых правила для одного элемента имеют конфликтующие установки для свойства font-style, как в следующем примере, браузер использует второе из них, поскольку оно обрабатывается последним:

    TITLE, AUTHOR, BINDING, PRICE
    	{display:block;
    	font-size:12pt;
    	font-weight:bold;
    	font-style:italic}
    AUTHOR
    	{font-style:normal}

    В этом примере элементы AUTHOR будут отформатированы обычным шрифтом, а не курсивом.

    Ниже приведен порядок, в котором браузер обрабатывает правила таблицы стилей:

    • если вы связываете несколько таблиц стилей с документом, использующим инструкцию по обработке xml-stylesheet, браузер обрабатывает таблицы стилей в последовательности, в которой они приведены в инструкции по обработке;
    • если вы импортируете одну или несколько таблиц стилей в другую таблицу стилей с использованием директивы @import (см. раздел "Импорт других таблиц стилей"), браузер обрабатывает импортированные таблицы стилей перед таблицей, в которую они импортируются. Порядок обработки при этом определяется порядком импорта;
    • в таблице стилей правила обрабатываются в том порядке, в котором они записаны.

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

Установка свойства display

Свойство display управляет основным способом отображения текста элемента браузером. Вы можете назначить ему три ключевых слова CSS:

  • block. Браузер всегда помещает перевод строки перед и после текста элемента (который включает и текст, принадлежащий любым дочерним элементам). В результате текст элемента отображается в отдельном "блоке" с предшествующим текстом выше и последующим текстом ниже. Присвоение значения block позволяет вам форматировать текст с применением различных свойств обрамления к блоку текста, таких как поля, рамки и отступы. Элемент block похож на абзац в программе текстового процессора, который отделен пробелами от предшествующего и последующего текста, и для которого можно задавать отступы, рамки и т.д.;
  • inline (по умолчанию).Браузер не вставляет перевод строки перед или после текста элемента (если только предшествующий текст достиг правой границы окна, и браузер должен перенести текст на следующую строку). Он будет вставлять перенос строки внутри текста элемента только с целью уместить текст в окне. Текст элемента, таким образом, может быть размещен в той же строке, что и предыдущий или последующий текст. Элемент inline аналогичен группе символов внутри абзаца в программе текстового процессора;
  • none. Браузер не отображает элемент. Вы можете использовать эту установку для элементов, несущих информацию, которую вы не хотели бы помещать на экране.

Примечание. В спецификации CSS указано, что свойство display не наследуется дочерними элементами. Это так, если вы назначаете установку block для свойства display элемента. Однако элементы вполне эффективно наследуют установку none, поскольку, когда вы назначаете эту установку свойству display элемента-родителя, вы тем самым скрываете и дочерние элементы. Дочерние элементы элемента inline также будут элементами inline, если для них не установлено свойство display, поскольку inline является значением по умолчанию.

Информация относительно назначения ключевых слов CSS свойствам приведена далее на вставке "Задание ключевых слов CSS в качестве значений".

Предположим, вы используете следующую таблицу стилей для отображения XML-документа, представленного в Листинге 7.2 (напомним, что для изменения таблицы стилей, используемой для отображения XML-документа, вам следует отредактировать инструкцию по обработке xml-stylesheet в документе):

BOOK
	{display:block;
	margin-top:12pt;
	font-size:10pt}
TITLE
	{font-style:italic}
AUTHOR
	{font-weight:bold}
PAGES
	{display:none}

Поскольку свойству display элемента BOOK присвоено значение block, браузер всегда будет помещать перевод строки перед и после текста элемента. (Элемент BOOK имеет дочернее содержимое. Его текст состоит из текста, принадлежащего всем дочерним элементам.)

Поскольку таблица стилей не присваивает значения свойству display для элементов TITLE, AUTHOR, BINDING и PRICE (и эти элементы не наследуют значение свойства display от их родительских элементов), браузер воспримет их как элементы inline, что является установкой по умолчанию. Следовательно, браузер не будет помещать перенос строк между этими элементами, и – если допустить, что окно браузера имеет достаточную ширину – отобразит их все на одной строке.

Поскольку для свойства display элемента PAGES установлено значение none, браузер не отобразит этот элемент.

На рисунке 7.6 показано, как должен выглядеть результат.


Рис. 7.6.

Задание ключевых слов CSS в качестве значений

Для многих свойств CSS вы можете – или должны – присваивать значение с использованием предопределенных ключевых слов CSS. Специфические ключевые слова, которые вы можете использовать, определяются особенностью свойства. Например, вы можете назначить свойству display одно из трех ключевых слов: block, inline или none. Свойству color вы можете назначить одно из 16 ключевых слов, которые описывают основные цвета, такие как red (красный), green (зеленый), yellow (желтый) или fuchsia (фуксия), как в следующем примере:

PARA {color:fuchsia}

Свойству border-style вы можете назначить одно из девяти ключевых слов: solid, dotted, dashed, double, groove, ridge, inset, outset или none. Пример:

SECTION {border-style:solid}
Максим Попов
Максим Попов

Почему при использовании скриптов, приведенных в курсе Основы XML

лекция Лекция 8: 

Отображение XML-документов с использованием связывания данных

не происходит связывания XLM документа с HTML?

Отображаются пустые поля. Браузер IE11

Владислав Нагорный
Владислав Нагорный

Подскажите, пожалуйста, планируете ли вы возобновление программ высшего образования? Если да, есть ли какие-то примерные сроки?

Спасибо!

Евгений Воронков
Евгений Воронков
Россия, Ставрополь, Современный гуманитарный университет, 2000
Олег Загороднюк
Олег Загороднюк
Украина, Одесса