HTML, XHTML и CSS на 100%

Квинт Игорь

Мы рассмотрели основные возможности CSS по работе со шрифтами. Теперь приступим к изучению форматирования текста.

8.3. Форматирование текста

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

Отступы

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

Согласитесь, не очень-то удобно в начале каждого абзаца набирать пробелы, да еще и следить, чтобы их было одинаковое количество в начале всех абзацев. Еще хуже, если, выполнив часть или всю работу, вы обнаружите, что отступы недостаточны или слишком большие. CSS предоставляет замечательное свойство text-indent для решения данной проблемы. Размер отступа может задаваться как абсолютными, так и относительными единицами. В том числе и процентами. В качестве 100 % считается ширина всей страницы.

Зададим в нашем примере отступ 25 пикселов (рис. 8.9):

p {

text-indent: 25px;

}

Рис. 8.9. Задание отступа 25 пикселов

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

Выравнивание текста

Выравнивание текста задается с помощью свойства text-align, значения которого такие же, как и значения свойства align у элемента P. Следующие значения указывают, что текст будет выровнен:

• left – по левому краю;

• right – по правому краю;

• center – по центру;

• justify – по формату.

Для примера зададим для заголовков выравнивание по центру, а для вступительного намека – по правой стороне (рис. 8.10):

h1 {

text-align: center;

}

p.namek {

text-align: right;

}

Рис. 8.10. Выравнивание текста

Декоративное оформление

С помощью CSS можно изменять или добавлять декоративное оформление текста. Для этого существует свойство text-decoration. Ниже перечислены все возможные значения данного свойства и их описания:

• none – не производит декоративное оформление;

• underline – каждая строка текста будет подчеркнута;

• overline – над каждой строкой текста будет отображена линия;

• line-through – каждая строка текста будет зачеркнута;

• blink – текст будет мигать.

Примечание

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

Свойство none на первый взгляд может показаться лишним. Ведь если не задавать его, то текст и так будет без декоративного оформления. Однако его полезно использовать для ссылок. Для них браузер по умолчанию считает заданным значение underline этого свойства. Иными словами, все ссылки на странице отображаются подчеркнутыми. Если вы захотите сделать ссылки такими

же, как и основной текст, то есть без подчеркивания, то вам пригодится значение none.

Применим новые знания на практике. Для примера обычным ссылкам установим значение text-decoration, равное none, а для ссылок типа hover – underline (рис. 8.11).

a {

text-decoration: none;

}

a:hover {

text-decoration: underline;

}

Рис. 8.11. Декоративное оформление

На рис. 8.11 видно, что ссылка главе 9 больше не подчеркнута.

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

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

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