CSS/Списки

Материал из Викиучебника — открытых книг для открытого мира
< CSS
Перейти к навигации Перейти к поиску

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: list-style-type list-style-position list-style-image;