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

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