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

Компоненты каскадных таблиц стилей и основные действия, необходимые для создания документа CSS.

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

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

Агент пользователя – любое ПО, которое преобразует символы документа в данные и размечает их в соответствии с определенными правилами.

Вы можете создавать собственные типы элементов в XML, поэтому агент пользователя не содержит встроенного набора инструкций, позволяющего определять каким образом отображать данные этих элементов. Вам необходимо предоставить браузеру соответствующие инструкции отображения самим. С помощью CSS или XSL.

Каскадные таблицы стилей - метод предоставления HTML-страниц с определенным форматированием без добавления в дескрипторы дополнительной информации. Их можно создать с помощью обычного текстового редактора и сохранить с расширением .css.

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

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

Таблицы стилей для отображения элементов используются на стороне клиента. Не удивительно, что в различных браузерах для разных платформ реализация поддержки каскадных таблиц стилей выполнена по-разному. Подробные сведения можно найти по адресу http://www.w3.org/Style/CSS/.

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

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

Создав несколько таблиц стилей, вы можете разработать систему, которая будет доставлять одни и те же данные различным агентам пользователя (различные браузеры). В сценарии нужно проверять браузер пользователя для обеспечения наилучшего предоставления информации – это browser sniffing подход. Проще всего определить агент пользователя через свойство navigator.appName языка JavaScript.

<script language=“JavaScript”><!- -

document.write(“Определен браузер” + navigator.appName);//--></script>

На экране отобразится строка (метод document.write), которая состоит из названия браузера (определенного с помощью свойства navigator.appName), а также поясняющей части. Предполагается, что браузер поддерживает JavaScript.

Концепция нескольких таблиц стилей, используемых для представления данных в разных Web-браузерах, очень важна при разработке Web-страниц. Используя эти подходы, вы сможете: Избирательно управлять браузерами. Получать данные различными способами в зависимости от

“контекстнозависимых” средств управления (например, из одного исходного документа XML можно выбрать одни данные для мультимедийной презентации, другие – для представления в виде таблиц).

Контролировать потоки данных из документа XML в различные приложения. Форматировать данные для использования определенных устройств

(например, настройка представления данных для беспроводных устройств с поддержкой Web).

Итак… Каскадная таблица стилей – текстовый файл, сохраняемый с

расширением .css. Создается в текстовом редакторе или с помощью редактора со встроенной поддержкой каскадных таблиц стилей CSS. Файл содержит правила для синтаксического анализатора агента пользователя по отображению данных. Эти правила состоят из селекторов и объявлений, определяющих представление данных пользователю. Селекторы обычно ссылаются на отдельные элементы XML, а объявления определяют, каким образом отображается выбранный элемент. Объявления содержат пары “свойство – значение”. Каждое свойство назначает определенное значение (bold, 10pt).

Селектор {свойство: значение; свойство: значение; …}

<?xml version=“1.0”?><note>

<msg><id>m1</id><from>Kathy</from><message>message1</message>

</msg><msg>

<id>m2</id><from>Stenly</from><message>message2</message>

</msg><msg>

<id>m3</id><from>Perry</from><message>message3</message>

</msg></note>

Пусть содержание элемента id будет изображено курсивом, элемента from – полужирным, элемента message - синим цветом. Создадим правила CSS с помощью объявлений, содержащих “свойство-значение”:

/*комментарии*/

id {font-style: italic}

from {font-weight: bold}

message{color: blue}

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

<?xml-stylesheet type=“text/css” href=“myfile.css”?>

Атрибут type обязателен, поскольку идентифицирует тип таблицы стилей (это MIME-тип). Все таблицы стилей будут текстовыми, в них не используются такие типы, как application, multipart, message. css – подтип таблицы (может быть XSL). href с действительным URL указывает на файл CSS.

Инструкцию добавляют в XML документ перед корневым элементом.

Алфавитный список свойств можно найти по адресу http://www.bloorberry.com/indexdot/css/propindex/all.htm.

Список свойств с указанием совместимости с различными браузерами http://www.webreview.com/style/css1/charts/mastergrid.shtml.

Свойство Назначение Значения

letter-spacing Расстояние между буквами

