> >

Маркировка списка css. Как в css у элементов ul li убрать маркеры

Свойство list-style-type устанавливает вид маркера. Вот таблица допустимых значений для этого свойства:

Значение Пример
disc
  • Пункт списка
circle
  • Пункт списка
square
  • Пункт списка
decimal
  • Пункт списка
decimal-leading-zero
  • Пункт списка
lower-roman
  • Пункт списка
upper-roman
  • Пункт списка
lower-alpha
  • Пункт списка
upper-alpha
  • Пункт списка
georgian
  • Пункт списка
  • Пункт списка
  • Пункт списка
cjk-ideographic
  • Пункт списка
  • Пункт списка
  • Пункт списка
none
  • Пункт списка

В таблице я указал два весьма необычных свойства: georgian и cjk-ideographic . Эти свойства используются регионально. Есть ещё несколько похожих любопытных значений этого свойства, например armenian или hiragana , но все их перечислять нет смысла.

Теперь пример использования этого свойства:

Свойство list-style-type.

  1. Первый пункт.
  2. Второй пункт.
  3. Третий пункт.

Обратите внимание, мы превратили нумерованный список

    в маркированный.

    Рисунок 1. Свойство list-style-type.

    Обязательно обратите внимание на значение none , это значение убирает маркеры вообще. Это свойство часто используется для форматирования списков при помощи CSS.

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

    Свойство list-style-image устанавливает символом маркера графический файл.

    Свойство list-style-image..gif"); } </style> </head> <body> <ul> <li>Первый пункт.</li> <li>Второй пункт.</li> <li>Третий пункт.</li> </ul> </body> </html> </p><p>Вот результат работы этого кода:</p> <img src='https://i2.wp.com/komotoz.ru/uroki/css/example/images/lists_2.png' height="190" width="374" loading=lazy> Рисунок 2. Свойство list-style-image. <p>Мы видим, что теперь маркеры списка отмечены <a href="/computer/kak-sohranit-izobrazhenie-v-fotoshope-formate-kak-pravilno-sohranyat.html">графическим файлом</a> .</p> <h2>Свойство list-style-position</h2> <p>Перед тем, как приступить к изучению этого свойства, более детально изучим модель форматирования элемента <ul> .</p><p> <!DOCTYPE html> <html> <head> <title>Форматируем список.

    • Первый пункт.
    • Второй пункт.
    • Третий пункт.

    Вот что мы видим:

    Рисунок 3. Форматируем блок
      .

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

    • , обрамлённого красной границей. Это может привести к неожиданным результатам, вот например обнулим внутренние отступы
        .

        Форматируем список.

        • Первый пункт.
        • Второй пункт.
        • Третий пункт.

        Вот что мы получим:

        Рисунок 4. Форматируем блок
          .

          Теперь маркеры списка вышли за пределы контейнера

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

            Лучше бы поместить их внутрь контейнера

          • . Это бы решило данную проблему. Вот для этого и существует свойство list-style-position .

            Свойство list-style-position устанавливает положение маркера относительно блока

          • . Это свойство имеет два значения:

            По умолчания используется значение outside .

            Применим это свойство к нашему примеру и поместим маркеры в блок

          • , установив этому свойству значение inside .

            Свойство list-style-position.

            • Первый пункт.
            • Второй пункт.
            • Третий пункт.

            Вот что мы получили:

            Рисунок 5. Свойство list-style-position.

            Теперь маркеры списка вложены в блок

          • .

            Свойство list-style

            Свойство list-style является сокращённой формой, позволяющей использовать значения всех трёх предыдущих свойств.

            Пример: сделаем картинку маркером и поместим маркер внутрь блока пункта списка.

            Свойство list-style.

            • Первый пункт.
            • Второй пункт.
            • Третий пункт.

            Вот результат:

            Рисунок 6. Свойство list-style.

            Мы в одном свойстве list-style указали два значения: положение маркера и путь графичекого файла маркера.

            Свойство list-style используют чаще всего, даже для задания одного значения. Оно короткое, его легко написать.

            Рецепты CSS по теме

            • Как сделать ниспадающее меню на CSS , сложный пример с тенями.

            Задача

            Изменить вид маркеров в списке и заменить их на другой символ.

            Решение

            С помощью HTML или CSS допускается устанавливать один из трех типов маркеров: disc (точка), circle (кружок), square (квадрат). Добавлять эти значения нужно к стилевому свойству list-style-type , которое указывается для селектора UL или LI (пример 1).

            Пример 1. Стандартные маркеры

            HTML5 CSS 2.1 IE Cr Op Sa Fx

            Квадратные маркеры

            • Чебурашка
            • Крокодил Гена
            • Шапокляк

            В данном примере в качестве маркеров используется квадрат (рис. 1).

            Рис. 1. Вид маркеров

            Выбор и установка собственного символа маркера происходит весьма своеобразно, через псевдоэлемент :before . Вначале следует вообще убрать маркеры у списка, присвоив значение none стилевому свойству list-style-type , а затем добавить псевдоэлемент :before к селектору LI . Сам вывод символа осуществляется с помощью свойства content , в качестве значения которого и выступает желаемый текст или символ (пример 2).

            Пример 2. Использование:before и content

            HTML5 CSS 2.1 IE Cr Op Sa Fx

            Символ в качестве маркера

            • Чебурашка
            • Крокодил Гена
            • Шапокляк

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

            Рис. 2. Маркеры в виде символа

            Чтобы установить в качестве маркера какой-нибудь хитрый символ, можно воспользоваться программой Microsoft Word или таблицей символов, это стандартная программа входящая в комплект Windows. Кодировка кода должна быть обязательно UTF-8.

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

            Если проанализировать какой-либо сайт, то можно обнаружить тот факт, что в контенте очень часто присутствуют списки разного рода: меню, список товаров и т. д. В HTML-коде за нумерованный список отвечает тег , а за маркированный – .

            Еще стоит отметить тот факт, что на практике маркированные списки встречаются намного чаще, но при этом у них есть один небольшой недостаток. Маркер в списке отображается по-разному, в зависимости от используемого браузера. Для серьезного дизайнера это проблема.

            Чтобы устранить этот негативный эффект надо отменить вывод маркера, воспользовавшись свойством list-style :

            ol, ul { list- style: none; }

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

            Маркеры через картинки

            Наиболее распространенный и простой способ указать для списка маркер – это воспользоваться бекграундной картинкой (свойство background). Метод основывается на указании в таблице стилей фонового рисунка для элементов списка, а также внутренний отступ (свойство padding), который зарезервирует место для нового маркера. Ниже представлен пример кода:

            ul { list- style: none; } li{ background: url(путь- к- картинке) no- repeat; padding- left: 20px; }

            Этот способ радует своей уникальностью, так как позволяет установить абсолютно любой маркер в виде картинки. Ниже показано, как наш код будет выглядеть в браузере:

            Главная положительная сторона этого метода заключается в 100%-ной кроссбраузерности, но, не смотря на это, есть маленький недостаток. Использование картинки – это дополнительное обращение к серверу.

            Маркеры с помощью before

            Существует вариант, когда можно обойтись без картинки, если дизайнерские условия позволяют это. Такое очень часто допускается при оформлении основного контента, когда список маркируется простейшими элементами, типа квадратик ( ) или стрелочка (→). Таким образом, мы подошли к тому, что в качестве маркера может выступать какой-либо подходящий спецсимвол.

            Далее возникает вопрос, каким образом спецсимволы вставлять в элементы списка. Естественно не в ручную, иначе это был бы очень затянутый и нудный процесс, плюс ко всему еще и трудоемкий. Выйти из этой ситуации нам поможет псевдоэлемент before , применение которого привязывается к определенному селектору, что позволяет автоматизировать наш процесс присвоения маркеров из спецсимволов. Такое решение подходит к большинству браузеров, с учетом того, что для IE , будет прописан expression .

            Ниже представлен пример кода, который формирует маркированный список с коротким тире:

            li{ this. innerHTML = "-" + this. innerHTML) /*хак для IE*/ } li: before{ content: "\201 3" ; }

            На практике получим такую картину:

            Напоминаю о том, что в реальных условиях хаки подключаются условными комментариями .

            При использовании этого метода главное знать кодировку необходимого значка. Также стоит отметить, что для expression спецсимволы прописываются числовой комбинацией или мнемоническим кодом. Что касается свойства content , то в этом случае вначале ставится слеш, а потом идет запись шестнадцатеричного кода.

            Использование insertAdjacentHTML

            Вышеупомянутый способ не всегда корректно отрабатывает в легендарном IE (не смотря на хак). Точнее, «костыли» для этого браузера не до конца доработанные. Более действенным является метод, основанный на insertAdjacentHTML , ниже представлен код этого метода:

            li{ //z-index: expression(runtimeStyle.zIndex = 1, insertAdjacentHTML("afterBegin", "-")); }

            Маркеры, нарисованные CSS-свойствами

            Некоторые квадратные маркеры можно нарисовать с использованием некоторых CSS-свойств. К примеру, квадрат с цветной заливкой рисуется через свойство background-color , а квадратик в виде рамки – border (кстати говоря, квадрат с заливкой можно нарисовать и таким способом). Пример записи в CSS-файле:

            li{ //z-index: expression(runtimeStyle.zIndex = 1, this. innerHTML = "

            " + this. innerHTML) /* хак для ие6 и 7 */ } li: before, . listMarkerBackColor{ background- color: #539127; width: 7px; height: 7px; content: "" ; float: left; margin: 6px 6px 0 0 ; overflow: hidden; } html . listMarkerBackColor{ margin- right: 1px; /* исправляем маленткий косяк в IE6 */ }

            Таким образом рисованный CSS-свойствами маркер будет выглядеть на практике:

            Использование before и first-child в комплексе

            Такой метод частенько применяется при оформлении хлебных крошек на сайте. Кто не знает о чем речь, смотрим на пример ниже

            В таком случае каждая ссылка отделяется друг от друга спецсимволом, но перед первым элементом никакого спецсимвола быть не должно. В этом нам поможет псевдокласс first-child , который обращается только к первому элементу списка. В кодовом виде это должно выглядеть так

            HTML

            < ul> < li>< a href= "#" > Главная < li>< a href= "#" > Блог < li>< a href= "#" > CSS < li> Валидный код при использовании target= "_blank"

            li: before{ content: "\21 92" ; } li: first- child: before{ content: "" ; }

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

            В каких браузерах работает?

            6.0+ 4.0+ 9.5+ 3.0+ 3.0+ - -

            Выводы

            Подводя итог, можно отметить тот факт, что применение псевдоэлемента before является оправданным и рациональным в основном контенте, так как там не выдвигают особых требований к оформлению списков. Это в свою очередь позволит уменьшить нагрузку на сервер, в сравнении с вариантом, когда используют картинку. А если еще отметить тот факт, что в основном контенте может быть очень много маркированных списков, то разница может стать существеннее. Но картинки значительно выигрывают в плане дизайнерских решений маркера.

            Для списков, о создании которых средствами HTML рассказано здесь, предусмотрены следующие CSS-правила.

            list-style-type

            Задаёт маркер или нумерацию списков вместо атрибута type в HTML-коде. Значения свойств для маркированных списков могут быть:

            • disk - кружок, установлен по умолчанию.
            • circle - окружность.
            • square - квадрат.

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

            • decimal - арабские цифры, значение установлено по умолчанию.
            • lower-roman - маленькие римские цифры.
            • upper-roman - заглавные римские цифры.
            • lower-alpha - строчные латинские буквы.
            • upper-alpha - прописные латинские буквы.

            Также для любого типа списка свойству list-style-type можно указать значение none, которое вообще уберёт маркер.

            Для нумерованных списков доступны и другие значения, например, cjk-ideographic задаёт идеографическую нумерацию, Armenian - традиционную армянскую, а decimal-leading-zero установит нумерацию римскими цифрами, но с нулём в начале: 01, 02, 03… 09, однако на практике эти и подобные им значения используются крайне редко.

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

            Списки CSS

            1. Первый пункт
            2. Второй пункт
            3. Третий пункт
            • Первый пункт
            • Второй пункт
            • Третий пункт
            1. Первый пункт
            2. Второй пункт
            3. Третий пункт

            Результат.

            Цвет маркеров совпадает с цветом текста в списке, указанного свойством color .

            list-style-image

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

            Ul { list-style-image: url("marker.png"); }

            list-style-position

            Определяет положение маркера: либо он вынесен за границу элемента списка (list-style-position: outside ), либо текст его обтекает (list-style-position: inside ).

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

            list-style-position

            • Вы просто посмотрите, чем отличаются inside от outside.
            • В случае с inside маркер прямо-таки вписывается в список, не выходя за его пределы и не мешая вёрстке. Текст обтекает его, маркер как бы внутри.
            • Значение outside выносит маркер за пределы списка.

            В результате создаётся такая страница:

            list-style

            Позволяет сократить код, записав все три перечисленных свойства одной строкой. Записываются правила через пробел:

            Ul { list-style: square inside; }

            Рассмотрим пример страницы с тремя списками. Первый нумеруется цифрами в формате 01, 02, второй маркируется пользовательским рисунком (файл marker.png в папке со страницей), маркер третьего списка отключен.

            HTML-код приведён ниже.

            list-style

            1. Первый пункт
            2. Второй пункт
            3. Третий пункт
            • Первый пункт
            • Второй пункт
            • Третий пункт
            1. Первый пункт
            2. Второй пункт
            3. Третий пункт

            Браузер отобразит следующую страницу.

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

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

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

            Поскольку тег

          • наследует стилевые свойства тега
              или
                , который выступает в качестве его родителя, то можно устанавливать стиль как для селектора UL , так и для селектора LI . Так, в примере 1 используется селектор UL , для него и задаются стилевые параметры.

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

                Списки

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

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

                Чтобы установить свое собственное изображение в качестве маркера применяется свойство list-style-image , как показано в примере 2.

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

                Списки

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

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

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

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

                Табл. 2. Возможные виды списков
                Код HTML Пример
                		• Что следует учитывать при тестировании сайта:
                • работоспособность всех ссылок
                • поддержку разных браузеров
                • читабельность текста
                		• Что следует учитывать при тестировании сайта:
                • работоспособность всех ссылок
                • поддержку разных браузеров
                • читабельность текста

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

                1. первый
                2. второй
                3. третий

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

                1. первый
                2. второй
                3. третий

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

                1. первый
                2. второй
                3. третий

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

                1. первый
                2. второй
                3. третий

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

                1. первый
                2. второй
                3. третий
                Интернет 
                Самое интересное:
                Обозначь каждый многоугольник измерь длины сторон каждого
                Подключаем YouTube к телевизору
                Названия больших чисел Решение составной задачи