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

С помощью 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 - маркер располагается внутри пункта списка вместе с содержимым

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

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

    • Кофе
    • Чай
    • Кофе
    • Чай
    • Кофе
    • Чай
    Попробовать »

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

    Чтобы строки маркированного списка как-то выделить от основного текста, можно сделать так, чтобы цвет маркеров в списке отличался от цвета текста.

    По умолчанию стоит черная точка. Если просто задать цвет элементу li, то ничего не получится - цвет будет задан всей строке, а нужно изменить только цвет маркера (ul li цвет точек).

    Как изменить цвет буллитов с помощью CSS

    1. Скрываем оригинальные маркеры списка с помощью свойства list-style-type
    2. Добавляем свои собственные маркеры с помощью псевдоэлемента :before и свойства content . Это позволит вставить любой текст или символ перед элементом li .
    3. Внешним видом маркера можно управлять через стили CSS, изменяя цвет, шрифт, фон и другое. Я использовал жирное начертание шрифта Монтсеррат.
    li { list-style-type: none; /* Скрываем маркеры, отображаемые по умолчанию */ } li:before { font-family: "Montserrat", sans-serif; font-weight: 400; color: #d7002e; /* Цвет маркера */ content: " "; /* Маркер */ padding-right: 7px; /* Отступ от маркера до текста */ }

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

    article li { list-style-type: none; /* Скрываем маркеры, отображаемые по умолчанию */ } article li:before { font-family: "Montserrat", sans-serif; font-weight: 400; color: #d7002e; /* Цвет маркера */ content: " "; /* Маркер */ padding-right: 7px; /* Отступ от маркера до текста */ }

    Хочу изменить вид маркера на другой символ. Как это сделать?

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





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




    • Чебурашка

    • Крокодил Гена

    • Шапокляк



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





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




    • Чебурашка

    • Крокодил Гена

    • Шапокляк



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

    Замечание

    Псевдоэлемент before не работает в браузере Internet Explorer, поэтому собственные маркеры в нем отображаться не будут.

    Чтобы установить в качестве маркера какой-нибудь хитрый символ, можно воспользоваться программой Microsoft Word, выбрав меню Вставка > Символ... После чего откроется окно, как показано на рис. 1.

    Рис. 1. Выбор символа в программе Microsoft Word

    Код знака, выделенный на рисунке цветом, следует вписать в качестве параметра content , добавив перед ним слэш. Например, для приведенного символа следует указывать content: "\25aa" .

    С помощью окна диалога Список можно изменить следующие параметры маркированного списка:

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

      Величину выступа.

      Расстояние между символом маркера и текстом.

      Выравнивание.

    Для этих целей необходимо войти в меню Формат – Список и нажать кнопкуИзменить , после чего откроется окно диалогаИзменить маркированный список , представленное на рис. 4.25.

    Рис. 4.25. Окно диалога Изменить маркированный список

    Ниже приведен состав его опций:

    Опции

    Назначение

    Символ маркера

    Предлагает варианты различных шрифтов для выбранного символа

    Позволяет осуществить выбор варианта символа маркера

    Положение маркера

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

    Положение от текста

    Устанавливает величину отступа от правого края маркера до начала текста

    Позволяет визуально оценить, как будет выглядеть список после внесения в него изменений

    Изменение формата нумерованного списка

    Нумерованные списки создаются на вкладке Нумерованные (рис. 4.24). Если предложенные форматы нумерованного списка не подходят для оформления конкретного документа, можно создать собственный формат списка, нажав кнопкуИзменить в диалоговом окнеСписок на вкладкеНумерованный. При этом откроется окно диалогаИзменение нумерованного списка (рис. 4.26).

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

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

    Опция

    Назначение

    Формат номера

    Нумерация

    Осуществляет выбор стиля номеров для списка

    Задает номер, с которого должна начаться нумерация в списке

    Позволяет выбрать шрифт для номеров в списке и для любого текста до и после номеров Открывает вкладку Шрифт

    Положение номера

    Выравнивание

    Устанавливает выравнивание списка

    Определяет выравнивание и положение номера

    Положение текста

    Устанавливает расстояние от правого края номера до начала текста

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

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

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

    Рис. 4.27. Вкладка Многоуровневые окна диалогаСписок .

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

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

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

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

    1. Определить фрагмент документа, который предполагается оформить в виде списка.

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

    3. Выделить выбранный фрагмент текста.

    4. Выбрать команду Формат Список . В окне диалогаСписок перейти на вкладкуМногоуровневый (рис. 4.27).

    5. Выбрать нужный тип многоуровневого списка из предложенных вариантов. Нажать ОК .

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

    В этой статье мы детально рассмотрим то, как сделать список в Ворде.

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

    1. Установите курсор в начале строки, в которой должен находиться первый пункт списка.

    2. В группе “Абзац” , которая расположена во вкладке “Главная” , нажмите кнопку “Маркированный список” .

    3. Введите первый пункт нового списка, нажмите “ENTER” .

    4. Введите все последующие пункты маркированного списка, нажимая в конце каждого из них “ENTER” (после точки или точки с запятой). Когда закончите вводить последний пункт, дважды нажмите “ENTER” или нажмите “ENTER” , а затем “BackSpace” , чтобы выйти из режима создания маркированного списка и продолжить обычный набор текста.

    Преобразование готового текста в список

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

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

    2. Нажмите “ENTER” .

    3. Повторите это же действие для всех следующих пунктов.

    4. Выделите фрагмент текста, который должен стать списком.

    5. На панели быстрого доступа во вкладке “Главная” нажмите кнопку “Маркированный список” (группа “Абзац” ).

      Совет: Если после созданного вами маркированного списка еще нет текста, дважды нажмите “ENTER” в конце последнего пункта или нажмите “ENTER” , а затем “BackSpace” , чтобы выйти из режима создания списка. Продолжите обычный набор текста.

    Если вам необходимо создать нумерованный список, а не маркированный, нажмите кнопку “Нумерованный список” , расположенную в группе “Абзац” во вкладке “Главная” .

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

    Созданный нумерованный список можно сместить влево или вправо, изменив таким образом его “глубину” (уровень).

    1. Выделите созданный вами маркированный список.

    “Маркированный список” .

    3. В выпадающем меню выберите пункт “Изменить уровень списка” .

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

    Примечание: С изменением уровня изменится и маркировка в списке. О том, как изменить стиль маркированного списка (вид маркеров, в первую очередь), мы расскажем ниже.

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

    Примечание: Красной стрелкой на скриншоте показана начальная позиция табуляции для маркированного списка.

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


    Примечание: Одно нажатие клавиши (или клавиш) смещает список на одну позицию табуляции. Комбинация “SHIFT+TAB” будет работать только в том случае, если список находится на расстоянии хотя бы в одну позицию табуляции от левого поля страницы.

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

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

    Изменение стиля маркированного списка

    Помимо стандартного маркера, устанавливаемого в начале каждого пункта списка, для его маркировки вы можете использовать и другие знаки, доступные в MS Word.

    1. Выделите маркированный список, сnиль которого необходимо изменить.

    2. Нажмите на стрелку, расположенную справа от кнопки “Маркированный список” .

    3. Из выпадающего меню выберите подходящий стиль маркера.

    4. Маркеры в списке будут изменены.

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




  • Close