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

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

Если логическая структура документа создаётся тегами (заголовки, параграфы, таблицы, списка и т.д.), то всё оформление нужно выполнять при помощи стилевых таблиц (Cascading Style Sheets). В отличие от HTML у стилевых таблиц гораздо больше возможностей для оформления документа. При помощи CSS можно, как оформлять, так и размещать, регулировать видимость и упорядочивать компоненты HTML. Если использовать ещё и JavaScript то можно создавать анимацию компонентов HTML. Эту технологию называют DHTML (Dynamic HTML).

Стилевые таблицы позволяют:

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

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

  1. Описание стиля находится в теге <тег style="атрибут:значение;"> (стиль используется элементом, который описан данным тегом)
  2. Описание стилей находится в заголовке документа между тегами <style></style> (данные стили используются всем документом)
  3. Описание стилей находится в отдельном файле (стиль может использоваться каждым документом, указывающим на этот стиль)

Общий вид предложения 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, учебные материалы