Изменить маркеры списка css. Изменение маркеров списка на CSS (псевдокласс before)

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

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

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

• Кофе
• Чай

• Кофе
• Чай

• Кофе
• Чай

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

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

Напомню, как подключаются стили к 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 сделать горизонтальный список. Изменение стиля нумерованных списков.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Нумерация и маркеры

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

В MS Word существует вкладка «Главная», в которой в группе «Абзац» можно выбрать необходимую вставку. Пользователь нажимает кнопки «Нумерация» или «Маркеры», затем с помощью линейки выставляет отступы. Этот способ очень прост и понятен, но неопытный пользователь может столкнуться со скрытыми сложностями. Вставляя маркированные и нумерованные списки повторно, отступы придется редактировать заново.

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

Списки с нумерацией

Каждый элемент списка выделяется цифрой, нумерация автоматически корректируется. Чтобы создавать и редактировать списки, существует кнопка «Нумерация» в группе «Абзац». Также можно воспользоваться функцией «Нумерация» контекстного меню выбранного абзаца.

Параметры списка:

• Формат номера определяет, какой символ будет находиться возле каждого элемента.
• Стиль нумерации можно выбирать в зависимости от особенностей конкретного документа: арабские или римские цифры, прописные или и т. д.
• Поле «Начальное значение» позволяет выбрать цифру, с которой будет начинаться список.
• В том случае, когда необходимо создать аналогичный список, но пронумеровать его заново, удобно воспользоваться функцией «Начать новый список». Нужно выделить элементы и задать все параметры.

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

• В начале абзаца, перед вводом текста, нужно поставить "1.", затем «Пробел» или Tab. Абзац оформится как первый пункт списка.
• Поставив перед абзацем "1)", а затем нажав «Пробел» или Tab, пользователь создаст список другого типа.
• По аналогии оформляются списки с буквами. В строках нужно ввести с точкой или скобкой. После каждого абзаца необходимо нажимать «Пробел» или Tab.

Создание маркированного списка в автоматическом режиме

Вставить маркированный список в «Ворде» можно следующим образом:

• В начале абзаца необходимо ввести звездочку или знак «больше», а затем нажать «Пробел» или Tab.
• Автоматически создать маркированный список. Можно включить его, перейдя во вкладку «Файл» и выбрав группу «Параметры». Во вкладке «Правописание» нужно выбрать «Параметры автозамены». В разделе «Автоформат» необходимо установить флажки напротив стилей.

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

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

Маркированные и нумерованные списки являются элементами Их стоит настроить так, как нужно пользователю в конкретном случае. Структуру можно редактировать с помощью функции «Определить многоуровневый список». Проверять, как отображаются все перечни, удобно в группе «Списки в документах». Чтобы изменить параметры шрифта каждого в отдельности, многоуровневый список связывается со стилями абзаца.

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

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

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

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

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

Нажав на кнопку «Маркеры», можно выбрать тот вариант, который подходит в данном случае. Для этого нужно перейти в область «Библиотека» и кликнуть на ней. Аналогично выбирается и тип нумерации: в области «Библиотека нумерации».

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

Каждый элемент текста может выделяться специальным маркером. Чтобы форматировать список согласно требованиям конкретного документа, необходимо выбрать команду «Определить новый маркер».

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

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

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