Бешеный конкурс!
3:08
Автор: Рубрика: CSS-рецепты Комментариев нет

Как в css у элементов ul li убрать маркеры

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

Убираем маркеры по умолчанию

Иногда нужно просто убрать их. Например, при оформлении меню или чего-то другого. За отображение маркеров отвечает свойство list-style-type или сокращенное list-style. Значением по умолчанию выступает circle, то есть черный закрашенный кружочек. Чтобы убрать его, всего лишь нужно написать так:

Ul{
List-style-type: none;
}

или

Ul{
List-style: none;
}

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

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

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

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

Ul{
List-style: url(marker.png);
}

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

Еще материалы по CSS

Бесплатный курс по CSS

Премиум уроки по CSS

Полный практический курс по HTML5&CSS3

Комментариев нет