Как в 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);
}

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

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: