Как изменить только цвет маркера нумерованного списка

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

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

Internet Explorer Chrome Opera Safari Firefox Android iOS
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 Explorer Chrome Opera Safari Firefox Android iOS
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. Маркеры, созданные с помощью стилей

Источник

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

Использование <span>

Внутрь каждого элемента <li> вкладываем <span>, а уже внутрь него помещаем текст. Иными словами вместо традиционной схемы

<li>текст</li>

создаем конструкцию

<li><span>текст</span></li>

При этом цвет маркеров определяется стилевым свойством color для селектора li, а цвет текста — для селектора span (пример 1).

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

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Цвет текста и маркеров в списке</title>
<style>
li {
color: red; /* Цвет маркеров */
}
li span {
color: green; /* Цвет текста */
}
</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>.

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

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

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

<!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. Маркеры, созданные с помощью стилей

См. также

Источник

Word для Microsoft 365 Word 2021 Word 2019 Word 2016 Word 2013 Word 2010 Word 2007 Еще…Меньше

Чтобы изменить форматирование маркеров или номеров в списке, щелкните любой маркер или номер, чтобы выбрать все маркеры или номера в списке. При выборе текста форматирование текста и маркеров или нуминга изменяется.

Выбор нового формата маркеров или номеров

  1. Щелкните маркер или номер в списке, который вы хотите изменить.

    В многоуровневом списке можно изменять форматирование по одному уровню, щелкнув один маркер или номер этого уровня в списке.

  2. На вкладке Главная в области Абзацщелкните стрелку рядом с кнопкой Маркеры или Номер.

    Лента абзаца "Мир" с выделенной маркерами

  3. Выберите нужный формат в библиотеке маркеров или библиотеке номеров.

    Выбор нового стиля маркеров

Определение нового символа маркера, шрифта или рисунка

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

  1. Щелкните маркер в списке, чтобы выбрать все маркеры.

    Выделенный список

  2. Щелкните стрелку вниз рядом со значком маркера. Изображение кнопки "Маркеры".

  3. В нижней части всплываемой панели щелкните Определить новый маркер.

    Drop down bullet with Define New Bullet highlihted

  4. В области Определение нового маркера сделайте следующее:

    • Чтобы изменить или добавить символ, нажмитекнопку Символ. В библиотеке символов выберите символ и нажмите кнопку ОК.

      Чтобы изменить атрибуты шрифта после выбора нового символа, нажмите кнопку Шрифт. Измените стиль, размер и шрифт, а затем нажмите кнопку ОК.

      Определение нового маркера со стрелками

    • Чтобы добавить рисунок, нажмите кнопку Рисунок. В окне Вставка рисунков щелкните Из файла для изображений на компьютере или Поиск изображений Bing, чтобы найти рисунок в Интернете.

      Выберите изображение, которое вы хотите использовать, с компьютера или с помощью поиска Bing, а затем нажмите кнопку Открыть илиВставить.

      Новый экран маркера с выбранным рисунком

  5. Если новые маркеры хорошо выглядят в области предварительного просмотра,нажмите кнопку ОК.

Изменение формата, цвета или размера шрифта для маркеров и номеров в списке

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

  1. Щелкните маркер или номер в списке.

    Будут выбраны все маркеры или номера в списке.

    Выделенный список

  2. На вкладке Главная в группе Шрифт внести нужные изменения.

    Лента "Шрифт" на вкладке "Главная"

    Например, щелкните стрелку рядом с кнопкой Цвет шрифтаи выберите нужный цвет.

Вы можете легко изменить уровень элемента списка.

  1. Щелкните маркер или номер, который был перемещен за позицию.

  2. На вкладке Главная в области Абзацщелкните стрелку рядом с кнопкой Маркеры или Номер.

    Лента абзаца "Мир" с выделенной маркерами

  3. Найдите пункт Изменить уровень спискаи выберите нужный уровень.

    Изменение уровня списка в списках с маркерами и номерами

  1. Щелкните маркер или номер в списке, который вы хотите изменить.

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

  2. На вкладке Главная в группе Абзац нажмите кнопку Маркеры или Нумерация.

    Щелкните "Маркеры" или "Номера" для переключения между ними

    Чтобы вернуться к списку, выберите Изображение кнопки "Маркеры" или Изображение кнопки.

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

