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

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

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

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

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

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

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

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

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

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

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

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

P { color: #0000FF }

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

Листинг 7.11

/*

Это комментарий, состоящий из нескольких строк.

*/

P { color: #0000FF }

Многострочный комментарий начинается с последовательности символов /* и заканчивается последовательностью */.

Что дальше?

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

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

ГЛАВА 8. Параметры шрифта и фона. Контейнеры

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

Параметры шрифта

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

Атрибут стиля font-family задает имя шрифта, которым будет выведен текст:

font-family: <список имен шрифтов, разделенных запятыми>|inherit

Имена шрифтов задаются в виде их названий, например, Arial или Times New Roman. Если имя шрифта содержит пробелы, его нужно взять в кавычки:

P { font-family: Arial }

H1 (font-family: "Times New Roman" }

Если данный атрибут стиля присутствует во встроенном стиле, кавычки заменяют апострофами:

<P STYLE="font-family: 'Times New Roman'">

Если указанный нами шрифт присутствует на компьютере посетителя, Web- обозреватель его использует. Если же такого шрифта нет, то текст выводится шрифтом, заданным в настройках по умолчанию. И наша Web-страница, возможно, будет выглядеть не так, как мы задумывали. (Впрочем, шрифты Arial и Times New Roman присутствуют на любом компьютере, работающем под управлением Win- dows.) Можно указать несколько наименований шрифтов через запятую:

P { font-family: Verdana, Arial }

Тогда Web-обозреватель сначала будет искать первый из указанных шрифтов, в случае неудачного поиска — второй, потом третий и т. д. Вместо имени конкретного шрифта можно задать имя одного из семейств шрифтов, представляющих целые наборы аналогичных шрифтов. Таких семейств пять: serif (шрифты с засечками), sans-serif (шрифты без засечек), cursive (шрифты, имитирующие рукописный текст), fantasy (декоративные шрифты) и monospace (моноширинные шрифты):

H2 { font-family: Verdana, Arial, sans-serif }

Особое значение inherit указывает, что текст данного элемента Web-страницы должен быть набран тем же шрифтом, что и текст родительского элемента. Говорят, что в данном случае элемент Web-страницы "наследует" шрифт от родительского элемента. Это, кстати, значение атрибута стиля font-family по умолчанию. Атрибут стиля font-size определяет размер шрифта:

font-size: <размер>|xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|inherit