Изменить маркер списка css – Как изменить цвет маркера в списке css. Оформление списков с помощью CSS-стилей. Местоположение маркера списка list-style-position

Leave a Comment / Css / By /

Как изменить вид маркера списка?

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

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"> 
  <title>Квадратные маркеры</title>
  <style>
   ul {
    list-style-type: square; /* Квадратные маркеры */
   }
  </style>
 </head>
 <body> 
  <ul>
   <li>Чебурашка</li>
   <li>Крокодил Гена</li>
   <li>Шапокляк</li>
  </ul>
 </body>
</html>

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

Вид маркеров

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

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

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Символ в качестве маркера</title>
  <style>
   li {
    list-style-type: none; /* Убираем маркеры у списка */
   }
   li::before {
    content: "►"; /* Маркер списка */
    padding-right: 0.5em; /* Расстояние от маркера до текста */
   }
  </style>
 </head>
 <body>
  <ul>
   <li>Чебурашка</li>
   <li>Крокодил Гена</li>
   <li>Шапокляк</li>
  </ul>
 </body>
</html>

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

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

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

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

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

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

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

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

Курс по вёрстке сайта на CSS Grid

Как изменить маркер списка CSS

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

Напомню, как подключаются стили к Html странице:

 

 

Существуют маркированный, или ненумерованный список css и нумерованный.

Маркеры списка представляют собой изображения разных фигур: кружочки, квадратики, галки и тому подобное. Их еще называют пульками. В качестве маркеров для списка используются и собственные рисунки.

Нумерованный список представляет собой вывод информации под номерами 1, 2, 3  и т.д.

 

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

Если вы решили заменить эти кружки на дизайнерские, то нужно освоить оформление списка с помощью css. Чем мы сегодня и займемся.

 

Основа любого списка состоит из следующего кода веб-страницы:

 

  • Первый элемент списка
  • Второй элемент списка
  • Последний элемент списка

 

 

Выглядит этот блок так:

  • Первый элемент списка
  • Второй элемент списка
  • Последний элемент списка

 

Css оформление маркеров списка   

 

Внешний вывод будем прописывать в файле стилей style.css. Он может называться и по-другому, но иметь расширение .css.

Стандартные маркеры CSS:  кружок (circle) – не закрашенный кружок, точка (disk) – закрашенный кружок, квадрат (square) – закрашенный квадрат.

Формирует список в css код ul  — с его помощью мы задаем, какой из стандартных маркеров будет выводиться на странице.  

Например, выведем списки с использованием кружка (circle). Запись в css файле будет такая:

 

ul {list-style-type: circle}

 

Но часто нужно заменить маркеры не во всех выводимых списках, а только в определенных блоках. К примеру, изменить в постах, но не в комментариях. В этом случае, код ul не должен иметь никакого значения, а стиль кружка нужно прописать только для списков в постах. Так выглядит код без значения:

 ul {list-style-type: none}

 

Если вы не можете найти код в файле css, отвечающий за вывод списка в нужном вам блоке, то воспользуйтесь плагином для Firefox — Firebug или в Google Chrom нажмите правой кнопкой мыши на веб-странице блога. Затем «просмотр кода элемента».

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

 

 .post-content ul {list-style-type: circle}

 

Или другой пример:

 

 #content-blok ul{list-style-type:square}

 

Полный курс «Css практика»

]]>Видеокурс]]>

 

 

 

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

Для тех, кто хочет очень быстро научиться трюкам css стилей, ]]>рекомендую]]> расширенный курс «CSS практика» Евгения Попова.

 

 

Следующие статьи:

 Графические маркеры для списка.

Отступ списка css.

Как поменять css цвет маркера списка, чтобы его цвет был отличным от цвета текста.

Вложенные списки. Как в css сделать горизонтальный список. Изменение стиля нумерованных списков.

Скачать красивые маркеры для списков сайта.

 

Как сделать, чтобы цвет маркеров в списке отличался от цвета текста?

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
4.0+1.0+4.0+1.0+1.0+1.0+1.0+

Задача

Задать цвет маркеров в списке не изменяя цвет текста.

Решение

Существует два способа изменения цвета маркеров, условно назовем их простой и хитрый. Простой метод состоит в том, что внутрь <li> вкладываем тег <span>, а уже внутрь него помещаем текст. Иными словами вместо традиционной схемы <li>текст</li> создаем конструкцию <li><span>текст</span></li>. При этом цвет маркеров определяется стилевым свойством color для селектора LI, а цвет текста — для селектора SPAN (пример 1).

Пример 1. Использование вложенных тегов

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Цвет текста и маркеров в списке</title>
  <style>
   li {
    color: red; /* Цвет маркеров */
   }
   li span {
    color: navy; /* Цвет текста */
   }
  </style>
 </head>
 <body>
  <ul>
   <li><span>Скрипка</span></li>
   <li><span>Гитара</span></li>
   <li><span>Волынка</span></li>
   <li><span>Шарманка</span></li>
   <li><span>Челеста</span></li>
  </ul>
 </body>
