Основы работы с XHTML и CSS


Встроенные таблицы стилей


Чтобы избежать дублирования кодирования линейных таблиц стилей, можно применять встроенную таблицу стилей. Встроенная таблица стилей определяется в теге <style type="text/css">, который обычно располагается в разделе страницы <head>. Внутри этого раздела <style> находится список имен тегов, называемых селекторами, которым присваивают объявления стилей (свойства и значения). Когда эти объявления сделаны, они автоматически применяются к определенным тегам, если они появляются на странице. Общая форма раздела <style> документа показана в листинге 3.3.

<style type="text/css"> selector {property:value [; property:value] ...} ... </style>

Листинг 3.3. Общая форма встроенной таблицы стилей (html, txt)

Селектор является именем тега (без охватывающих символов "<" и ">"). Свойства и значения стиля тега представлены в виде списка объявлений стиля, разделенном точками с запятой и помещенном внутри пары фигурных скобок "{ }". Например, следующий код определяет объявления стиля для тега <hr/>, задавая такие же параметры стиля, как и предыдущая линейная таблица стилей.

<head> <title>Пример встроенной таблицы стилей</title>

<style type="text/css"> hr {height:10px; width:50%; color:red; text-align:center} </style>

</head>

Листинг 3.4. Применение встроенной таблицы стилей (html, txt)

Селектор hr связан с четырьмя объявлениями property:value стиля горизонтальной линейки. Когда эти стили определены во встроенной таблице стилей, они автоматически применяются, если браузер встречает в документе тег <hr/>. Нет необходимости кодировать отдельные линейные таблицы стилей в каждом теге <hr/>. Тег сам несет в себе оформление стиля, описанное во встроенной таблице стилей. Хотя показанная выше встроенная таблица стилей содержит только один селектор для тега <hr/>, на самом деле она может содержать любое число записей, в зависимости от того, сколько различных тегов должно быть оформлено. Пример также записан на одной строке. Многие авторы страниц Web предпочитают кодировать настройки property:value на отдельных строчках, как показано на листинге 3.5, чтобы облегчить чтение и редактирование.

<style type="text/css">




Начало  Назад  Вперед



Книжный магазин