Właściwości punktowanych list edycja z pomocą CSS
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.
Co znajdziesz w tym wpisie
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.