Маркеры списка в CSS
В языке CSS есть возможность создавать маркерованные списки и есть возможность стилизовать маркеры, а также в качестве них добавлять определённые изображения.
Рассмотрим все основные маркеры.
Простые маркеры
Для этого просто созданим простой маркерованный список через теги <ul> и <li>
- Пункт 1
- Пункт 2
- Пункт 3
В результате получим стандартные списки
- Пункт 1
- Пункт 2
- Пункт 3
Маркер - картинка
Также в качестве маркеров можно использовать любые изображения. Для этого отменяем отображения стандартных маркеров, указываем путь до нужного изображения и добавляем отступы в наших стилях CSS
ul li{ list-style: none; background: url(assets/img/marker1.png) no-repeat left 50%; padding-left: 25px; }
И мы увидим, что вместо простых маркеров у нас используется картинка.
- Пункт 1
- Пункт 2
- Пункт 3
Убрать маркеры списка через css
Чтобы полностью отключить маркеры у списков, добавьте к ним стиль css
ul li{list-style: none}
И в результате мы не увидим маркеры
- Пункт 1
- Пункт 2
- Пункт 3
Стандартные маркеры в css
Ниже показана таблица в которые вы можете увидить все маркеры, которые задать через язык CSS, а именно через стиль list-style
Код | Пример |
---|---|
<li style="list-style: disc"> | Маркер "сплошной кружок":
|
<li style="list-style: circle"> | Маркер "окружность":
|
<li style="list-style: square"> | Маркер "сплошной квадрат":
|
<li style="list-style: decimal"> |
Маркер арабскими цифрами
|
<li style="list-style: lower-roman"> |
Маркер со строчными римскими цифрами:
|
<li style="list-style: upper-roman"> |
Маркер с заглавными римскими цифрами:
|
<li style="list-style: lower-alpha"> |
Маркер со строчными буквами латинского алфавита:
|
<li style="list-style: upper-alpha"> |
Мареер с заглавными буквами латинского алфавита:
|
Оставить комментарий