Иллюстрированный самоучитель по созданию сайтов

Оформление веб-страницы с использованием стилей

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

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

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

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

Однако при этом придется сменить цвет гиперссылок на более светлый. Но будьте внимательны! Цвет гиперссылок нужно сменить только для класса Ink, потому что в других местах гиперссылки расположены на свет лом фоне, и их уже нельзя осветлять, иначе их не будет видно. Поэтому не (нужно переопределять свойства элемента <А> целиком. Нужно переопределить некоторые его свойства только внутри класса Ink:

Такая запись делает как раз то, что нам нужно: в классе Ink для элемента <А> определяются некоторые новые свойства, а остальные остаются такими же, как и у всех элементов <А>. Заодно мы использовали свойство text – decoration: none;, чтобы снять подчеркивание с гиперссылок в этом блоке – в таком “кнопочном” оформлении оно неуместно.

Теперь все вроде бы нормально, однако одна из кнопок “вылезает” за пределы отведенного пространства (из-за слова “компании”). Можно, конечно, это пространство увеличить, но давайте лучше попытаемся немного “ужать” это слово. Есть такое стилевое свойство letter-spacing, которое задает дополнительное расстояние между буквами. Если это расстояние задать отрицательным, буквы расположатся теснее обычного:

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

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

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

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

Однако, указывая в явном виде название гарнитуры шрифта, следует предусмотреть случай, когда на компьютере пользователя этого шрифта не окажется. Для этого можно определить (через запятую) еще несколько вариантов начертания шрифта в порядке убывания предпочтительности. Последним обязательно укажите начертание из стандартного набора (serif, sans-serif, cursive, fantasy, monospace). В данном случае нам нужен необычный шрифт, поэтому укажем значение fantasy:

Теперь расставим буквы немного пошире с помощью уже знакомого нам свойства letter-spacing, а также определим высоту строки, равной высоте нашего блока:

Как видите, мы определили здесь максимально возможную жирность шрифта. Теперь определим цвет текста, сочетающийся с цветом фона:

Далее, мы хотели нарисовать рамку вокруг заголовка. Определим ее свойства, используя сокращенную запись:

В этой записи определены сразу три свойства: border-width, border-style и border-color. В некоторых случаях допустимо подобное объединение значений нескольких свойств в одну строку. Это можно написать быстрее, хотя и менее наглядно.

В принципе заголовок готов. Давайте только добавим к нему еще визуальный эффект с помощью свойства filter. Это работает, правда, только в браузере Internet Explorer и отсутствует в спецификациях CSS, однако смотрится очень красиво. Можно применить это свойство, например, так:

В результате наш блок будет отбрасывать тень. Существуют такие значения свойства filter, как dropshadow (другой тип тени), blur (размытие), wave (отражение в волне) и прочие.