List style type цвет. Правила CSS для настройки внешнего вида списка на html странице. Свойство list style (type, image, position)

Без каких-либо дополнительных стилевых правил, список в базовом 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. Эта граница служит разделителем между пунктами меню. В исходном дизайне для этого использовалась отдельная картинка.

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

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

  Оформление списков с помощью CSS-стилей

  1. Тип маркера списка list-style-type

  Свойство изменяет типа маркера или удаляет маркер для маркированного и нумерованного списков. Наследуется.

  list-style-type
  Значения:
  disc	Значение по умолчанию. В качестве маркера элементов списка выступает закрашенный кружок.
  armenian	Традиционная армянская нумерация.
  circle	В качестве маркера выступает незакрашенный кружок.
  cjk-ideographic	Идеографическая нумерация.
  decimal	1, 2, 3, 4, 5, …
  decimal-leading-zero	01, 02, 03, 04, 05, …
  georgian	Традиционная грузинская нумерация.
  hebrew	Традиционная еврейская нумерация.
  hiragana	Японская нумерация: a, i, u, e, o, …
  hiragana-iroha	Японская нумерация: i, ro, ha, ni, ho, …
  katakana	Японская нумерация: A, I, U, E, O, …
  katakana-iroha	Японская нумерация: I, RO, HA, NI, HO, …
  lower-alpha	a, b, c, d, e, …
  lower-greek	Строчные символы греческого алфавита.
  lower-latin	a, b, c, d, e, …
  lower-roman	i, ii, iii, iv, v, …
  none	Маркер отсутствует.
  square	В качестве маркера выступает закрашенный или незакрашенный квадрат.
  upper-alpha	A, B, C, D, E, …
  upper-latin	A, B, C, D, E, …
  upper-roman	I, II, III, IV, V, …
  initial	Устанавливает значение свойства в значение по умолчанию.
  inherit	Наследует значение свойства от родительского элемента.

  Синтаксис

  Ul {list-style-type: none;} ul {list-style-type: square;} ol {list-style-type: none;} ol {list-style-type: lower-alpha;}
  Рис. 1. Пример оформления маркированного и нумерованного списков

  2. Изображения для элементов списка list-style-image

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

  Синтаксис

  Ul {list-style-image: url("images/romb.png");} ul {list-style-image: linear-gradient(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);}
  Рис. 2. Оформление маркированного списка с помощью изображения Рис. 3. Оформление маркированного списка с помощью градиента

  3. Местоположение маркера списка list-style-position

  Данное свойство предоставляет возможность располагать маркер вне или внутри содержимого элемента списка. Наследуется.

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

  Чуть раньше мы уже успели узнать как , как и как можно работать со . Ну, а еще чуть раньше мы во всех подробностях рассмотрели всевозможные и их различные комбинации для указания именно того элемента Html кода, для которого нужно будет применить определенные свойства стилевого оформления.

  List style — оформление списков в Html коде

  Итак, в языке стилевой разметки существует три отдельных правила начинающихся с list-style, которые служат для настройки внешнего вида списков (нумерованных или маркированных) в коде веб документов. Кроме этого существует сборное Css правило list-style, которое позволяет несколько сократить количество кода. Но обо всем по порядку.

  То, что мы сейчас будем с вами рассматривать, допустимо использовать как для Html элементов LI, так и для элементов Ul и Ol (маркированный и нумерованный списки, соответственно). В чем будет разница применения list-style для этих тегов?

  Собственно, узнать, наследуется ли свойство или нет, можно на сайте валидатора (читайте про по приведенной ссылке) в разделе посвященном спецификации таблиц каскадных стилей. В столбце «Inherited» напротив наследуемых правил будет стоять «Yes»:

  

  Давайте начнем с list-style-type , которое позволяет задать тип маркирации для отдельных элементов Html списка. Для этого правила допустимы следующие значения:

  1. None — маркирация осуществляться вообще не будет (list-style-type:none; применено для этого пункта и поэтому у него нет маркера)
  2. Disc — закрашенный кружок (для этой строки как раз применено list-style-type:disc;)
  3. Circle — окружность в качестве маркера
  4. Square — квадратик в качестве маркера
  5. Decimal — арабские цифры (list-style-type:decimal;)
  6. lower-alpha — латинские буквы в нижнем регистре
  7. upper-alpha — латинские буквы в верхнем регистре
  8. lower-roman — римские цифры в нижнем регистре
  9. upper-roman — римские цифры в верхнем регистре

  Как вы думаете, с помощью каких элементов Ul или Ol был создан расположенный чуть выше список? Вопрос на засыпку. Оказывается, что это уже не важно, хотя в данном конкретном случае я использовал Ol, но изменив его на Ul — внешний вид останется прежним, ибо он задается для каждого элемента своим значением CSS правила list style type.

  По сути Ul и Ol отличаются только поведением по умолчанию (Ul — маркирует, а Ol — нумерует). Но если вы захотите, то сможете легко превратить один вид списка в другой с помощью list-style-type. Шрифт для маркирования цифрами или буквами используется точно такой же, какой был вами определен для содержимого тегов LI. Например, поменяв цвет шрифта для списка мы поменяем и цвет маркеров :

  1. Поменяли цвет текста (list-style-type:lower-roman;color:red) и поменялся цвет маркера

  Давайте перейдем с следующему CSS свойству — list-style-position . С помощью него можно задать позицию (размещение) области с маркером. Для него предусмотрено всего два варианта значений:

  Т.е. по сути в list-style-position мы указываем, где нужно размещать область с маркерам — за пределами элемента LI (outside) или внутри него (inside). По умолчанию область с маркером выносится за пределы, т.е. используется значение outside.

  Давайте посмотрим это на примере. В первом элементе списка я специально пропишу list-style-position:inside и мы посмотрим, что из этого выйдет:

  1. Здесь все по умолчанию
  2. Вот так будет выглядеть размещение области маркера с inside. Обратите внимание, что вторая строка в этом элементе и маркер расположены на одном уровне
  3. Здесь все по умолчанию

  List-style-image и сборное Css правило

  Далее у нас на очереди List-style-image — позволяет задать картинку, которая будет использоваться в качестве маркера. Это правило по умолчанию имеет значение None (т.е. никакой картинки в качестве маркера не используется), но вы можете прописать функционал Url (), указав в нем путь до изображения, которое в последствие будет выполнять роль маркера в этом списке:

  

  Выглядеть это может так:

  List-style-image: url(https://сайт/images/list_star.png);

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

  Как вы помните, в статье про я говорил, что картинки относятся к строчным элементам (собственно, для браузера эта та же самая буква, но иногда очень большого размера).

  Вот картинка и встает на место маркера (буквы или цифры). При этом высота строки с элементом списка будет увеличена, если вы вставите в качестве маркера большую картинку (как это произошло во втором элементе приведенного чуть выше примера).

  В функционале для list style image можно указывать как на изображения. Если картинка не подгрузится, то будет использоваться маркер или нумерация по умолчанию, либо то, что прописано в list-style-type для этого элемента списка.

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

  Где посмотреть значения по умолчанию? Да все там же — в спецификации CSS валидатора W3C в столбце «Initial value» напротив интересующих вас свойств:

  

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

  На практике это может выглядеть, например, так:

  List-style:inside upper-roman url(https://сайт/images/list_star.png);

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

  List-style-type:none;

  List-style:none;

  Удачи вам! До скорых встреч на страницах блога сайт

  посмотреть еще ролики можно перейдя на

  ");">
  

  Вам может быть интересно

  Display (block, none, inline) в CSS - задаем тип отображения Html элементов на вебстранице Как настроить чередование фонового цвета строк таблиц, списков и прочих Html элементов на сайте с помощью псевдокласса nth-child
  Float и clear в CSS - инструменты блочной верстки
  Для чего нужен CSS, как подключить каскадные таблицы стилей к Html документу и основы синтаксиса этого языка
  Позиционирование с помощью Z-index и CSS правило Cursor для изменения курсора мыши
  Position (absolute, relative и fixed) - способы позиционирования Html элементов в CSS (правила left, right, top и bottom)
  CSS свойства text-decoration, vertical-align, text-align, text-indent для оформления текста в Html

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

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

  А теперь посмотрите демо-версию, чтобы увидеть, что же мы с вами будем создавать.

  Выглядят гораздо лучше, не так ли? И вы тоже можете создать такие списки при помощи простого CSS кода. Хотите знать как? Читайте!

  Список #1: Простая система навигации

  

  Чаще всего списки используются при создании навигационного меню. Код данного HTML/CSS примера позволяет создать простую, даже немного скромную, но привлекательную систему навигации.

  • Home
  • Blog
  • About
  • Contact

  /* LIST #1 */ #list1 { } #list1 ul { list-style:none; text-align:center; border-top:1px solid #eee; border-bottom:1px solid #eee; padding:10px 0; } #list1 ul li { display:inline; text-transform:uppercase; padding:0 10px; letter-spacing:10px; } #list1 ul li a { text-decoration:none; color:#eee; } #list1 ul li a:hover { text-decoration:underline; }

  Список #2: Использование различного шрифта при нумерации

  

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

  The Netherlands is a country in ...

  The United States of America is a federal constitutional ...

  The Philippines officially known as the Republic ...

  The United Kingdom of Great Britain and ...

  /* LIST #2 */ #list2 { width:320px; } #list2 ol { font-style:italic; font-family:Georgia, Times, serif; font-size:24px; color:#bfe1f1; } #list2 ol li { } #list2 ol li p { padding:8px; font-style:normal; font-family:Arial; font-size:13px; color:#eee; border-left: 1px solid #999; } #list2 ol li p em { display:block; }

  Список #3: Изображения-маркеры

  

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

  • Java
  • .NET

  /* LIST #3 */ #list3 { } #list3 ul { list-style-image: url("../images/arrow.png"); color:#eee; font-size:18px; } #list3 ul li { line-height:30px; }

  Список #4: iPhone-стиль

  

  Данный список взят из статьи the iPhone Contacts App, созданный при помощи CSS и jQuery. Так выглядят списки на iPhone. Очень привлекательно, не так ли? Хотите такой на свой сайт?

  • Toronto2004
  • Beijing2008
  • London2012
  • Rio de Janeiro2016

  /* LIST #4 */ #list4 { width:320px; font-family:Georgia, Times, serif; font-size:15px; } #list4 ul { list-style: none; } #list4 ul li { } #list4 ul li a { display:block; text-decoration:none; color:#000000; background-color:#FFFFFF; line-height:30px; border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#CCCCCC; padding-left:10px; cursor:pointer; } #list4 ul li a:hover { color:#FFFFFF; background-image:url(../images/hover.png); background-repeat:repeat-x; } #list4 ul li a strong { margin-right:10px; }

  Список #5: Вложенные списки

  

  Вложенные списки могут быть необыкновенно полезны и выглядят красиво. Изменив третью технику (Изображения-маркеры), мы можем создать «расширенный список». Конечно же не без помощи jQuery:

  1. Google
     1. Picasa
     2. Feedburner
     3. Youtube
  2. Microsoft
     1. Corel Corporation
     2. Zignals
     3. ByteTaxi
  3. Yahoo!
     1. Xoopit
     2. BuzzTracker
     3. MyBlogLog

  /* LIST #5 */ #list5 { color:#eee; } #list5 ol { font-size:18px; } #list5 ol li { } #list5 ol li ol { list-style-image: url("../images/nested.png"); padding:5px 0 5px 18px; font-size:15px; } #list5 ol li ol li { color:#bfe1f1; height:15px; margin-left:10px; }

  Список #6: Римская нумерация + многострочный тип

  

  По умолчанию в списке используются стандартная нумерация (1, 2, 3, 4 и т.д.). Изменив значение в CSS, вы можете задать другой тип нумерации, к примеру, римский.
  Так же по умолчанию, нумерация и маркеры располагаются вне списка (отличный пример тому - наш список под номером 2). Но и это исправимо, всего лишь нужно изменить значение list-style-position свойства на inside.

  1. Lorem ipsum dolor sit amet, ...
     Fusce sit amet ...
  2. Aenean placerat lectus tristique...
     Vivamus interdum ...
  3. Mauris eget sapien arcu, vitae...
     Phasellus neque risus...
  4. Phasellus feugiat lacus ...
     Duis rhoncus ...

  /* LIST #6 */ #list6 { font-family: "Trebuchet MS", "Lucida Grande", Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif; } #list6 ol { list-style-type: upper-roman; color:#eee; font-size:14px; list-style-position: inside; } #list6 ol li { }

  Список #7: Линейный список, в котором пункты перечисляются через запятую

  

  Обычно списки используются для отображения количества чего-либо и отражаются в виде столбика. Но как быть, если вам нужен линейный список? Это достигается путем смены значения display свойства на inline. Но если вам вдруг понадобится встроить список в текст, то по правилам, пунктики списка должны быть разделены запятой. Как этого добиться? А, просто, при помощи элемента:after символического кода.

  • First inline item
  • Second inline item
  • Third inline item
  • Fourth inline item

  /* LIST #7 */ #list7 { } #list7 ul { color:#eee; font-size:18px; font-family:Georgia, Times, serif; } #list7 ul li { display: inline; } #list7 ul li:after { content: ", "; } #list7 ul li.last:after { content: ". "; }

  Список #8: Вращающееся навигационное меню

  

  Вот и последняя техника, для работы которой понадобится CSS3 (поддерживается только последними версиями Firefox, Safari и Chrome). При наведении курсора на один из элементов блока включается эффект - вращение. Конечно не самый удобный способ, но очень красивый.

  • Home
  • Blog
  • About
  • Contact

  /* LIST #8 */ #list8 { } #list8 ul { list-style:none; } #list8 ul li { font-family:Georgia,serif,Times; font-size:18px; } #list8 ul li a { display:block; width:300px; height:28px; background-color:#333; border-left:5px solid #222; border-right:5px solid #222; padding-left:10px; text-decoration:none; color:#bfe1f1; } #list8 ul li a:hover { -moz-transform:rotate(-5deg); -moz-box-shadow:10px 10px 20px #000000; -webkit-transform:rotate(-5deg); -webkit-box-shadow:10px 10px 20px #000000; transform:rotate(-5deg); box-shadow:10px 10px 20px #000000; }

  Заключение

  Как видите, реально создать уникальные вещи из обычного html-списка. И все это силами CSS. Очень рад, если вы узнали много интересного для себя.