За добавление маркера, его расположение и внешний вид в css отвечают свойства:
- — list-style-image (я не использую это свойство — ниже обьясню, почему);
- — list-style-type;
- — list-style-position.
Существует так же универсальное свойство list-style, которое позволяет одновременно задать все три, два, или один параметр, перечисленные выше для маркеров пунктов списка.
Свойство list-style-type
Имеет следующие допустимые значения:
— disc — маркер пункта в списке будет отображаться в виде жирной точки;
- Пример использования свойства list-style-type с параметром disc
— circle — маркер пункта в списке будет отображаться в виде круга;
- Пример использования свойства list-style-type с параметром circle
— square — маркер пункта в списке будет отображаться в виде черного квадратика;
- Пример использования свойства list-style-type с параметром square
— decimal — маркер пункта в списке будет отображаться в виде арабских цифр начиная с 1;
- Пример использования свойства list-style-type с параметром decimal — первый пункт списка
- Пример использования свойства list-style-type с параметром decimal — второй пункт списка
— decimal-leading-zero — маркер пункта в списке будет отображаться в виде арабских цифр начиная с 01, 02. 98,99 (не поддерживается в ИЕ 7);
- Пример использования свойства list-style-type с параметром decimal-leading-zero — первый пункт
- Пример использования свойства list-style-type с параметром decimal-leading-zero — второй пункт
— lower-roman — маркер пункта в списке будет отображаться в виде прописных букв римского алфавита (i, ii, iii, iv, v);
- Пример использования свойства list-style-type с параметром lower-roman — первый пункт
- Пример использования свойства list-style-type с параметром lower-roman — второй пункт
- Пример использования свойства list-style-type с параметром lower-roman — третий пункт
- Пример использования свойства list-style-type с параметром lower-roman — четвертый пункт
— upper-roman — маркер пункта в списке будет отображаться в виде римских цифр (I, II, III, IV, V);
- Пример использования свойства list-style-type с параметром upper-roman — первый пункт
- Пример использования свойства list-style-type с параметром upper-roman — второй пункт
- Пример использования свойства list-style-type с параметром upper-roman — третий пункт
- Пример использования свойства list-style-type с параметром upper-roman — четвертый пункт
— lower-greek — маркер пункта в списке будет отображаться в виде прописных букв греческого алфавита (не поддерживается в ИЕ 7);
- Пример использования свойства list-style-type с параметром lower-greek
- Пример использования свойства list-style-type с параметром lower-greek
— lower-latin — маркер пункта в списке будет отображаться в виде прописных букв латинского алфавита (a, b, c) (не поддерживается в ИЕ 7);
- Пример использования свойства list-style-type с параметром lower-latin
- Пример использования свойства list-style-type с параметром lower-latin
— upper-latin — маркер пункта в списке будет отображаться в виде заглавных букв латинского алфавита (A, B, C) (не поддерживается в ИЕ 7);
- Пример использования свойства list-style-type с параметром upper-latin
- Пример использования свойства list-style-type с параметром upper-latin
— none — маркер пункта в списке не будет отображаться.
- Пример использования свойства list-style-type с параметром none
Свойство наследуется и по умолчанию имеет значение disc.
Свойство list-style-position
Отвечает за расположение маркера в списке. Имеет два допустимых значения:
— inside — маркер будет находиться внутри блока с элементом списка, к которому он относится;
- Пример использования свойства list-style-position с параметром inside — маркер расположен внутри блока с элементом списка, к которому он относится.
— outside — маркер будет находиться снаружи блока с элементом списка, к которому он относится.
- Пример использования свойства list-style-position с параметром outside — маркер расположен снаружи блока с элементом списка, к которому он относится.
Свойство list-style-image
Устанавливает в качестве маркера изображение, которое будет использоваться для маркировки пунктов списка:
- Пример использования свойства list-style-image — маркер списка выводится в виде картинки.
Из-за возникающих сложностей с позиционированием изображения используется не часто. Лично я предпочитаю использовать свойство background-image, если требуется маркер-картинка.
Свойство list-style
Как уже упоминалось ранее в этой статье, это свойство является универсальным и позволяет установить одно, два, или три значения для маркировки пунктов списка.
Следующая запись отобразит маркер в виде черной жирной точки снаружи блока с элементом списка:
- Пример использования свойства list-style с параметрами disc и outside — маркер расположен снаружи блока с элементом списка, к которому он относится.
Запись такого вида отобразит маркер в виде окружности внутри блока с элементом списка:
Всем привет! Народ, помогите! Есть сайт построенный на 1С Битрикс. Создаю обычный html список на странице. Применяю через !important; стиль list-style-type: none !important; и о чудо, ни фига не пропадает точка. По видимому где-то в шаблонных стилях перекрывается стиль моего списка. Мот кто знает какое-нить решение. Заранее благодарю!
1 ответ 1
Посмотрите стили страницы в инспекторе.
Firefox 12 меню Инструменты->Веб разработка->Инспектор. Далее выделяете на странице элемент, нажимаете внизу кнопку «стиль» и видите каком файле какая строка меняет стиль.
Такая проблема.Я при помощи темы Zen делаю себе свою тему.И там где то по умолчанию стоят маркеры ко всем ссылкам,и я не могу найти где.Пробовал и в боди вырубать,и в блоках,результат нулевой.
Комментарии
Я использую файрбаг но отловить не могу.
А попробуйте не вырубать, т.к наличие маркеров это по умолчанию в списках. Попробуйте что-то типа
list-style-type:none;
UPD: Пардон, плохо прочитал заголовок темы.
list-style-image:none;
list-style-position:outside;
list-style-type:none;
А скриншот можно, какие именно маркеры не убираются?
http://s50.radikal.ru/i129/0901/9f/e9b323cd122e.jpg вот скрин.Там еще внизу справа меню есть,все не влезло на скрин,там тоже в меню в низу эти дурацкие маркеры.Попробовал опять везде написать:
list-style-image:none;
list-style-position:outside;
list-style-type:none;
Толку нет.
Ну точно, это не маркеры списков, это рисунки, которые используются в качестве маркеров.
Соответственно, ищите в CSS примерно следующее:
