CSS

Оформление ссылок

Стиль ссылок можно задать точно так же, как и для других тэгов. Необходимо только учесть, что у ссылок есть несколько состояний - просто ссылка, указатель мыши над ссылкой, активная ссылка и ссылка, на которой побывали. В примере мы ограничимся для первого раза только случаем ссылки с указателем мыши. Стиль такого состояния ссылки определяется как a:hover. Пример:

<HTML>
<head>
<style>
body{background:#fff;}

a{ text-decoration: none;
font: 12pt Courier, Helvetica, sans-serif;
color:#0f0;
}

a:hover{
text-decoration: none;
color: #f00;

}

</style>
<head>
<body>

<a href='#' >Ссылка 1</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href='#'>Ссылка 2</a>
</body>
</HTML>

Стиль text-decoration: none; в нашем случае указывает обозревателю, что ссылки не нужно подчеркивать. Обращаем внимание на &nbsp; - это символ неразрывного пробела. Обозреватель не может выводить несколько пробелов подряд, поэтому один из способов увеличения рассояния между текстовыми объектами - вставка нескольких таких символов. Попробуйте убрать эти символы из примера, посмотрите, как это будет выглядеть. Цвет ссылок задается обычным образом. Щелкаем по ссылкам примера и смотрим, как это работает. Рамка вокруг текста ссылки определяется тоже стандартно:

<HTML>
<head>
<style>
body{background:#fff;}

.ref{ text-decoration: none;
font: 12pt Courier, Helvetica, sans-serif;
color:#0f0;
border:1px solid #0f0;
}

.ref:hover{
text-decoration: none;
color: #f00;
border:1px solid #f00;
}
</style>
<head>
<body>
<a href='#' class=ref>Ссылка 1</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href='#' class=ref>Ссылка 2</a>
</body>
</HTML>

Сейчас ссылка становится похожей на кнопку. Теперь уже совсем недалеко до ссылки-кнопки. Следующий пример:

<HTML>
<head>
<style>
body{background:#fff;}

.btn{
text-align:center;
background-color: #ff0;
border: 2px #aaa outset;
padding: 1px 4px;
color: #000;
text-decoration: none;
font: 12pt Courier, Helvetica, sans-serif;
}

.btn:hover{
border-style: inset;
color: #aaa;
background: #0ff;
padding: 2px 3px 0 5px;
}

</style>
<head>
<body>

Появилось что-то новенькое. По порядку: .btn - это стиль класса. Объектов этого класса на странице может быть полно. Далее: border: 2px #aaa outset; - тут все знакомо, кроме outset, который означает, что рамка будет выглядеть как на ненажатой кнопке, соответственно inset, котрорый встречается потом, означает нажатое сотояние. Свойство стиля padding: 2px 3px 0 5px; показывет отступ текста от рамки в пикселях, обход прямоугольного элемента производится в таком порядке: верх, правая сторона, низ, левая сторона. Изменение этого стиля для состояния a:hover создаст эффект нажатия кнопки. При наведении мыши на ссылку она будет проваливаться и менять цвет. И - так это работает.

Чтобы размеры поля ссылки не зависели от длины текста внутри, нужно задать стиль display:block; и обычным способом определить длину и ширину блока, как в примере ниже:

<HTML>
<head>
<style>
body{background:#fff;}

.btn{display:block;width:160px;height:20px;
text-align:center;
background-color: #ff0;
border: 2px #aaa outset;
padding: 1px 4px;
color: #000;
text-decoration: none;
font: 12pt Courier, Helvetica, sans-serif;
}

.btn:hover{
border-style: inset;
color: #aaa;
background: #0ff;
padding: 2px 3px 0 5px;
}

</style>
<head>
<body>

Заметна разница?

Уголки получившейся кнопки можно закруглить, только работать закругление не будет в Internet Explorer, включая и 8-ю версию. Получают закругление добавлением стиля border-radius:5px;наверно, понятно, что 5px - радиус закругления в пикселях. Дополнительно в стиле лучше прописать -moz-border-radius:5px; и -o-border-radius: 5px; - это уже конкретно для Мозиллы и Оперы:

<HTML>
<head>
<style>
body{background:#fff;}

.btn{display:block;width:100px;height:20px;
text-align:center;
background-color: #ff0;
border: 2px #aaa outset;
border-radius:5px;
-moz-border-radius:5px;
-o-border-radius: 5px;
padding: 1px 4px;
color: #000;
text-decoration: none;
font: 12pt Courier, Helvetica, sans-serif;
}

.btn:hover{
border-style: inset;
color: #aaa;
background: #0ff;
padding: 2px 3px 0 5px;
}

</style>
<head>
<body>
<a href='#' class=btn>Ссылка 1</a>&nbsp;<a href='#' class=btn>Ссылка 2</a>
</body>
</HTML>

Посмотрим, как это выглядит, а как-то выглядеть будет только не в IE.

Пора собрать вместе отдельные части, поэтому следующее - создание шаблона сайта.

Рейтинг@Mail.ru