Как подключить css к xml

Как подключить css к xml

Бывают случаи, когда xml-файл с какими-либо данными желательно сделать удобными для восприятия человеческим глазом. И для этого легче всего назначить данному xml-файлу таблицу стилей CSS. Делается это буквально одной строчкой:

Далее приводится пример xml-файла, которому назначена таблица стилей:

Иван Иванов Егор Егоров Сидор Сидоров

Таблица стилей для приведённого выше xml-файла имеет имя style.css и располагается в одной папке с xml-документом. Содержание файла style.css следующее:

Здесь каждому дескриптору XML (users, user, first_name и last_name) назначаются свои стили. Это очень похоже на то, как стили назначаются для тегов HTML.

Теперь, если открыть xml-файл браузером, то получится вполне приятная для глаза веб-страница. Наглядной становится и структура xml-файла. Кроме этого, если в файле будут обнаружены ошибки, то браузер с радостью нам об этом сообщит.

Сам я иногда использую XML в ActionScript-проектах и, конечно, меня интересовало, не будет ли проблем с парсингом xml-файла, к которому прикреплены стили. Проверил. Проблем не было 🙂

Дата добавления: 2011-08-04

Рейтинг поста: 1

Источник

XML + CSS = счастье

Возрадуйтесь, дети мои, ибо пришёл я к вам с миром и богатыми дарами. Нет, я не принёс вам того, чего вы не видели. И даже не принёс того, чего вы не имели. От чистого сердца вручаю вам то, что всегда лежало у вас под ногами, но вы не замечали того, брезгливо перешагивая, пробегая мимо по своим, несомненно самым важным, делам.

Константы! Да, ваши чаяния достигли моих ушей, пробрались в глубины души и вырвали наружу эти прекрасные создания, позволяющие синхронно менять связанные значения в разных частях файла.

Примеси! Я же знаю, вы так устали без наследования. Приходится внедрять лишние классы в элементы или даже, переходить на тёмную сторону силы — копипастить по чёрному.

Отныне! Ваша душа будет чиста как у младенца. Руки в золоте как у царевичей. Дети послушными и приветливыми.

Вам ведь уже не терпится попробовать и узнать секрет мироздания? Всё очень просто! Достаточно лишь стряхнуть пыть с технологий древних и применить их ко своим нуждам.

CSS не поддерживает всего этого богатста. HTML поддерживает ENTITIES, но HTML-парсеры — слишком топорные, чтобы их воспринять. XML тоже унаследовал их поддержку и (о чудо!) все XML-парсеры умеют с ними работать.

Вы уже умеете вставлять CSS в HTML, превращать HTML в XML без потери возможностей, инклудить один XHTML в другой на стороне клиента? Умеете, я вижу это по вашим ясным глазам, зачарованно внимающим моим словам.

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

Подключение стилей ничего нового из себя не представляет:

Самое интересное же — в самом стилевом файле:

Источник

How to add style to XML

The CSS2 Recommendation contains a brief tutorial on using CSS with XML (see § 2.2). At the time CSS2 was written the official specification for style in XML wasn’t ready. Here is what that tutorial should have contained. Note that the examples use CSS, but in most cases the style rules can also be written in XSL.

External style sheets

HTML has a link element to link to external style sheets, but not every XML-based format will have such an element. If there is no suitable element, you can still attach external style sheets by means of the xml-stylesheet processing instruction like this:

This processing instruction (PI) must come before the first tag of the document. The type=»text/css» is not required, but it helps the browser: if it doesn’t support CSS, it knows it won’t have to download this file.

Just as with the link element of HTML, there can be multiple xml-stylesheet PIs and they can have attributes to set the type, medium and title.

Example

Here is a larger example. Let’s assume we have three style sheets. The two last ones are each other’s alternative, and the reader of the document may choose which one to use. Except when the document is printed, in which case we only want to use the last style. Here is the common style sheet:

This is one of the alternative styles, in a file called “modern.css”:

And here is the other one, called “classic.css”:

The XML document with these three style sheets linked to it looks like this:

For more details, see the W3C Recommendation “Associating Style Sheets with XML documents”

