Листинг 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 соответствует черному цвету, white — белому, red — красному, green — зеленому, а blue — синему.
Пример:
H1 { color: red }
Полный список имен и соответствующих им цветов можно посмотреть на Web-странице http://msdn.microsoft.com/en-us/library/aa358802%28v=VS.85%29.aspx.
Значение inherit указывает, что данный элемент Web-страницы должен иметь тот же цвет шрифта, что и родительский элемент. Это значение атрибута стиля font- size по умолчанию.
ВНИМАНИЕ!
Значение inherit поддерживают практически все атрибуты стиля CSS. Оно говорит Web-обозревателю, что элемент Web-страницы, к которому привязан стиль, "наследует" значение соответствующего параметра у родительского элемента. У всех атрибутов это значение по умолчанию. В дальнейшем мы не будем описывать данное значение у каждого атрибута стиля; если же какой-то атрибут стиля не поддерживает его, мы специально об этом упомянем.
С помощью атрибута стиля color мы можем, например, задать цвет горизонтальной линии HTML.
Атрибут стиля opacity позволяет указать степень полупрозрачности элемента Web-страницы:
opacity: <числовое значение>|inherit
Значение полупрозрачности представляет собой число от 0 до 1. При этом 0 обозначает полную прозрачность элемента (т. е. элемент фактически не виден), а 1 — полную непрозрачность (это обычное поведение).
Вот пример задания половинной прозрачности (значение 0,5) для текста фиксированного форматирования:
PRE { opacity: 0.5 }
Отметим, как мы указали дробное число — вместо символа запятой здесь используется точка.
НА ЗАМЕТКУ
Полупрозрачность обычно целесообразна только для создания специальных эффектов. В обычном тексте применять ее не рекомендуется, т. к. это может обескуражить посетителя.
Атрибут стиля font-weight устанавливает "жирность" шрифта:
font-weight: normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900|inherit
Здесь доступны семь абсолютных значений от 100 до 900, представляющих различную "жирность" шрифта, от минимальной до максимальной; при этом обычный шрифт будет иметь "жирность" 400 (или normal), а полужирный — 700 (или bold). Значение по умолчанию — 400 (normal). Значения bolder и lighter являются относительными и представляют следующие степени "жирности" соответственно в бóльшую и меньшую сторону.
Пример:
CODE { font-weight: bold }
Атрибут font-style задает начертание шрифта:
font-style: normal|italic|oblique|inherit
Доступны три значения, представляющие обычный шрифт (normal), курсив (italic) и особое декоративное начертание, похожее на курсив (oblique).
Атрибут стиля text-decoration задает "украшение" (подчеркивание или зачеркивание), которое будет применено к тексту:
text-decoration: none|underline|overline|line-through|blink|inherit
Здесь доступны пять значений (не считая inherit):
— none убирает все "украшения", заданные для шрифта родительского элемента;
— underline подчеркивает текст;
— overline "надчеркивает" текст, т. е. проводит линию над строками;
— line-through зачеркивает текст;
— blink делает шрифт мерцающим (на данный момент не поддерживается Safari).
ВНИМАНИЕ!
Не следует без особой необходимости задавать для текста подчеркивание. Дело в том, что Web-обозреватели по умолчанию выводят гиперссылки подчеркнутыми, и подчеркнутый текст, не являющийся гиперссылкой, может обескуражить посетителя.
Атрибут стиля font-variant позволяет указать, как будут выглядеть строчные буквы шрифта:
font-variant: normal|small-caps|inherit
Значение small-caps задает такое поведение шрифта, когда его строчные буквы выглядят точно так же, как прописные, просто имеют меньший размер. Значение normal задает для шрифта обычные прописные буквы.