normal (по умолчанию) количество пикселей

line-height Расстояние между буквами


text-align Выравнивание выбирает браузер (по умолчанию)left right center

text-decoration Внешний вид текста none (по умолчанию)underline overlineline-through blink

text-indent Отступ первой строки 0 (по умолчанию) количество пикселей или процент

text-transform Регистр символов none (по умолчанию)uppercase lowercase capitalize

vertical-alignment Выравнивание по вертикали

baseline (по умолчанию) sub super top text-top middle bottom text-bottom

word-spacing Расстояние между словами



font-family Тип шрифта Выбирает браузер (по умолчанию)Семейство шрифта, например Arial

font-size Размер шрифта medium (по умолчанию) количество пикселей или процент

font-style Начертание шрифта normal (по умолчанию) italic oblique

font-variant Вид шрифта normal (по умолчанию) small-caps

fonе-weight Толщина шрифта normal (по умолчанию) lighter bold bolder

Свойства Назначение Значения

background-attachment Прокрутка фона scroll(по умолчанию) fixed

background-color Цвет фона transparent (по умолчанию) название цвета

background-image Изображение фона none (по умолчанию) адрес URL изображения

background-position Положение фона на странице

0% 0% (по умолчанию)значение в пикселях или процентах

background-repeat Узоры в качестве фона repeat (по умолчанию) repeat-x repeat-y no-repeat

color Цвет текста Решение принимает браузер (по умолчанию) название цвета


white-space Использование пробелов в разделе normal (по умолчанию) pre nowrap

display Отображение раздела block (по умолчанию) inline list-itemНет

visibility Видимость элемента inherit (по умолчанию)visiblehidden

z-index Расположение в определенном слое auto (по умолчанию)число


border-bottom-width Ширина нижней стороны рамки

medium (по умолчанию) thin thick количество пикселей

border-color Цвет рамки стандартный цвет текста (по умолчанию)название цвета

border-left -width Ширина левой стороны рамки


border-right -width Ширина правой стороны рамки


border-style Стиль рамки none (по умолчанию) solid double

border-top-width Ширина верхней стороны рамки



border-width Ширина рамки Не определено (по умолчанию) medium thin thick количество пикселей

clear Наличие других разделов по бокам текущего

Нет (по умолчанию) left right

float Возможность “плавающего” состояния раздела

Нет (по умолчанию) left right

height Высота раздела auto (по умолчанию) количество пикселей или процент

margin-bottom Ширина нижнего поля 0(по умолчанию) количество пикселей или процент

margin-left Ширина левого поля 0 (по умолчанию) количество пикселей или процент

margin-right Ширина правого поля 0 (по умолчанию) количество пикселей или процент

margin-top Ширина верхнего поля (по умолчанию)


padding-bottom Ширина заполняющих элементов с указанной стороны

0(по умолчанию)количество пикселей или процент

padding-left Ширина заполняющих элементов с указанной стороны

0(по умолчанию) количество пикселей или процент

padding-right Ширина заполняющих элементов с указанной стороны


padding-top Ширина заполняющих элементов с указанной стороны


width Ширина раздела auto (по умолчанию) количество пикселей или процент

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

id, from{color: red}

Каскадные таблицы стилей CSS не могут “взять” элемент – например, заголовок главы – в одном месте и использовать снова его в другом – например, в верхнем колонтитуле страницы.

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

Каскадные таблицы стилей CSS не являются разновидностью языка программирования и не поддерживают структуры принятия решения и возможность расширения.

Каскадные таблицы стилей CSS не позволяют выполнять вычисления и сохранять переменные, т.е. нельзя сохранять часто используемые параметры для упрощения выполнения таких действий, как обновление их значений.

Каскадные таблицы стилей CSS не способны генерировать текстовые данные, например, номера страниц.

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

Каскадные таблицы стилей CSS не поддерживают вертикальное расположение текста, характерное для ряда азиатских языков.

Какова роль проверки документов XML при использовании каскадных таблиц стилей CSS?

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

Каким образом использование каскадных таблиц стилей CSS позволяет сократить время, требуемое для управления Web-узлом?

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

ВСЁ

Documents

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