Итак, наша сегодняшняя статья, как и обещалось, будет посвящена элементам, называемым «CSS Sprites» (или CSS Спрайты)…
В начале, разберёмся, сто же такое спрайт.
В принципе, спрайт – одно изображение, в состав которого включено некоторое количество более мелких изображений. По структуре, спрайт можно сравнить с мозаикой или пазлом. С помощью специального атрибута, для каждого объекта выбирается часть этой картинки, которая и показывается.
Конечно, Вы имеете полное право спросить: «Зачем создавать спрайт, если можно просто воспользоваться несколькими картинками, как это делается обычно?». Ответ будет довольно простым: спрайт подгружается один раз и при наведении курсора на элемент изменения происходят мгновенно, без подгрузки другой картинки. Это существенно улучшает его восприятие и уменьшает количество HTTP запросов, что в свою очередь ускоряет загрузку страницы. Само собой, у спрайтов есть ограничения. Наш объект должен быть фиксирован по ширине и /или высоте.
Спрайты очень часто используются в меню, или других элементах, изменяющихся при наведении мыши. В практическом примере к этой статье, мы будем делать именно меню для сайта.
Итак, с теорией мы разобрались. Теперь пришло время применить спрайты на практике.
Здесь, мы будем создавать вертикальное меню, состоящее из 5 элементов. Сделаем его, используя маркированный список.
По традиции, создадим файлы index.html и style.css. В код веб-страницы запишем стандартное начало:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>
Российская школа CSS. Спрайты
</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
Замечательно… Теперь, приступим к формированию меню
<ul id="menu">
<li><a href="/">Ссылка 1</a></li>
<li><a href="/">Ссылка 2</a></li>
<li><a href="/">Ссылка 3</a></li>
<li><a href="/">Ссылка 4</a></li>
<li><a href="/">Ссылка 5</a></li>
</ul>
</body>
</html>
Наш список-меню готов. Теперь, перейдём к оформлению. Отменим в CSS оформление для всего списка:
ul {
list-style:none;
}
Готово. Теперь зададим вид пункта меню, без наведения на него мыши:
#menu li a {
padding:7px 10px;
color:#666;
text-decoration: none;
display: block;
font:13px Arial;
font-weight:bold;
background: url(menu.png);
width:200px;
margin:3px;
}
Здесь – мы использовали изображение menu.png. Это – и есть спрайт.
Теперь зададим стили для меню при наведении на него мыши и при клике на него:
#menu li a:hover {
color: #fff;
background: url(menu.png) 0 -30px;
}
#menu li a:active {
color: #fff;
background: url(menu.png) 0 -60px;
}
Заметим, что -30px и -60 px – указание, на сколько пикселей надо сместиться по спрайту.
Итак, всё готово. Конечно, это меню – не верх совершенства, но если захотите, то сможете его усовершенствовать.