| Меню сайта |
|
 |
| Реклама |
 |
|
|
 | |  |
|
Параметры шрифта и фона
|
|
Параметры, управляющие разрывом строк
CSS предлагает два атрибута стиля, позволяющие нам указать, как Web-обозревателю следует разбивать текст на строки.
Атрибут стиля white-space задает правила, которыми Web-обозреватель руководствуется при выводе текста. В частности, с его помощью мы можем изменить правила, установленные по умолчанию и рассмотренные нами ранее. Формат записи этого атрибута стиля:
white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit
Атрибут стиля white-space может иметь пять значений.
normal — последовательности пробелов преобразуются в один пробел, переводы строк также преобразуются в пробелы. Web-обозреватель сам разрывает текст на строки, чтобы вместить его в свое окно по ширине. Фактически это значение предписывает Web-обозревателю применять для вывода текста блочных элементов правила по умолчанию, описанные немного раньше.
pre — посвышеледовательности пробелов и переводы строк сохраняются; текст выводится точно в таком виде, в каком он записан в HTML-коде. Web-обозреватель сам не разрывает текст на строки. Фактически текст выводится так, словно он помещен в тег <pre> (текст фиксированного форматирования).</pre>
nowrap — последовательности пробелов преобразуются в один пробел, переводы строк также преобразуются в пробелы. Однако Web-обозреватель сам не разрывает текст на строки.
pre-wrap — последовательности пробелов и переводы строк сохраняются. Web-обозреватель может разорвать слишком длинные строки, чтобы избежать горизонтальной прокрутки.
pre-line — последовательности пробелов преобразуются в один пробел, переводы строк сохраняются. Web-обозреватель может разорвать слишком длинные строки, чтобы избежать горизонтальной прокрутки.
Чтобы читателям было проще выбрать нужное значение атрибута стиля white-space, автор свел все доступные для него значения в табл. 8.4
Вот стиль, переопределяющий тег <pre> так, чтобы при необходимости его содержимое разрывалось на строки:
pre { white-space: pre-wrap }
Атрибут стиля word-wrap применяется нечасто, но в некоторых случаях без него не обойтись. Он позволяет указать места, в которых Web-обозреватель может выполнить разрыв текста:
word-wrap: normal|break-word|inherit
Здесь доступны два значения.
normal — указывает Web-обозревателю, что он может разрывать текст на строки только по пробелам. Это обычное поведение Web-обозревателя.
break-word — разрешает Web-обозревателю выполнять разрыв текста на строки внутри слов. Это может пригодиться, если текст содержит много очень длинных слов, которые по ширине не помещаются в родительский элемент.
Пример:
p ( word-wrap: break-word }
Здесь мы разрешили Web-обозревателю выполнять разрыв текста на строки внутри слов в содержимом тегов <p> (т. е. в абзацах).
Параметры вертикального выравнивания
Иногда возникает ситуация, когда нужно сместить фрагмент по вертикали относительно текста, который его окружает, т. е. задать вертикальное выравнивание текста.
Атрибут стиля vertical-align как раз задает вертикальное выравнивание текста:
vertical-align: baseline|sub|super|top|text-top|middle|bottom|
text-bottom|<промежуток между базовыми линиями>|inherit
Aтрибут cтиля vertical-align принимает восемь значений:
baseline — задает выравнивание базовой линии фрагмента текста по базовой линии текста родительского элемента (это поведение по умолчанию). Базовой называется воображаемая линия, на которой располагается текст.
sub — выравнивает базовую линию фрагмента текста по базовой линии нижнего индекса родительского элемента.
super — выравнивает базовую линию фрагмента текста по базовой линии верхнего индекса родительского элемента.
top — выравнивает верхний край фрагмента текста по верхнему краю родительского элемента.
text-top — выравнивает верхний край фрагмента текста по верхнему краю текста родительского элемента.
middle — выравнивает центр фрагмента текста по центру родительского элемента.
bottom — выравнивает нижний край фрагмента текста по нижнему краю родительского элемента.
text-bottom — выравнивает нижний край фрагмента текста по нижнему краю текста родительского элемента.
Кроме того, мы можем указать для данного атрибута стиля абсолютное или относительное значение, задающее, насколько выше или ниже базовой линии текста родительского элемента должна находиться базовая линия фрагмента текста:
strong { vertical-align: super;
font-size: smaller }
Этот стиль переопределения тега <strong> задает для текста расположение, совпадающее с базовой линией верхнего индекса, и уменьшенный размер шрифта. Фактически с помощью этого стиля мы превращаем содержимое тега в верхний индекс <strong>.
Тот же атрибут стиля пригоден для выравнивания графических изображений, являющихся частью абзаца:
<p> Это картинка: <img style="vertical-align: text-bottom"
src="picture.png">.</p>
Данный HTML-код создает абзац с графическим изображением. Низ этого изображения будет выровнен по нижнему краю текста абзаца. Иными словами, изображение будет как бы возвышаться над текстом.
Скорее всего, для достижения нужного результата придется поэкспериментировать с различными значениями атрибута стиля vertical-align. Очень уж много у него возможных значений, и слишком разный они дают результат в различных случаях.
Параметры тени у текста
Параметры тени задает атрибут стиля text-shadow:
text-shadow: none | <цвет> <горизонтальное смещение>
<вертикальное смещение> [<радиус размытия>]
Значение none (установленное по умолчанию) убирает тень у текста. Цвет тени задается в виде RGB-кода или именованного значения.
Горизонтальное смещение тени задается в любой единице измерения, поддерживаемой CSS (см. табл. 8.1). Если задано положительное смещение, тень будет расположена правее текста, если отрицательное — левее. Можно также задать и нулевое смещение; тогда тень будет располагаться прямо под текстом. Нулевое смещение имеет смысл только в том случае, если для тени задано размытие.
Вертикальное смещение тени также задается в любой единице измерения, поддерживаемой CSS. Если задано положительное смещение, тень будет расположена ниже текста, если отрицательное — выше. Можно также задать и нулевое смещение; тогда тень будет располагаться прямо под текстом.
Радиус размытия тени также задается в любой единице измерения, поддерживаемой CSS. Если радиус размытия не указан, его значение предполагается равным нулю; в таком случае тень не будет иметь эффекта размытия.
Пример:
h1 { text-shadow: black 1mm 1mm 1px }
Здесь мы задали для заголовков первого уровня (тега <h1>) тень, расположенную правее и ниже текста на 1 мм и имеющую радиус размытия 1 пиксел.
Параметры курсора
CSS предоставляет нам одну очень интересную возможность — указание вида курсора мыши, который он примет при наведении на данный элемент Web-страницы. Это может быть полезно при создании специальных эффектов. Атрибут стиля cursor устанавливает форму курсора мыши при наведении его на данный элемент Web-страницы. Данный атрибут можно применить к любому элементу Web-страницы, как блочному, так и встроенному:
cursor: auto|default|none|context-menu|help|pointer|progress|wait|cell|crosshair|text|vertical-text|alias|copy|move|no-drop|not-allowed|e-resize|n-resize|ne-resize|nw-resize|s-resize|se-resize|sw-resize|w-resize|ew-resize|ns-resize|nesw-resize|nwse-resize|col-resize|row-resize|all-scroll|inherit
Как видим, возможных значений у атрибута cursor очень много, к тому же многие из них на практике применяются крайне редко. Поэтому мы рассмотрим только самые необходимые.
auto — Web-обозреватель сам управляет формой курсора мыши. Это обычное поведение.
default — курсор по умолчанию, обычно стрелка.
none — курсор мыши вообще не отображается.
help — стрелка с вопросительным знаком.
pointer — "указующий перст". Обычное поведение при наведении курсора на ссылку.
progress — стрелка с небольшими песочными часами - значит, что работает фоновый процесс.
wait — песочные часы. Обозначает, что в данный момент Web-обозреватель занят.
text — текстовый курсор. Обычное поведение при наведении курсора на фрагмент текста.
Полный список значений атрибута стиля cursor и описание соответствующей им формы курсора мыши вы можете найти на Web-странице https://developer.mozilla.org/en/CSS/cursor. Там все просто и наглядно, так что не ошибетесь. Вот пример задания курсора мыши в виде "указующего перста" для пунктов списка, формирующего только что созданную полосу навигации:
#navbar li { cursor: pointer }
Что дальше? В настоящее время мы разобрались с атрибутами стиля, задающими параметры абзацев, списков и отображения элементов Web-страницы. Их немного, но при должном применении они могут заметно улучшить наши Web-творения.
Далее мы познакомимся с блочными контейнерами — "коллегами" встроенных контейнеров. Мы выясним, как можно расположить их на Web-странице в нужном нам порядке и какие атрибуты стиля CSS для этого следует применять. Блочные контейнеры — чрезвычайно мощный инструмент, и мы уделим им много времени. А еще лучше - заняться - Web-дизайном!
 
|
|
|
|
|
| |
 | |  |
|
| Заработай сейчас! |
 |
|
| Навигация по сайту |
|
|
| Поиск по сайту |
|
|
|
