Добавление фонового рисунка

Прежде чем мы займемся стилевым оформлением каждого блока, давайте вместо однотонового фона установим градиент. Пусть основная информация находится на светлом фоне, а в районе блока гиперссылок логично было бы начать градиентный перелив в более темный оттенок. Только вот беда: если мы будем создавать фоновый рисунок с градиентным переливом справа, то совершенно непонятно, какой ширины он должен быть. Еще хорошо, что на этой страничке абсолютное позиционирование — можно, в принципе, начать градиент на 565-й точке слева. Однако все равно непонятно, где его заканчивать — ведь ширина экрана зависит от разрешения!

Давайте воспользуемся более изящным методом. Создадим градиент, имеющий слева тот же цвет, что и цвет фона, и расположим его справа. Для этого нам надо написать в свойствах элемента BODY:

Background-position: right;

Фоновый рисунок действительно выровнен по правому краю, но он повторяется во все стороны, а нам это не нужно. Чтобы он повторялся только по вертикали, нужно добавить в свойства BODY еще такую строку:

Background-repeat: repeat-y;

Вот теперь получилось то, что нужно. Кстати, можно заставить фоновый рисунок повторяться только по горизонтали (repeat-x) или вообще не повторяться (no-repeat). В этом случае можно указать любое значение свойства background-position в процентах, пикселах или иных единицах.

Примените в блоке стилей < STYLE > </ STYLE > следующий тег:

BODY {BACKGROUND-color:#d2ffff; COLOR:#003737; background-position:right; background-repeat:repeat-y;}

Оформление текста

Теперь давайте займемся информационным блоком. Чтобы информация хорошо читалась и воспринималась, он не должен особо страдать излишествами, однако, чтобы выделить заголовки списков, их можно написать более крупно и шрифтом другого начертания. Для этого определим соответствующий класс: .bigger { font-size: larger; font-family: sans-serif; } а в тексте документа, после стихотворения, применим его:

<DIV CLASS="bigger"> Другие стихи…</DIV>

Как вы уже, наверное, поняли, свойство font-family определяет гарнитуру шрифта. Значение sans-serif соответствует шрифтам, не имеющим засечек. По умолчанию обычно определен шрифт serif (с засечками, обычно это Times New Roman).

Декоративное оформление текста

Для информационного блока оформление уже вполне закончено. Теперь займемся блоком гиперссылок. Вспомним, что мы для этого даже заготовили класс Ink. Чтобы наши разделы были хорошо заметны, давайте их обведем рамками:

.Ink { border-width: thick; border-style: ridge; border-color: #319CFF; color: red; text-align: center; }

Чтобы рамка вообще отобразилась, необходимо определить свойство border-style (дело в том, что по умолчанию его значение — none, то есть рамки нет). Здесь мы можем выбрать вид рамки из возможных: solid (обычная), double (двойная), groove (вогнутая с обеих сторон), ridge (выпуклая с обеих сторон), inset (вогнутая), outset (выпуклая), dotted (точечная) и dashed (пунктирная). Последние два значения, правда, пока воспроизводятся только в браузере Netscape 6. Мы выбрали значение ridge. Чтобы рамка не терялась на фоне больших букв, зададим свойство border-width: thick; (толстая рамка; еще можно указывать значения thin — тонкая и medium — средняя, а также задавать толщину в любых единицах). С помощью свойства border-color установим цвет рамки, по оттенку сочетающийся с фоном.

Поскольку в одном из обозначенных разделов мы всегда будем находиться, его название не будет являться гиперссылкой. Для него мы определили свойство color: red; (красный цвет текста). У гиперссылок, как вы помните, свой цвет.

Оформление заголовка

Теперь можно заняться заголовком (в нашем случае применим это к стилю .bigger). Во-первых, нужно задать его ширину и высоту, причем первую мы зададим в процентах, чтобы она могла изменяться вместе с шириной окна браузера:

width: 90%; height: 100рх;

Эти значения мы определяем для класса hdr. Значение height выбираем с таким расчетом, чтобы осталось еще немного пространства сверху от остальных блоков нашей веб-странички. Далее для заголовка лучше назначить шрифт покрупнее:

Font-size: 6Орх;

Кроме того, будет лучше, если шрифт заголовка будет контрастен относительно всех остальных шрифтов. Выберем какую-нибудь необычную гарнитуру:

⇐ Предыдущая123

Поделиться: