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

• Название: HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
• Автор: Владимир Дронов
• Жанр: Прочая справочная литература
• Год: 2011
• ISBN: 978-5-9775-0596-3

Практическое руководство по созданию современных Web-сайтов, соответствующих концепции Web 2.0. Описаны языки HTML 5 и CSS 3, применяемые, соответственно, для создания содержимого и представления Web-страниц. Даны принципы Web-программирования на языке JavaScript с использованием библиотеки Ext Core. Рассказано о создании интерактивных Web-страниц, приведены примеры интерактивных элементов, позволяющие сделать Web-страницы удобнее для посетителя. Раскрыты вопросы реализации подгружаемого и генерируемого содержимого, семантической разметки, применения баз данных для формирования Web-страниц. Показаны способы расширения функциональности Web-сайтов с использованием Web-форм, элементов управления, свободно позиционируемых элементов и программного рисования средствами HTML 5.

---

#bigtext { color: $FFFF00; font-size: large }

И, наконец, самая трудная задача — первая строка HTML-кода. Поскольку оба определения стилевого класса redtext задают один и тот же параметр — цвет текста (атрибут стиля color) — Web-обозреватель поступит так. Он отменит значение этого атрибута, заданное в стиле из внешней таблицы стилей, и заменит его тем, что задано в стиле из внутренней таблицы стилей. Поскольку, с его точки зрения и с точки зрения стандартов CSS, внутренняя таблица стилей — это та рубашка, что "ближе к телу". И тогда результирующий стиль будет таким:

redtext { color: #0000FF }

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

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

— Внешняя таблица стилей, ссылка на которую (тег <LINK>) встречается в HTML- коде страницы позже, имеет приоритет перед той, ссылка на которую встретилась раньше.

— Внутренняя таблица стилей имеет приоритет перед внешними.

— Встроенные стили имеют приоритет перед любыми стилями, заданными в таблицах стилей.

— Более конкретные стили имеют приоритет перед менее конкретными. Это значит, например, что стилевой класс имеет приоритет перед стилем переопределения тега, поскольку стилевой класс привязывается к конкретным тегам. Точно так же комбинированный стиль имеет приоритет перед стилевым классом.

— Если к тегу привязаны несколько стилевых классов, то те, что указаны правее, имеют приоритет перед указанными левее.

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

А теперь представим себе следующую ситуацию. Предположим, мы создали стили, приведенные в листинге 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. Более того, с его помощью мы можем формировать комментарии двух видов.

Комментарий, состоящий из одной строки, создают с помощью символа / (слэш) в самом начале строки, которая станет комментарием:

/ Это комментарий

P { color: #0000FF }

Однострочный комментарий начинается с символа / и заканчивается концом строки. Комментарий, состоящий из произвольного числа строк, создают с помощью последовательностей символов /* и */. Между ними помещают строки, которые станут комментарием (листинг 7.11).