Как убрать маркировку списка css

Как удалить, заменить или оформить маркеры списка с помощью CSS

Содержание¶

Как создать список без маркеров¶

Код будет иметь следующий вид:

Пример¶

Если хотите иметь только один список или один элемент списка без маркеров или чисел, можно применить класс, который может быть использован каждый раз для удаления маркеров.

Здесь у нас будет класс с названием «nolist» для упорядоченных списков. При необходимости он также может быть использован в будущем.

Можете также установить класс к любому элементу списка ( ), не меняя остальные маркеры.

Пример¶

Как заменить маркеры списка на изображения¶

Есть два способа установления изображений для элементов списка:

HTML маркеры могут быть заменены на изображения с помощью «list-style-image». Но применение изображений не всегда совместимо с браузером.

Пример¶

Для того, чтобы удалить левый отступ из всех браузеров, установите и padding и margin в «0» для элемента

, как в данном примере:

В случае, если левый отступ обязателен, рекомендуется использовать margin-left. Так как сейчас padding установлено в «0», могут быть указаны точные измерения для левого поля, и это будет совместимо со всеми браузерами.

Чтобы фоновое изображение не повторялось в фоне элементов списка, задайте «no-repeat» для свойства background-repeat. Здесь установлено только одно изображение для каждого элемента, но требуется изменить положение.

Используйте CSS свойство background-position для установления такого положения фонового изображения, чтобы оно соответствовало тексту.

Сейчас изображения выстроены в линию по горизонтали вместе с контентом. Но контент расположен наверху изображений.

А сейчас увидим каким будет полный пример:

Пример¶

Как создать горизонтальные списки¶

Пример¶

Как оформить списки¶

Добавьте стиль к спискам с помощью свойств color и background-color:

Пример¶

Создайте список с полной шириной границ, используя CSS свойства border и border-bottom:

Пример¶

Добавьте границу к элементам вашего списка, используя CSS свойство border-left:

Пример¶

Чтобы иметь разные маркеры в одном списке, необходимо применить класс к к каждому элементу списка и отдельно для каждого указать list-style.

Пример¶

Пример со всеми видами маркеров¶

В этом примере увидите разные виды упорядоченных (

) и неупорядоченных (
) списков:

Источник

Списки в CSS

Тип маркера

Для маркированного списка:

Для нумерованного списка

Создадим на странице маркированный и нумерованный списки и установим для них тип маркера:

Попробуйте установить другие типы маркера.

Как убрать маркеры списка в CSS

Значение none позволяет убрать маркеры списка. Пример:

Позиция маркера

Маркер может занимать в списке две позиции. Он может находиться за пределами элемента списка и занимать своё место на странице. А может находиться внутри элемента списка и быть частью текста. Это выгладит так:

Добавим в маркерованный список ещё один пункт с длинным текстом и добавим селектору #nl1 свойство list-style-position :

Маркер в виде изображения

В качестве маркера может быть использовано изображение. При этом, список может выглядеть так:

Для примера Вы можете использовать это изображение: Нажмите на него правой кнопкой мыши и выберите «Сохранить изображение как».

Добавим на страницу ещё один список и установим для него маркер в виде картинки. Назовём файл marker, он имеет расширение JPEG. Разместим его в той же папке, где находится страница. Иначе путь к файлу нужно прописывать по-другому.

Краткая запись

Любое из свойств, рассмотренных в данной теме можно установить как самому списку, так и отдельному элементу списка.

Коприрование материалов сайта возможно только с согласия администрации

Источник

Свойства списков

С помощью CSS можно создать маркированные и нумерованные списки, а также использовать в качестве маркера подходящее изображение.

В табл. 1 перечислены свойства элементов, предназначенных для создания и изменения списков.

Табл. 1. Свойства CSS для управления видом списка

Свойство	Значение	Описание	Пример
list-style-type	disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha none	Вид маркера. Первые три используются для создания маркированного списка, а остальные — для нумерованного.	LI LI
list-style-image	none URL	Устанавливает символом маркера любую картинку.	LI
list-style-position	outside inside	Выбор положения маркера относительно блока строк текста.	LI
list-style	Универсальное свойство, включает одновременно все вышеперечисленные свойства.

Пример 1. Создание маркированного списка

Результат данного примера показан на рис. 1. Используются квадратные маркеры и их внешнее размещение относительно текста.

Рис. 1. Вид списка, измененого с помощью стилей

Пример 2. Использование изображений в качестве маркера

Результат данного примера показан на рис. 2. В качестве маркеров используется маленькая картинка.

Рис. 2. Изображения в качестве маркеров

Некоторые примеры создания различных списков приведен в табл. 2.

Нумерованный список с арабскими цифрами:

Нумерованный список со строчными римскими цифрами:

Нумерованный список с заглавными римскими цифрами:

Нумерованный список со строчными буквами латинского алфавита:

Нумерованный список с заглавными буквами латинского алфавита:

Источник

Работа со списками в CSS

В этой статье учебника речь пойдет о работе со списками в CSS, вы научитесь изменять тип маркера, расположение маркера относительно элемента списка, создавать собственные маркеры и даже изменять цвет маркера.

Думаю, вы уже знаете, что в HTML 5 применяется два основных вида списков (если не брать в расчет списки описаний и элементы меню):

