В этой статье учебника речь пойдет о работе со списками в CSS, вы научитесь изменять тип маркера, расположение маркера относительно элемента списка, создавать собственные маркеры и даже изменять цвет маркера.

Думаю, вы уже знаете, что в HTML 5 применяется два основных вида списков (если не брать в расчет списки описаний и элементы меню):

• нумерованный (упорядоченный) список – HTML элемент
  1. маркированный (неупорядоченные) список – HTML элемент

     CSS предоставляет нам широкие возможности форматирования внешнего вида этих списков, давайте рассмотрим основные из них.

     Изменение типа маркера

     Первое свойство, которое хотелось бы рассмотреть это свойство list-style-type , оно задает тип маркера элемента списка.

     Меню навигации, к примеру, часто составляется из обычных маркированных списков (HTML элемент

     ), по умолчанию маркер которых, отображается в форме закрашенного круга, чтобы его убрать необходимо, воспользоваться CSS свойством list-style-type со значением none :
     ul { list-style-type : none ; /* убираем маркер у списка */ }

     Для маркированных (неупорядоченных) списков (HTML элемент

     ) предусмотрено три типа маркеров: в форме закрашенного кружка (disc - это значение по умолчанию), маркер в форме полого круга (сircle ) и в форме квадрата (square ), а для нумерованных (упорядоченных) списков (элемент
     ) все оставшиеся варианты. Полный перечень размещен в следующей таблице:

     Значение	Описание
     none Элемент списка Элемент списка Элемент списка	Маркер не отображается.
     disc Элемент списка Элемент списка Элемент списка	Маркер в форме закрашенного кружка. Это значение по умолчанию.
     armenian Элемент списка Элемент списка Элемент списка	Числовой маркер (традиционная Армянская нумерация).
     circle Элемент списка Элемент списка Элемент списка	Маркер в форме круга.
     cjk-ideographic Элемент списка Элемент списка Элемент списка	Простые идеографические числа.
     decimal Элемент списка Элемент списка Элемент списка	Числовой маркер (десятеричные арабские числа, начинающихся с 1).
     decimal-leading-zero Элемент списка Элемент списка Элемент списка	Числовой маркер (десятеричные арабские числа, начинающихся с 1 и дополненные начальным нулем - 01, 02, 03...).
     georgian Элемент списка Элемент списка Элемент списка	Числовой маркер (традиционная Грузинская нумерация - an, ban, gan, ..., he, tan, in, in-an...).
     hebrew Элемент списка Элемент списка Элемент списка	Числовой маркер (традиционная Еврейская нумерация.).
     hiragana Элемент списка Элемент списка Элемент списка	Числовой маркер (японская слоговая азбука Хирагана - a, i, u, e, o, ka, ki...).
     hiragana-iroha Элемент списка Элемент списка Элемент списка	Числовой маркер (японская слоговая азбука Хирагана ироха - i, ro, ha, ni, ho, he, to, ...).
     katakana Элемент списка Элемент списка Элемент списка	Числовой маркер (японская слоговая азбука Катакана - A, I, U, E, O, KA, KI, ...).
     katakana-iroha Элемент списка Элемент списка Элемент списка	Числовой маркер (японская слоговая азбука Катакана ироха - I, RO, HA, NI, HO, HE, TO, ...).
     lower-alpha Элемент списка Элемент списка Элемент списка	Буквы ascii нижнего регистра (a, b, c, d...z).
     lower-greek Элемент списка Элемент списка Элемент списка	Строчные греческие буквы (α, β, γ, δ, и т.д.).
     lower-latin Элемент списка Элемент списка Элемент списка	Строчные латинские буквы (a, b, c, d,...z).
     lower-roman Элемент списка Элемент списка Элемент списка	Римские числа в нижнем регистре (i, ii, iii, iv, v и т.д.).
     square Элемент списка Элемент списка Элемент списка	Маркер в форме квадрата.
     upper-alpha Элемент списка Элемент списка Элемент списка	Буквы ascii верхнего регистра (A, B, C, D,...Z).
     upper-latin Элемент списка Элемент списка Элемент списка	Заглавные латинские буквы (A, B, C, D,...Z).
     upper-roman Элемент списка Элемент списка Элемент списка	Римские цифры в верхнем регистре (I, II, III, IV, V и т.д.).

     Обращаю Ваше внимание, что значения hebrew , cjk-ideographic , hiragana , hiragana-iroha , katakana , katakana-iroha не поддерживаются браузером Internet Explorer .

     Давайте рассмотрим пример использования свойства list-style-type в тексте:

     /* список со значением типа маркера по умолчанию (disc). */
     • Элемент списка
     • Элемент списка
     • Элемент списка
     /* нумерованный список с типом маркера lower-roman */
     1. Элемент списка
     2. Элемент списка
     3. Элемент списка
     /* маркированный список с типом маркера circle */
     • Элемент списка
     • Элемент списка
     • Элемент списка

     В данном примере мы создали два стиля, первый устанавливает тип маркера - римские числа в нижнем регистре (значение lower-roman ), мы его применили к нумерованном списку (HTML элемент

     ), а к маркированному списку (HTML элемент
     ) мы применили стиль, который устанавливает тип маркера в форме полого круга (значение circle ).

     Результат нашего примера:

     Обращаю Ваше внимание, что вы можете применить свойство list-style-type даже к отдельно взятому элементу списка (HTML элемент

     • ), чтобы установить свой тип маркера, либо создать стили, которые будет применять определённый маркер к чётным, либо нечетным элементам списка, как рассмотрено в следующем примере:
       • Элемент списка
       • Элемент списка
       • Элемент списка
       • Элемент списка
       • Элемент списка
       • Элемент списка
       • Элемент списка
       • Элемент списка

       В этом примере мы стилизовали все нечетные элементы списка - указали тип маркера квадрат , а цвет текста указали зеленый . Четные элементы списка получили следующий стиль: красный цвет текста и отсутствие маркера.

       Результат нашего примера:

       Расположение маркера относительно элемента списка

       Результат нашего примера:

       Рис. 71 Пример использования свойства list-style-position (расположение маркера / цифры в списках).

       Создание собственных маркеров

       Рано или поздно перед Вами встанет необходимость создать маркеры списка со своим дизайном, благодаря CSS свойству list-style-image мы это желание сможем реализовать в Вашем проекте.

       Синтаксис свойства следующий:

       ol { list-style-image : url("images/primer.png") ; /* указываем относительный путь к изображению */ } ul { list-style-image : ; /* указываем абсолютный путь к изображению */ }

       Значение в скобках соответствует пути к изображению, которое вы планируете использовать в роли маркера. Путь к изображению может быть как абсолютный, так и относительный. При указании относительного пути, важным моментом является то, что его необходимо указывать относительно размещения таблицы стилей, а не страницы .

       Если вы планируете оформить собственные маркеры, то вам придется использовать программу для редактирования графики, либо воспользоваться уже готовыми наборами. Обратите внимание на такой момент, который может произойти, даже если Вы все сделали правильно, изображение может не загрузиться на страницу, в этом случае необходимо отредактировать изображение таким образом, чтобы его фон стал прозрачным.

       Давайте рассмотрим пример использования собственных маркеров в документе:

       .test { list-style-image : url("http://сайт/images/mini5.png") ; /* указываем абсолютный путь к изображению, которое будет использовано в качестве маркера */ }
       • Элемент списка
       • Элемент списка
       • Элемент списка

       В данном примере мы указываем абсолютный путь к изображению, которое будет использовано в качестве маркера.

       Результат нашего примера:

       Изменение цвета маркера в CSS

       В завершении этой статьи давайте рассмотрим продвинутый способ изменения цвета маркера без изменения цвета элемента, с использованием CSS свойства content и ранее рассмотренного псевдоэлемента :before :

       • Элемент списка
       • Элемент списка
       • Элемент списка

       Суть этого способа заключается в том, что мы перед каждым элементом списка (HTML элемент

     • ) вставляем псевдоэлементом (:before) сгенерированный контент (CSS свойство content), который идентичен по внешнему виду маркеру в маркированном списке (HTML элемент
       ), только уже необходимого для нашей задачи цвета .

       Обращаю Ваше внимание, что в данном примере использовано свойство padding-right , которое нам позволило сделать внутренний отступ справа в каждом элементе списка (HTML элемент

       • ). Если в данном случае не применять это свойство, то маркер будет находится в упор к тексту, что зрительно некрасиво. Работа с внутренними и внешними отступами элементов будет подробно рассмотрена в следующей статье учебника " ".

         Вопросы и задачи по теме

         Перед тем как перейти к изучению следующей темы пройдите практические задания:

         
         

         Если у Вас возникают трудности при выполнении практического задания, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу, чтобы понять какой код CSS был использован.

         2016-2019 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу сайт@gmail.com

         Мы с Вами уже знакомились с таким немаловажным элементом как список и действительно хорошее средство для структуризации данных. Однако списки организованные одними средствами HTML весьма убоги в плане дизайна и не радуют глаз человека.

         В этой главе мы немного поколдуем над списками с помощью свойств CSS. Так мы будем говорить о стиле списка, то для обучения Вам понадобится базовая информация о тегах:

         1. - изложенная в учебнике HTML глава 9 - рекомендую освежить в голове информацию о данных элементах, прежде чем приступать к работе.

            Ну а если в голове и так свежо тогда начнем!

            Вид маркера в списке.

            Если Вы помните, то в чистом HTML вид маркера в списке определял атрибут type и одно из его возможных значений, в CSS данную задачу берёт на себя свойство: list-style-type которое, в свою очередь, тоже имеет свои стандартные значения определяющие вид маркера как всего списка сразу, так и его отдельного "пункта".

            Значения list-style-type:

            • disc - Диск. (по умолчанию для
              )
              • circle - Полый круг.
              • square - Квадрат.
              • decimal - Арабские цифры. (по умолчанию для
                )
                1. lower-roman - Строчные римские цифры.
                2. lower-alpha - Строчные буквы.
                3. upper-roman - Заглавные римские цифры.
                4. upper-alpha - Заглавные буквы.
                5. none - Маркер отсутствует.

              
              
              
              
              
              
              

              
              
              • Пункт 1.
                
              • Пункт 2.
                
              • Пункт 3 (особенный).
                
              
              
              
              
              • Пункт 1.
                
              • Пункт 2.
                
              • Пункт 3.
                
              
              
              

              Пользовательский маркер рисунок.

              Наиболее интересным CSS инструментом для работы со стилем списка является, на мой взгляд, возможность вместо стандартных "скучных" маркеров описанных выше использовать свои собственные нестандартные изображения - небольшие рисунки, вписывающиеся в общий дизайн Вашего сайта.

              Эту задачу выполняет свойство list-style-image которое определяет в качестве маркера списка некое графическое изображение с указанием пути к нему.

              Значений данного свойства всего два:

              • none - Отменяет графическое изображение маркера.
              • url - Путь к файлу с рисунком маркера.

              Путь к рисунку после url указывается в круглых скобках.

              Такая запись будет говорить о том, что рядом с документом есть папка graphics в которой лежит файлик-рисунок: " " - под названьем marker.gif

              Теперь попрубуем сделать так, что бы каждый пункт нашего списока был промаркерован этим рисунком. Смотрим пример:

              
              
              
              
              
              
              

              
              
              • Первый любимый пункт.
                
              • Второй любимый пункт.
                
              • И не менее любимый третий пункт.
                
              
              
              

              Стиль обтекания маркера списком.

              Свойство list-style-position указывает браузеру на то, как следует отображать текст в списке относительно его маркеров. По умолчанию маркеры находятся в стороне от текста списка, но можно сделать так, что они будут обтекаться текстом.

              Возможных значений свойства list-style-position всего два:

              • outside - Маркер находится в стороне от списка.(по умолчанию)
              • inside - Маркер обтекается текстом.

              Пример для наглядности:

              
              
              
              
              
              
              
              

              
              

              Здесь маркер обтекается текстом:

              
              

              
              
              • 
                
              • 
                

              
              
              
              
              
              

              А здесь нет:

              
              

              
              
              • Пункт, в котором говорится о том, что хорошо бы было сделать, что-то там, где это что-то еще не сделано.
                
              • Пункт, в котором говорится о том, что неплохо бы было сделать, нечто там, где это нечто еще не сделано.
                

              
              
              
              
              

              list-style

              Базовое свойство list-style используется, когда стилю списка необходимо одновременно присвоить несколько значений. Может иметь от одного до трёх значений из свойств применяемых к стилю списка, в любой последовательности через пробел.

              Все три свойства и их возможные значения мы рассмотрели выше, поэтому повторятся не буду, а просто выложу внутри страничную навигацию:

              Если в голове остались какие то пробелы можете вернуться и перечитать.

              
              
              
              
              
              
              

              
              

              
              
              • - Этот список использует в качестве маркера рисунок.
                
              • - Текст этого списка обтекает маркер.
                

              
              
              
              
              

              Списки наряду с заголовками, выделенным текстом и картинками, являются элементами, которые приковывают взгляд посетителя при беглом просмотре страницы. Умелое и ненавязчивое размещение таковых элементов залог того, что посетитель окунётся в чтение Вашего документа более глубоко.

              Так как списки являются великолепным инструментом для структуризации данных, а свойства CSS позволяют создать практически любой их дизайн, используйте списки, помимо их основного назначения, в качестве "меню" - навигации по сайту, где каждый пункт является ссылкой на ту или иную страницу Вашего сайта.

              Помню как в июле 1999 года я просвещал людей в мейл-листах о прелестях стилевой вёрстки. С тех пор мало что поменялось.

              Впрочем, кое-что поменялось. Поменялся мой взгляд на CSS и на (X)HTML, который выступает в роли каркаса для стилей. Например, я обнаружил, что большинство страниц содержат панель навигации. Чаще всего она оформляются как простая текстовая строка со ссылками, разделенными тегами

              или

              Структурно же они представляют собой списки ссылок, и следовательно должны оформляться как таковые.

              Причина, по которой мы не оформляем их как списки, состоит в том, что нам не очень хочется перед каждой ссылкой в меню видеть маркер. Ранее я рассказал о некоторых приемах верстки страниц с помощью CSS. В одном из тех приемов мы научились выводить списки в строку, а не вертикально.

              В данной же статье я покажу, как с помощью CSS можно укротить эти неповоротливые и неуклюжие списки. Хватит им беспризорно шататься по вашим веб-страницам. Настало ваше время командовать им, как себя вести.

              Готовим арену

              В качестве предмета дрессировки я выбрал простые ненумерованные списки. Все упомянутые тут правила CSS можно применить и к нумерованным спискам с тем же результатом. Во всех примерах (кроме специально оговоренных случаев) используется следующий список:

              • Item 1
              • Item 2
              • Item 3
              • Item 4
              • Item 5 сделаем этот пункт немного длиннее, чтобы он переходил на следующую строку

              Каждый список просто помещен внутрь отдельного элемента

              , и поведение списка определяется с помощью этого DIV-а. Базовое правило, действующее на все DIV-ы, таково:

              Без каких-либо дополнительных стилевых правил, список в базовом DIV-е будет выглядеть так:

              Позиционирование

              Иногда для вашего дизайна отступ в списке принятый по умолчанию может оказаться слишком большим. Но изменение только свойства margin или padding для элемента

              срабатывает не для всех броузеров. Для того, чтобы список полностью передвинулся скажем влево, вам необходимо поменять оба свойства: и margin, и padding. Связано это с тем, что Internet Explorer и Opera создают левый отступ у списка с помощью левого margin, а Mozilla/Netscape используют для этого левый padding.

              В следующем примере свойствам margin-left и padding-left у элемента UL присвоено значение 0:

              Обратите внимание, что маркеры лежат за границей DIV-а. Если бы контейнером был не DIV, а документа, маркеры оказались бы за пределами окна броузера, т.е. пропали бы с глаз долой. Если вы хотите, чтобы маркеры лежали внутри границ DIV-а, вдоль левого его края, присвойте либо свойству left-padding либо свойству left-margin значение «1em».

              Маркеры

              Скажем, вам понадобился список с особыми маркерами. Как вы поступали раньше? Создавали таблицу, в одной колонке размещали gif-картинку маркера и смещали ее в ячейке вверх и вправо. В другой колонке размещали текст, который должен был бы находится в элементах

              • . Теперь CSS позволяет использовать изображение в качестве маркера. Если броузер не поддерживает эту функцию CSS (или не поддерживает вывод графики), будет использован маркер по умолчанию (либо тот, который вы укажите на этот случай).

                Стилевое правило выглядит так:

                ul { list-style-image: url(bullet.gif); }

                А броузер покажет список так:

                Для тех броузеров, которые не поддерживают вывод графики, добавьте в правила следующую строчку:

                list-style-type: disc;

                Изображения, выбранное вами в качестве маркера, может «выползти» за границы списка. Чтобы этого не произошло, поместите изображение внутрь блока

              • . Для этого добавьте следующую строку:

                list-style-position: inside;

                Все три декларации можно объединить в одно краткое правило:

                ul { list-style: disc url(bullet.gif) inside; }

                что эквивалентно

                ul { list-style-type: disc; list-style-image: url(bullet.gif); list-style-position: inside; }

                Список в результате будет выглядеть так:

                Бывает так, что у вас есть список, но вам не нужны маркеры, или вы хотите использовать в качестве маркера какой-то другой символ. Опять-таки CSS спешит к вам на помощь. Добавьте правило list-style: none; и сделайте элементы

              • «надвисающими». Всё правило целиком будет выглядеть так:

                ul { list-style: none; margin-left: 0; padding-left: 1em; text-indent: -1em; }

                Либо свойство левый padding, либо свойство левый margin должно иметь значение 0, а другое — значение 1em. Меняя это свойство вы можете подогнать размер отступа от вашего маркера до приемлемого. Отрицательное значение в свойстве text-indent приводит к тому, что первая строка каждого пункта списка сдвигается влево и «надвисает» над остальным текстом.

                Следующий наш список будет обычным, только в качестве маркера будет использован стандартный HML-символ, например », который соответствует закрывающей типографской кавычке: «.

                Здесь следует отметить, что Netscape6/7/Mozilla (и другие производные Gecko-броузеры), а также Opera умеют генерировать контент с помощью псевдо элемента:before из стандарта CSS2. Воспользуемся этой функцией и сгенерируем автоматически символ » или какой другой символ в качестве маркера. Таким образом нам не надо будет вписывать его вручную в каждый LI элемент. Если вы работает с броузером Opera или с семейством броузеров Gecko, нижеприведенный CSS создаст такой же список, что и предыдущий, при этом в сам список ничего дополнительно добавлять не нужно.

                #custom-gen ul li:before { content: "0BB 020"; }

                Свойству content может быть присвоена текстовая строка, URL или что-то другое, включая специальные символы. Если вы остановили свой выбор на символе типа », в свойстве надо прописать шестнадцатеричный код этого символа. У правой типографской кавычки это код 0BB (другой символ 020 — это пробел, добавлен из эстетических соображений). Конечный результат представлен ниже (смотрите броузером Opera или Mozilla/Netscape):

                Выстраиваем список в ряд

                Кто сказал, что списки должны идти вертикально и оформляться слева маркерами? К примеру вам нужен нумерованный список ссылок, но визуально вы хотите, чтобы этот список на странице выглядел как вертикальная панель навигации. Или скажем, вы хотите, чтобы ссылки располагались горизонтально вдоль верхнего края страницы.

                Это касается не только списка ссылок. Вам может понадобиться привести список несколько раз внутри абзаца (например, список книг). Структурно — это список, но раньше если бы вы такое сделали, этот список разорвал бы ваш абзац. CSS опять приходит к вам на помощь!

                Так как данный список не будет являться на странице чем-то отдельным, я не буду помещать его в базовый DIV, как предыдущие списки. На этот раз разметка будет выглядеть так: абзац, список, следующий абзац.

                Уже слышу крики: «Болван! Мы думали ты научишь нас, как помещать списки внутри абзаца, а не между двумя абзацами.»

                И на это я отвечу: «Ну да, вы правы. К сожалению (X)HTML не разрешает помещать списки внутрь абзаца. Однако с помощью стилей вы можете сделать вот что».

                Сначала, вот стилевые правила:

                #inline-list { border: 1px solid #000; margin: 2em; width: 80%; padding: 5px; font-family: Verdana, sans-serif; } #inline-list p { display: inline; } #inline-list ul, #inline-list li { display: inline; margin: 0; padding: 0; color: #339; font-weight: bold; }

                Весь код помещен в

                . В нем находится абзац, потом стандартный список UL, и за ним — еще один абзац. Список UL был отредактирован таким образом, чтобы после каждого пункта была запятая, а за последним пунктом шла точка.

                Результат выглядит так (список выделен синим цветом):

                Как и в примере выше с маркером мы можем с помощью CSS автоматически генерировать запятые и точки. Если ваши посетители пользуются только броузерами Opera и Gecko, вам не о чем беспокоиться. Стилевые правила будут выглядеть вот так:

                #inline-list-gen ul li:after { content: ", "; } #inline-list-gen ul li.last:after { content: ". "; }

                Здесь мы используем псевдо-элемент:after для добавления запятой в конце каждого пункта списка, а точку ставим с помощью класса class=»last». Результат будет таким (помните, он работает только в Opera или Mozilla/Netscape):

                Навигация

                Как я уже сказал в самом начале меню ссылок, которые мы видим на каждом сайте, должны быть оформлены как списки, чем они по сути и являются. Так как мы не хотим видеть этот список так, как его выводит броузер по умолчанию, воспользуемся CSS для внесения косметических изменений. Мы уже знаем, что списки можно специально выводить горизонтально (в одну строчку), а не только вертикально (как они выводятся по умолчанию). С помощью стилей маркеры можно убрать, а в ваших руках появляется широкий набор возможностей, как визуально отделить один пункт списка от другого.

                Вот примеры горизонтальных списков, помещенных в один и тот же базовый DIV со следующими правилами.

                Два примера ниже используют все тот же UL только без длинного текста в последнем пункте. Добавлен также дополнительный класс, который позволяет отдельно работать с одним из LI в списке.

                Границы

                Символ | часто используется для обозначения различных вариантов выбора. Вполне естественно использовать его в меню. Сымитируем этот символ с помощью границ у LI.

                #pipe ul { margin-left: 0; padding-left: 0; display: inline; } #pipe ul li { margin-left: 0; padding: 3px 15px; border-left: 1px solid #000; list-style: none; display: inline; } #pipe ul li.first { margin-left: 0; border-left: none; list-style: none; display: inline; }

                Правила можно изменить, чтобы придать списку вид закладок:

                #tabs ul { margin-left: 0; padding-left: 0; display: inline; } #tabs ul li { margin-left: 0; margin-bottom: 0; padding: 2px 15px 5px; border: 1px solid #000; list-style: none; display: inline; } #tabs ul li.here { border-bottom: 1px solid #ffc; list-style: none; display: inline; }

                Примечание: этот прием был предложен Ренделом Растом (Randal Rust), а затем его улучшили подписчики списка рассылки css-discuss

                Ссылки-цепочки

                Еще один тип ссылок, которые обычно располагаются горизонтально на веб-странице — это известные всем нам ссылки-цепочки (breadcrumb links). Эти ссылки показывают наглядно, где в иерархии сайта вы сейчас находитесь — весь ваш путь от главной страницы до текущего раздела или страницы. Если вы действительно хотите сделать код вашей страницы семантически правильным, этот тип ссылок следует оформить как серию вложенных списков, так как каждый раздел является частью предыдущего раздела:

                • Home
                  • » Products
                    • » Computers
                      • » Software

                в результате получаем:

                Применив следующие правила:

                #bread { color: #ccc; background-color: #006; padding: 3px; margin-bottom: 25px; } #bread ul { margin-left: 0; padding-left: 0; display: inline; border: none; } #bread ul li { margin-left: 0; padding-left: 2px; border: none; list-style: none; display: inline; }

                получаем вот что:

                И опять-таки символ «»» (или любой другой подходящий символ) можно генерировать автоматически с помощью псевдо-элемента:before в сочетании с классом class=»first», чтобы первый пункт LI не имел этого символа.

                #bread-gen ul li:before { content: "020 020 020 0BB 020"; color: #ff9; } #bread-gen ul li.first:before { content: " "; }

                Конечный результат:

                Мир реалий

                Закончу свою статью реальным примером, в котором использован вышеописанный трюк. Мы возьмем стандартный список UL со ссылками и создадим динамическое меню с эффектами перекатывания. Для создания эффекта перекатывания визуальные стили будут применяться к элементам A, а элементы UL и LI будут служить лишь как структурный каркас.

                Это меню — фактически ответ на вопрос, заданный Майклом Эффордом (Michael Efford) в списке рассылки css-discuss. Майкл создал в точности такое же меню с помощью таблиц, графики и JavaScript. Затем он спросил в списке рассылки, можно ли то же самое получить с помощью CSS.

                • Home
                • Hidden Cameras
                • CCTV Cameras
                • Employee Theft
                • Helpful Hints
                • F.A.Q
                • About Us
                • Contact Us

                Дайте разберем стилевую таблицу правило за правилом, и я объясню для чего нужно каждое из них.

                #button { width: 12em; border-right: 1px solid #000; padding: 0 0 1em 0; margin-bottom: 1em; font-family: "Trebuchet MS", "Lucida Grande", Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif; background-color: #90bade; color: #333; }

                Первое правило — для DIV-а #button. Оно задает, сколько места будет занимать меню, и создает контекст, чтобы мы могли управлять поведением ссылок и пунктов списка. Я предпочел сделать меню гибким и зависимым от установок броузера, поэтому (почти) все значения заданы в "em"-ах. Включая ширину меню. Черная граница была взята из исходного дизайна Майкла. Большой нижний отступ (padding) у меню сделан для того, чтобы вы могли видеть фон у DIV. Опять таки, это было сделано, чтобы повторить исходный дизайн. Нижнее поле (margin) используется для того, чтобы отделить меню от того, что за ним идет. Все цвета взяты из исходного дизайна.

                #button ul { list-style: none; margin: 0; padding: 0; border: none; } #button li { border-bottom: 1px solid #90bade; margin: 0; }

                Тут я определил, как должен выглядеть список. Так как все пункты списка у нас являются ссылками, а эффект перекатывания пока имеется только у ссылок, я намеренно удалил все стилистические правила из списков. Я добавил лишь границу шириной в один пиксель, у которой цвет совпадает с цветом фона DIV-а #button. Эта граница служит разделителем между пунктами меню. В исходном дизайне для этого использовалась отдельная картинка.

                #button li a { display: block; padding: 5px 5px 5px 0.5em; border-left: 10px solid #1958b7; border-right: 10px solid #508fc4; background-color: #2175bc; color: #fff; text-decoration: none; width: 100%; } html>body #button li a { width: auto; } #button li a:hover { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; }

                Наконец, я дошел до ссылок. В исходном дизайне слева и справа были границы по 10 пикселей каждый. Эти границы меняли свой цвет вместе с фоном при наведении мышки. Это поведение довольно просто получить с помощью псевдо-класса:hover, поэтому эффект изменения цвета границ и фона применен к элементам .

                Здесь воспользовался одним трюком: чтобы поведение ссылок распространялось на весь блок (по ширине и высоте), я присвоил им правило display: block;. Это сработало во всех броузерах, кроме IE для Windows. Если вы явно укажите ширину в 100%, IE для Windows все поймет. Но при этом вы получаете проблемы в броузерах IE5 для Mac и Netscape/Mozilla. Поэтому я схитрил: с помощью дочернего селектора «>» я присвоил ширине значение «auto». Так как броузер IE для Windows не понимает дочерних селекторов, он игнорирует это правило. IE5 для Mac, Opera и Netscape/Mozilla понимают это правило, и все остались довольными.

                Правило для псевдо-класса:hover меняет цвет фона и границ при наведении мышки на ссылку.

                Все стилевые правила и список (1 кб кода) заменили примерно 5кб JavaScript-ов и вложенных таблиц, не говоря уже о примерно 8кб графических файлов, использовавшихся для создания эффекта перекатывания. Кроме того разметка стала более читаемой, ее легче обновлять, так как вам не нужно создавать новые картинки, если поменяется название какого-либо меню. Достаточно лишь поменять текст. Окончательный вариант меню вы можете посмотреть на сайте Asset Surveillance.

                Вершина айсберга

                Хотите верьте, хотите — нет, но мы лишь слегка затронули тему списков и того, что с ними можно вытворять с помощью CSS. Я не утверждаю, что все приемы, изложенные тут, являются верхом совершенства, но я очень надеюсь что данная статья изменит ваше отношение к CSS и привлечет ваше внимание к идее структурной верстки.

                Свойство list-style-type устанавливает вид маркера. Вот таблица допустимых значений для этого свойства:

                Значение	Пример
                disc	Пункт списка
                circle	Пункт списка
                square	Пункт списка
                decimal	Пункт списка
                decimal-leading-zero	Пункт списка
                lower-roman	Пункт списка
                upper-roman	Пункт списка
                lower-alpha	Пункт списка
                upper-alpha	Пункт списка
                georgian	Пункт списка Пункт списка Пункт списка
                cjk-ideographic	Пункт списка Пункт списка Пункт списка
                none	Пункт списка

                В таблице я указал два весьма необычных свойства: georgian и cjk-ideographic . Эти свойства используются регионально. Есть ещё несколько похожих любопытных значений этого свойства, например armenian или hiragana , но все их перечислять нет смысла.

                Теперь пример использования этого свойства:

                1. Первый пункт.
                2. Второй пункт.
                3. Третий пункт.

                Обратите внимание, мы превратили нумерованный список

                в маркированный.

                Рисунок 1. Свойство list-style-type.

                Обязательно обратите внимание на значение none , это значение убирает маркеры вообще. Это свойство часто используется для форматирования списков при помощи CSS.

                Свойство list-style-type достаточно простое, как и остальные свойства по работе со списками.

                Свойство list-style-image устанавливает символом маркера графический файл.

                • Первый пункт.
                • Второй пункт.
                • Третий пункт.

                Вот что мы видим:

                Рисунок 3. Форматируем блок
                .

                Тут важно обратить внимание на то, что маркеры списка выходят за границу блока элемента

                • , обрамлённого красной границей. Это может привести к неожиданным результатам, вот например обнулим внутренние отступы
                  .
                  • Первый пункт.
                  • Второй пункт.
                  • Третий пункт.

                  Вот что мы получим:

                  Рисунок 4. Форматируем блок
                  .

                  Теперь маркеры списка вышли за пределы контейнера

                  . Таким образом маркеры могут выйти и за пределы контейнера статьи, к которой принадлежит список, что нарушит внешний вид сайта.

                  Лучше бы поместить их внутрь контейнера

                  • . Это бы решило данную проблему. Вот для этого и существует свойство list-style-position .

                    Свойство list-style-position устанавливает положение маркера относительно блока

                  • . Это свойство имеет два значения:

                    По умолчания используется значение outside .

                    Применим это свойство к нашему примеру и поместим маркеры в блок

                  • , установив этому свойству значение inside .
                    • Первый пункт.
                    • Второй пункт.
                    • Третий пункт.

                    Вот что мы получили:

                    Рисунок 5. Свойство list-style-position.

                    Теперь маркеры списка вложены в блок

                  • .

                    Свойство list-style

                    Свойство list-style является сокращённой формой, позволяющей использовать значения всех трёх предыдущих свойств.

                    Пример: сделаем картинку маркером и поместим маркер внутрь блока пункта списка.

                    • Первый пункт.
                    • Второй пункт.
                    • Третий пункт.

                    Вот результат:

                    Рисунок 6. Свойство list-style.

                    Мы в одном свойстве list-style указали два значения: положение маркера и путь графичекого файла маркера.

                    Свойство list-style используют чаще всего, даже для задания одного значения. Оно короткое, его легко написать.

                    Рецепты CSS по теме

                    • Как сделать ниспадающее меню на CSS , сложный пример с тенями.

                    Задача

                    Скрыть отображение маркеров в списке.

                    Решение

                    Для этой цели применяется стилевое свойство list-style-type со значением none . Его следует добавить к селектору UL или LI как показано в примере 1.

                    Пример 1. Список без маркеров

                    HTML5 CSS 2.1 IE Cr Op Sa Fx

                    • Север
                    • Юг
                    • Запад
                    • Восток

                    Результат данного примера показан на рис. 1.

                    Рис. 1. Список без маркеров

                    Маркеры хотя и не отображаются в списке, но текст при этом всё равно оказывается сдвинут вправо. Чтобы управлять положением элементов списка, для селектора UL в данном примере добавлены свойства margin-left и padding-left . Два свойства вместо одного требуется, чтобы одинаково показывать результат в разных браузерах.