Приветствую вас на своем блоге. Сегодня я хотел бы затронуть тему, как через 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);
}
Более подробно о свойствах списков я расписал в этой статье, рекомендую почитать, чтобы разъяснить для себя все детали.