List style type цвет маркера. CSS Design: Укрощение списков

23.02.2017

Пока нет


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

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

Свойство «LIST-STYLE-TYPE»
Правилом «list-style-type » можно задать вид маркера, например, чтобы отображались цифры, буквы, квадратики, кружочки и др.

Свойство:

  • none – без маркера

- маркированные списки:

  • disk – маркер в виде закрашенного круга;
  • circle – маркер в виде незакрашенного круга;
  • square – маркер в виде закрашенного квадрата;

- нумерованные списки:

  • decimal – обычные десятичные числа (1,2,3,4,5 и т. д.);
  • upper-roman – большие римские цифры (I, II, III, IV, V и т.д.);
  • lower-roman – маленькие римские цифры (i, ii, iii, iv, v и т.д.);
  • upper-alpha – большие буквы (A, B, C, D, E и т. д.);
  • lower-alpha – малые буквы (a,b,c,d,e и т.д.)

Li { list-style-type: circle; /* Маркеры в виде незакрашенного кружочка */ }

Полный пример:

Основы CSS

  • текст №1
  • текст №2

Результат:

Если нужно убрать маркер из списка, тогда воспользуйтесь свойством «none »:

Li { list-style-type: none; /* Убираем маркеры */ }

Результат:

Положение маркера в списке

Свойство « LIST-STYLE-POSITION »
Правилом «list-style-position » можно указать положение маркера.

Свойство:

  • outside – за пределами основного блока списка;
  • inside – внутри основного блока списка.

Li { list-style-position: inside; /* положение маркера */ }

Цвет маркера в списке

Свойство « COLOR »
Вам уже известно правило «color », с помощью которого можно не только менять цвет текста, но и цвет маркера. Посмотрите .

Свойства списков в css

  • Текст №1
  • Текст №2

Результат:

Картинка вместо маркера в списке

Свойство « LIST-STYLE-IMAGE »
Если вам не нравится стандартный вид нумерованных или маркированных списков, вы можете воспользоваться правилом «list-style-image » и вместо обычных маркеров поставить картиночные.

Синтаксис:

List-style-image: url(картинка.png);

LI { list-style-image: url("marker1.png"); /* изображение маркера */ }

«marker1.png » - это картинка маркера.

Результат:

Отступ маркера в списке

Свойство «PADDING-LEFT»
Если вам нужно сделать отступ от маркера до текста, воспользуйтесь правилом «padding-left ».

Li { padding-left: 30px; /* Отступ от маркера до текста */ }

Результат:

ПОДАРОК ДЛЯ ТЕХ, КТО ДОЧИТАЛ ДО КОНЦА

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

Li { list-style-type: none; /* Убираем исходную нумерацию у списка */ } ul { counter-reset: list 5; /* Инициируем счетчик */ } ul li:before { counter-increment: list; /* Увеличиваем значение счетчика */ content: counter(list) ". "; /* Выводим число */ }

Результат:

Жду вас на следующих уроках! Не забывайте подписываться!

Предыдущая запись
Следующая запись

Продолжаем изучать CSS свойства различных элементов. И в этом уроке пойдет речь об оформлении списков. Списки на практике используются достаточно часто, поэтому эти свойства нужно запомнить.

Обычный вид маркера

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

Для демонстрации давайте создадим список, с использованием CSS . Особо не имеет значения какой нумерованный список или ненумерованный список , так как с помощью свойства list-style-typet мы можем добавить маркеры или удалить их.

HTML

HTML страница

  • Ненумерованный список
  • Ненумерованный список
  • Ненумерованный список
  • Ненумерованный список

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

Убирается маркер у списка с помощью свойства list-style-typet и присваивая ему значение none . Это является самым популярным вариантом по удалению маркеров у списка. И для списка зададим то самое свойство.

