Цвет списка в html. Добавление маркеров или нумерации к тексту. Оформление списков с помощью CSS-стилей

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

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

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

Если вы когда-либо пробовали изменять css-стили номеров строк (цифр) в упорядоченных списках

, то, наверняка, сталкивались с проблемами. Достучаться до стилей этих элементов при помощи css-селекторов невозможно. А ведь довольно часто дизайн интерфейса предполагает изменение иx цвета, фона, размера и т.д.

Вот самый простой пример нестилизованного списка:

html

1. Посадить дерево
2. Построить дом
3. Вырастить сына

Давайте рассморим несколько способов решения вышеописанной задачи.

Традиционно топорный способ.

Традиционный способ решения этой проблемы сводится к тому, чтобы скрыть номера строк, автоматически расставленные браузером. При этом используется свойство list-style: none; .

css

li{ list-style: none; } .num{ color: white; background: #2980B9; display: inline-block; text-align: center; margin: 5px 10px; line-height: 40px; width: 40px; height: 40px; }

html

1. 1 Посадить дерево
2. 2 Построить дом
3. 3 Вырастить сына

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

Давайте посмотрим, как можно добиться такого же результата, не засоряя верстку и используя псевдоэлемент::before и css-свойства content , counter-increment , counter-reset .

Красивый и правильный способ.

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

css

ol{ counter-reset: myCounter; } li{ list-style: none; } li:before { counter-increment: myCounter; content:counter(myCounter); color: white; background: #2980B9; display: inline-block; text-align: center; margin: 5px 10px; line-height: 40px; width: 40px; height: 40px; }

html

1. Посадить дерево
2. Построить дом
3. Вырастить сына

Как видите, html-код остается чистым и красивым. При этом вся стилизация элементов списка переносится в css.

Давайте разберем по пунктам:

• li::before – создает внутри списка псевдоэлемент, который становится на место первого потомка.
• counter-reset:myCounter; – обнуляет css-счетчик myCounter внутри каждого
  .
  1. counter-increment: myCounter; – инкрементирует css-счетчик myCounter для каждого псевдоэлемента::before .
  2. content:counter(myCounter); – выводит текущее значение счетчика myCounter внутри псевдоэлемента::before .

подробнее о css-счетчиках можно посмотреть в

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 пропишите

list-style-type: none;

Пример :

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

Результат :



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

list-style-image

list-style-image: url(картинка.png);

Пример :

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

Результат :



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

Пример :

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

Результат :



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

1. текст

Пример :

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

Результат :



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

Пример :

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

Результат :



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

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



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

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



Применение пользовательских стилей к нескольким слайдам

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

Ограничения списка в PowerPoint

Вы не можете делать со списками в PowerPoint, которые можно использовать в других Office программах, например Word. Например, PowerPoint не поддерживает следующие возможности:

Вопросы и ответы

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

Почему я вижу только один маркер, независимо от того, сколько строк я добавляю?

Убедитесь, что вы используете в текстовом поле маркеры или номера, а не поле названия . В текстовом поле каждый раз при нажатии клавиши появляется число или маркер ВВОД. При нажатии клавиши CTRL + ВВОДВы получаете дополнительные линии без маркеров (для получения подробных сведений или примечаний в маркированной или нумерованной строке).




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

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

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

Вы также можете нажать ВВОД и нажмите клавишу BACKSPACE для удаления маркера или номера. Затем можно добавить текст или нажать клавишу ВВОД для добавления лишних пустых строк.

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

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



1 . Уменьшить уровень списка (отступ)

2 . Увеличить уровень списка (отступ)

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

Как увеличить или уменьшить расстояние между маркером или номером и текстом в строке?

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

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



1 . Отступ первой строки - указывает на место фактического символа маркера или номера. Если абзац не маркирован, это означает позицию первой строки текста.

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

3 . выступ - указывает на расположение фактических строк текста. Если абзац не маркирован, то он указывает на расположение второй строки (и последующих строк) текста.

Как изменить маркеры по умолчанию на другой символ?

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




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

Дополнительные сведения о работе с образцами можно найти в разделе Изменение образца слайдов .

Используйте маркеры или нумерацию для показа большого количества текста или последовательного процесса в Microsoft PowerPoint 2010 презентации.




Используйте маркеры или нумерацию для показа большого количества текста или последовательного процесса в Microsoft Office PowerPoint 2007 презентации.