| Есть ли практическая часть у курса повышения квалификации «web-дизайн»? |
Преподаватель
Вы можете этот курс.
Опубликован: 19.03.2007 | Уровень: для всех | Доступ: свободно
Лекция 3:
Основы оформления документов
Встроенные таблицы стилей
Чтобы избежать дублирования кодирования линейных таблиц стилей, можно применять встроенную таблицу стилей. Встроенная таблица стилей определяется в теге <style type="text/css">, который обычно располагается в разделе страницы <head>. Внутри этого раздела <style> находится список имен тегов, называемых селекторами, которым присваивают объявления стилей (свойства и значения). Когда эти объявления сделаны, они автоматически применяются к определенным тегам, если они появляются на странице. Общая форма раздела <style> документа показана в листинге 3.3.
<style type="text/css">
selector {property:value [; property:value] ...}
...
</style>
Листинг
3.3.
Общая форма встроенной таблицы стилей
Селектор является именем тега (без охватывающих символов " < " и " > "). Свойства и значения стиля тега представлены в виде списка объявлений стиля, разделенном точками с запятой и помещенном внутри пары фигурных скобок " { } ". Например, следующий код определяет объявления стиля для тега <hr/>, задавая такие же параметры стиля, как и предыдущая линейная таблица стилей.
<head>
<title>Пример встроенной таблицы стилей</title>
<style type="text/css">
hr {height:10px; width:50%; color:red; text-align:center}
</style>
</head>
Листинг
3.4.
Применение встроенной таблицы стилей
Селектор hr связан с четырьмя объявлениями property:value стиля горизонтальной линейки. Когда эти стили определены во встроенной таблице стилей, они автоматически применяются, если браузер встречает в документе тег <hr/>. Нет необходимости кодировать отдельные линейные таблицы стилей в каждом теге <hr/>. Тег сам несет в себе оформление стиля, описанное во встроенной таблице стилей. Хотя показанная выше встроенная таблица стилей содержит только один селектор для тега <hr/>, на самом деле она может содержать любое число записей, в зависимости от того, сколько различных тегов должно быть оформлено. Пример также записан на одной строке. Многие авторы страниц Web предпочитают кодировать настройки property:value на отдельных строчках, как показано на листинге 3.5, чтобы облегчить чтение и редактирование.
<style type="text/css">
hr {height:10px;
width:50%;
color:red;
text-align:center}
</style>
Листинг
3.5.
Другая форма записи встроенной таблицы стилей
Форма записи таблицы стилей не влияет на результат оформления. Подобно коду XHTML код таблицы стилей имеет свободный формат, его можно организовать любым образом, если только код и пунктуация будут оставаться правильными.
Отдавать ли предпочтение встроенной таблице стилей или нескольким линейным таблицам стилей, является вопросом эффективности кодирования и личных предпочтений. Обычно если стиль применяется к нескольким случаям использования тега, то использование встроенной таблицы стилей ведет к сокращению объема кода и меньшему количеству ошибок кодирования, так как стиль объявляется один раз для совместного использования всеми заданными тегами. С другой стороны, если стиль применяется только один раз к одному тегу, то удобнее закодировать линейную таблицу стилей для этого одного конкретного тега. Далее будут рассмотрены различные стратегии, применяемые в различных ситуациях оформления.
Внешние таблицы стилей
Если сайт Web имеет множество страниц, то третий вариант таблиц стилей будет, вероятно, лучшим решением. Он позволяет применять одни стили оформления ко всем страницам, не требуя копирования линейных или встроенных таблиц стилей на каждую страницу.
Внешняя таблица стилей является отдельным документом, содержащим настройки property:value в том же формате, что и встроенная таблица стилей. Единственное различие состоит в том, что этот документ не содержит вокруг записей тегов <style>. Например, документ внешней таблицы стилей, содержащий описанные выше спецификации оформления тега <hr/>, включает в себя записи, показанные в листинге 3.6.
Stylesheet.css (документ)
hr {height:10px;
width:50%;
color:red;
text-align:center}
Листинг
3.6.
Документ внешней таблицы стилей
Этот отдельный документ создается с помощью текстового редактора и сохраняется как стандартный текстовый файл, обычно с расширением файла .css, чтобы идентифицировать его как документ таблицы стилей. Широко распространено сохранение этого документа таблицы стилей с именем Stylesheet.css в том же каталоге, где находятся страницы Web, к которым она применяется.
Документ внешней присоединяемой таблицы стилей содержит настройки стиля оформления, которые применимы ко всем страницам сайта Web. Поэтому все страницы, которые используют эту таблицу стилей, должны с ней "соединяться", чтобы сделать стили доступными для этих страниц. Соединение происходит с помощью тега <link>, кодируемого в разделе <head> страницы. Общая форма тега <link> показана в листинге 3.7.
<link href="url" type="text/css" rel="stylesheet" />Листинг 3.7. Общая форма тега <link>
Атрибут href ( hypertext reference ) задает расположение присоединяемой таблицы стилей. Если таблица стилей находится в том же каталоге, что и страница Web, к которой она применяется, то эта запись является просто именем этого документа. Атрибут type определяет тип документа, с которым делается соединение (всегда "text/css" ). Атрибут rel определяет взаимоотношения внешнего документа с данной страницей (всегда "stylesheet" ).
Если имеется документ таблицы стилей с именем Stylesheet.css, который расположен в той же папке, что и страница Web, то страница Web соединяется с этим документом с помощью следующего кода XHTML.
<head> <title>Пример присоединяемой таблицы стилей</title> <link href="Stylesheet.css" type="text/css" rel="stylesheet"/> </head>Листинг 3.8. Соединение страницы Web с внешней таблицей стилей
Теперь страница Web имеет все доступные для нее настройки стиля оформления, заданные в документе Stylesheet.css. Эта присоединенная таблица стилей может служить для замены встроенных или линейных таблиц стилей, которые в противном случае должны были бы появиться на отдельных страницах Web. Как и в случае встроенных таблиц стилей, все теги, определенные селекторами в присоединенной таблице стилей, несут в себе объявленные стили оформления.