Embedded style sheets

HTML has a style element that allows the style sheet(s) to be embedded directly in the HTML file, without the need for an external file. In some cases that is easier, especially when the style sheet is very specific to that document.

Most XML-based formats will not have such an element, but the same PI that links to external style sheets can also be used to point to style sheets that are embedded in the document itself. As of February 2006, there are still technical problems with this and no formal specification exists. For example:

In this case the type=»text/css» attribute must be present, otherwise the browser (or other program) has to guess the style sheet language. The xml-stylesheet PI now points not to an external style sheet, but to an element of the document itself. That element is identified by an id attribute that serves as the target of the link. (Depending on the particular XML format, the id attribute may be called something else; in some formats there may not be a suitable attribute at all.)

Unsolved problems

Other problems

Inline styles

HTML also allows styles to be attached directly to individual elements by means of the style attribute. Most XML-based document formats will not have such an attribute, although some may allow features ( modules) from HTML to be used inside the document.

Class attributes

Here is an example. If there is a class attribute and the document format defines that it works like in HTML, we can use the notation with the dot. (Therefore, this particular example won’t work, because is not a format that browsers know as something that has class )

If the document format doesn’t specify that class creates a subclass, then you’ll have to use the longer selectors with «[ ]»:

If there is no class attribute, but there is something else we can use, the attribute selectors «[ ]» still apply:

Site navigation

Created 29 February 2000;
Last updated Wed 06 Jan 2021 05:41:09 AM UTC

Источник

Синтаксис CSS, отображение XML-документов в Web

Таблицы каскадных стилей

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

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

Таблица стилей состоит из одного или нескольких правил (иногда их называют наборами правил). Правило содержит информацию по отображению определённого типа элемента XML-документа. Правило состоит из селектора и блока объявлений. Пример правила:

Селектор представляет собой имя типа элемента, к которому относится информация по отображению. За селектором следует блок объявлений, который ограничивается фигурными скобками и содержит одно или несколько объявлений, разделяемых точкой с запятой. Каждое объявление задаёт установку определённого свойства, например такого, как размер шрифта. Объявление состоит из свойства, вслед за которым идёт двоеточие, после которого следует значение данного свойства.

Таблица стилей может иметь комментарии, которые начинаются с символов /* и заканчиваются символами */. Вы можете использовать комментарии в процессе разработки таблицы стилей, чтобы временно отключить правило или его часть.

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

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

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

Вы также можете включить определённый тип элемента в более, чем одно правило внутри той же самой таблицы стилей.

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

Santa Fe
New Mexico

California

можно применить такую таблицу каскадных стилей:

CITY STATE

STATE

Селектор CITY STATE является более конкретным, и следовательно, имеет приоритет.

Вы можете использовать специальный атрибут STYLE в вашем XML-документе вместо того, чтобы устанавливать одно или несколько свойств элемента в таблице стилей. Установка свойств с помощью атрибута STYLE имеет наивысший приоритет. Например:

Для валидных документов вам необходимо объявить атрибут STYLE в DTD, например:

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

Чтобы связать таблицу каскадных стилей с XML-документом, вы должны вставить в пролог XML-документа зарезервированную инструкцию по обработке xml-stylesheet, например:

Если браузер не может найти указанный файл таблицы стилей, он отображает текст документа с использованием своего собственного набора свойств. Если XML-документ не связан с таблицей стилей, Internet Explorer отобразит исходный код документа.

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

Основной принцип приоритетов следующий: браузер отдаёт предпочтение более конкретизированному правилу. Если для определённого свойства установлены конфликтующие значения на одном и том же уровне приоритетов, браузер использует последнюю установку, которую он обработал. Это противоположно правилу, применяемому XML-процессором в случае наличия множественных объявлений атрибутов или примитивов (в этом случае XML-процессор использует первое объявление и игнорирует все последующие).

Способы установки значений свойств

Для многих свойств CSS вы должны присваивать значение с использованием предопределённых ключевых слов CSS, например:

Значение какого-либо свойства в процентах задаёт размер обычно как процент от размера шрифта самого элемента. Исключение составляет свойство font-size, где значение берётся как процент от размера шрифта родительского элемента. Пример задания значения свойства в процентах:

