4.5.5 Таблицы стилей и их использование в дизайне (CSS и XSL)

Если логическая структура документа создаётся тегами (заголовки, параграфы, таблицы, списка и т.д.), то всё оформление нужно выполнять при помощи стилевых таблиц (Cascading Style Sheets). В отличие от HTML у стилевых таблиц гораздо больше возможностей для оформления документа. При помощи CSS можно, как оформлять, так и размещать, регулировать видимость и упорядочивать компоненты HTML. Если использовать ещё и JavaScript то можно создавать анимацию компонентов HTML. Эту технологию называют DHTML (Dynamic HTML).
Стилевые таблицы позволяют:
- устанавливать размер изображений и текста
- устанавливать шрифт и цвет ссылок и текста
- устанавливать размещение элементов на листе
- создавать отступы и границы
- устанавливать цвет и изображение фона различных элементов
- создавать списки с графическими маркерами
- обрамлять различные элементы
- и т.д.
Использование инструментов CSS позволяет сделать оформление различных элементов более гибким. Стили можно использовать как в части документа, так и во всём документе и даже на всём сайте. Более того использование CSS позволяет создавать страницы, чей внешний вид остаётся одинаковым при показе в разных браузерах. Существует три метода описания стиля, которые определяют область его применения.
- Описание стиля находится в теге <тег style="атрибут:значение;"> (стиль используется элементом, который описан данным тегом)
- Описание стилей находится в заголовке документа между тегами <style></style> (данные стили используются всем документом)
- Описание стилей находится в отдельном файле (стиль может использоваться каждым документом, указывающим на этот стиль)
Общий вид предложения CSS: тег {определение; определение; определение} описания отделяются друг от друга точкой с запятой.
Примеры:
- h2 {font-size: 16pt; font-style: italic; font-family: arial}
- td { font-family: Arial; font-size: 8pt; color: #FF0000; text-transform: capitalize; text-decoration: overline underline; font-weight: bold }
- body { font-size: 8pt; font-family: serif; font-weight: bold }
Спецификация CSS(версия 2.1): http://www.w3.org/TR/CSS21/
XSL
При оформлении XML можно использовать специальные стилевые таблицы XSL, при помощи которых можно условно оформить весь набор XML данных. Для этого не нужно писать код для каждой единицы информации в отдельности, а использовать XSL который создаёт оформление на основе общих правил.
Рисунок 4-30. Пример использования XSL. Источник: BCS Koolitus, учебные материалы