③ Местоположение маркера списка и краткая форма задания стилей списка

Продолжим изучение темы CSS - списки. Если пропустили прошлые статьи, то вот ссылки на них:

Местоположение маркера списка list-style-position

Данное свойство предоставляет возможность располагать маркер вне или внутри содержимого элемента списка. Наследуется.

list-style-position

Значения:

outside - Значение по умолчанию. Маркер располагается вне блока с текстом.
inside - Маркер списка изображается в одном блоке с текстом. Последующие строки текста будут располагаться под значком маркера, т.е. маркер будет обтекаться текстом.
initial - Устанавливает значение свойства в значение по умолчанию.
inherit - Наследует значение свойства от родительского элемента.

Синтаксис

CSS

ul {list-style-position: inside;}
ol {list-style-position: outside;}

📷 РИС. 4. ПРИМЕР РАСПОЛОЖЕНИЯ МАРКЕРА ВНУТРИ И СНАРУЖИ БЛОКА СПИСКА

Краткая форма задания стилей списка

Можно объединить все три свойства форматирования списка в одно с помощью list-style. Значения свойств могут быть расположены в произвольном порядке, а часть значений может быть опущена. Если присутствует одно значение, то другие свойства примут значения браузера по умолчанию.

Синтаксис

CSS

ul {list-style: url("images/romb.png") inside;}

Продолжение в следующей статье!