Пример задания значения свойства в размерных единицах:

Исключение составляет свойство font-size, где значение «em» или «ex» берётся относительно размера шрифта родительского элемента. Пример задания значения свойства в относительных размерных единицах:

Значения цветов можно задавать с использованием четырёх форматов:

Последние три формата задают цвет путём установки относительной интенсивности компонентов красного, зелёного и синего в составе цвета (именно в таком порядке). Таблица соответствия способов задания цвета:

Описание свойств

Вы можете привести несколько вариантов допустимых шрифтов в порядке приоритета, разделяя их запятыми:

Вы можете включить в конец списка ключевое слово CSS, указывающее на тип шрифта (имя родового семейства), который вы хотите использовать:

Перечень родовых семейств шрифтов:

PRODUCTcolorУстанавливает цвет текста.background-colorУстанавливает цвет фона (заливку). Если задано «transparent», будет виден фон родительского элемента (или браузера).background-imageВы можете добавить элементу фоновый рисунок, назначив этому свойству URL файла с рисунком:

PRODUCT

backgroundПозволяет задать несколько свойств фона сразу. Пример:

PRODUCTГруппы свойств текстовых областей: margin, border, padding, height, width, float и clear. Три группы свойств margin, border и padding наиболее предсказуемо работают с элементами типа block. В некоторых версиях браузеров данные свойства могут не работать с элементами типа inline.marginЭта группа свойств служит для добавления полей с одной или нескольких сторон элемента. Для свойств margin-left, margin-right, margin-top и margin-bottom может быть задано значение в любых размерных единицах или в процентах от ширины родительского элемента. Зона полей всегда прозрачна, т.е. через неё видна фоновая заливка или фоновый рисунок родительского элемента или браузера. Вы можете назначить одинаковые величины полей по всем четырём сторонам элемента путём присвоения одного значения в размерных единицах или процентах свойству margin. Два значения будут интерпретированы как верхнее и нижнее поля. Четыре значения будут интерпретированы как верхнее, правое, нижнее и левое поля. Пример:

Вы можете использовать различные рамки с каждой стороны элемента, назначая несколько значений свойству border-width. Порядок значений соответствует рамкам сверху, справа, снизу и слева. Пример:

PRODUCTborder-colorПо умолчанию рамки, которые созданы с помощью свойства border-style, имеют тот же цвет, что и цвет, установленный для свойства color элемента. Вы можете менять этот цвет для рамки путём присвоения свойству border-color любого допустимого значения цвета. Кроме того, вы можете задавать различный цвет для каждой из границ рамки, присваивая четыре различных значения свойству border-color:

PRODUCTpaddingСвойства просвета (padding-top, padding-right, padding-bottom и padding-left) добавляют пространство непосредственно вокруг содержимого элемента внутри имеющейся вокруг элемента рамки. Добавление просвета может улучшить восприятие рамки. По умолчанию ширина просвета устанавливается близкой к нулю. Для свойств просвета вы можете устанавливать значения в любых размерных единицах или в процентах относительно ширины родительского элемента. Вы можете добавить просвет одинаковой ширины со всех сторон элемента, присвоив единственное значение в размерных единицах или в процентах свойству padding. Пример:

PRODUCT:first-letter
PRODUCT:first-linecursorЗадаёт форму курсора при его наведении на элемент. Возможные значения: default, wait, ne-resize, sw-resize, se-resize, nw-resize, n-resize, e-resize, s-resize, w-resize, text, help, hand, move, crosshair.

Вставка элементов HTML в XML-документ

Когда вы отображаете XML-документ с помощью присоединённой таблицы стилей, вы можете вставить в него любой стандартный элемент HTML и заставить браузер отобразить его.

Язык XML позволяет использовать пространства имён. Два разных типа элемента могут иметь одно и то же имя, если они принадлежат разным пространствам имён. Пространство имён объявляется следующим образом:

