Оформление текста в CSS

В этой главе:

1. Цвет
2. Фон
3. Шрифты
4. Оформление текста
5. Расстояние между буквами, словами и строками
6. Управление пробелами и переносом строк
7. Выравнивание и отступы

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

Ряд свойств из этого раздела регулярно упоминались выше, в частности, цвета переднего плана и фона, а так же ряд свойств font. В этой главе мы подробно рассмотрим эти и ряд иных, ранее не упоминавшихся свойств, предназначенных для визуального оформления страниц.

Цвет

Для указания цвета переднего плана в CSS используется свойство color:

body {color: white}

С самим свойством все просто, гораздо интереснее обстоят дела с его значениями. Дело в том, что в CSS предусмотрено целых 5(!) вариантов для определения значения цвета: один при помощи ключевого слова, два в шестнадцатеричной нотации, и еще два – при помощи функции rgb. Что касается первых способов, то все, что было сказано про цвета в HTML, верно и для CSS: они задаются точно теми же ключевыми словами и точно в том же порядке следуют основные цвета в шестнадцатеричном определении (RGB или RRGGBB).

До сих пор мы в примерах преимущественно использовали назначение цветов при помощи ключевых слов. Это удобно для простых цветов (red, green, gray и т.д.), однако вряд ли вы будете на практике использовать такие обозначения, как mediumspringgreen или lightgoldenrodyellow (см. файл Part_1\colors.html). Кроме того, использование числовых значений позволяет добиться большей гибкости при подборе цвета. В XHTML применяются шестнадцатеричные значения, они же поддерживаются и в CSS:

color: #f00; color: #ff0000;

В обоих случаях это будет полностью насыщенный красный цвет (FF – максимальная интенсивность красного канала, соответствующая 8 битам). Если вы – программист, то такое представление будет для вас привычным и достаточно удобным. Однако для других категорий разработчиков web-страниц шестнадцатеричная система счисления вовсе не является привычной, поэтому в CSS и появилась функция rgb, позволяющая указывать интенсивность составляющих цвета в десятичной нотации (от 0 до 255) и в процентах:

color: rgb(255, 0, 0); color: rgb(100%, 0%, 0%);

Здесь мы вновь определили красный цвет: в функции rgb первое значение определяет интенсивность красного цвета, второе – зеленого, а третье – синего. Таким образом, для составного цвета следует использовать два или все три значения:

em {color: rgb(20%, 40%, 60%);}

Подобные значения цвета используются не только для указания цвета переднего плана, но и во всех других случаях, где требуется определение цвета. В качестве примера из уже рассмотренных свойств можно привести border (вернее, border-color), а из не рассмотренных – фон (background), о котором речь далее и пойдет.

Свойства color

Значение по умолчанию: зависит от браузера (как правило, черный).
Наследуемые значения: да.
Применяется: ко всем элементам.
Совместимость: все.

Фон

В качестве фона элемента (поверхности, на которой он отображается) можно указывать цвет или изображение. Всего для определения фона в CSS предусмотрено 5 уникальных свойств: background-color, background-image, background-repeat, background-attachment и background-position, а так же 1 сокращенное – background.

В свете уже рассмотренного свойства color, свойство background-color является самым простым – его использование аналогично, с той лишь разницей, что вместо цвета переднего плана (скажем, текста) изменится цвет фона:

p {background-color: silver;}

Здесь мы определили серебристый (светло-серый) цвет для абзацев. Собственно, мы уже не раз применяли назначение цвета фона, правда, при этом использовалось сокращенное свойство background:

p {background: silver;}

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

Прежде, чем прейти к остальным свойствам фона, связанным с изображениями, упомянем еще одно, специальное, значение, свойства background-color – transparent (прозрачность), поскольку именно оно используется по умолчанию.

Теперь обратимся к рисункам. За назначение рисунка фоновым изображением отвечает свойство background-image, в качестве значения которого может быть либо none (нет рисунка), либо адрес (URI) файла с изображением:

body {background-image: url("tile.png");}

