Подчеркивание заголовков
Решение
Существует два способа добавления эффекта подчеркивания для тек- ста. Самым простым является использование свойства text-decoration, о котором мы уже говорили в данной главе в разделе «Удаление подчер- кивания ссылок». Такой метод позволяет добавить подчеркивание того же цвета, что и сам текст, как видно из следующего кода и рис. 2.12:
chapter02/headingunderline.css (фрагмент)
h1 {
font: 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: underline;
Рис. 2.12. Добавление эффекта подчеркивания для заголовка с помощью свойства text-decoration
Аналогичного эффекта можно добиться и путем добавления нижней части рамки к заголовку. Данный метод, результат применения которо- го показан на рис. 2.13, отличается большей гибкостью, поскольку его применение позволяет отделить подчеркивающую линию от текста за- головка пустым пространством и задать для нее произвольный цвет, от- личный от цвета самого заголовка.
Кроме того, вероятность спутать заголовок с эффектом подчеркива- ния, созданным описанным выше методом, со ссылкой гораздо ниже, чем при использовании свойства text-decoration. Однако внешний вид
Устранение отступа между элементом h1 и следующим за ним абзацем 53
данного эффекта может варьироваться в зависимости от используемо- го броузера, поэтому необходимо тщательно протестировать его во всех броузерах, которыми могут пользоваться потенциальные посетители вашего сайта. Ниже представлено необходимое правило стиля:
chapter02/headingunderline2.css
h1 {
font: 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif;
padding: 0.2em;
border-bottom: 1px solid #AAAAAA;
}
Рис. 2.13. Создание эффекта подчеркивания с помощью нижней части рамки
Литература: Эндрю Р. CSS: 100 и 1 совет, 3-е издание. – Пер. с англ. – СПб: Символ-Плюс, 2010. – 336 с., ил.
Похожие посты:
- Изменение высоты строки (межстрочного интервала) в тексте (0)
- Изменение стиля горизонтальной линии (0)
- Вывод текста заглавными буквами с помощью CSS (0)
- Как изменить способ размножения фонового изображения (0)
- Оформление текста и другие базовые возможности (0)
- Применение эффекта прозрачности (0)
- Изменение вида курсора (0)