Общие сведения о каскадных таблицах стилей

Каскадные таблицы стилей (CSS) — это набор правил форматирования, определяющих отображение содержимого на веб-странице. При форматировании страницы с помощью стилей CSS собственно содержимое страницы разделяется с представлением содержимого. Содержимое страницы (HTML-код) располагается в HTML-файле, а правила CSS, определяющие представление кода, располагаются в другом файле (внешней таблице стилей) или в другой части HTML-документа (обычно в заголовке). Разделение содержимого и его представления значительно облегчает управление внешним видом сайта из единого центра. При необходимости внести изменение не нужно обновлять каждое свойство на каждой странице. Разделение содержимого и его представления также делает HTML-код более простым и аккуратным. Это значительно сокращает время загрузки страницы браузером и облегчает навигацию для посетителей, использующих специальные возможности (например, для тех, кто использует программы для чтения с экрана).

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

Каскадные таблицы стилей также могут использоваться для форматирования и расположения блоков на веб-странице. Блоковым элементом называется автономная часть содержимого, обычно отделенная новой линией в HTML и представленная внешне как блок. Например, теги h1, p и Div отделяют блоки веб-страницы. Для блоковых элементов можно задавать поля и границы, определять их местоположение, добавлять цвет фона, задавать свойства обтекания текста и т. д. Управление блоками — это основополагающий момент макетирования страницы с помощью CSS.

Сведения о правилах CSS

Правило форматирования CSS состоит из двух частей — селектора и объявления (или в большинстве случаев блока объявлений). Селектором является термин (например, p, h1, имя или идентификатор класса), который определяет форматируемый элемент, а блок объявлений задает свойства стиля. В следующем примере h1 является селектором, а все, что заключено в фигурные скобки ({}), является блоком объявлений.

Объявление свойства состоит из двух частей: свойство (например, font-family) и значение (например, Helvetica). Указанное выше правило CSS задает стиль для тегов h1: текст, заданный тегами h1, связанными с данным стилем, будет отображен размером 16 пикселов жирным шрифтом Helvetica.

Стиль (определяется правилом или набором правил) располагается отдельно от собственно форматируемого текста, обычно во внешней таблице стилей или в заголовке HTML-документа. Таким образом, однажды заданное правило для тегов h1 может применяться одновременно к нескольким тегам (а в случае существования внешней таблицы стилей — к нескольким тегам на разных страницах одновременно). С использованием каскадных таблиц стилей обновление форматирования становится предельно легким. При обновлении CSS-правила в одном месте форматирование всех элементов с заданным им стилем будет автоматически обновлено.

В Dreamweaver можно задать следующие типы стилей.

• Стили классов позволяют применить свойства стиля к любому элементу или элементам на странице.

• Стили HTML-тегов переопределяют форматирование, связанное с определенным тегом, например h1. При создании или изменении стиля CSS для тега h1 отображение любого текста, заключенного в теги h1, будет мгновенно обновлено.

