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

Компоненты каскадных таблиц стилей и основные действия, необходимые
для создания документа 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
Расстояние между
буквами
normal (по умолчанию)
количество пикселей
text-align
Выравнивание
выбирает браузер (по умолчанию)
left right center
text-decoration
Внешний вид текста
none (по умолчанию)
underline overline
line-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
Расстояние между
словами
normal (по умолчанию)
количество пикселей
Свойство
Назначение
Значения
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 (по умолчанию)
visible
hidden
z-index
Расположение в определенном слое
auto (по умолчанию)
число
Свойство
Назначение
Значения
border-bottom-width
Ширина нижней стороны
рамки
medium (по умолчанию)
thin thick
количество пикселей
border-color
Цвет рамки
стандартный цвет текста (по
умолчанию)
название цвета
border-left -width
Ширина левой стороны
рамки
medium (по умолчанию)
thin thick
количество пикселей
border-right -width
Ширина правой стороны
рамки
medium (по умолчанию)
thin thick
количество пикселей
border-style
Стиль рамки
none (по умолчанию)
solid
double
border-top-width
Ширина верхней стороны
рамки
medium (по умолчанию)
thin thick
количество пикселей
Свойство
Назначение
Значения
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
Ширина заполняющих
0(по умолчанию)
элементов с указанной стороны количество пикселей или
процент
padding-top
Ширина заполняющих
0(по умолчанию)
элементов с указанной стороны количество пикселей или
процент
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-узла.
ВСЁ