Ul{ list-style-type: none; }

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

  • none - Удаляет маркеры у списка
  • circle - Маркер в виде круга
  • disc" - Маркер в виде заполненного круга. Значение по умолчанию
  • square - Маркер в виде квадрата
  • armenian - Армянская нумерация
  • decimal - Маркер в виде цифры
  • decimal-leading-zero - Цифры с «0» перед началом (01, 02, 03, и т.д.)
  • georgian - Грузинская нумерация
  • lower-alpha - (а, Ь, с, d, е, и т.д.)
  • lower-greek - (alpha, beta, gamma, и т.д.)
  • lower-latin - (a, b, с, d, e, и т.д.)
  • Iower-roman - (i, ii, iii, iv, v, и т.д.)
  • upper-alpha - (А, В, С, D, Е, и т.д.)
  • upper-latin - (А, В, С, D, Е, и т.д.)
  • upper-roman - (I, II, III, IV, V, и т.Д.)
  • inherit - Значение должно быть унаследовано от элемента родителя

Это все вида маркеров для списков. Первые четыре вида самые распространённые, остальные виды применяются достаточно редко.

Ну и для примера давайте выберем и зададим маркер в виде больших римских цифр. Делается это просто: в место значения none ставим название нашего маркера upper-roman .

Ul{ list-style-type: upper-roman; }

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

Маркер в виде изображения

Второй, достаточно важный момент, и часто используемый маркер - это изображение в виде маркера. Часто нужно использовать маркер в виде красивой картинки и обычные варианты маркеров представленных CSS не подходят. Для этого используется изображения. И делается это с помощью специального свойства, которое называется list-style-image . Это будет указывать браузеру, что маркером у нас будет картинка.

Возьмите любую картинку в интернете размером (15px x 15px) , которую планируется использовать в качестве маркера и поместите ее в ранее уже созданную папку с картинками images . После этого, остается свойству list-style-image указать путь к картинке и браузер вместо маркера подставит картинку.

В CSS путь указывается с помощью ключевого слова url() . В скобках указываем путь к картинке ../images/Название картинки.jpg , относительно таблицы стилей.

То есть, что значит относительно таблицы стилей? Наша таблица стилей - файл style.css , лежит в каталоге CSS , а картинка лежит в каталоге images . Это значит, что браузеру нужно указать, что ему сначала нужно выйти из каталога CSS , это делается так: ../ , а затем зайти в в каталог с картинкой images и уже затем найти нужную картинку.

