Сайт и форум поддержки продуктов GE - Как подчеркнуть заголовок

воскресенье, 06 июля 2008

Как подчеркнуть заголовок

raduga

среда, 11 мая 2005

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

Способ 1
Сплошная или пунктирная линия вставляется в виде заранее заготовленной картинки (в нашем случае - это line.gif). Итак, открываем наш файл стилей (template_css.css), находим в нем описание следующего стиля и вставляем строчку, выделенную красным цветом:

.contentheading, .componentheading {

background : url(../images/line.gif) repeat;

font-size : 14px;

font-weight : bold;

line-height : 24px;

text-transform : uppercase;

text-align : left;

color : #333333;

width : 100%;

}

Способ 2
Сплошная или пунктирная линия вставляется с помощью CSS стилей для линий. Проблема здесь только в одном, браузер IE5 не поддерживает стили линий, вместо прерывистой линии он выведет сплошную. Если вам нужна жесткая оптимизация по отношению ко всем браузерам, лучше воспользуйтесь способом 1.

Стили для линий могут быть следующими:

solid - сплошная линия
double - двойная линия
dashed - прерывистая линия
dotted - пунктирная линия

Итак, открываем наш файл стилей (template_css.css), находим в нем описание следующего стиля и вставляем строчки, выделенные красным цветом:.contentheading, .componentheading {

border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #666666;
font-size : 14px;
font-weight : bold;
line-height : 24px;
text-transform : uppercase;
text-align : left;
color : #333333;
width : 100%;
}

Вот и всё.
rgb(raduga)