Css list-style — все свойства списков

CSS предлагает несколько свойств, которые помогут вам оформить свои списки. Давайте их коротко рассмотрим. Во всех случаях используется конструкция css – list-style. Списки являются очень частым элементом на любом сайте, поэтому при ведении своего или чужого проекта вы должны уделить хотя бы немного внимания внешнему виду списков. Все свойства прописываются непосредственно селектору ul или ol (маркированному или немаркированному списку).

Все свойства семейства css list-style

List-style-type – внешний вид маркера (для маркированных ul), или нумератора (для немаркированных ol).
Для маркированных списков есть такие значения:

  • Circle – черный кружочек
  • Disk – белый кружочек
  • Square – черный квадратик

Белого квадратика, как и остальных видов маркера, к сожалению, нет. Если вас не устраивают предложенные варианты, то можно загрузить свою-картинку маркер с помощью другого свойства, описанного чуть ниже.

Для немаркированных:

  • Lower-roman – строчные римские цифры
  • Upper-roman – прописные римские
  • Decimal – десятичные числа
  • Lower-alpha – строчные латинские буквы

Это не все значения, но остальные могут по-разному восприниматься браузерами, поэтому рекомендуется использовать только эти четыре значения.

List-style-image – вот это уже гораздо более интересное свойство. Оно позволяет задать свою картинку, которая будет использоваться в качестве маркера.

List-style-image: url(картинка.jpg)

Нужно прописать путь к изображению и его формат через точку.

List-style-position – этим свойством мало кто пользуется, да и вообще оно редко бывает нужным. Имеет всего два значения и определяет позицию маркера:

  • Inside – внутри блока
  • Outside – снаружи

По умолчанию всегда стоит внутри. Я советую так и оставлять.

Сокращенная запись

Это все три свойства, которые предусмотрены в css для списков. Чтобы не загромождать код, можно записать их в сокращенном виде:

List-style: disk url(image.png) inside;

Это свойство определяет в себе все остальные по порядку (тип, картинка, позиция). Позицию можно не задавать.

Итак, это все свойства css, предназначенные для оформления списков на веб-страницах. Понять их суть несложно. Самым интересным для нас является list-style-image, которое позволяет задать свою картинку в качестве маркера для маркированного списка. Именно так я сделал на своем блоге, потому что стандартные маркеры слишком уж скучны. На этом сегодняшнюю статью заканчиваю. Оформляйте списки и не забывайте подписаться, если тема сайтостроения вам интересна.

Комментариев: 2
  1. Сергей

    list-style-image — именно этим свойством я прописал иконки для рубрик на блоге.
    А вот для списков, и нумерации я применил псевдокласс before.
    Статья толковая, но короткая, пишите подробнее, приводите больше примеров…

    1. Михаил (автор)

      Да тут вроде больше и не о чем писать, всего 3 свойства, все достаточно просто. О нумерованных списках и красивых маркерах для них написал здесь

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

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