Ul{ list-style-image: url(../images/Название картинки маркера.jpg); }

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

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

  • .

    Ul li{ border: 2px solid #ff0000; }

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

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

    Ul{ list-style-image: url(../images/Название картинки маркера.jpg); list-style-position:inside; } ul li{ border: 2px solid #ff0000; }

    Вот таким образом работают три этих свойства. Существует и сокращенный вариант записи, который объединяет все эти свойства.

    То есть, указывается свойство list-style и затем, по порядку, значения типа маркера, позиции маркера и, если нужно путь к картинке, которая и будет маркером. И, картина у нас получится следующая:

    Ul{ list-style: inside url(../images/Название картинки маркера.jpg); }

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

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

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

    В табл. 1 перечислены свойства элементов, предназначенных для создания и изменения списков.

    Табл. 1. Свойства CSS для управления видом списка
    Свойство Значение Описание Пример
    list-style-type disc
    circle
    square
    decimal
    lower-roman
    upper-roman
    lower-alpha
    upper-alpha
    none     		Вид маркера. Первые три используются для создания маркированного списка, а остальные — для нумерованного. LI {list-style-type: circle}
    LI {list-style-type: upper-alpha}
    list-style-image none
    URL     		Устанавливает символом маркера любую картинку. LI {list-style-image: url(check.gif)}
    list-style-position outside
    inside     		Выбор положения маркера относительно блока строк текста. LI {list-style-position: inside}
    list-style Универсальное свойство, включает одновременно все вышеперечисленные свойства.

    Поскольку тег

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

        Пример 1. Создание маркированного списка

        Списки

        Результат данного примера показан на рис. 1. Используются квадратные маркеры и их внешнее размещение относительно текста.

        Рис. 1. Вид списка, измененого с помощью стилей

        Чтобы установить свое собственное изображение в качестве маркера применяется свойство list-style-image , как показано в примере 2.

        Пример 2. Использование изображений в качестве маркера

        Списки

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

        Результат данного примера показан на рис. 2. В качестве маркеров используется маленькая картинка.

        Рис. 2. Изображения в качестве маркеров

        Некоторые примеры создания различных списков приведен в табл. 2.

        Табл. 2. Возможные виды списков
        Код HTML Пример
        		• Что следует учитывать при тестировании сайта:
        • работоспособность всех ссылок
        • поддержку разных браузеров
        • читабельность текста
        		• Что следует учитывать при тестировании сайта:
        • работоспособность всех ссылок
        • поддержку разных браузеров
        • читабельность текста

        • Нумерованный список с арабскими цифрами:

        1. первый
        2. второй
        3. третий

        • Нумерованный список со строчными римскими цифрами:

        1. первый
        2. второй
        3. третий

        • Нумерованный список с заглавными римскими цифрами:

        1. первый
        2. второй
        3. третий

        • Нумерованный список со строчными буквами латинского алфавита:

        1. первый
        2. второй
        3. третий

        • Нумерованный список с заглавными буквами латинского алфавита:

        1. первый
        2. второй
        3. третий

        Cписки HTML (

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

            Вот как выглядят стандартные нумерованный и ненумерованный списки:

            1. Элемент нумерованного списка #1
            2. Элемент нумерованного списка #2
            3. Элемент нумерованного списка #3
            • Элемент ненумерованного списка #1
            • Элемент ненумерованного списка #2
            • Элемент ненумерованного списка #3

            Посмотрите пример, чтобы увидеть, что мы создадим.

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

            Список №1: Простое меню

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

            HTML

            CSS

            /* Список #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: Другой шрифт для цифр

            Сложность со списками заключается в том, что все в списке должно выглядеть одинаково. Числа в списке должны иметь тот же цвет и шрифт, что и текст.

            Но добавив дополнительный элемент list-item, Вы сможете обойти эти ограничения и создать очень необычный список. Вот как это сделать:

            HTML

            1. The Netherlands is a country in ...

              2.

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

              3.

            3. The Philippines officially known as the Republic ...

              4.

            4. The United Kingdom of Great Britain and ...

              5.

            CSS

            /* Список #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: Список с указателями

            Вы можете изменить стиль указателей для ненумерованного списка на некоторые встроенные виды, но Вы также можете изменить его и на изображение. Этот способ сделает список еще привлекательней. Давайте рассмотрим, как это сделать.

            HTML

            • Java
              •
            • .NET
              •
            • C++
              •
            • PHP
              •

            CSS

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

            Список №4: Список в стиле iPhone

            Этот список взят из статьи «Приложение «Контакты» iPhone с использованием CSS и Jquery ». Он выглядит, как список из приложения «Контакты» iPhone. Еще немного стиля для Вашего веб-сайта.

            HTML

            CSS

            /* Список #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 , но тут мы рассмотрим только CSS.

            HTML

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

            CSS

            /* Список #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 и т. д.) для нумерации. Изменяя значение свойства list-style-type, Вы можете выбрать другие стили нумерации, например, римские цифры.

            Также по умолчанию указатели списка размещены за пределами списка, Вы можете увидеть это во втором примере, другом шрифте для цифр. Чтобы обойти это ограничение, Вы можете изменить значение свойства list-style-position, чтобы нумерация располагалась внутри списка.

            HTML

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

            CSS

            /* Список #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.

            HTML

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

            CSS

            /* Список #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. Когда Вы наводите указатель мыши на блочный элемент, он перейдет в активное повернутое состояние. Этот способ может быть не очень полезным, но на него приятно посмотреть.

          • About
          • Contact

    • CSS

    /* Список #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 ; }

    Заключение

    В этом уроке Вы узнали, как можно делать необычные вещи с обычным списком. И все это, используя только CSS. Надеемся, Вам понравится использование этих списков!

    Перевод — Дежурка

    Сегодня нет практически ни одного сайта, где бы не использовались 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. Очень привлекательно, не так ли? Хотите такой на свой сайт?

        • Toronto 2004
        • Beijing 2008
        • London 2012
        • Rio de Janeiro 2016

        /* 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. Очень рад, если вы узнали много интересного для себя.

        • Сергей Савенков

          какой то “куцый” обзор… как будто спешили куда то