Многоуровневый список

  1. Щелкните маркер или номер в списке на уровне, который вы хотите изменить.

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

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

  2. На вкладке Главная в группе Абзац нажмите кнопку Маркеры или Нумерация.

    Щелкните "Маркеры" или "Номера" для переключения между ними

    Чтобы вернуться к списку, щелкните Список Изображение кнопки "Маркеры" или Изображение кнопки.

Статьи по теме

Создание маркированного или нумерованного списка

Включение и отключение автоматических маркеров и нумерации

Что такое маркированные и многоуровневые списки

Изменение отступа между маркером или номером и текстом

Обратная связь

Обновлено 11 мая 2017 г. на основе отзывов пользователей.

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

Нужна дополнительная помощь?

Источник

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

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

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

Давайте рассмотрим на примере, что я имею ввиду.

HTML разметка базового маркированного списка:


<ul>
  <li>Анжелика</li>
  <li>Анастасия</li>
  <li>Анатолий</li>
  <li>Александр</li>
</ul>

На странице, вы увидите следующее.

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

Как верстают меню навигации без точек? Просто в стилях прописывают следующую строчку.


ul {
  list-style: none;
}

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

Меняем цвет маркера списка (1-ый способ)

Удалим дефолтные черные точки.


ul {
  list-style: none;
}

А взамен, поставим другие точки, поставив псевдоэлемент before перед всеми пунктами списка. Вместо точек, добавим значение свойства content «2022» , это CSS код точки, взятый из таблицы Юникода. Дальше к этим точкам, можно применять нужные стили.


ul li::before {
  content: "2022"; /* юникод точки */
  color: orange; /* Менять цвет */
  font-weight: bold; /* Менять жирность */
  display: inline-block; /* Расстояние между точкой и текстом */

  width: 1em; /* Задать значение расстояния */
}

Пример с заменой цвета маркеров списка

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

Меняем цвет маркера списка (2-ой способ)

Все спецсимволы Юникода имеют альтернативный HTML-код и могут вставляться напрямую в HTML разметку, между тегами span. Для разнообразия, мы используем в качестве маркера спецсимвол – ☑ галочка в квадрате.


<ul>
  <li><span>☑</span>Анжелика</li>
  <li><span>☑</span>Анастасия</li>
  <li><span>☑</span>Анатолий</li>
  <li><span>☑</span>Александр</li>
</ul>

CSS-код


ul {
  list-style: none;
}

span {
  color: cyan;
  font-weight: bold;
  display: inline-block;

  width: 1em;
  font-size: 20px;
}

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

Второй способ изменения маркера списка, мне понравился больше. Он позволяет увеличить размер маркера (font-size), не задевая межстрочный интервал, чего нельзя сказать о первом способе.

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

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

Символы вместо иконок

На сегодняшний день, самый легкий способ вставки иконки-гамбургера в меню сайта – это вставка символа Юникода Trigram for Heaven — ☰.


<a href="#">☰</a>

Если вы нашли в таблице Юникода, нужный символ, то для вставки его на сайт, не нужно подключать библиотеку Font Awesome.

Вместо маркера картинка

И это ещё не все, маркированный список можно сделать картинками. Это классический пример для верстальщика, как сверстать ту часть макета, где дизайнер сам нарисовал иконки, что наиболее вероятно.


ul {
  list-style: none;
}

ul li {
  background: url(images/icon_star.gif) no-repeat 0 5px;
}

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

Альтернативный способ:


ul {
  list-style-image: url(images/icon_star.gif);
}

Для внедрения символов Юникода, кодировка страницы должна быть обязательно UTF-8.

В HTML файле:


<meta charset="utf-8"/>

В отдельном CSS файле:


@charset 'utf-8';

Если вы только присматриваетесь к профессии верстальщика, то наиболее оптимальным решением будет, начинать своё обучение с верстки лендингов, начните с этого видеокурса «О создании лендинга под ключ».

  • Создано 28.11.2018 10:13:07


  • Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
Источник

Improve Article

