ГРУППА КУРСА
|
Главная >
Учебник CSS >
Списки в CSSТип маркераУ каждого элемента списка есть маркер. Это значёк перед текстом. В CSS есть возможность установить внешний вид маркера. В том числе, можно вообще убрать маркер списка. Для этого есть свойство list-style-type. У него достаточно много значений. Часть значений применяется для маркированного, другая часть для нумерованного списка. Для маркированного списка: list-style-type: disc - в виде диска (по умолчанию) list-style-type: circle - в виде круга list-style-type: square - в виде квадрата Для нумерованного списка list-style-type: decimal - арабские цифры (по умолчанию) list-style-type: decimal-leading-zero - арабские цифры c 0 впереди для чисел 1-9 list-style-type: upper-roman - заглавные римские цифры list-style-type: lower-roman - строчные римские цифры list-style-type: upper-latin - заглавные латинские буквы list-style-type: upper-alpha - то же, что и upper-latin list-style-type: lower-latin - строчные латинские буквы list-style-type: lower-alpha - то же, что и lower-latin list-style-type: lower-greek - строчные греческие буквы list-style-type: armenian - армянские числа list-style-type: georgean - грузинские числа list-style-type: none - позволяет убрать маркеры списка. Для обоих списков list-style-type: inherit - значение принимается от родительского элемента. Для обоих списков Создадим на странице маркированный и нумерованный списки и установим для них тип маркера: Стиль: +
HTML код:
Попробуйте установить другие типы маркера. Как убрать маркеры списка в CSSЗначение none позволяет убрать маркеры списка. Пример:
Позиция маркераМаркер может занимать в списке две позиции. Он может находиться за пределами элемента списка и занимать своё место на странице. А может находиться внутри элемента списка и быть частью текста. Это выгладит так:
Позицию маркера устанавливает свойство list-style-position. Оно принимает значения: list-style-position: outside - за пределами элемента (по умолчанию) list-style-position: inside - внутри элемента Добавим в маркерованный список ещё один пункт с длинным текстом и добавим селектору #nl1 свойство list-style-position: Стиль:
HTML код:
Маркер в виде изображенияВ качестве маркера можно использованть изображение. При этом, список может выглядеть так:
Для использлвания изображения существует свойство list-style-image. Значением свойства является путь к файлу изображения. Для примера Вы можете использовать это изображение: Добавим на страницу ещё один список и установим для него маркер в виде картинки. Назовём файл marker, он имеет расширение JPEG. Разместим его в той же папке, где находится страница. Иначе путь к файлу нужно прописывать по-другому. Стиль:
HTML код:
Краткая записьСуществует возможность указать рассмотренные свойства более коротким способом. Для этого есть свойство list-style. В нём свойства перечисляются через пробел в следующем порядке:
Все свойства указывать не обязательно. Указываются только те свойства, которые нужны. Добавим на страницу ещё один список и установим ему стиль с помощью свойства list-style. Стиль:
HTML код:
Любое из свойств, рассмотренных в данной теме можно установить как самому списку, так и отдельному элементу списка. |