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

Дронов Владимир

baseline — задает выравнивание базовой линии фрагмента текста по базовой линии текста родительского элемента (это поведение по умолчанию). Базовой называется воображаемая линия, на которой располагается текст.

— sub — выравнивает базовую линию фрагмента текста по базовой линии нижнего индекса родительского элемента.

— super — выравнивает базовую линию фрагмента текста по базовой линии верхнего индекса родительского элемента.

— top — выравнивает верхний край фрагмента текста

по верхнему краю родительского элемента.

— text-top — выравнивает верхний край фрагмента текста по верхнему краю текста родительского элемента.

— middle — выравнивает центр фрагмента текста по центру родительского элемента.

— bottom — выравнивает нижний край фрагмента текста по нижнему краю родительского элемента.

— text-bottom — выравнивает нижний край фрагмента текста по нижнему краю текста родительского элемента.

Кроме того, мы можем указать для данного атрибута стиля абсолютное или относительное значение, задающее, насколько выше или ниже базовой линии текста родительского элемента должна находиться базовая линия фрагмента текста:

STRONG { vertical-align: super; font-size: smaller }

Этот стиль переопределения тега <STRONG> задает для текста расположение, совпадающее с базовой линией верхнего индекса, и уменьшенный размер шрифта. Фактически с помощью этого стиля мы превращаем содержимое тега в верхний индекс

<STRONG>.

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

Это картинка: <IMG STYLE="vertical-align: text-bottom" SRC="picture.png">.

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

Скорее всего, для достижения нужного результата придется поэкспериментировать с различными значениями атрибута стиля 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 убирает графический фон.