Общие сведения о каскадных таблицах стилей
Каскадные таблицы стилей (CSS) — это серия правил форматирования, которые управляют внешним видом содержимого веб-страницы. При использовании CSS для форматирования страницы отделяйте контент от представления. Содержимое страницы (то есть код HTML) находится в самом файле HTML, а правила CSS, определяющие представление кода, находятся в другом файле (внешняя таблица стилей) или в другой части документа HTML ( обычно заголовок файла). Использование CSS дает вам большую гибкость и больший контроль над внешним видом вашей страницы, от точного позиционирования макета до определенных шрифтов и стилей.
CSS позволяет вам контролировать многие свойства, которые не может контролировать только HTML. Например, вы можете указать разные размеры шрифта и единицы измерения (пиксели, кегли и т. д.) для выделенного текста. Используя CSS для установки размеров шрифта в пикселях, вы также обеспечиваете более единообразный подход к макету и внешнему виду страницы в нескольких браузерах.
Помимо форматирования текста, вы можете использовать CSS для управления форматированием и расположением блочных элементов на веб-странице. Например, вы можете установить поля и границы для элементов уровня блока, разместить текст вокруг другого текста и многое другое.
Правила форматирования CSS состоят из двух частей: селекторов и объявлений. Селектор — это термин, который идентифицирует элемент формата (например, P, H1, имя класса или идентификатор), а его объявление используется для определения стиля элемента. В следующем примере H1 — это селектор, а все, что заключено в скобки ({}), — это объявление:
Ч1 {
размер шрифта: 16 пикселей;
семейство шрифтов: Helvetica;
шрифт-вес: жирный
}
;
Объявление состоит из двух частей: свойств (например, font-family) и значений (например, Helvetica). Приведенное выше правило CSS создает особый стиль для тегов H1: текст всех тегов H1, связанных с этим стилем, будет иметь размер 16 пикселей, шрифт Helvetica и полужирный шрифт.
Термин «каскад» означает возможность применять несколько стилей к одному и тому же элементу. Например, вы можете создать одно правило CSS для применения цвета, другое правило CSS для применения полей, а затем применить оба правила к одному и тому же тексту на странице. Определенные стили «каскадируются» вниз к элементам вашей веб-страницы, в конечном итоге создавая желаемый дизайн.
Основное преимущество CSS заключается в том, что он предоставляет удобные возможности обновления; когда вы обновляете правило CSS в одном месте, форматирование всех документов, использующих этот определенный стиль, автоматически обновляется до нового стиля.
В Dreamweaver можно определить следующие типы стилей:
Пользовательские правила CSS (также называемые стилями классов) позволяют применять свойства стиля к любому диапазону или блоку текста. (См. «Применение стилей классов».)
Стили тегов HTML переопределяют форматирование определенных тегов (например, h1). Когда вы создаете или меняете стиль CSS тега h1, весь текст, отформатированный с помощью тега h1, немедленно обновляется.
Стили селектора CSS (расширенные стили) переопределяют форматирование для определенных комбинаций элементов или для других форм селектора, которые допускает CSS (например, применяйте селектор td h2 всякий раз, когда заголовок h2 появляется в ячейке таблицы). Расширенные стили также могут переопределять форматирование тегов, содержащих определенный атрибут id (например, стиль, определенный #myStyle, можно применять ко всем тегам, содержащим пару значений атрибута id="myStyle").
Правила CSS могут находиться в следующих местах:
Внешняя таблица стилей CSS — это серия правил CSS, хранящихся в отдельном внешнем файле CSS (.css) (не в файле HTML). Документ связан с одной или несколькими страницами веб-сайта с помощью ссылок в заголовке файла документа.
Внутренняя (или встроенная) таблица стилей CSS — это серия правил CSS, содержащихся в теге стиля в заголовке HTML-документа.
Встроенные стили определяются внутри всего HTML-документа в конкретном экземпляре тега.
Dreamweaver распознает стили, определенные в существующих документах, если они соответствуют рекомендациям по стилю CSS.
Совет.
Чтобы отобразить Справочное руководство по CSS O'Reilly, включенное в Dreamweaver, выберите «Справка» > «Справочник», а затем выберите «Справочник по CSS O'Reilly» во всплывающем меню на панели «Справочник».
Установленное вручную форматирование HTML переопределяет форматирование, применяемое с помощью CSS. Чтобы правила CSS управляли форматированием абзацев, необходимо удалить все заданное вручную форматирование HTML.
Dreamweaver отображает большинство свойств стиля, которые вы применяете непосредственно в окне документа. Вы также можете просмотреть документ в окне браузера, чтобы увидеть, как применяются стили. Некоторые свойства стиля CSS по-разному отображаются в Microsoft Internet Explorer, Netscape Navigator, Opera и Apple Safari, а некоторые в настоящее время не поддерживаются ни одним браузером.