Владимир Дронов - 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.

---

Листинг 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 задает для шрифта обычные прописные буквы.