Расстояние между буквами можно задать свойством letter-spacing. В качестве значения указываются необходимая величина и абсолютная единица измерения.

Для нашего примера зададим расстояние между буквами в заголовке шириной 6 пикселов:

h1 {

letter-spacing: 6px;

}

Результат можно увидеть на рис. 8.12.

Рис. 8.12. Интервал между буквами

Вы можете попробовать применить это свойство к другим элементам страницы.

Далее вы узнаете, как с помощью данного свойства можно выделить необходимый текст на странице.

Можно задать расстояние как между буквами, так и между словами, используя свойство word-spacing. В качестве значения вы можете указать желаемое значение либо normal, чтобы использовать значение браузера по умолчанию.

Это свойство не представляет сложностей, поэтому приведу лишь CSS-код:

h1 { word-spacing: 1em }

В данном примере расстояние между всеми словами в элементах H1 увеличивается на 1 em.

Свойство text-transform управляет регистром символов. Существует три значения для данного свойства:

• capitalize – пишет все слова с большой буквы;

• uppercase – переводит все символы в верхний регистр;

• lowercase – переводит все символы в нижний регистр.

Сделаем заглавие первого уровня как в английском языке: все слова запишем с прописной буквы (рис. 8.13):

h1 {

text-transform: capitalize;

}

Рис. 8.13. Изменение регистра букв

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

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

CSS также позволяет задавать способ обработки браузером пустого пространства. Для этого нужно использовать свойство white-space. Рассмотрим значения, которые может принимать это свойство, и их описание:

• normal – браузер будет сжимать последовательно пустое пространство и разбивать строки для вмещения линейных блоков;

• pre – браузер не может изменять последовательность символов пустого пространства, строки разбиваются только в местах начала новой строки, обозначенных в исходном тексте;

• nowrap – работает, как значение normal в смысле сокращения пустого пространства, но запрещает образовывать разрывы строк в тексте, за исключением разрывов, определенных с помощью элемента BR.

Рассмотрим такой пример:

body { white-space: pre }

Браузер отобразит HTML-документ так, как он отображается в исходном виде, например в программе Блокнот.

Направлением вывода текста можно управлять, используя CSS-свойство direction. Оно может принимать следующие значения:

• ltr – направление слева направо;

• rtl – направление справа налево.

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

Теперь вам под силу отформатировать текст любой сложности и любых размеров. Немного практики – и вы станете настоящим профессионалом веб-дизайна.

9.1. Фон

9.2. Генерируемое содержимое

9.3. Автоматическая нумерация и списки

9.4. Таблицы

9.5. Интерфейс пользователя

9.6. Поля и отступы

9.7. Границы

9.8. Работа с блоками

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