• Расширенные стили переопределяют форматирование конкретной комбинации элементов или других видов селекторов, доступных в рамках CSS (например, селектор td h2 применяется при появлении заголовка h2 внутри ячейки таблицы). В рамках расширенных стилей также возможно переопределение форматирования тегов, содержащих специальный атрибут id (например, стили, определенные как #myStyle, будут применены ко всем тегам, содержащим пару атрибут-значение id="myStyle").

Правила CSS могут располагаться в следующих местах.

Набор правил CSS, хранимых в отдельном внешнем файле CSS (.css), который не является HTML-файлом. Данный файл связан с одной или несколькими страницами на веб-сайте посредством ссылки или правила @import в заголовке документа.

Набор правил CSS, заключенный в теги style в заголовке HTML-документа.

Задаются в пределах отдельных экземпляров тегов по всему HTML-документу. (Использование встроенных стилей не рекомендуется.)

Dreamweaver распознает стили, заданные в существующих документах, в той мере, в которой они соответствуют руководству по стилям CSS. Dreamweaver также преобразует все применимые стили напрямую в представление «Дизайн». (Тем не менее предварительный просмотр документа в окне браузера является более точным, «живым», отображением страницы.) Некоторые стили CSS по-разному обрабатываются в Microsoft Internet Explorer, Netscape, Opera, Apple Safari и других браузерах. Существуют стили, которые не поддерживаются никакими браузерами.

Сведения о каскадных стилях

Термином каскадные описывается способ, которым браузер отображает стили для определенных элементов веб-страницы. Стили, используемые на веб-странице, определяются тремя различными источниками: таблицей стилей, созданной автором страницы, параметрами стилей, выбранными пользователем (если они есть) и собственными стилями браузера, используемыми по умолчанию. В предыдущих разделах описано, как создавать стили для веб-страницы в качестве автора как веб-страницы, так и таблицы стилей, прикрепленной к этой странице. Однако у браузеров есть и собственные таблицы стилей по умолчанию, которыми определяется вид веб-страниц; кроме того, пользователи могут настраивать свои браузеры, выбирая параметры, изменяющие вид веб-страниц. Итоговый внешний вид веб-страницы является результатом одновременного («каскадного») применения правил из всех трех упомянутых источников для оптимальной визуализации веб-страницы.

Обычный тег, например тег абзаца или <p>, может послужить иллюстрацией этого принципа. По умолчанию, браузеры поставляются с таблицами стилей, определяющими шрифт и размер шрифта для текста абзаца (то есть текста, расположенного между тегами <p> в коде HTML). Например, в Internet Explorer весь основной текст, включая текст абзаца, по умолчанию отображается со шрифтом Times New Roman размера Medium.

Однако как автор веб-страницы, вы можете создать таблицу стилей, переопределяющую стиль браузера по умолчанию (шрифт и размер шрифта абзаца). Например, можно создать следующее правило в таблице стилей:

Когда пользователь загружает страницу, настройки шрифта и размера шрифта, заданные автором страницы, переопределяют стандартные настройки браузера для текста абзаца.

Пользователи могут выбрать параметры для отображения страницы в браузере самым удобным для них образом. Например, в Internet Explorer пользователь может выбрать «Вид» > «Размер шрифта» > «Самый крупный», чтобы увеличить размер шрифта страницы до более удобного, если исходный шрифт недостаточно велик. Параметры, выбранные пользователем, в конечном итоге переопределяют как стандартные стили браузера, задающие размер шрифта абзаца, так и стили абзаца, созданные автором веб-страницы.

Наследование также является существенным фактором каскадного применения стилей. Свойства большинства элементов на веб-странице наследуются; например, теги абзаца наследуют определенные свойства из тегов основного текста, теги span наследуют свойства из тегов абзаца, и так далее. Таким образом, если создать следующее правило в таблице стилей:

Для всего текста абзацев на веб-странице (как и текста, наследующего свойства из тегов абзаца) будет использоваться шрифт Arial курсив, поскольку тег абзаца наследует эти свойства из тега основного текста. Однако можно задать более конкретные правила и создать стили, переопределяющие стандартную формулу наследования. Например, если создать следующие правила в таблице стилей:

Для всего основного текста будет использоваться шрифт Arial курсив, за исключением текста абзацев (и текста, наследующего от него), который будет отображаться обычным шрифтом Courier (не курсивом). Технически, тег абзаца сначала наследует свойства, заданные для тега основного текста, но затем игнорирует эти свойства, поскольку для него определены собственные свойства. Иными словами, в то время как элементы страницы обычно наследуют свойства элементов более высокого уровня, при прямом применении свойства к тегу всегда происходит переопределение стандартной формулы наследования.

В результате сочетания всех вышеописанных факторов, а также других факторов, например специфичности CSS (система, присваивающая различные веса определенным типам правил CSS) и порядка правил CSS, в конечном итоге создается сложный каскад стилей, в котором элементы с более высокими приоритетами переопределяют свойства с более низкими приоритетами. Дополнительные сведения о правилах, определяющих порядок каскадного применения стилей, наследования и специфичность, см. по адресу www.w3.org/TR/CSS2/cascade.html.

Сведения о форматировании текста и CSS

При форматировании текста Dreamweaver по умолчанию использует каскадные таблицы стилей (CSS). Стили, которые пользователь применяет к тексту с помощью инспектора свойства или команд меню, создают правила CSS, встроенные в заголовок текущего документа.

Для создания и редактирования правил и свойств CSS также можно использовать конструктор CSS. Конструктор CSS является более надежным инструментом, чем инспектор свойств, он отображает все правила CSS, заданные для текущего документа, независимо от того, встроены ли правила в заголовок документа или во внешнюю таблицу стилей. Adobe рекомендует использовать конструктор CSS (а не инспектор свойств) в качестве основного инструмента создания и редактирования каскадных таблиц стилей. В результате код будет более компактен и удобен при доработках.

Дополнительные сведения о конструкторе CSS см. в разделе Создание макетов страниц с помощью конструктора CSS.

К документам в дополнение к пользовательским стилям и таблицам стилей можно применять таблицы стилей, предустановленные в Dreamweaver.

Руководство по форматированию текста с помощью каскадных таблиц стилей см. по адресу www.adobe.com/go/vid0153_ru.

Сведения о свойствах сокращенного CSS

Спецификация CSS включает создание стилей с помощью упрощенного синтаксиса, известного как сокращенный CSS. Сокращенный CSS позволяет задавать значения нескольких свойств с использованием единого объявления. Например, свойство font позволяет задать свойства font-style, font-variant, font-weight, font-size, line-height и font-family в одной строке.

При использовании сокращенных CSS следует помнить следующее: если в свойствах не заданы значения атрибутов, атрибуты получат значения по умолчанию. Это может привести к некорректному отображению страниц в том случае, если два или более правила CSS связаны с одним тегом.

Например, указанное ниже правило h1 использует обычный синтаксис CSS. Обратите внимание, что свойствам font-variant, font-stretch, font-size-adjust и font-style были присвоены значения по умолчанию.

Данное правило, записанное в сокращенном синтаксисе, может выглядеть следующим образом.

При использовании сокращенного выражения пропущенным значениям будут автоматически присвоены значения по умолчанию. Таким образом, указанный выше пример сокращенного синтаксиса опускает теги font-variant, font-style, font-stretch и font-size-adjust.

Если стили заданы в нескольких местах (например, одновременно встроены в HTML-документ и импортированы из внешней таблицы стилей) с использованием как сокращенного, так и обычного синтаксиса CSS, следует помнить, что свойства, опущенные в сокращенном правиле, могут аннулировать (или осуществлять каскад) свойства, четко определенные в другом правиле.

Поэтому в Dreamweaver по умолчанию используется полная форма выражений CSS. Это предотвращает возможные проблемы, вызванные тем, что правило с сокращенным синтаксисом аннулирует правило без сокращений. При открытии в Dreamweaver веб-страницы, созданной с использованием сокращенных выражений CSS, необходимо помнить, что любые новые правила CSS Dreamweaver создает в полном, не сокращенном, варианте. Можно определить способ создания и редактирования правил CSS в Dreamweaver, изменив настройки редактирования CSS в категории «Стили CSS» диалогового окна «Настройки» («Правка» > «Настройки» для Windows «Dreamweaver» > «Настройки» для Macintosh).

Dreamweaver и CSS

Работать с CSS в Dreamweaver можно несколькими способами.

• Можно использовать конструктор CSS для создания стилей CSS с минимальным объемом кодирования. Дополнительные сведения см. в разделе Создание макетов страниц с помощью конструктора CSS. 
• Можно также создавать код CSS вручную. Дополнительные сведения о возможностях кодирования, предлагаемых Dreamweaver, см. в разделе Среда кодирования в Dreamweaver.
• Если вы предпочитаете работать с файлами Sass, Scss или Less, то можно создавать файлы с кодом, имеющие выбранный синтаксис, и затем использовать его в Dreamweaver. Дополнительные сведения см. в разделе Препроцессоры CSS.