Элемент с именем «my-namespace:MY-ELEMENT» и элемент с именем «MY-ELEMENT» могут существовать в одном и том же XML-документе и считаются элементами различных типов, т.к. элемент «my-namespace:MY-ELEMENT» принадлежит к пространству имён «my-namespace», а элемент «MY-ELEMENT» по умолчанию принадлежит к пространству имён документа.

Если имя XML-элемента совпадает с именем стандартного HTML-элемента (например, IMG, A или HR) и если он принадлежит пространству имён «html», Internet Explorer интерпретирует и отобразит его как HTML-элемент. В любом другом случае Internet Explorer интерпретирует его как обычный XML-элемент. Пространство имён «html» является специальным зарезервированным пространством имён, которое объявляется следующим образом:

Вот пример XML-элемента, который указывает Internet Explorer вставить HTML-элемент IMG:

Это корректно сформированный пустой XML-элемент. Его имя включает указание пространства имён, и он имеет два атрибута. Первый атрибут объявляет пространство имён, а второй атрибут является стандартным HTML-атрибутом.

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

Источник

Как подключить css к xml

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

В этой лекции вы познакомитесь с первым из методов отображения XML-документов в браузере Microsoft Internet Explorer, рассматриваемых в этом курсе: таблицах каскадных стилей (CSS). Таблица каскадных стилей представляет собой файл, который содержит инструкции для форматирования элементов в XML-документе.

Поскольку в XML вы создаете свои собственные элементы, браузер не имеет встроенных средств, позволяющих определить, как их правильно отобразить. Создание таблицы каскадных стилей и связывание ее с вашим XML-документом – это один из способов сообщить браузеру, как отображать каждый из элементов документа. XML-документ со связанной таблицей каскадных стилей может быть открыт непосредственно в Internet Explorer. Вам нет необходимости использовать HTML-страницу для доступа и отображения данных (как это имеет место в других методах отображения XML, о которых будет говориться в двух следующих лекциях).

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

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

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

В последующих лекциях вы познакомитесь с более сложными – но и более гибкими – способами отображения XML-документов. В лекции 8 вы узнаете, как связывать XML-документ с HTML-страницей и отображать XML-элементы путем сцепления с ними стандартных HTML-элементов. В лекции 9 вы узнаете, как осуществлять доступ и отображать отдельные элементы, атрибуты и другие компоненты XML-документа путем написания кода сценария на HTML-странице. А в лекции 10 вы откроете для себя, как применять еще более мощный язык таблиц стилей – расширяемый язык таблиц стилей (Extensible Stylesheet Language – XSL) – который позволяет вам не только форматировать содержимое XML-элемента, но и преобразовывать содержимое документа с достаточно высокой степенью гибкости.

Примечание. В этой лекции раскрывается большинство свойств CSS, поддерживаемых Internet Explorer, которые являются частью оригинальной версии CSS, установленной консорциумом World Wide Web (W3C) и известной как Cascading Style Sheets Level 1, или CSS1. Консорциум W3C также определил усовершенствованную версию CSS, которая значительно превосходит версию CSS1, известную как Cascading Style Sheets Level 2, или CSS2. CSS2 только частично поддерживается современными браузерами и не рассматривается в этом курсе. Полную спецификацию W3C для CSS1 вы можете найти по адресу http://www.w3.org/TR/REC-CSS1, а спецификацию для CSS2 – по адресу http://www.w3.org/TR/REC-CSS2

Основные этапы при использовании таблицы каскадных стилей

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

Создание файла таблицы стилей.

Связывание таблицы стилей с XML-документом.

Шаг первый: создание файла таблицы стилей

Листинг 7.1 содержит пример простой таблицы каскадных стилей.

Листинг 7.1. Inventory01.css

Эта таблица стилей предназначена для присоединения к XML-документу, представленному в Листинге 7.2. Листинг 7.2 используется и в других примерах в данной лекции, поэтому вам придется не раз к нему обращаться.

Листинг 7.2. Inventory01.xml

Примечание. Пример таблицы стилей в Листинге 7.1 и пример XML-документа в Листинге 7.2 являются копиями файлов, которые вы создали в упражнении «Отобразите XML-документ с использованием таблицы каскадных стилей» в лекции 2.

