Приднестровская поддержка XOOPS
Существует два способа добавления эффекта подчеркивания для текста. Самым простым является использование свойства text-decoration, о котором мы уже говорили в данной главе в разделе «Удаление подчеркивания ссылок». Такой метод позволяет добавить подчеркивание того же цвета, что и сам текст, как видно из следующего кода и рис. 2.12:
h1 {
font: 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: underline;
}
Рис. 2.12. Добавление эффекта подчеркивания для заголовка с помощью свойства text-decoration
Аналогичного эффекта можно добиться и путем добавления нижней части рамки к заголовку. Данный метод, результат применения которого показан на рис. 2.13, отличается большей гибкостью, поскольку его
применение позволяет отделить подчеркивающую линию от текста заголовка пустым пространством и задать для нее произвольный цвет, отличный от цвета самого заголовка.
Кроме того, вероятность спутать заголовок с эффектом подчеркивания, созданным описанным выше методом, со ссылкой гораздо ниже, чем при использовании свойства text-decoration. Однако внешний вид данного эффекта может варьироваться в зависимости от используемого браузера, поэтому необходимо тщательно протестировать его во всех браузерах, которыми могут пользоваться потенциальные посетители вашего сайта.
Ниже представлено необходимое правило стиля:
h1 {
font: 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif;
padding: 0.2em;
border-bottom: 1px solid #AAAAAA;
}
Рис. 2.13. Создание эффекта подчеркивания с помощью нижней части рамки
Отправитель | Нити |
---|
7 пользователь(ей) активно (2 пользователь(ей) просматривают Инструкции)
Участников: 0 Гостей: 7 далее... |