Урок 7. Как сделать списки в CSS. Скачать бесплатно коллекцию иконок
Автор: Андрей Краснокутский
Дата: 2009-04-07 Атрибут CSS list-style-type: .
Продолжаем наши CSS уроки. Сегодня используя стили CSS мы научимся делать списки. Как мы делали списки с помощью HTML Вы можете вспомнить здесь. Там же Вы можете посмотреть в каких случаях нам могут понадобиться списки.
Для начала открываем нашу таблицу стилей style.css (файл в котором мы создаем новые стили) и создаем новый стиль. Для определенности назовем наш новый стиль например .list . Естественно в CSS есть и свои атрибуты и значения этих атрибутов, которые "говорят" браузеру как отображать список на экране монитора. Основной атрибут это list-style-type: и его значения:
-
list-style-type: decimal; - отображать список цифрами ;
-
list-style-type: upper-roman; - отображать список большими римскими цифрами;
-
list-style-type: lower-roman; - отображать список маленькими римскими цифрами;
-
list-style-type: lower-alpha; - отображать список маленькими английскими буквами;
-
list-style-type: upper-alpha; - отображать список большими английскими буквами;
-
list-style-type: none; - отображать список без маркеров.
В CSS есть еще один замечательный атрибут (которого нет в HTML) позволяющий в качестве маркеров задать графический файл. Например Вы в качестве маркера хотите использовать красивую галочку, приём очень часто применяемый и смотрится дествительно очень красиво, а главное профессионально. Задается такой вариант отображения списка можно с помощью атрибута list-style-image: . Но раз это графический файл, значит надо указать где он лежит т.е. путь к файлу, например у нас этот файл лежит в одной папке с Вашим файлом который отображает список, значит путь будет самый простой а именно: url(mini_ben.gif); Полность это свойство будет записано в таблице стилей так list-style-image:url(mini_ben.gif);
Теперь давайте рассмотрим это все на конкретном примере. Создадим список используя свойства CSS, а в качестве маркера будем использовать графический файл check.gif .
Для начала создаём в программе Photoshop графический файл, который будем использовать в качестве маркера, обычно файл имеет размеры примерно 16 х 16 или 25 х 25 px или близкие к этому, сохраняем его в формате .gif , .png или .jpg. Чаще применяют формат .gif или .png - такие файлы меньше "весят" ( от 100 до 600 байт) и очень быстро грузятся на web-страницу. Примеры таких файлов - маркеров:
Вариантов таких маркеров может быть множество, я уверен Вы видели много таких примеров применения графических маркеров.
Далее открываем нашу таблицу стилей style.css и создаем новый стиль. В качестве маркера будем использовать один из файлов представленный выше (средний):
Листинг 7.1.
.list
{
list-style-image:url(check.gif);
}
| |
Естественно это стиль необходим придать нашему списку. Открываем наш файл со списком (например index.html) и прописываем только что созданный стиль ul class="list", полностью листинг кода выглядит так:
Листинг 7.2.
<ul class="list">
<li>Товары для автомобилей</li>
<li>Товары для населения</li>
<li>Товары повседневного спроса</li>
<li>Фотоаппараты</li>
<li>Бытовая техника</li>
</ul>
| |
А вот так Ваш список будет отображаться на web-странице:

Рисунок 7.1
Получился очень симпатичный список.
Кстати вставлять графические файлы или иконки можно не только в списках, но и в любом месте web-страницы, вспомните как вставляются картинки в HTML документ и пользуйтесь этим. Ваши сайты станут намного ярче, красочнее и привлекательнее.
Что бы Вам было веселее :-) и Вы смогли бы сразу вставлять иконки на страницы своего сайта, выкладываю коллекцию иконок, качайте её бесплатно и пользуйтесь (больше 1000 штук).

Размер архива: 750 кБ.
Скачать бесплатно:
Качайте Бесплатно и читайте так же:
"Учимся делать собственный сайт за 11 уроков". Практическое руководство.
Практическое руководство "Как сделать красивую 3D обложку"
Практическое руководство "Как сделать электронную книгу в .EXE формате"
Практическое руководство "Как сделать PopUp привлекающий внимание"
Практическое руководство "Как сделать Электронную книгу в PDF формате"
Просмотров: 20635
НЕ ОТОБРАЖАЮТСЯ КАРТИНКИ В БРАУЗЕРЕ, ЧЕРЕЗ css
проверьте правильность указания пути до картинки
Архив коллекции картинок повреждён (размер 471 Кб). Исправьте по возможности.
Архив коллекции картинок повреждён (размер 471 Кб). Исправьте по возможности.
Архив коллекции иконок обновил, все работает
А где можно взять готовый style.css
Андрей, спасибо) учиться легко и приятно
"CSS есть еще один замечательный атрибут (которого нет в HTML) позволяющий в качестве маркеров задать графический файл."
в HTML есть, вот пример:
ul>
<li><a href="mac.html"> Macbook air</a></li>
<li><a href="mac.html"> iPad</a></li>
<li><a href="mac.html"> iPone</a></li>
<li><a href="mac.html"> iPod</a></li>
<li><a href="mac.html" > Macbook pro</a></li>
</ul>
Это написано не в CSS,а в HTML, все прекрасно работает.
|