Listy to bardzo ważny i często używany element języka HTML, a CSS daje nam kilka ceikawych mozliwości dostosowania ich wygląd do naszych potrzeb. Zarówno w przypadku list wypunktowanych jak i numerowanych możemy wpływać na sposób ich wypunktowania czy numerowania za pomocą specjalnie do tego cel stworzonej właściwości list-style-type.
ul>li {
list-style-type: square;
}Został tutaj użyty selektor dziecka > mający na celu zaznaczenie, że chcemy stylować listy wypunktowane (ul). Omówiony zostanie dokładniej w dalszej części kursu.
W powyższym przykładzie zmieniamy sposób wypunktowania na kwadratowy. Oto lista dostępnych typów:
ol>li {
list-style-type: upper-roman;
}Zostal tutaj użyty selektor dziecka > mający na celu zaznaczenie, że chemy stylować listy numerowane (ol). Omówiony zostanie dokladniej w dalszej częsci kursu.
Dostępne są:
li {
list-style-type: none;
}Wartość none powoduje zaniechanie punktowania, czy też numeracji list. Jest to często przydatne przy projektowaniu różnego rodzaju menu nawigacyjnych opartych o listy.
Listy z zasady są pionowe, co jednak, jeżeli chcemy mieć poziomą nawigację w oparciu o listę?
.menu-poziome li {
list-style-type: none;
float: left;
}Atrybut float również zostanie precyzyjniej omówiony w dalszych częściach kursu, na razie wystarczy wiedzieć, że powoduje on “opływanie” – w tym przypadku do lewej strony. Na listach daje to ciekawy efekt – kolejne pozycje ustawiają się obok siebie od lewej do prawej strony.
Użyta tutaj została klasa menu-poziome dzięki czemu nie wszystkie listy zostaną ułożone poziomo czego na pewno byśmy nie chcieli, a jedynie te, które oznaczone zostaną klasą o takiej nazwie.
