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 listy
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.
Jak usunąć widoczne wypunktowanie punktu?
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ą (CSS)
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.
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.