CSS » Кое-что о списках 24 января 2008 от admin |
Многие начинающие веб-дизайнеры даже не подозревают, насколько мощным и удобным инструментом являются списки. Да-да, самые обычные ненумерованые (впрочем и нумерованные тоже) списки, именно те самые, заключенные между тегами <li> и </li>Множество дизайнерских трюков, для которых прежде применялись скрипты, можно реализовать, используя только списки и некоторые стилевые правила. Итак, для начала сделаем элементарный список: <ul>в браузере мы увидим:
Но нам нужна большая функциональность, и более изящное оформление, не так ли? Придется подключать CSS - между открывающим и закрывающим тегом head вставляем строчку , а уже в самом css-файле определяем стили. #list {Допустим, нам понадобился список с особыми маркерами. Как мы поступали раньше? Создавали таблицу, в одной колонке размещали картинку маркера и смещали ее в ячейке вверх и вправо. В другой колонке размещали текст, который должен был бы находится в элементах <li>Теперь CSS позволяет использовать изображение в качестве маркера: list-style-image: url(bullet.png); Если броузер не поддерживает эту функцию CSS (или не поддерживает вывод графики), будет использован маркер по умолчанию (либо тот, который вы укажите на этот случай): list-style-type: disc; Чтобы изображение, выбранное вами в качестве маркера, не "выползло" за границы списка (например при смене разрешения), поместите изображение внутрь блока <li>list-style-position: inside; В результате содержимое css файла: #list {На экране превратится в:
list-style-image: url(bullet.png); можно безболезненно заменить на одну строчку list-style: disc url(bullet.gif) inside; Списки необязательно должны располагаться вертикально - иногда по соображениям дизайнера (например для меню или навигационной панели) элементы должны выстроиться в одну строку. Это достигается элементарно - в свойствах элемента <li>указываем display: inline; Кроме того, иногда стандартных стилей оформления (атрибутов disc, circle или square) может не хватить, а графику (list-style-image) по определенным причинам использовать нельзя. На помощь придут псевдоэлементы :before и :after - тогда стилевое правило будет выглядеть так: #list ul li:before { Следует помнить, что младшие версии IE не дружат с CSS 2, поэтому пользователи интернет експлорера ничего не заметят. Все остальные (Opera, Safari, Firefox, Konqueror, etc) корректно отображают элементы :before и :after. С их помощью можно отображать как обычные символы, так и элементы псевдографики - для этого надо указать шестнадцатеричный (Hex) код в качестве аргумента. В результате (с учетом inline и before) css файл: #inline {В браузере покажет:
#tabs ul {Затем добавим класс .here (с его помощью и будем выделять нужный пункт): #tabs ul li.here {а в html одному из элементов списка присвоим этот класс: <li class="here">Пункт 3</li>В результате увидим:
По материалам alistapart.com. Это далеко не вся и далеко не полная информация о списках и приемах работы с ними. Постепенно я буду добавлять новые методы как по спискам в частности, так и по CSS в целом, а все желающии могут мне помочь в этом, просто оставляя коментарии. |