Декоративное оформление текста
Для информационного блока оформление уже вполне закончено. Теперь займемся блоком гиперссылок. Вспомним, что мы для этого даже загото вили класс 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 (пунктир-
Рис. 4.7. Применение стилей к основной части странички
ная). Последние два значения, правда, пока воспроизводятся только в бро-узере Netscape 6. Мы выбрали значение ridge. Чтобы рамка не терялась на фоне больших букв, зададим свойство border-width: thick; (толстая рамка; еще можно указывать значения thin — тонкая и medium — средняя, а также задавать толщину в любых единицах). С помощью свойства border-color установим цвет рамки, по оттенку сочетающийся с фоном.
Поскольку в одном из обозначенных разделов мы всегда будем находиться, его название не будет являться гиперссылкой. Для него мы определили свойство
color: red;
(красный цвет текста). У гиперссылок, как вы помните, свой цвет.
Однако при этом придется сменить цвет гиперссылок на более светлый. Но будьте внимательны! Цвет гиперссылок нужно сменить только для класса Ink, потому что в других местах гиперссылки расположены на свет лом фоне, и их уже нельзя осветлять, иначе их не будет видно. Поэтому не (нужно переопределять свойства элемента
<А>
целиком. Нужно переопре делить некоторые его свойства только внутри класса Ink:
.Ink A{ text-decoration: none; color: white;
Такая запись делает как раз то, что нам нужно: в классе Ink для элемента <А> определяются некоторые новые свойства, а остальные остаются такими же, как и у всех элементов <А>. Заодно мы использовали свойство text- decoration: none;, чтобы снять подчеркивание с гиперссылок в этом блоке — в таком “кнопочном” оформлении оно неуместно.
Теперь все вроде бы нормально, однако одна из кнопок “вылезает” за пределы отведенного пространства (из-за слова “компании”). Можно, конечно, это пространство увеличить, но давайте лучше попытаемся немного “ужать” это слово. Есть такое стилевое свойство letter-spacing, которое задает дополнительное расстояние между буквами. Если это расстояние задать отрицательным, буквы расположатся теснее обычного:
<DIV CLASS="lnk"><A НRЕF="histогу.html">ИСТОРИЯ <SPAN STYLE="letter-spacing: -3рх;">KOMПAHИИ</SPAN></A></DIV>