Таблица стилей состоит из одного или нескольких правил (иногда их называют набором правил). Правило содержит информацию по отображению определенного типа элемента в XML-документе. На рисунке 7.1 представлено правило для элементов BOOK с указанием его составных частей.

Селектор представляет собой имя типа элемента, к которому относится информация по отображению.

Таблица стилей может также содержать комментарии. Комментарии в таблице стилей начинаются с символов косой черты и звездочки (/*) и заканчиваются символами звездочки и косой черты (*/). Между этими парами символов-ограничителей вы можете поместить любой текст по вашему желанию. Когда браузер прочитывает таблицу стилей для форматирования документа, он игнорирует этот текст. Вы можете использовать комментарий для пояснений, указания назначения и действия таблицы стилей. В качестве примера можно привести комментарий в начале таблицы стилей из Листинга 7.1:

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

Примечание. Пустые символы (пробелы, табуляция, пропуск строки) отделяют различные компоненты CSS, такие как индивидуальные объявления в блоке объявлений. Способ использования пропусков в данном курсе является лишь одной из возможностей. Вы можете использовать пропуски любым способом, чтобы лучше организовать содержимое и придать большую ясность вашим собственным таблицам стилей. Например, вы можете поместить все объявления, относящиеся к правилу, в одну строку, вместо того, чтобы размещать каждое из них на отдельной строке, как это сделано в примерах

Пример таблицы стилей, представленной в Листинге 7.1, содержит следующие объявления:

display:block. Помещает пустую строку перед и после текста элемента; (Эта установка имеет и другие назначения, о чем вы узнаете далее в этой лекции.)

margin-top:12pt. Добавляет верхнее поле (отбивку) высотой в 12 пт к тексту элемента;

font-size:10pt. Устанавливает размер шрифта, используемого для отображения текста элемента, в 10 пунктов;

font-style:italic. Отображает текст элемента курсивом;

font-weight:bold. Отображает текст элемента полужирным.

На рисунке 7.3 показано как Internet Explorer отображает XML-документ, который использует данную таблицу стилей в соответствии с инструкциями, содержащимися в этих объявлениях.

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

Нечувствительность к регистру в CSS

В Internet Explorer таблицы каскадных стилей являются нечувствительными к регистру, в котором набраны символы. То есть, когда Internet Explorer обрабатывает таблицу стилей, он игнорирует регистр букв (строчные или прописные). Например, вы можете набрать следующее правило любым из трех приведенных ниже способов:

Нечувствительность к регистру в таблицах каскадных стилей имеет важное значение. Поскольку XML-документы являются чувствительными к регистру, вы вполне можете иметь два различных типа элемента, имена которых отличаются лишь регистром букв, например, Book и BOOK. В таблице каскадных стилей, однако, эти два имени будут отнесены к одному и тому же типу элемента, и вы не сможете назначить им различную установку свойств. Следовательно, если вы предполагаете отображать ваш XML-документ с использованием таблицы каскадных стилей, у вас не должно быть типов элементов, имена которых отличаются только регистром одной или нескольких букв.

Наследование установок свойств

Набор свойств, которые вы присвоили определенному элементу (например, BOOK), действует на все дочерние элементы, прямо или косвенно вложенные в него, если только они не переустанавливаются впоследствии для определенного дочернего элемента.

Следующие свойства, однако, являются исключениями и не наследуются дочерними элементами:

свойства размещения текста, о которых вы узнаете в разделе «Установка свойств текстовых областей» далее в этой лекции.

Например, таблица стиля в Листинге 7.1 форматирует элемент BOOK (документ приведен в Листинге 7.2) следующим образом:

Каждый элемент BOOK имеет пять дочерних элементов. Поскольку свойство font-size является наследуемым, все дочерние элементы внутри элемента BOOK отображаются с размером шрифта в 10 пунктов. Дочерние элементы, однако, не наследуют установку свойств display и margin-top (свойство margin-top относится к группе свойств размещения текста).

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

Подробнее о наследовании и о его роли в механизме каскадного присвоения значения вы узнаете в разделе «Присвоение значений в таблицах каскадных стилей» далее в этой лекции.

