Изучите этот раздел, чтобы узнать основные понятия CSS: правила CSS, селекторы, наследование и т. д. Кроме того узнаете о том, как CSS можно связать с веб-страницами в Dreamweaver.
Сведения о каскадных таблицах стилей
Каскадные таблицы стилей (CSS) — это коллекция правил форматирования, которые контролируют внешний вид контента на веб-странице. Использование стилей CSS для форматирования страницы отделяет контент от оформления.Содержимое вашей страницы — HTML-код — находится в HTML-файле, а правила CSS, определяющие представление кода, находятся в другом файле (внешняя таблица стилей) или в другой части HTML-документа (обычно в разделе head). Разделение контента и представления значительно упрощает поддержание внешнего вида вашего сайта из единого центра, поскольку вам не нужно обновлять каждое свойство на каждой странице при внесении изменений.Разделение контента и представления также приводит к более простому и чистому HTML-коду, что обеспечивает сокращение времени загрузки браузера и упрощает навигацию для людей с ограниченными возможностями (например, тех, кто использует программы чтения с экрана).
CSS дает вам большую гибкость и контроль над точным внешним видом вашей страницы. С помощью CSS вы можете контролировать множество свойств текста, включая конкретные шрифты и размеры шрифтов; полужирный, курсив, подчеркивание и тени текста; цвет текста и цвет фона; цвет ссылок и подчеркивание ссылок; и многое другое. Используя CSS для контроля ваших шрифтов, вы также можете обеспечить более последовательную обработку макета и внешнего вида страницы в различных браузерах.
Помимо форматирования текста, вы можете использовать CSS для контроля формата и позиционирования блочных элементов на веб-странице. Блочный элемент — это отдельный фрагмент контента, обычно отделенный новой строкой в HTML и визуально отформатированный как блок.Например, теги h1, теги p и теги div создают блочные элементы на веб-странице. Вы можете установить поля и границы для блочных элементов, расположить их в определенном месте, добавить к ним цвет фона, обтекать их текстом и так далее. Манипулирование блочными элементами по сути является способом компоновки страниц с помощью CSS.
Сведения о правилах CSS
Правило форматирования CSS состоит из двух частей — селектора и объявления (или в большинстве случаев блока объявлений). Селектор — это обозначение (такое как p, h1, имя класса или id), которое идентифицирует форматируемый элемент, а блок объявления определяет свойства стиля.В следующем примере h1 — это селектор, а все, что находится между фигурными скобками ({}), является блоком объявления:
h1 {
font-size: 16 pixels;
font-family: Helvetica;
font-weight:bold;
}
Отдельное объявление состоит из двух частей: свойства (такого как font-family) и значения (такого как Helvetica). В предыдущем правиле CSS был создан конкретный стиль для тегов h1: текст для всех тегов h1, связанных с этим стилем, будет размером 16 пикселей, шрифт Helvetica, полужирное начертание.
Стиль (который происходит из правила или коллекции правил) находится в месте, отдельном от самого текста, который он форматирует — обычно во внешней таблице стилей или в разделе head HTML-документа. Таким образом, одно правило для тегов h1 может применяться ко многим тегам одновременно (и в случае внешних таблиц стилей правило может применяться ко многим тегам одновременно на многих разных страницах). Таким образом, CSS обеспечивает чрезвычайно простые возможности обновления. При обновлении CSS-правила в одном месте форматирование всех элементов, использующих определенный стиль, автоматически обновляется в соответствии с новым стилем.
В Dreamweaver можно задать следующие типы стилей.
Стили классов позволяют применять свойства стиля к любому элементу или элементам на странице.
Стили тегов HTML переопределяют форматирование для определенного тега, например h1. При создании или изменении CSS-стиля для тега h1 весь текст, отформатированный с помощью тега h1, немедленно обновляется.
Расширенные стили переопределяют форматирование для определенной комбинации элементов или для других форм селекторов, разрешенных CSS (например, селектор td h2 применяется всякий раз, когда заголовок h2 появляется внутри ячейки таблицы.) Расширенные стили также могут переопределять форматирование для тегов, содержащих определенный атрибут id (например, стили, определенные #myStyle, применяются ко всем тегам, содержащим пару атрибут-значение id="myStyle").
Правила CSS могут располагаться в следующих местах.
Внешние таблицы стилей CSS
Коллекции CSS-правил, хранящиеся в отдельном внешнем CSS-файле (.css) (не в HTML-файле). Этот файл связывается с одной или несколькими страницами веб-сайта с помощью ссылки или правила @import в разделе head документа.
Внутренние (или встроенные) таблицы стилей CSS
Коллекции CSS-правил, включенные в тег style в заголовочной части HTML-документа.
Встроенные стили
Задаются в пределах отдельных экземпляров тегов по всему HTML-документу. (Использование встроенных стилей не рекомендуется.)
Dreamweaver распознает стили, определенные в существующих документах, при условии, что они соответствуют рекомендациям по стилям CSS. Dreamweaver также отображает большинство примененных стилей непосредственно в режиме «Дизайн». (Однако предварительный просмотр документа в окне браузера дает наиболее точную «живую» визуализацию страницы.) Некоторые стили CSS отображаются по-разному в Microsoft Internet Explorer, Netscape, Opera, Apple Safari или других браузерах, а некоторые в настоящее время не поддерживаются ни одним браузером.
Сведения о каскадных стилях
Термин каскадирование относится к способу, которым браузер в конечном итоге отображает стили для конкретных элементов на веб-странице. Три различных источника отвечают за стили, которые вы видите на веб-странице: таблица стилей, созданная автором страницы, пользовательские настройки стилей (если они есть) и стили браузера по умолчанию. В предыдущих разделах описывается создание стилей для веб-страницы как автором самой веб-страницы, так и таблицы стилей, прикрепленной к этой странице. Но у браузеров также есть их собственные таблицы стилей по умолчанию, которые определяют отображение веб-страниц, и кроме того, пользователи могут настраивать свои браузеры, выбирая параметры, которые корректируют отображение веб-страниц.Окончательный вид веб-страницы является результатом объединения правил всех трех источников (или «каскадирования») для оптимального отображения веб-страницы.
Обычный тег — тег абзаца или тег <p> — иллюстрирует эту концепцию. По умолчанию браузеры поставляются с таблицами стилей, которые определяют шрифт и размер шрифта для текста абзаца (то есть текста, который находится между тегами <p> в HTML-коде). В Internet Explorer, например, весь основной текст, включая текст абзаца, отображается шрифтом Times New Roman, Medium по умолчанию.
Как автор веб-страницы, однако, вы можете создать таблицу стилей, которая переопределяет стиль браузера по умолчанию для шрифта абзаца и размера шрифта. Например, вы можете создать следующее правило в вашей таблице стилей:
p {
font-family: Arial;
font-size: small;
}
Когда пользователь загружает страницу, настройки шрифта и кегля абзаца, установленные вами как автором, переопределяют настройки текста абзаца по умолчанию в браузере.
Пользователи могут выбирать параметры настройки отображения браузера оптимальным образом для собственного использования.В Internet Explorer, например, пользователь может выбрать «Вид» > «Размер текста» > «Очень крупный», чтобы увеличить шрифт страницы до более читаемого размера, если он считает, что шрифт слишком мелкий.В конечном итоге (по крайней мере в данном случае) выбор пользователя переопределяет как стили браузера по умолчанию для кегля абзаца, так и стили абзаца, созданные автором веб-страницы.
Наследование также является существенным фактором каскадного применения стилей. Свойства большинства элементов на веб-странице наследуются — например, теги абзацев наследуют определенные свойства от тегов body, теги span наследуют определенные свойства от тегов абзацев и так далее.Таким образом, если вы создадите следующее правило в вашей таблице стилей:
body {
font-family: Arial;
font-style: italic;
}
Для всего текста абзацев на веб-странице (как и текста, наследующего свойства из тегов абзаца) будет использоваться шрифт Arial курсив, поскольку тег абзаца наследует эти свойства из тега основного текста. Однако можно задать более конкретные правила и создать стили, переопределяющие стандартную формулу наследования. Например, если создать следующие правила в таблице стилей:
body {
font-family: Arial;
font-style: italic;
}
p {
font-family: Courier;
font-style: normal;
}
Весь основной текст будет Arial и курсивный за исключением текста абзаца (и унаследованного от него), который будет отображаться как Courier обычный (не курсивный). Технически тег абзаца сначала наследует свойства, которые установлены для тега body, но затем игнорирует эти свойства, поскольку у него есть собственные определенные свойства. Другими словами, хотя элементы страницы обычно наследуют свойства сверху, прямое применение свойства к тегу всегда вызывает переопределение стандартной формулы для наследования.
Сочетание всех обсуждавшихся выше факторов плюс другие факторы, такие как специфичность CSS (система, которая придает разный вес определенным типам правил CSS) и порядок правил CSS, в конечном итоге создают сложный каскад, где элементы с более высокими приоритетами переопределяют свойства с более низкими приоритетами. Дополнительные сведения о правилах, регулирующих каскад, наследование и специфичность, см. www.w3.org/TR/CSS2/cascade.html.
Сведения о форматировании текста и CSS
При форматировании текста Dreamweaver по умолчанию использует каскадные таблицы стилей (CSS). Стили, которые пользователь применяет к тексту с помощью инспектора свойства или команд меню, создают правила CSS, встроенные в заголовок текущего документа.
Для создания и редактирования правил и свойств CSS также можно использовать конструктор CSS. Конструктор CSS является более надежным инструментом, чем инспектор свойств, он отображает все правила CSS, заданные для текущего документа, независимо от того, встроены ли правила в заголовок документа или во внешнюю таблицу стилей. Adobe рекомендует использовать конструктор CSS (а не инспектор свойств) в качестве основного инструмента создания и редактирования каскадных таблиц стилей. В результате код будет более компактен и удобен при доработках.
Дополнительные сведения о CSS Designer см. Компоновка страниц с помощью CSS Designer.
К документам в дополнение к пользовательским стилям и таблицам стилей можно применять таблицы стилей, предустановленные в Dreamweaver.
Учебное пособие по форматированию текста с помощью CSS см. в разделе www.adobe.com/go/vid0153.
Сведения о свойствах сокращенного CSS
Спецификация CSS позволяет создавать стили, используя сокращенный синтаксис, известный как shorthand CSS.Сокращенный CSS позволяет указывать значения нескольких свойств с помощью одного объявления. Например, свойство font позволяет задать свойства font-style, font-variant, font-weight, font-size, line-height и font-family в одной строке.
Важный момент при использовании сокращенного CSS — значения, пропущенные в сокращенном CSS-свойстве, получают значения по умолчанию. Это может привести к некорректному отображению страниц, когда к одному и тому же тегу применяются два или более правила CSS.
Например, правило h1, показанное ниже, использует полный синтаксис CSS. Обратите внимание, что свойствам font-variant, font-stretch, font-size-adjust и font-style присвоены значения по умолчанию.
h1 {
font-weight: bold;
font-size: 16pt;
line-height: 18pt;
font-family: Arial;
font-variant: normal;
font-style: normal;
font-stretch: normal;
font-size-adjust: none
}
Переписанное как одно сокращенное свойство, то же правило может выглядеть следующим образом:
h1 { font: bold 16pt/18pt Arial }
При написании с использованием сокращенной записи пропущенные значения автоматически получают значения по умолчанию. Таким образом, предыдущий пример с сокращенной записью пропускает теги font-variant, font-style, font-stretch и font-size-adjust.
Если у вас стили определены в нескольких местах (например, одновременно встроены в HTML-страницу и импортированы из внешней таблицы стилей), используя как краткую, так и полную формы CSS-синтаксиса, учитывайте, что пропущенные свойства в сокращенном правиле могут переопределить (или каскадировать) свойства, которые явно заданы в другом правиле.
По этой причине Dreamweaver по умолчанию использует полную форму CSS-записи. Это предотвращает возможные проблемы, вызванные переопределением развёрнутого правила сокращённым правилом.Если вы открываете веб-страницу, созданную с использованием сокращенной CSS-записи, в Dreamweaver, имейте в виду, что Dreamweaver будет создавать любые новые CSS-правила в полной форме.Вы можете указать, как Dreamweaver создает и редактирует CSS-правила, изменив настройки редактирования CSS в категории «Стили CSS» диалогового окна «Настройки» (Правка > Настройки в Windows; Dreamweaver > Настройки на Macintosh).
Dreamweaver и CSS
В Dreamweaver вы можете работать с CSS несколькими способами:
- Можно использовать конструктор CSS для создания стилей CSS с минимальным объемом кодирования. Дополнительные сведения см. в разделе Создание макетов страниц с помощью конструктора CSS.
- Можно также создавать код CSS вручную. Дополнительные сведения о возможностях кодирования в Dreamweaver см. в разделе Среда кодирования в Dreamweaver.
- Если вы предпочитаете работать с файлами Sass, Scss или Less, то можно создавать файлы с кодом, имеющие выбранный синтаксис, и затем использовать его в Dreamweaver. Дополнительные сведения см. в разделе Препроцессоры CSS.
Создание красивых веб-сайтов в Dreamweaver
Создавайте дизайн, пишите код и управляйте динамическими веб-сайтами с помощью многофункционального инструмента.
