Каталог статей
| Главная » Статьи » уроки |
-
В новом окне Просмотров:[747]
Добавлено:23.11.2024
Подробнее
Простая верстка шаблонов > уроки
уважаемые посетители! С сожалением, должен сообщить о переносе старта
первого специального проекта как минимум на неделю. Вмешался
человеческий фактор… но, не волнуйтесь, от идей, предложенных на
форуме, мы не отказались.
Итак, наша сегодняшняя статья, как и обещалось, будет посвящена элементам, называемым «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>
<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>
<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;
}
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;
}
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;
}
color: #fff;
background: url(menu.png) 0 -30px;
}
#menu li a:active {
color: #fff;
background: url(menu.png) 0 -60px;
}
Заметим, что -30px и -60 px – указание, на сколько пикселей надо сместиться по спрайту.
Итак, всё готово. Конечно, это меню – не верх совершенства, но если всё сделано правильно, то получите такое меню:
Вот и всё на сегодня. Спасибо за внимание!
Автор: Алексей Савинов, Российская школа CSS
| Всего комментариев: 0 | |
Сайт оптимизтрован для просмотра в брузерах:Firefox & Opera при разрешении экрана 1280x1024 пикселя.