Использование множественных элементов и множественных правил

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

Вы также можете включить определенный тип элемента в более чем одно правило внутри той же самой таблицы стилей. Например, следующие правила оба включают элемент DATE :

Первое правило содержит объявление, которое элемент DATE разделяет с другими элементами в списке, в то время как второе правило осуществляет дополнительную настройку для элемента DATE – а именно, задает установку свойства, применимого только к этому элементу.

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

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

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

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

Следующие правила в присоединяемой таблице стилей заставят браузер отформатировать «New Mexico» обычным шрифтом, а «California» – курсивом:

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

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

Чтобы установить одно или несколько значений свойств, включите объявления в значение атрибута STYLE в виде строки, заключенной в кавычки, отделяя индивидуальные объявления точкой с запятой, как вы это делаете в объявлении блока в CSS.

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

В Internet Explorer ваш документ будет выглядеть, как показано на рис. 7.4.

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

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

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

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

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

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

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

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

Шаг второй: связывание таблицы стилей с XML-документом

Чтобы связать таблицу каскадных стилей с XML-документом, вы должны вставить в документ зарезервированную инструкцию по обработке xml-stylesheet. Эта инструкция по обработке имеет следующую обобщенную форму записи, где CSSFilePath есть, задающий местонахождение файла таблицы стилей:

Вы можете использовать полный URL, например:

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

Обычно вы добавляете инструкцию по обработке xml-stylesheet в пролог XML-документа, вслед за объявлением XML, как вы видели в примере XML-документа в Листинге 7.2. (Подробнее об инструкциях по обработке и описании корректных мест для их помещения рассказано в разделе «Использование инструкций по обработке» в лекции 4.)

Возможность присоединять к XML-документу внешнюю таблицу стилей увеличивает гибкость форматирования документа. Вы можете полностью изменить вид документа, просто присоединив к нему другую таблицу стилей. Чтобы сделать это, достаточно всего лишь отредактировать URL в инструкции по обработке xml-stylesheet – не внося никаких других изменений в XML-документ.

Введите сюда URL или путь к файлу XML-документа и нажмите Enter

Или, предполагая, что Internet Explorer есть ваш браузер, используемый по умолчанию, вы можете просто дважды щелкнуть на имени файла XML-документа в окне Windows Explorer (Проводник) или в окне папки.

Internet Explorer откроет XML-документ и отобразит его с использованием инструкций из связанной таблицы стилей.

Примечание. Если браузер не может найти файл таблицы стилей, заданный в инструкции по обработке xml-stylesheet, он отобразит текст документа с использованием своего собственного набора свойств (например, с текущими значениями гарнитуры и размера шрифта). Если XML-документ не связан с таблицей стилей (т.е. документ не содержит инструкции по обработке xml-stylesheet), то Internet Explorer отобразит исходный XML-код для документа, но не содержимое документа

Вы можете включить в XML-документ более одной таблицы стилей, вставив для каждой из них инструкцию по обработке xml-stylesheet в начале XML-документа, например:

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

Если вы устанавливаете связи с несколькими таблицами стилей, Internet Explorer объединяет правила из различных таблиц. Если отдельные таблицы стилей содержат конфликтующие правила, правила из последней связываемой с документом таблицы стилей имеют приоритет над правилами, содержащимися в предшествующих таблицах стилей. (Так, в просмотренном примере правила из Book02.css имеют приоритет над конфликтующими с ними правилами из Book01.css.) Подробнее о приоритете в случае конфликта правил вы узнаете в следующем разделе.

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

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

Если вы не установили свойство в атрибуте STYLE, браузер использует значение свойства, объявленного в правиле CSS с контекстуальным селектором (т.е. селектором, который определяет элемент с одним или несколькими его элементами-предками, о чем говорилось ранее в разделе «Использование контекстуальных селекторов»). Предположим, что следующий элемент является элементом Документ XML-документа:

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

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

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

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

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

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

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

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

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

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

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

в таблице стилей правила обрабатываются в том порядке, в котором они записаны.

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

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

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

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

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

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

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

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

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

Установка свойств шрифта

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

Источник