Направлении. Можно также добавить небольшой нижний отступ для

рисунка линии:

а

text-decoration: none:

background: url(images/underline.gif) ·repeat-x left bottom:

padding-bottom: 5рх:

Эту методику хорошо использовать для коротких ссылок (состоящих из 1-3 слов),

Поскольку, если текст занимает более одной строки, Internet Explorer 6 и 7 добавляют

рисунок только к нижнему краю последней строки (IE 8 все делает пра~

Вильно).

Соэдание кноnок

Вы можете придать ссылкам вид кнопок, присутствующих в окнах и на паиелях

Инструментов компьютерных программ . В этом вам помогут свойства border,

Background-co l о г и paddi ng. С их помощью очень просто создать широкий диапазон

Разновидностей прямоугольных кнопок (рис. 9.2).

CosmoFarmer 2.0 1

C08111ofanмr 2.0 1 CosmoFarmer 2.0 CosmoFarmer 2.0

1 CosmoFarmer 2.0 1 с о s r.1tJ 1 ;, 1~ r.11 ~ ; IJ

Р1к. 9.2. Можно соэдать кноnки со сложными и nривлекательными очертаниями, комбинируя

Линии-границы различных стилей, цветов, ширины со свойством цвета фона

Допустим, вы назначили стилевой класс ссылке, которую хотите стилизовать .

в виде кнопки: <а link~··stale.html " class;'"button">Free Donuts Here!</a>. Чтобы

Глава 9. Приводим в порядок навигацию сайта

Добавить вокруг этой ссьшки простейшую рамку-контур черного цвета (см. рис. 9.2,

вверху слева}, добавьте следующий стиль:

a.button {

border: solid lpx #000:

Можете также окрасить кнопку путем установки цвета фона:

a.button {

border: solid lpx #000:

background-color: #333:

ПРИМЕЧАНИЕ------------------------------------------------

Этих примерах и a.buttoп, и .buttoп подойдут в качестве названия стиля. В случае a.buttoп стиль

применяется только к тегам <а> с классом buttoп, в то время как .buttoп относится к любому тегу