</html>

Результат данного примера показан ниже (рис. 1).

Рис. 1. Маркеры, отличающиеся по цвету от основного текста

Несмотря на простоту, метод неудобен, особенно при объёмных списках, ведь к каждому пункту списка теперь придётся добавлять тег <span>. Поэтому разберём хитрый способ, полностью основанный на работе CSS.

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
8.0+1.0+7.0+3.1+1.0+1.0+1.0+

Смысл в следующем — убираем оригинальные маркеры списка через свойство list-style-type и добавляем свои собственные маркеры с помощью псевдоэлемента :before и свойства content. Такая связка позволяет вставлять любой текст или символ перед элементом, в данном случае LI. Причём видом текста (цвет, шрифт, фон и др.) также можно управлять через стили, что и продемонстрировано в примере 2. Здесь в качестве маркеров используется символ параграфа ¶.

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

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Цвет маркеров в списке</title>
  <style>
   li {
    list-style-type: none; /* Прячем исходные маркеры */
   }
   li:before {
    color: red; /* Цвет маркера */
    content: "¶ "; /* Сам маркер */
    padding-right: 10px; /* Расстояние от маркера до текста */
   }
  </style>
 </head>
 <body>
  <ul>
    <li>Север</li>
    <li>Юг</li>
    <li>Запад</li>
    <li>Восток</li>
  </ul>
 </body>
</html>

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

Рис. 2. Маркеры, созданные с помощью стилей

Как установить цвета маркеров в списках HTML, используя только CSS?

Учитывая неупорядоченные списки (UL) маркеров, нам нужно изменить цвет маркеров в списке с помощью CSS.

Примечание . Не допускается использование каких-либо изображений или тегов диапазона.

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

Этот контент является Unicode того типа маркера, который вы хотите использовать в своем списке. Символы Юникода для различных стилей маркеров:

  • Площадь : /25AA
  • Круг : /2022
  • Диск : /2022

Ниже приведен пример кода CSS, который удаляет стиль по умолчанию из неупорядоченного списка в HTML и использует юникоды:

ul{

    

    

list-style: none; 

}

      
ul li::before {

     

   

   content: ;  

     

   

   color: green; 

     

   

        

   display: inline-block; 

     

   

        

   width: 1em; 

     

   

        

   margin-left: -0.9em; 

}

Приведенные ниже программы иллюстрируют вышеуказанный подход к изменению цвета маркеров элемента списка:

Пример 1 :

<html>

   <head>

        <title>Changing Bullet Colors</title>

          

        <style>

            h4{

                color:green;

            }

              

            ul{

                list-style: none;

            }

              

            ul li::before {

                  

                /* \2022 is the CSS Code/unicode for a disc */

                content: "\2022";  

                color: green; 

                display: inline-block; 

                width: 1em;

                margin-left: -0.9em;

                font-weight: bold;

                font-size:1.1rem;

            }

        </style>

  </head>

    

  <body>

    

    <h4>Geek Movies</h4>

      

    

    <ul>

        <li>Star Wars</li>

        <li>Back to the future</li>

        <li>Ghostbusters</li>

        <li>The princess bride</li>

        <li>Shaun of the dead</li>

    </ul>

      

  </body>

    

</html>

Выход:

Пример 2:

<html>

   <head>

        <title>Changing Bullet Colors</title>

          

        <style>

            h4{

                color:green;

            }

              

            ul{

                list-style: none;

            }

              

            ul li::before {

                  

                /*\25E6 is the CSS Code/unicode for a circle */

                content: "\25E6";  

                color: green; 

                display: inline-block; 

                width: 1em;

                margin-left: -0.9em;

                font-weight: bold;

                font-size:1.1rem;

            }

        </style>

  </head>

    

  <body>

    

    <h4>Geek Movies</h4>

      

    

    <ul>

        <li>Star Wars</li>

        <li>Back to the future</li>

        <li>Ghostbusters</li>

        <li>The princess bride</li>

        <li>Shaun of the dead</li>

    </ul>

      

  </body>

    

</html>

Выход:

Пример 3:

<html>

   <head>

        <title>Changing Bullet Colors</title>

          

        <style>

            h4{

                color:green;

            }

              

            ul{

                list-style: none;

            }

              

            ul li::before {

                  

                /* \25AA is the CSS Code/unicode for a square */

                content: "\25AA";  

                color: green; 

                display: inline-block; 

                width: 1em;

                margin-left: -0.9em;

                font-weight: bold;

                font-size:1.1rem;

            }

        </style>

  </head>

    

  <body>

    

    <h4>Geek Movies</h4>

      

    

    <ul>

        <li>Star Wars</li>

        <li>Back to the future</li>

        <li>Ghostbusters</li>

        <li>The princess bride</li>

        <li>Shaun of the dead</li>

    </ul>

      

  </body>

    

</html>

Выход:

Рекомендуемые посты:

Как установить цвета маркеров в списках HTML, используя только CSS?

0.00 (0%) 0 votes

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *