list-style-type

править

Это свойство определяет вид маркера в списке и для маркированных списков может принимать значения:

  • disc
  • (значение по умолчанию)

  • circle
  • square
  • Для нумерованных списков:

  • decimal
  • (значение по умолчанию)

  • lower-roman
  • upper-roman
  • lower-alpha
  • upper-alpha
  • decimal-leading-zero, CSS2.1
  • lower-latin, CSS2.1
  • upper-latin, CSS2.1
  • armenian, CSS2.1
  • georgian, CSS2.1
  • lower-greek, CSS2.1
  • Общее значение для списков, которое отменяет маркеры:

  • none
  • list-style-image

    править

    Это свойство позволяет задать в качестве маркера изображение.

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

    Пример:

    CSS:

    li.odd {
      list-style-image: url('green_bullet.gif');
    }
    li.even {
      list-style-image: url('red_bullet.gif');
    }
    

    HTML:

    <ul>
      <li class="odd">Item 1</li>
      <li class="even">Item 2</li>
      <li class="odd">Item 3</li>
      <li class="even">Item 4</li>
    </ul>
    

    Внешний вид:

     Item 1
     Item 2
     Item 3
     Item 4

    list-style-position

    править

    Это свойство задаёт позицию маркера или изображения относительно элемента списка.

    Значения:

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

    Примеры:

    inside

    • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed auctor lacus. Ut ligula urna, scelerisque et magna ac, viverra sagittis risus. Maecenas sit amet lectus faucibus, euismod sapien vel, molestie tellus. Etiam interdum facilisis orci, non gravida elit euismod.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed auctor lacus. Ut ligula urna, scelerisque et magna ac, viverra sagittis risus. Maecenas sit amet lectus faucibus, euismod sapien vel, molestie tellus. Etiam interdum facilisis orci, non gravida elit euismod.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed auctor lacus. Ut ligula urna, scelerisque et magna ac, viverra sagittis risus. Maecenas sit amet lectus faucibus, euismod sapien vel, molestie tellus. Etiam interdum facilisis orci, non gravida elit euismod.

    outside (значение по умолчанию)

    • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed auctor lacus. Ut ligula urna, scelerisque et magna ac, viverra sagittis risus. Maecenas sit amet lectus faucibus, euismod sapien vel, molestie tellus. Etiam interdum facilisis orci, non gravida elit euismod.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed auctor lacus. Ut ligula urna, scelerisque et magna ac, viverra sagittis risus. Maecenas sit amet lectus faucibus, euismod sapien vel, molestie tellus. Etiam interdum facilisis orci, non gravida elit euismod.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed auctor lacus. Ut ligula urna, scelerisque et magna ac, viverra sagittis risus. Maecenas sit amet lectus faucibus, euismod sapien vel, molestie tellus. Etiam interdum facilisis orci, non gravida elit euismod.

    Сокращённая форма записи этих свойств:

    list-style: list-style-type list-style-position list-style-image;