Оформление списков в CSS
Возможности свойств CSS для стилизации списков
- Изменение вида стандартного маркера для нумерованных списков
- Установка типа маркера для маркированных списков
- Установка изображения вместо маркера для элементов списка
С помощью HTML-тегов можно создать два типа списков, имеющих маркеры: нумерованные и маркированные. По умолчанию большинство браузеров отображает маркеры маркированных списков в виде окружности, а маркеры нумерованных в виде чисел, идущих по порядку. CSS предоставляет возможность изменения внешнего вида стандартных маркеров. Далее будут продемонстрированы примеры с различными видами маркеров, с помощью которых, вы сможете изменить внешний вид своих списков.
Изменение и удаление маркеров
Для изменения стандартного внешнего вида маркера в CSS используется свойство list-style-type, в качестве значения задается тот вид маркера, на который вы хотите заменить стандартный.
Пример, демонстрирующий некоторые виды маркеров для нумерованных списков:
- Кликните на значение свойства list-style-type
- Наблюдайте за сменой маркеров
- Используйте для своих списков наиболее подходящие маркеры
list-style-type: decimal;
}
Для маркированных списков существует всего три вида маркеров, которые можно задать с помощью значений circle, disk и squred:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Название документа</title> <style> .class1 { list-style-type: circle; } .class2 { list-style-type: disc; } .class3 { list-style-type: square; } </style> </head> <body> <ul class="class1"> <li>Кофе</li><li>Чай</li> </ul> <ul class="class2"> <li>Кофе</li><li>Чай</li> </ul> <ul class="class3"> <li>Кофе</li><li>Чай</li> </ul> </body> </html>Попробовать »
С помощью значения none можно удалить маркеры у пунктов в списке, но отступ слева при этом все равно останется:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Название документа</title> <style> ul { list-style-type: none; } ol { list-style-type: none; } </style> </head> <body> <ul> <li>Кофе</li><li>Чай</li> </ul> <ol> <li>Кофе</li><li>Чай</li> </ol> </body> </html>Попробовать »
Замена маркеров картинками
Если вам не подходит ни один из предлагаемых по умолчанию маркеров, то CSS предоставляет возможность заменить их любой картинкой, в этом вам поможет свойство list-style-image, в значении которого нужно прописать путь к выбранному изображению.
Примите во внимание тот факт, что изображение не будет автоматически масштабироваться под список и будет отображено собственным размером, поэтому придется подбирать изображение подходящее по размеру или редактировать существующее, уменьшив или увеличив его до нужного:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Название документа</title> <style> ul { list-style-image: url('sqpurple.gif'); } ol { list-style-image: url('donald.gif'); } </style> </head> <body> <ul> <li>Кофе</li><li>Чай</li> </ul> <ol> <li>Кофе</li><li>Чай</li> </ol> </body> </html>Попробовать »
Отступ списка
При удалении маркеров у пунктов списка можно также удалить или уменьшить размер левого отступа, устанавливаемый браузером по умолчанию. Для полного удаления отступа нужно будет воспользоваться свойством padding-left, которое позволяет регулировать внутренний отступ:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Название документа</title> <style> ul { list-style-type: none; padding-left: 0; } ol { padding-left: 0; } </style> </head> <body> <ul> <li>Кофе</li><li>Чай</li> </ul> <ol> <li>Кофе</li><li>Чай</li> </ol> </body> </html>Попробовать »
В примере мы полностью убрали отступ с левой стороны, поэтому пункты списка теперь вплотную прилегают к краю окна браузера. И как видно из примера маркированный список отображается именно так, как и было задумано, но в нумерованном списке пропали маркеры. Причина кроется в самих маркерах - по умолчанию маркеры не являются частью содержимого пунктов списка, поэтому если убрать левый отступ они не сдвигаются вместе с содержимым элементов <li>, а просто скрываются за краем окна браузера.
Свойство list-style-position указывает, должен ли маркер располагаться внутри или снаружи пунктов списка. Данное свойство может принимать два значения:
- outside - маркер располагается слева от содержимого (является значением по умолчанию)
- inside - маркер располагается внутри пункта списка вместе с содержимым
Теперь можно переписать предыдущий пример так, чтоб отступ с левой стороны был убран, но маркеры при этом не уезжали за край браузера:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Название документа</title> <style> li { border: 1px solid red; } .class1 { list-style-position: outside; } .class2 { list-style-position: inside; } .class3 { list-style-position: inside; padding-left: 0; } </style> </head> <body> <ul class="class1"> <li>Кофе</li><li>Чай</li> </ul> <ul class="class2"> <li>Кофе</li><li>Чай</li> </ul> <ul class="class3"> <li>Кофе</li><li>Чай</li> </ul> </body> </html>Попробовать »
В примере к каждому пункту списка была добавлена рамка, чтобы визуально показать границы пунктов списка.