CSS предоставляет нам широкие возможности форматирования внешнего вида этих списков, давайте рассмотрим основные из них.

Изменение типа маркера

Первое свойство, которое хотелось бы рассмотреть это свойство list-style-type, оно задает тип маркера элемента списка.

Давайте рассмотрим пример использования свойства list-style-type в тексте:

Результат нашего примера:

Рис. 69 Пример использования свойства list-style-type (установка типа маркера).

Результат нашего примера:

Рис. 70 Пример чередования стилей свойства list-style-type.

Расположение маркера относительно элемента списка

Давайте для наглядности рассмотрим пример, в котором помимимо свойства list-style-position используем еще одно новое свойство, которое позволит нам установить границы элемента.

Универсальное свойство border, которое позволяет установить границу для всех элементов списка, мы использовали для лучшего понимания работы свойства list-style-position. Работа с границами элементов в скором времени будет подробно рассмотрена в учебнике в статье «Границы элемента в CSS».

Результат нашего примера:

Рис. 71 Пример использования свойства list-style-position (расположение маркера / цифры в списках).

Создание собственных маркеров

Рано или поздно перед Вами встанет необходимость создать маркеры списка со своим дизайном, благодаря CSS свойству list-style-image мы это желание сможем реализовать в Вашем проекте.

Синтаксис свойства следующий:

Значение в скобках соответствует пути к изображению, которое вы планируете использовать в роли маркера. Путь к изображению может быть как абсолютный, так и относительный. При указании относительного пути, важным моментом является то, что его необходимо указывать относительно размещения таблицы стилей, а не страницы.

Если вы планируете оформить собственные маркеры, то вам придется использовать программу для редактирования графики, либо воспользоваться уже готовыми наборами. Обратите внимание на такой момент, который может произойти, даже если Вы все сделали правильно, изображение может не загрузиться на страницу, в этом случае необходимо отредактировать изображение таким образом, чтобы его фон стал прозрачным.

Давайте рассмотрим пример использования собственных маркеров в документе:

В данном примере мы указываем абсолютный путь к изображению, которое будет использовано в качестве маркера.

Результат нашего примера:

Рис. 72 Пример использования CSS свойства list-style-image (использование изображения в качестве маркера).

Изменение цвета маркера в CSS

В завершении этой статьи давайте рассмотрим продвинутый способ изменения цвета маркера без изменения цвета элемента, с использованием CSS свойства content и ранее рассмотренного псевдоэлемента :before:

Суть этого способа заключается в том, что мы перед каждым элементом списка (HTML элемент ) вставляем псевдоэлементом (:before) сгенерированный контент (CSS свойство content), который идентичен по внешнему виду маркеру в маркированном списке (HTML элемент ), только уже необходимого для нашей задачи цвета.

Рис. 73 Пример изменения цвета маркера с использованием свойства content и псевдоэлемента :before.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практические задания:

Практическое задание № 18.
Продвинутое задание:

Практическое задание № 19.

Если у Вас возникают трудности при выполнении практического задания, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу, чтобы понять какой код CSS был использован.

Источник

Убрать маркированный список css. CSS: как убрать точку в нумерации списка OL

Как убрать маркеры списка, как установить стили списка CSS,
как сделать маркер списка в виде изображения

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 18.09.2018

Редакторы: Влад Мержевич

Тип маркера

Для маркированного списка:

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 > head > style > ul < list-style-type : none ; >style > /head > body > ul > li > Элемент #1 li > li > Элемент #2 li > li > Элемент #3 li > ul > /body > /html >

Вот во что преобразуется этот код:

Читайте также:
• Как разместить элементы списка горизонтально
• Как поменять скролл бар на сайте
• Как сделать нумерованный список
• Как вывести теги html на странице сайта
• HTML тег (комментарии)
• в html
• Коды символов для HTML

← Перейти в каталог html уроков и советов

Красивый эффект анимации для галереи

Эффект, который позволит преобразить вашу галерею фотографий, с помощью библиотеки Raphael и jQuery. Нужно создать три файла: index.html, default.css, init.js

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Значение square

Значение square позволяет сделать маркеры в виде квадратиков:

Как удалить маркеры или номера в списке?

Удаление символа маркера

Как убрать маркеры списка в CSS

Значение none позволяет убрать маркеры списка. Пример:

Позиция маркера

Маркер может занимать в списке две позиции. Он может находиться за пределами элемента списка и заниматьсвоё место на странице. А может находиться внутри элемента списка и быть частью текста. Это выгладит так:

list-style-position: outside – за пределами элемента (по умолчанию)

list-style-position: inside – внутри элемента

Добавим в маркерованный список ещё один пункт с длинным текстом и добавим селектору #nl1свойство list-style-position :

list-style-position: inside;

Маркер в виде изображения

В качестве маркера может быть использовано изображение. При этом, список может выглядеть так:

Для примера Вы можете использовать это изображение: Нажмите на негоправой кнопкой мыши и выберите “Сохранить изображение как”.

Добавим на страницу ещё один список и установим для него маркер в виде картинки. Назовём файлmarker, он имеет расширение JPEG. Разместим его в той же папке, где находится страница. Иначе путь к файлунужно прописывать по-другому.

Источник