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

комментарии двух видов.

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

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

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

Размер шрифта можно задать в абсолютных и относительных величинах. Для этого используется одна из единиц измерения, поддерживаемая CSS (табл. 8.1).

Таблица 8.1. Единицы измерения размера, поддерживаемые стандартом CSS

Обозначение выбранной единицы измерения указывают после самого значения:

P { font-size: 10pt } STRONG { font-size: 1cm } EM { font-size: 150 % }

Отметим, что все приведенные в табл. 8.1 единицы измерения подходят для задания значений других атрибутов стилей CSS.

Кроме числовых, атрибут font-size может принимать и символьные значения. Так, значения от xx- small до xx-large задают семь предопределенных размеров шрифта, от самого маленького до самого большого. А значения larger и smaller представляют следующий размер шрифта, соответственно, по возрастанию и убыванию. Например, если для родительского элемента определен шрифт размера medium, то значение larger установит для текущего элемента размер шрифта large.

Значение inherit указывает, что данный элемент Web-страницы должен иметь тот же размер шрифта, что и родительский элемент. Это значение атрибута стиля font- size по умолчанию.

Атрибут стиля color задает цвет текста:

color: <цвет>|inherit

В главе 7 мы упоминали, что цвет можно задать так называемым RGB-кодом (Red, Green, Blue — красный, зеленый, синий). Он записывается в формате

#<доля красного цвета><доля зеленого цвета><доля синего цвета>,

где доли всех цветов указаны в виде шестнадцатеричных чисел от 00 до FF. Зададим для текста красный цвет:

H1 { color: #FF0000 } А теперь серый цвет: ADDRESS { color: #CCCCCC }

Кроме того, CSS позволяет задавать цвета по именам. Так, значение black соответствует черному