Save Article

  • Read
  • Discuss

    • Improve Article

    Save Article

    Given an unordered lists (UL) of bullets, we need to change the color of the bullets in the list using CSS.

    Note: It is not allowed to use any images or span tags.

    First of all, there is not direct way in CSS by which we can change the color of the bullets in an unordered list. However, to change the color of the bullets in an unordered list using CSS, we will have to first discard the default list-style and manually define the content that comes before each list item of the list.

    This content is the Unicode of the kind of bullet that you want to use for your list. The Unicode characters for different bullet styles are as follows:

    • Square: "25AA"
    • Circle: "2022"
    • Disc: "2022"

    Below is a sample CSS code that removes the default style from an Unordered List in HTML and use unicodes:

    ul{

        list-style: none; 

    }

    ul li::before {

       content: ;  

       color: green; 

       display: inline-block; 

       width: 1em; 

       margin-left: -0.9em; 

    }

    Below programs illustrate the above approach of changing colours of list item bullets:

    Example 1:

    <html>

       <head>

            <title>Changing Bullet Colors</title>

            <style>

                h3{

                    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>

        <h3>Geek Movies</h3>

        <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>

    Output:

    Example 2:

    <html>

       <head>

            <title>Changing Bullet Colors</title>

            <style>

                h3{

                    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>

        <h3>Geek Movies</h3>

        <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>

    Output:

    Example 3:

    <html>

       <head>

            <title>Changing Bullet Colors</title>

            <style>

                h3{

                    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>

        <h3>Geek Movies</h3>

        <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>

    Output:

    Источник

    Improve Article

    Save Article

  • Read
  • Discuss

    • Improve Article

    Save Article

    Given an unordered lists (UL) of bullets, we need to change the color of the bullets in the list using CSS.

    Note: It is not allowed to use any images or span tags.

    First of all, there is not direct way in CSS by which we can change the color of the bullets in an unordered list. However, to change the color of the bullets in an unordered list using CSS, we will have to first discard the default list-style and manually define the content that comes before each list item of the list.

    This content is the Unicode of the kind of bullet that you want to use for your list. The Unicode characters for different bullet styles are as follows:

    • Square: "25AA"
    • Circle: "2022"
    • Disc: "2022"

    Below is a sample CSS code that removes the default style from an Unordered List in HTML and use unicodes:

    ul{

        list-style: none; 

    }

    ul li::before {

       content: ;  

       color: green; 

       display: inline-block; 

       width: 1em; 

       margin-left: -0.9em; 

    }

    Below programs illustrate the above approach of changing colours of list item bullets:

    Example 1:

    <html>

       <head>

            <title>Changing Bullet Colors</title>

            <style>

                h3{

                    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>

        <h3>Geek Movies</h3>

        <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>

    Output:

    Example 2:

    <html>

       <head>

            <title>Changing Bullet Colors</title>

            <style>

                h3{

                    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>

        <h3>Geek Movies</h3>

        <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>

    Output:

    Example 3:

    <html>

       <head>

            <title>Changing Bullet Colors</title>

            <style>

                h3{

                    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>

        <h3>Geek Movies</h3>

        <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>

    Output:

    Источник

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

    В Google Документах и Презентациях можно создавать маркированные и нумерованные списки, а также форматировать их. В Google Документах также можно добавлять контрольные списки.

    Как создать список

    1. Откройте файл в Google Документах или Презентациях на компьютере.
    2. Перейдите на страницу или слайд, где хотите создать список.
    3. Выберите тип списка на панели инструментов (если подходящего нет, нажмите «Развернуть» Ещё). Доступны следующие варианты:
    4. При необходимости используйте дополнительные функции.
      • Чтобы создать список внутри другого списка, нажмите клавишу Tab. Отступ внутреннего списка будет больше.
      • Чтобы продолжить основной список, дважды нажмите клавишу Ввод. 

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

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

    Как изменить тип списка и цвет маркеров или нумерации

    Как начать заново нумерацию списка в Документах и Презентациях

    Как продолжить нумерацию списка в Документах

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

    Как добавить висячий отступ

    Висячий отступ применяется ко всем строкам, кроме первой.

    Google Документы

    Google Презентации

    1. Откройте файл в Google Презентациях на компьютере.
    2. Выделите текст, отступ которого нужно изменить.
    3. В меню в верхней части экрана нажмите Формат затем Параметры форматирования.
    4. Справа откройте меню Выравнивание текста.
    5. В разделе «Специальные» выберите вариант «Висячий».
    6. Задайте размер отступа (необязательно).

    Как добавить отступы вокруг текста в Google Презентациях

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

    1. Откройте файл в Google Презентациях на компьютере.
    2. Выделите текст, который нужно изменить.
    3. В меню в верхней части экрана нажмите Формат затем Параметры форматирования.
    4. Справа откройте меню Выравнивание текста.
    5. Укажите нужные значения в разделе «Поля».

    Эта информация оказалась полезной?

    Как можно улучшить эту статью?

    Источник
    • Изменение вида стандартного маркера для нумерованных списков
    • Установка типа маркера для маркированных списков
    • Установка изображения вместо маркера для элементов списка

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

    Изменение и удаление маркеров

    Для изменения стандартного внешнего вида маркера в CSS используется свойство list-style-type , в качестве значения задается тот вид маркера, на который вы хотите заменить стандартный.

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

    CSS Свойство:

    list-style-type:

    Результат:

    1. Кликните на значение свойства list-style-type
    2. Наблюдайте за сменой маркеров
    3. Используйте для своих списков наиболее подходящие маркеры

    Ol#myList {
    list-style-type: decimal
    ;
    }

    Кликните на любое значение свойства, чтобы увидеть результат

    Для маркированных списков существует всего три вида маркеров, которые можно задать с помощью значений circle, disk и squred:

    Название документа

    • Кофе
    • Чай
    • Кофе
    • Чай
    • Кофе
    • Чай

    Попробовать »

    С помощью значения none можно удалить маркеры у пунктов в списке, но отступ слева при этом все равно останется:

    Название документа

    • Кофе
    • Чай
    1. Кофе
    2. Чай

    Попробовать »

    Замена маркеров картинками

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

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

    Название документа

    • Кофе
    • Чай
    1. Кофе
    2. Чай

    Попробовать »

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

    При удалении маркеров у пунктов списка можно также удалить или уменьшить размер левого отступа, устанавливаемый браузером по умолчанию. Для полного удаления отступа нужно будет воспользоваться свойством padding-left , которое позволяет регулировать внутренний отступ:

    Название документа

    • Кофе
    • Чай
    1. Кофе
    2. Чай

    Попробовать »

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

  • , а просто скрываются за краем окна браузера.

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

    • outside
      — маркер располагается слева от содержимого (является значением по умолчанию)
    • inside
      — маркер располагается внутри пункта списка вместе с содержимым

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

    Название документа

    • Кофе
    • Чай
    • Кофе
    • Чай
    • Кофе
    • Чай

    Попробовать »

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

    Задача

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

    Решение

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

  • вкладываем тег , а уже внутрь него помещаем текст. Иными словами вместо традиционной схемы
  • текст

    • создаем конструкцию

  • текст

    • . При этом цвет маркеров определяется стилевым свойством color
    для селектора LI
    , а цвет текста — для селектора SPAN
    (пример 1).

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

    HTML5
    CSS 2.1
    IE
    Cr
    Op
    Sa
    Fx

    Цвет текста и маркеров в списке

    • Скрипка
    • Гитара
    • Волынка
    • Шарманка
    • Челеста

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

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

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

    Internet Explorer

    		 Chrome

    		 Opera

    		 Safari

    		 Firefox

    		 Android

    		 iOS
    8.0+

    		 1.0+

    		 7.0+

    		 3.1+

    		 1.0+

    		 1.0+

    		 1.0+

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

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

    HTML5
    CSS 2.1
    IE
    Cr
    Op
    Sa
    Fx

    Цвет маркеров в списке

    • Север
    • Юг
    • Запад
    • Восток

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

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

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

    CSS стили списка маркера.

    list-style-type

    list-style-type:

    disc
    | circle
    | square
    | decimal
    | lower-roman
    | upper-roman
    | lower-alpha
    | upper-alpha
    | none
    ;

    Значение
    :

    disk –
    маркированный список в виде закрашенного кружка

    circle –
    маркированный список в виде не закрашенного кружка

    square –
    маркированный список в виде закрашенного квадратика

    decimal –
    нумерованный список арабскими числами (1,2,3 и т.д.)

    upper-roman –
    нумерованный список большими римскими цифрами (I,II,III,IV и т.д.)

    lower-roman –
    нумерованный список маленькими римскими цифрами (i,ii,iii,iv и т.д.)

    upper-alpha –
    нумерованный список заглавными буквами (A,B,C и т.д.)

    lower-alpha –
    нумерованный список строчными буквами (a,b,c и т. д.)

    none –
    без маркера.

    Пример
    :

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

    • Верь в лучшее, ожидай худшее.
    • Жизнь — это болезнь, со смертельным исходом.
    • Никогда не говори никогда.

    Результат
    :

    Бывают такие случаи, когда отображения маркера в списке нужно убрать. Для этого в коде CSS пропишите

    list-style-type:

    none;

    Пример
    :

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

    • Верь в лучшее, ожидай худшее.
    • Никогда не говори никогда.

    Результат
    :

    Можно обычные маркеры в списке заменить собственными изображениями. Это можно сделать с помощью свойства list-style-image
    .

    list-style-image

    list-style-image:

    url(картинка.png);

    Пример
    :

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

    • Верь в лучшее, ожидай худшее.
    • Жизнь — это болезнь со смертельным исходом.
    • Никогда не говори никогда.

    Результат
    :

    Можно также задать маркированному списку расстояние от текста. Это можно сделать с помощью свойства padding-left
    для селектора li.

    Пример
    :

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

    • Верь в лучшее, ожидай худшее.
    • Жизнь — это болезнь со смертельным исходом.
    • Никогда не говори никогда.

    Результат
    :

    Следующая задача состоит в том, чтобы изменить цвет маркера, но при этом не изменять цвет текста. Как это возможно сделать? Цвет маркера можно изменить, если к тесту добавить тег .
    Это выглядит вот так:

  • текст

    • Пример
    :

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

    • Верь в лучшее, ожидай худшее.
    • Жизнь — это болезнь со смертельным исходом.
    • Никогда не говори никогда.

    Результат
    :

    Дополнение к общей теме.


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

    Пример
    :

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

    • Верь в лучшее, ожидай худшее.Пункт 1
    • Жизнь — это болезнь со смертельным исходом.Пункт 2
    • Никогда не говори никогда.Пункт 3
    • Это все что я знал. Пункт 4

    Результат
    :

    Вот и подошла к завершению тема .

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

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

    Внутрь каждого элемента

  • вкладываем , а уже внутрь него помещаем текст. Иными словами вместо традиционной схемы
  • текст

    • создаем конструкцию

  • текст

    • При этом цвет маркеров определяется стилевым свойством color для селектора li
    , а цвет текста — для селектора span
    (пример 1).

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

    Цвет текста и маркеров в списке

    • Скрипка
    • Гитара
    • Волынка
    • Шарманка
    • Челеста

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

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

    Несмотря на простоту, метод неудобен, особенно при объёмных списках, ведь к каждому пункту списка теперь придётся добавлять .

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

    Смысл в следующем — убираем оригинальные маркеры списка через свойство list-style-type и добавляем свои собственные маркеры с помощью псевдоэлемента ::before и свойства content . Такая связка позволяет вставлять любой текст или символ перед элементом, в данном случае

  • . Причём видом текста (цвет, шрифт, фон и др.) также можно управлять через стили, что и продемонстрировано в примере 2.

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

    Цвет маркеров в списке

    • Север
    • Юг
    • Запад
    • Восток

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

    Задача

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

    Решение

    С помощью 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.

    • Источник

    Понравилась статья? Поделить с друзьями:

    Читайте также:

  • Как изменить только одну координату unity
  • Как изменить только один бит
  • Как изменить только зарядка на передачу файлов
  • Как изменить толщину шрифта на компьютере windows 10
  • Как изменить толщину шрифта css

    • 0 0 голоса
    Рейтинг статьи
    Подписаться
    Уведомить о
    guest

    0 комментариев
    Старые
    Новые Популярные
    Межтекстовые Отзывы
    Посмотреть все комментарии