CSS и заголовки
Несмотря на довольно широкий спектр возможностей оформления текста и, в частности заголовков, многие веб-разработчики до сих пор их игнорируют. Наиболее удобным и простым их таких средств является CSS (Cascading Style Sheets).
| Цель |  | Используем CSS для форматирования текста |
| Технология | | CSS |
| Поддержка | | Все браузеры с поддержкой CSS |
| Баги | | не обнаружено |
Выделяем заголовки
Так как заголовки в тексте являются наиболее важными объектами, на которые должно быть обращено внимание пользователя, то для начала выделим их средствами CSS.
Наиболее предпочтительными способами являются:
- Выделение ярким, привлекающим внимание, цветом
- Использование фона (цвет, либо изображение)
Рассмотрим использование обоих приёмов на примерах.
Пример 1:
#example h1{color:#369}
#example p{color:#000}
Результат:
Заголовок
Просто текст
Пример 2:
#example2 h1{color:#fff; background-color:#369}
#example2 p{color:#000}
Результат:
Заголовок
Просто текст
Как Вы можете заметить, заголовки в обоих вариантах «бросаются в глаза», то есть наша цель достигнута.
Регулируем регистр букв
В CSS присутствует очень полезный атрибут — text-transform. С его помощью можно изменять регистр букв только средствами CSS. Данный атрибут может принимать следующие значения:
- lowercase — ковертирует все буквы текста в нижний регистр
- uppercase — производит обратную операцию, то есть переводит все буквы в верхний регистр
- capitalize — каждое слово начинается с «большой буквы»
- none — не производит никаких манипуляций с текстом. По умолчанию атрибут выставлен в это значение.
Пример с использованием text-transform:
#example3 h1{color:#000; text-transform:uppercase}
#example3 p{color:#000}
Результат:
Заголовок
Просто текст
Расстояние между буквами и словами
Cascading Style Sheets также поможет отрегулировать расстояние между словами и буквами. Для этого следует использовать атрибуты word-spacing и letter-spacing соответственно. Они могут принимать значения стандартных размерностей.
Пример с использованием text-transform:
#example4 h1{color:#369; word-spacing:0.5em; letter-spacing:0.4em}
#example4 p{color:#000}
Результат:
CSS заголовок
Просто текст
Межстрочный интервал
Очень удобным средством улучшения читабельности текста является CSS атрибут line-height. Значения лучше задавать в процентах (%). По умолчанию значение равно 120%. Наиболее оптимальным считается межстрочный интервал, равный 150%.
#example4 h1{color:#369; word-spacing:0.5em; letter-spacing:0.4em}
#example4 p{color:#000}
Результат:
Заголовок
Просто текст
Итоговый вариант
#example_final h1{
color:#fff;
background-color:#369;
text-transform:uppercase;
word-spacing:0.5em;
letter-spacing:0.3em;
line-height:200%
}
#example_final p{color:#000}
Результат:
Итоговый заголовок
Просто текст
В итоге у нас получился понятный и привлекающий внимание заголовок.
В данной статье я не затронул базовые текстовые CSS атрибуты (font, text-align, etc), так как необходимость их использования не вызывает никакого сомнения. Я надеюсь, что приёмы CSS, рассмотренные в статье помогут Вам в более глубоком изучении технологии каскадных стилей и в повышении юзабилити сайта.
Код, 20/02/07 
Wart!X