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

---

Скорее всего, для достижения нужного результата придется поэкспериментировать с различными значениями атрибута стиля vertical-align. Очень уж много у него возможных значений, и слишком разный они дают результат в различных случаях. Но ведь Web-дизайнеру не привыкать к экспериментам!..

Параметры тени у текста

Любителям все украшать стандарт CSS 3 предлагает одну очень интересную возможность — создание тени у текста. При умеренном употреблении она может заметно оживить Web-страницу.

Параметры тени задает атрибут стиля text-shadow:

text-shadow: none | <цвет> <горизонтальное смещение><вертикальное смещение> [<радиус размытия>]

Значение none (установленное по умолчанию) убирает тень у текста.

Цвет тени задается в виде RGB-кода или именованного значения.

Горизонтальное смещение тени задается в любой единице измерения, поддерживаемой CSS (см. табл. 8.1). Если задано положительное смещение, тень будет расположена правее текста, если отрицательное — левее. Можно также задать и нулевое смещение; тогда тень будет располагаться прямо под текстом. Нулевое смещение имеет смысл только в том случае, если для тени задано размытие.

Вертикальное смещение тени также задается в любой единице измерения, поддерживаемой CSS. Если задано положительное смещение, тень будет расположена ниже текста, если отрицательное — выше. Можно также задать и нулевое смещение; тогда тень будет располагаться прямо под текстом.

Радиус размытия тени также задается в любой единице измерения, поддерживаемой CSS. Если радиус размытия не указан, его значение предполагается равным нулю; в таком случае тень не будет иметь эффекта размытия.

Пример:

H1 { text-shadow: black 1mm 1mm 1px }

Здесь мы задали для заголовков первого уровня (тега <H1>) тень, расположенную правее и ниже текста на 1 мм и имеющую радиус размытия 1 пиксел.

Параметры фона

Закончив с параметрами текста, займемся фоном. Фон можно указать для фрагмента текста (встроенного элемента), блочного элемента, таблицы, ее ячейки и всей Web-страницы. Хорошо подобранный фон может оживить Web-страницу и выделить отдельные ее элементы.

ВНИМАНИЕ!

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

Атрибут стиля background-color служит для задания цвета фона:

background-color: transparent|<цвет>|inherit

Цвет можно задать в виде RGB-кода или имени. Значение transparent убирает фон совсем; тогда элемент Web-страницы получит "прозрачный" фон. По умолчанию фон у элементов Web-страницы отсутствует, а фон самой Web-страницы задает Web-обозреватель.

Пример:

BODY { color: white; background-color: black }

Здесь мы задали для всей Web-страницы черный фон и белый текст.

Атрибут стиля background-image позволяет назначить в качестве фона графическое изображение (фоновое изображение):

background-image: none|url(<интернет-адрес файла изображения>);

Обратим внимание, в каком виде задается интернет-адрес файла с фоновым изображением: его заключают в скобки, а перед ними ставят символы url:

TABLE.bgr { background-image: url("/table_background.png") }

Значение none убирает графический фон.

Графический фон выводится поверх обычного фона, заданного нами с помощью атрибута стиля background-color. И, если фоновое изображение содержит "прозрачные" фрагменты (такую возможность поддерживают форматы GIF и PNG), этот фон будет "просвечивать" сквозь них.

Пример:

TABLE.yellow { background-color: yellow; background-image: url("/yellow_background.png") }

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

Если фоновое изображение меньше, чем элемент Web-страницы (или сама Web- страница), для которого оно задано, Web-обозреватель будет повторять это изображение, пока не "замостит" им весь элемент. Параметры этого повторения задает атрибут стиля background-repeat:

background-repeat: no-repeat|repeat|repeat-x|repeat-y|inherit

Здесь доступны четыре значения.

— no-repeat — фоновое изображение не будет повторяться никогда; в этом случае часть фона элемента Web-страницы останется не заполненной им.

— repeat — фоновое изображение будет повторяться по горизонтали и вертикали (обычное поведение).

— repeat-x — фоновое изображение будет повторяться только по горизонтали.

— repeat-y — фоновое изображение будет повторяться только по вертикали.

С помощью атрибута стиля background-position можно указать позицию фонового изображения относительно элемента Web-страницы, для которого оно назначено:

background-position: <горизонтальная позиция> [<вертикальная позиция>] | inherit;

Горизонтальная позиция фонового изображения задается в следующем формате:

<числовое значение>|left|center|right

Числовое значение указывает местоположение фонового изображения в элементе Web-страницы по горизонтали и может быть задано с применением любой из поддерживаемых CSS единиц измерения (см. табл. 8.1). Также можно указать следующие значения:

— left — фоновое изображение прижимается к левому краю элемента Web-страницы (это обычное поведение);

— center — располагается по центру;

— right — прижимается к правому краю.

Формат задания вертикальной позиции фонового изображения таков:

<числовое значение>|top|center|bottom

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

Также возможны следующие значения:

— top — фоновое изображение прижимается к верхнему краю элемента Web-страницы (это обычное поведение);

— center — располагается по центру;

— bottom — прижимается к нижнему краю.

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

Пример:

TABLE.bgr (background-position: 1cm top }

Этот стиль помещает фоновое изображение на расстоянии 1 см от левого края элемента Web-страницы и прижимает его к нижнему краю данного элемента. А вот стиль, прижимающий фоновое изображение к правому краю элемента Web-страницы и располагающий его в центре данного элемента по вертикали:

TABLE.bgr (background-position: right }

Когда мы прокручиваем содержимое Web-страницы в окне Web-обозревателя, вместе с ней прокручивается и фоновое изображение (если оно есть). Стандарт CSS предлагает забавную возможность — запрет прокрутки графического фона Web- страницы и фиксация его на месте. Фиксацией фона управляет атрибут стиля background-attachment:

background-attachment: scroll|fixed;

Значение scroll заставляет Web-обозреватель прокручивать фон вместе с содержимым Web-страницы (это поведение по умолчанию). Значение fixed фиксирует фон на месте, и он не будет прокручиваться.

НА ЗАМЕТКУ

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

На этом мы пока закончим с атрибутами стиля CSS. Рассмотрим новую разновидность элементов Web-страниц, с которой еще не сталкивались. Это…

Контейнеры. Встроенные контейнеры

В самом начале данной главы мы узнали, что все рассмотренные нами атрибуты стилей можно указывать для любых элементов Web-страниц: и блочных, и встроенных. Значит, мы можем задать размер шрифта и для абзаца (блочного тега <P>), и для важного текста (встроенных тегов <STRONG> и <EM>). Это очень полезная возможность.

Но что делать, если нам понадобилось применить какой-либо стиль к произвольному фрагменту текста, не помечая его никаким тегом? Например, нам нужно выделить полужирным шрифтом фрагмент абзаца, но мы не хотим заключать его в тег

<STRONG>. Может ли CSS нам в этом помочь?

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

Контейнер — элемент Web-страницы, предназначенный только для выделения какого-либо ее фрагмента. Таким фрагментом может быть часть блочного элемента (абзаца, заголовка, цитаты, текста фиксированного форматирования и др.), блочный элемент или сразу несколько блочных элементов. Web-обозреватель никак не выделяет контейнер на Web-странице.

Контейнер служит двум целям. Во-первых, с его помощью мы можем привязать к определенному элементу или элементам Web-страницы нужный стиль; для этого достаточно заключить данный элемент или элементы в контейнер и привязать стиль к нему. Во-вторых, он может обеспечивать привязку поведения к элементу или элементам Web-страницы; выполняется это таким же образом, что и в случае стиля. (О поведении Web-страницы разговор пойдет в части III.)