В качестве фонового рисунка может использоваться графический файл любого формата из поддерживаемых браузером, в частности JPEG, GIF или PNG.

Следует сразу отметить, что использование рисунка в качестве фона отнюдь не исключает назначения цвета заднего плана: во-первых, сам рисунок может быть частично прозрачным, а во-вторых, он может занимать не всю область элемента (скажем, если используются свойство background-repeat). Более того, если рисунок по каким-либо причинам не прогрузится, то может быть нарушено восприятие страницы. Например, если рисунок темный, а текст – белый, то в случае отсутствия рисунка пользователь увидит просто белую страницу. Так что дополним пример с определением фонового рисунка еще и указанием цвета:

body {background-image: url("tile.png"); background-color: #ffeacf; }

Три оставшихся свойства для определения фона, имеющиеся в CSS, призваны управлять размещением фонового рисунка и способом его вывода. Так, при помощи свойства background-repeat определяют, должно ли изображение дублироваться, и если да – то каким образом это будет осуществляться. Всего для данного свойства определено 4 возможных значения:

• repeat. Изображение дублируется по вертикали по горизонтали, заполняя все отведенное пространство в виде мозаики (принято по умолчанию);
• repeat-x. Изображение дублируется только по горизонтали;
• repeat-y. Изображение дублируется только по вертикали.
• no-repeat. Изображение не дублируется – отображается только одна его копия.

Поскольку данное свойство имеет смысл только в тех случаях, когда определено само фоновое изображение, то оно всегда используется в паре с background-image:

body { background-image: url("tile.png"); background-repeat: repeat-x; background-color: #ffeacf; }

Другое свойство фона, используемое совместно с background-image – это background-attachment. Оно может принимать всего 2 значения – принятое по умолчанию scroll, при котором изображение прокручивается вместе с содержимым, и fixed, при котором фоновый рисунок становится привязанным к окну просмотра. Таким образом, если мы не хотим, чтобы фоновый рисунок прокручивался вместе с содержимым страницы, а оставался на одном и том же месте относительно окна браузера, то дополним пример таким образом:

body { background-image: url("tile.png"); background-repeat: repeat-x; background-attachment: fixed; background-color: #ffeacf; }

В результате мы получили фон, состоящий из повторяющегося по горизонтали картинки, постоянно находящийся на одном и том же месте вверху страницы (см. файл colors.html). Отметим, что если бы был указан повтор по вертикали (repeat-y), то рисунок расположился бы по левой границе окна. Таким образом, можно сделать вывод, что отправной точкой вывода изображения является верхний левый угол. Если же требуется изменить начальную позицию вывода изображения (или собственно расположение фоновой картинки, если она не должна повторяться), то следует прибегнуть к такому свойству, как background-position. Оно может принимать либо абсолютные значения или значения в процентах, при этом за точку отсчета принимается верхний левый угол блока, либо значения, задаваемые ключевыми словами left, right, top, bottom и center:

div {background-image: url("tile.png"); background-position: top right;}

Здесь мы задали вертикальное выравнивание фонового рисунка по верху и горизонтальное выравнивание правому краю. Если указать только одно значение (например, right, или 25%), то оно будет определять выравнивание по горизонтали, а вертикальное выравнивание примет значение 50% (center). Исключение составляют только значения top и bottom: если указать только одно из этих значений, то в center будет установлено выравнивание по вертикали.

ПРИМЕЧАНИЕ
Если фоновое изображение фиксировано в окне просмотра (т.е. если свойство background-attachment установлено в значение fixed), то смещения определяются относительно окна просмотра, а не относительно области элемента.

Дополнительные примеры с фоновыми изображениями можно посмотреть в файле background.html.

Свойства color

Значение по умолчанию: background-color – transparent; background-image – none; background-repeat – repeat; background-attachment – scroll; background-position – 0% 0% (top left). Наследуемые значения: нет. Применяется: ко всем элементам. Совместимость: все.

Шрифты

Когда разрабатывали CSS 1, у составителей стандарта была задача, прежде всего, создать замену HTML-элементу FONT, а заодно сделать ненужными элементы B и I. В результате было определено 4 свойства, при помощи которых можно задать гарнитуру шрифта, его начертание, размер и насыщенность. Заодно было добавлено 5-е свойство – font-variant для создания эффекта «малых прописных» букв (small-caps). При разработке CSS 2 была предпринята попытка приблизить предоставляемые таблицами стилей средства к возможностям настольных издательских систем. В частности, были введены свойства, отвечающие за горизонтальное масштабирование (font-stretch) и для подбора субъективного размера шрифта по соотношению его перспективы (font-size-adjust). Но этим не ограничились, и ввели специальное at-правило (директиву) @font, при помощи которого можно было определять сложные правила сопоставления шрифтов и даже загружать специальные шрифты из Web. При выходе Internet Explorer 4 Microsoft даже продекларировала поддержку загружаемых шрифтов, однако, дальше дело так и не пошло, в результате чего в CSS 2.1 все «вернулось на круги своя», и мы вновь имеем те же самые 5 свойств, что и в CSS 1. Разница, пожалуй, состоит лишь в том, что если «во времена CSS 1» свойство font-variant на практике не поддерживалось, то теперь все обстоит гораздо лучше: браузер MSIE, начиная с версии 5.0 воспринимают это свойство, а начиная с версии 6.0 – даже правильно отображает эффект. Браузеры Mozilla и Opera так же корректно показывают эффект Малых Прописных букв.

Раз уж мы начали обсуждение шрифтов на примере свойства font-variant, то продолжим его описание. Итак, это свойство может принимать 2 значения: normal (принято по умолчанию) и small-caps, задающее шрифт с капителью. Впрочем, поскольку такие шрифты – редкость, то, в типичном случае, строчные буквы просто заменяются уменьшенными прописными.

Теперь обратимся к оставшимся, более прозаичным (и часто применяемым) свойствам шрифтов. Начнем со свойства font-family, отвечающего за гарнитуру шрифта. Оно задает список имен гарнитур шрифтов и (или) имен общедоступных гарнитур в порядке их приоритета. Для решения проблемы, связанной с отсутствием в отдельных шрифтах некоторых символов или недоступностью самого шрифта на компьютере посетителя, это свойство позволяет создавать список шрифтов одинакового стиля и размеров, которые последовательно проверялись бы на наличие необходимого символа. Такой список называется набором шрифтов. В простейшем случае он состоит из наименования какого-либо шрифта и названия его семейства:

body {font-family: "Futura Lt BT", sans-serif;}

В данном случае мы указали гарнитуру «Futura Lt BT» в качестве основного шрифта и семейство шрифтов sans-serif для символов, отсутствующих в шрифте Futura Lt BT. Обратите внимание, на то, что значения свойства в данном случае разделены не пробелом, а запятой, что указывает на альтернативу. Поскольку данный шрифт является латинским, то проверить на практике действие списка шрифтов не составит труда: достаточно написать в документе смешанный русско-английский текст. В результате английские символы будут выведены гарнитурой Futura Lt BT, а символы кириллицы и Unicode – первой попавшейся гарнитурой типа sans-serif, каковой для Windows является Arial (рис. 3.14).

Рис. 3.14. Подстановка шрифтов и эффект малых прописных

Если бы мы не ограничились названием лишь одной гарнитуры, то поиск производился бы последовательно в наборе символов каждого шрифта. Например, если после экзотического Futura Lt BT указать более «приземленный» шрифт Verdana, имеющего полный набор символов (по крайней мере, в варианте для Windows XP), то русские символы, как и символы Unicode были бы выведены именно им:

body {font-family: "Futura Lt BT", Verdana, sans-serif;}

ВНИМАНИЕ
При всем это следует сделать одно важное замечание: браузер Microsoft не поддерживает замещение символов, и, следовательно, применяет первый же найденный шрифт сразу. Если при этом каких-либо символов в нем не хватает, то для подстановки используется шрифт, принятый по умолчанию (в типичном случае это будет Times New Roman).

Наконец, если в системе вообще не обнаружится шрифт Futura, то весь текст будет выведен гарнитурой Verdana, а если не будет и ее – то любым имеющимся шрифтом без засечек (т.е. из семейства sans-serif). Следует сразу отметить, что всего в CSS предусмотрено 5 семейств шрифтов:

• serif. Антиква, или шрифты с засечками. Идеально подходят для больших объемов текста. Наиболее известны такие гарнитуры этого типа, как Times, Book Antiqua, Century, Garamond;
• sans-serif. Гротеск, рубленый шрифт без засечек. Долго читать такой текст тяжело, поэтому обычно его используют для заголовков или рекламных объявлений. Чаще всего встречаются гарнитуры Arial, Verdana, Century Gothic, Tahoma;
• cursive. Курсивы – это специальные наклонные шрифты, их не следует путать с наклонным начертанием обычных шрифтов! Буквы курсива частично или полностью соединены друг с другом, в результате чего они напоминают больше рукописный, нежели печатный текст. Из известных гарнитур можно привести такие, как Poetica, Zapf-Chancery, Architekt, Corsiva. Правда, ни одной подобной кириллической гарнитуры нет в стандартной поставке Windows;
• fantasy. Аллегорические, или декоративные шрифты, наиболее известным из которых, пожалуй, являются Comic Sans MS и Allegro, при этом первый иногда попадает в категорию курсивных;
• monospace. Моноширинные шрифты отличаются ото всех других исключительно тем, что все символы у них имеют одинаковую ширину. Они часто используются для отображения примеров компьютерного кода. Типичные представители этого семейства – Courier, Terminal и Lucida Console.

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

Теперь перейдем к свойству font-style, призванному избавить авторов web-страниц от применения элемента I. Это свойство может принимать 3 значения: normal (обычное начертание), italic (курсивное) и oblique (наклонное), причем два последних на практике чаще всего обозначают одно и то же, поскольку если для гарнитур типа антиквы, как правило, используется только курсивный вариант, а для гротеска – наклонный.

Свойство font-weight призвано бороться с засильем элементов B в исходном тексте страницы. Свойство font-weight чаще всего применяется со значениями normal (обычный) и bold (полужирный). Как обычно, свойство CSS имеет большую гибкость по сравнению со средствами HTML. Прежде всего – это возможность изменять вес шрифта относительно унаследованного, для чего предусмотрены значения bolder и lighter, делающие шрифт жирнее или тоньше соответственно. Другая особенность – указание веса шрифта при помощи числового значения от 100 до 900 с шагом 100. При этом за нормальное начертание принимается 400, а за полужирное – 700. Соответственно, если у гарнитуры имеется средний вариант (Medium), то при значении 500 текст будет выведен именно этим вариантом, а если в качестве веса указано 800, и есть вариант гарнитуры Heavy, то будет применена именно она.

Наконец, рассмотрим оставшееся свойство – font-size. Оно отвечает за назначение размера шрифта. В качестве значений для этого свойства можно указывать как абсолютные, так и относительные значения, а так же значения в процентах. Кроме того, предусмотрен ряд ключевых слов для задания размеров, как абсолютных, так и относительных, которые, при всем этом, следует использовать (если вообще следует!) с осторожностью. Дело в том, что от редакции к редакции CSS значения масштабирования изменяются. Так, в CSS 1 при переходе между двумя соседними значениями было принято использовать значение 1,5, в CSS 2 его снизили до 1,2, а в CSS 2.1 была введена специальная таблица коэффициентов масштабирования. Тем не менее, мы рассмотрим все допустимые ключевые слова, обратившись к таблице 3.7.

Таблица 3.7. Коэффициенты масштабирования. В скобках даны примерные размеры кегля.

Значение	Коэффициент CSS 1	Коэффициент CSS 2	Коэффициент CSS 2.1
xx-small	8/27 (4)	125/216 (7)	3/5 (7)
x-small	4/9 (5)	25/36 (8)	3/4 (9)
small	2/3 (8)	5/6 (10)	8/9 (11)
medium	1 (12)	1 (12)	1 (12)
large	3/2 (18)	6/5 (14)	6/5 (14)
x-large	9/4 (27)	36/25 (17)	3/2 (18)
xx-large	27/8 (40)	216/125 (21)	2/1 (24)

Помимо приведенных абсолютных значений, можно указывать относительные – smaller и larger. При этом итоговое значение размера по правилам CSS 2.1 должно рассчитываться исходя из того, какой из приведенных в таблице размеров кегля является ближайшим для рассматриваемого элемента.

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

body {font: 11pt bold italic;}

Однако для него предусмотрены и специальные значения, ссылающиеся на системные настройки ПК пользователя. Это caption, icon, menu, message-box, small-caption и status-bar. Означают они оформление шрифта у соответствующего элемента интерфейса – заголовков кнопок и прочих элементов управления для caption, подписей пиктограмм – для icon и т.д. Такие свойства нельзя комбинировать с другими, поскольку все необходимые значения (гарнитура, размер и начертание) извлекаются из настроек операционной системы. Подробнее о системных шрифтах мы поговорим в главе, посвященной взаимодействию с операционной системой.

Свойства font

Значение по умолчанию: font-family – как правило, Times; font-style, font-variant и font-weight – normal; font-size – medium (кроме элементов заголовков).
Наследуемые значения: да.
Применяется: ко всем элементам.
Совместимость: все.

Оформление текста

Если группа свойств font позволяет избавиться от элементов B и I, то «для борьбы» с элементами S и U, а заодно и BLINK, используют свойство text-decoration. Оно может иметь значение none, принятое по умолчанию для большинства элементов (кроме ссылок), либо одно или несколько из следующих возможных значений:

• underline. Подчеркнутый текст;
• overline. «Подчеркнутый сверху», т.е. линия располагается над текстом. Это значение не поддерживается MSIE 4 и Netscape 4;
• line-through. «Зачеркнутый», т.е. линия перечеркивает текст;
• blink. Текст мигает, т.е. становится то видимым, то невидимым. Это значение не поддерживается MSIE.

Как видно, в CSS вновь предлагается несколько больше, чем в HTML – имеется возможность делать линии над текстом:

span.special {text-decoration: overline;}

В CSS 2 так же было объявлено такое свойство, как text-shadow, предназначенное для создания эффектов затенения. Но, как и в случае со шрифтами (font-stretch и иже с ним) по причине слишком сложной реализации в программах просмотра, данное свойство было исключено из CSS 2.1. Жалеть об этом не следует, поскольку все равно ни один из производителей браузеров даже не планировал вводить поддержку теней.

Таким образом, за текстовое оформление, в дополнение к свойствам группы font, отвечает еще и свойство text-decoration. На самом деле, есть целая группа свойств text, однако, в отличие от других (взять тот же font), у него нет короткого синтаксиса, хотя бы по той причине, что количество преобразований и эффектов, доступных для текста, гораздо больше, чем для шрифта.

В частности, в CSS уровня 2 имеется специальное свойство, отвечающее за преобразование регистра символов – text-transform. Оно может иметь такие значения, как uppercase, lowercase и capitalize. Первые два значения назначают преобразование символов в верхний и в нижний регистр соответственно, а последнее – делает первые буквы слов прописными, не влияя на остальные. Наконец, еще одно значение, none, никак не влияет на текст и является принятым по умолчанию.

Допустим, нам надо сделать так, чтобы все слова текста заголовков всегда начинались с заглавных букв за исключением тех, что имеют класс «c1», аббревиатуры целиком состояли бы из заглавных, а определения терминов – наоборот, выводились строчными. В таком случае у нас получится такая вот таблица стилей:

H1 {text-transform: capitalize} H1.c1{text-transform: none} ABBR {text-transform: uppercase} DFN {text-transform: lowercase}

Если теперь применить такие стили к приведенному ниже HTML-коду, то можно будет увидеть изменения в действии (рис. 3.15):

<h1>заголовок, все слова которого начинаются с заглавных БУКВ</h1> <abbr>Все БУКВЫ - заглавные</abbr> <h1 class="c1">Этот заголовок будет выведен так, как есть</h1> <dfn>Все БУКВЫ - строчные</dfn>

Рис. 3.15. Трансформация текста

ПРИМЕЧАНИЕ
Возможно, действие свойства text-transform вам покажется похожим на font-variant, однако глобальное их отличие сводится к тому, что если свойство font-variant все-таки управляет типом шрифта (пусть на практике и происходит лишь подстановка с масштабированием символов – сути дела это не меняет), то text-transform действительно заменяет символы при построении документа.

Свойства text

Значение по умолчанию: none.
Наследуемые значения: text-decoration – нет, однако установленное форматирование применяется к дочерним элементам; text-transform – да.
Применяется: ко всем элементам.
Совместимость: text-decoration – все; text-transform – все.

Расстояние между буквами, словами и строками

В CSS имеются еще несколько свойств, отвечающих за текстовое оформление, хотя при этом они и не начинаются с префикса text-. В частности, речь идет о таких свойствах, как letter-spacing и word-spacing, отвечающих за изменение интервалов между символами в слове и между самими словами, соответственно.

Оба этих свойства по умолчанию имеют значение normal, означающее, что расстояние будет таким, как принято для применяемого шрифта. Если же указать какое-либо иное значение (допустимо указывать любое значение типа длины), то расстояние будет увеличено на указанную величину. Например, чтобы акцентированный текст в документе выводился разреженным шрифтом, достаточно создать такое правило:

em {letter-spacing: 0.2em;}

Таким образом, мы увеличили расстояние между символами на 20% от размера используемого шрифта. Поскольку пробел – тоже символ, то и расстояние между словами увеличится на такую же величину. Если же требуется увеличить только расстояние между словами, то следует использовать свойство word-spacing:

h3 {word-spacing: 15px}

Таким образом, расстояние между словами будет увеличено на 15 пикселей.

Следует отметить, что значения могут быть и отрицательное – при этом расстояние (между словами или символами) будет не увеличиваться, а уменьшаться. Разумеется, при этом надо быть особенно осторожным, так как даже слегка сжатый текст плохо читается, а уж если буквы начнут накладываться одна на другую, то оформленную подобным образом надпись вряд ли кто-нибудь вообще прочитает.

Примеры установки интервалов можно посмотреть в файле text.html. Если же вас заинтересовал вопрос, как изменить межстрочный интервал, то для этого в CSS предусмотрено специальное свойство line-height. Подобно только что рассмотренным свойствам, оно имеет стандартное значение normal, которое так же может варьироваться в зависимости от контекста (и настроек ОС или браузера), но, как правило, равняется 1,2em. Минимально допустимое значение, при котором строки текста гарантированно не будет наплывать друг на друга – это 1em. Если же установить значение, превышающее 1,5em, (т.е. «полуторный интервал») скажем, для текста абзаца, то вид получится слишком «жидким». Например, ниже задано форматирование абзаца класса dbl с двойным интервалом:

p.dbl {line-height: 2em}

В отличие от letter-spacing и word-spacing, в качестве значений для line-height можно указывать процентные отношения. При этом за 100% принимается размер шрифта.

ВНИМАНИЕ
Следует отличать свойство высоты строк и свойства межблочных интервалов. Так, для решения типичной «проблемы», с которой часто сталкиваются начинающие web-разработчики, – управления интервалом между абзацами, следует использовать свойство margin (а конкретнее – margin-top и margin-bottom).

Свойства letter-spacing, word-spacing и line-height

Значение по умолчанию: normal.
Наследуемые значения: да.
Применяется: ко всем элементам.
Совместимость: все.

Управление пробелами и переносом строк

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

Рис. 3.16. Режим отображения символов пробела, табуляции и обрыва строки в LightPad

Как известно, браузер игнорирует пустое пространство, включая обрывы строк, сводя все к единственному пробелу. Единственное исключение – элемент PRE, который ведет себя иначе: браузер выводит его содержимое точно так же, как оно набрано в исходном файле. Именно поэтому значение свойства white-space, заставляющее браузер выводить содержимое любого элемента, к которому было применено такое правило, называется pre:

code.listing {white-space: pre;}

В данном случае мы определили, что листинги, выводимые в рамках контейнеров CODE с классом «listing», будут отображаться точно так же, как в тексте HTML (см., например, файл Part_2\Text\preformatted.html).

Во всех остальных случаях используется значение normal, при котором пробелы и переносы строк игнорируются. Исключение составляет, пожалуй, элемент TD с устаревшим атрибутом nowrap: при этом не только игнорируются пробелы, но и запрещается какой-либо перенос строк. По аналогии с предыдущим случаем, значение свойства white-space, задающее подобное поведение в CSS – это nowrap:

H1 {white-space: nowrap;}

Здесь мы задали правило, по которому заголовки первого уровня не будут разбиваться на несколько строк, даже если не умещаются по ширине в окно браузера (что, на самом деле, чревато появлением горизонтальной прокрутки, как можно увидеть на примере файла wrap.html).

Помимо рассмотренных значений, в CSS 2.1 были добавлены еще 2 – pre-wrap и pre-line. Первое аналогично pre за тем исключением, что не умещающиеся в отведенный блок строки (скажем, слишком длинные для того, чтобы поместиться в окне браузера), будут переноситься по границе этой самой отведенной области. А значение pre-line, с, точки зрения переноса строк аналогично pre-wrap, но при этом игнорирует пустое пространство. К сожалению, реализация обоих новых значений в браузерах, на момент написания этой книги еще не осуществлена, единственное исключение – Mozilla, эмулирующая режим pre-wrap при помощи собственного расширения -moz-pre-wrap.

Свойста white-space

Значение по умолчанию: normal (кроме элемента PRE).
Наследуемые значения: да.
Применяется: ко всем элементам.
Совместимость: все.

Выравнивание и отступы

В завершение темы манипуляций с текстом, следует уделить внимание таким свойствам, как text-indent, управляющим отступом первой строки блока («красной строки»), и, конечно же, text-align, позволяющим выравнивать текст по горизонтали.

Начнем с отступов – свойства text-indent. Оно определяет отступ первой строки теста в блоке. Выражаясь более точно, оно определяет отступ первого блока, который входит в первую строку группы линейных блоков, образующих данный структурный блок. При этом смещение происходит относительно левого (или правого при расположении текста справа налево) края линейного блока.

В качестве значения для text-indent может указываться либо определенный размер, либо значение в процентах. Во втором случае результат вычисляется браузером относительно ширины содержащего блока. Применительно к абзацу типичное смещение может составлять величину в 2 или 3 символа:

p {text-indent: 2.5em;}

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

p {text-indent: 2.5em; margin-top: 0; margin-bottom 0;}

Теперь остается рассмотреть последнее свойство, которое, на самом деле, применяется едва ли не чаще всех других, а именно – горизонтальное выравнивание текста. За него в CSS отвечает свойство text-align, которое, подобно атрибуту ALIGN для элементов DIV и P, позволяет выровнять строковое содержимое блока:

p {text-align: both;}

В данном случае мы создали правило, по которому содержимое абзацев будет выравниваться по ширине (т.е. по обоим краям). Разумеется, можно выравнивать и по одной из сторон – левой (left) или правой (right), а так же по центру (center):

h1, h2, h3 {text-align: center;} blockquote {text-align: right;}

Здесь было задано выравнивание заголовков с первого по третий уровень по центру, а для цитат – по правому краю.

ПРИМЕЧАНИЕ
Не забывайте, что хотя для выравнивания картинок в HTML предусмотрен атрибут ALIGN, это все-таки не столько определение выравнивания, сколько обтекания. Соответственно, в CSS для этого используется свойство float, а не text-align.

Свойства text-indent и text-align

Значение по умолчанию: text-indent – 0; text-align – left.
Наследуемые значения: да.
Применяется: к элементам уровня блока и ячейкам таблиц.
Совместимость: все.

2011-06-20 // Есть вопросы, предложения, замечания? Вы можете обсудить это на форуме !

« Позиционирование CSS | Оформление табличных данных »