HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

Важные атрибуты стилей

А теперь представим себе следующую ситуацию. Предположим, мы создали стили, приведенные в листинге 7.10.

Листинг 7.10

redtext { color: #FF0000; font-weight: normal }

EM { color: #00FF00; font-weight: bold }

Значение normal атрибута стиля font-weight задает обычную 'жирность' шрифта, т. е. простой, светлый шрифт.

Далее мы поместили на Web-страницу вот такой абзац:

<P><EM CLASS='redtext'>Это курсив.</EM></P>

Правила каскадности мы уже рассмотрели, так что можно сразу сказать, что получится в результате. Текст этого абзаца будет выведен обычным шрифтом красного цвета.

Но предположим, будто нам нужно, чтобы весь текст, выделенный тегом <EM>, в любом случае выводился полужирным шрифтом! Что делать? Создавать другой стилевой класс, специально для такого случая?

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

Обратим внимание, что важными можно сделать только отдельные атрибуты стиля в определении стиля. Атрибуты стиля, не объявленные важными, все так же будут подчиняться правилам каскадности.

Чтобы сделать атрибут стиля важным, достаточно после его значения через пробел поставить слово!important (пишется слитно, без пробелов между восклицательным знаком и словом 'important'). Вот так:

EM { color: #00FF00; font-weight: bold!important }

Теперь текст, выделенный тегом <EM>, всегда будет выводиться полужирным шрифтом, даже если данный параметр переопределен в более конкретном стиле.

Важные атрибуты стиля могут очень пригодиться при создании поведения Web- страницы, которое управляет стилями, привязанными к элементам Web-страницы, в ответ на действия посетителя. Мы столкнемся с этим уже в главе 14, когда будем создавать свое первое полезное поведение.

На этом рассмотрение принципов создания стилей и таблиц стилей можно закончить. Осталось только поговорить о том…

Какие стили в каких случаях применять

Удачно подобранный набор стилей — результат долгих экспериментов. Нам придется изрядно повозиться, прежде чем мы его получим. Но несколько правил, приведенных далее, помогут нам получить его заметно быстрее.

Прежде всего, следует выделить все правила оформления, которые должны быть применены ко всем Web-страницам и их элементам. К таким правилам относятся параметры шрифта обычных абзацев и заголовков, цвет фона Web-страницы, выравнивание текста, величины отступов и параметры рамки обычных таблиц и пр. В общем, то, что определяет вид всех Web-страниц.

Эти правила преобразуются в общие стили, обычно стили переопределения тегов. Их помещают в одну внешнюю таблицу стилей и привязывают ее ко всем Web- страницам Web-сайта. Такая таблица стилей называется глобальной.

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

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

На следующем этапе мы выделим правила, применяемые только к одному элементу Web-страниц. Это могут быть параметры полосы навигации, заголовка Web-сайта, различных контейнеров, определяющих дизайн Web-страниц (о контейнерах речь пойдет в главе 10). Они также должны дополнять правила, полученные на предыдущих этапах, но не заменять их полностью.

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

Последний этап — выделение правил, применяемых к совсем небольшому количеству элементов, которые присутствуют только на отдельных Web-страницах, а то и вообще на одной из них. К таким правилам можно отнести параметры очень специфических абзацев, отдельных иллюстраций и таблиц. Не забываем, что и эти правила, по возможности, не должны полностью перекрывать полученные ранее.

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

Что касается внутренних таблиц стилей и встроенных стилей, то в готовых Web- страницах от них рекомендуется отказаться. Как мы помним еще из главы 1, концепция Web 2.0 настоятельно рекомендует разделять содержимое и представление Web-страниц. А внутренние таблицы стилей и встроенные стили нарушают данное правило — о чем мы неоднократно говорили.

Сейчас внутренние таблицы стилей и встроенные стили применяют, в основном, во время экспериментов, чтобы выяснить, как тот или иной стиль влияет на отображение элементов Web-страницы. По завершении экспериментов готовые стили переносят во внешние таблицы стилей и соответствующим образом оформляют.

Так или иначе, конкретные примеры выбора нужной разновидности стиля мы рассмотрим в последующих главах, когда начнем создавать представление для наших Web-страниц. В конце концов, учиться лучше всего на примерах.

Комментарии CSS

В главе 2 мы узнали о комментариях — особых фрагментах HTML-кода, которые не обрабатываются Web-обозревателем и служат для того, чтобы Web-дизайнер смог оставить какие-то заметки для себя или своих коллег. Для этого язык HTML предоставляет специальный тег.

Создавать комментарии позволяет и язык CSS. Более того, с его помощью мы можем формировать