Задание цвета заголовка и его фона (в том числе с помощью изображения)

Итак, пример правильной разметки для заголовка

Code

<h1>Название заголовка</h1>

Заголовок есть, осталось его оформить. Как? подобрать ему цвет, шрифт, фон и оформление.
Давайте зададим для заголовка тёмно-серый цвет, сделаем для него курсивный шрифт Times размером 2em на светло-сером фоне с подчеркиванием:

Code

h1 {color: gray; font: italic 2em Times, serif; text-decoration:underline; background: #c4c4c4;}

Смотрим, что у нас получилось:

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

Что еще можно сделать? А добавим рамку вокруг нашего элемента!

Code

h1 {color: gray; font: italic 2em Times, serif; text-decoration:underline; background: #c4c4c4;
border: 1px solid #666;margin-bottom:0;padding:5px;
}

Cмотрим результат:

А теперь: как задать для заголовка фон картинкой? допустим, у нас есть gif картинка (bg.gif):

Очень просто:

Code

h1 {color: gray; font: italic 2em Times, serif; text-decoration:underline; background: #c4c4c4 url(bg.gif) repeat-x;
border: 1px solid #666;margin-bottom:0;padding:5px;
}

Что мы сделали? мы оставили для заголовка светло-серый фон, но в качестве фона дополнительно прописали нашу gif-картинку с повторением её по оси x, теперь, если у пользователя не загрузиться изображение, у него будет светло-серый фон заголовка.

Cмотрим результат:

Как видите, всё просто.

Ссылка:

BB-код:

HTML-код:

Ещё по теме:

Всего комментариев: 2