Все мы много раз видели различные по красоте меню на сайте, которые меняют фон при наведении мыши или цвет шрифта и тому подобное. Такие меню очень легко делать без использования JavaScript. Достаточно вспомнить о псевдостилях гиперссылок.
Итак, стиль ссылки в CSS можно задать так:
a {
font-size:14px;
font-weight:li
normal;
color:#FFFFFF;
}
Вид ссылки при наведении мыши задается как:
a:hover {
font-size:12px;
font-weight:boldl;
color:#CCCCCC;
}
Ну и выглядеть будет такая ссылко как-то так:Ссылка
Во многих случаях этого достаточно, однако иногда возникает потребность сделать ссылки более красивыми, например с фоновым рисунком. Мы знаем что есть свойство блочных элементов background-image, с помощью которого задается фоновое изображение. Все что нам осталось сделать, это сделать ссылку блочным элементом при помощи свойства display.
Теперь добавляем свойства background-image и display к ссылке:
a {
display:block;
background-image: url(ПУТЬ_К_ИЗОБРАЖЕНИЮ);
background-repeat: repeat-x;
height:40px;
padding:20px 10px 0 10px;
}
a:hover {
display:block;
background-image: url(ПУТЬ_К_ДРУГОМУ_ИЗОБРАЖЕНИЮ);
background-repeat: repeat-x;
height:40px;
padding:20px 10px 0 10px;
}
Ссылка
Ну вот как-то так, дальше все зависит от вашей фантазии. Ну и не забудьте, что если вы хотите разместить несколько ссылок в строку нужно воспользоваться CSS свойством float.
