В этом уроке, мы с Вами поговорим об одном из способов изменения цвета активного блока. Этот же способ отлично подойдёт для создания кнопки.
Метод, который мы рассмотрм - один из самых удобных и логически понятны. Итак, приступим...
1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2) Вставьте в этот файл следующий код (использованные здесь атрибуты подробно рассмотрены в разделе "Справочник CSS"):
/* Задание стилей для блока в обычном состоянии */
#block a {
background:#c7e1ff;
padding:50px 0;
width:190px;
display:block;
text-decoration:none;
color:#333;
text-align:center;
border:1px solid #024591;
}
/* Задание стилей для блока при наведении на него мыши */
#block a:hover {
background:#77b7ff;
}
3) Чтобы увидить работу стилей, создадим в той же директории html файл и, например вставим туда такой код:
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="block">
<a href="#">Содержание блока</a>
</div>
</body>
</html>
4) Сохраняем и смотрим, что получилось.
Совместимость: Internet Explorer 6 - 7; Mozilla Firefox 2.xx - 3.0; Opera 8.хх - 9.xx
ДемоПо материалам сайта:
Российская школа CSS
