ГРУППА КУРСА
|
Главная >
Учебник 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 код:
Любое из свойств, рассмотренных в данной теме можно установить как самому списку, так и отдельному элементу списка. |