Właściwości punktowanych list edycja z pomocą CSS

Czas czytania: < 1 minut

O tym jak w HTML stworzyć wypunktowaną listę pisałam już w jednym z wcześniejszych wpisów.

Były to oczywiście proste punktowane lub numerowane listy tym razem chcę pójść o krok dalej i okazać jakie właściwości CSS mogą mogą być użyte do ich formatowania.

Położenie znacznika wypunktowania

Używając określenia znacznik wypunktowania mam na myśli np. kropkę dzięki której lista wyróżnia się na tle całej strony. Z pomocą list-style-position możemy manipulować jej położeniem.

list-style-position posiada kilka ustawień przeważnie jednak korzysta się z:

• inside – w środku
• outside – na zewnątrz

np.

See the Pen list by Aura (@Julka85) on CodePen.dark

Jak usunąć widoczne wypunktowanie?

Usuwanie wypunktowania jest dość proste:

.usunpunkt{
  margin:0;
  padding:0;
  list-style:none;
}

• lista z bez punktu
• lista z bez punktu
• lista z bez punktu
• lista z bez punktu

W HTML:

<ul class="usunpunkt">
    <li>lista z bez punktu</li>
    <li>lista z bez punktu</li>
    <li>lista z bez punktu</li>
    <li>lista z bez punktu</li>
</ul>

Zapytacie do czego nam wypunktowana lista bez punktu? Taka lista świetnie nada się np. do zbudowania prostego rozwijanego menu.

Kolorowanie tła pod listą

Wypunktowana lista może mieć również bardzo ciekawe tło. Kolorować możemy nie tylko całą listę, ale również pojedyncze elementy czyli li

• lista z bez punktu
• lista z bez punktu
• lista z bez punktu
• lista z bez punktu

Kod CSS:

ul.color{ 
    list-style-position: inside;
    background: #ccc;
}
ul.color li{
    background: #eee;
    margin: 7px;
}

To oczywiście nie wszystko co możemy zrobić z wypunktowanymi listami, jednak omówienie np. jak zmienić kolor punku zostawię sobie na kolejny wpis.