Stylizowanie list <ul> i <ol>

Wygląd list numerowanych i nienumerowanych ustalamy głównie właściwością list-style. Jej możliwe subatrybuty to:

  • list-style-type (typ listy – patrz ilustracja poniżej - możliwe wartości: disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha)
  • list-style-image (obraz markera listy z użyciem url)
  • list-style-position (pozycja markera listy: inside, outside)
Typy list

W praktyce jednak, zamiast poszczególnych zapisów z subatrybutami często stosujemy zapis złożony - kilka przykładów:


ul
{
list-style-type: square;
list-style-image: url("marker.jpg");
list-style-position: outside;
list-style: square url("marker.jpg") outside;
}

Pozostało nam jeszcze omówić kolejną ważną w praktyce kwestię, a mianowicie: W jaki sposób uchwycić pojedynczy element listy, czyli znacznik <li>? Możemy użyć dwóch rodzajów selektorów:

Z użyciem spacji


ul li
{

}

Z użyciem operatora >


ul > li
{

}

Na czym polega różnica? Za pomocą spacji uchwycimy wszystkie elementy wewnątrz listy <ul>, zaś operatorem > tylko elementy leżące bezpośrednio w znacznikach <ul>. Dla lepszego zrozumienia tej różnicy rozważmy następującą strukturę:


<div class="pojemnik">
<span><p>Jeden</p></span>
<span><p>Dwa</p></span>
<p>Trzy</p>
<p>Cztery</p>
</div>

Zależnie od zastosowanego selektora otrzymamy inne rezultaty:

Kod z użyciem operatora >


.pojemnik > p
{
color:red;
}

Rezultat w przeglądarce jest następujący:

Jeden
Dwa
Trzy
Cztery

Wniosek: pierwsze dwa paragrafy nie są czerwone, ponieważ nie leżą bezpośrednio w divie pojemnik (zostały umieszczone w spanach).

Kod z użyciem spacji


.pojemnik p
{
color:red;
}

Rezultat w przeglądarce jest następujący:

Jeden
Dwa
Trzy
Cztery

Wniosek: wszystkie paragrafy są czerwone, ponieważ wcale nie muszą leżeć bezpośrednio w divie pojemnik (mogą w spanach, a nawet głębiej).

Zobacz także

Daj się zaskoczyć! Poniżej wylosowałem dla Ciebie pięć wpisów z innych kategorii blogowych aniżeli ta, którą właśnie przeglądasz:

Polecamy: Sekurak Academy 2024

Sekurak Academy 2024

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp do materiałów z edycji Sekurak Academy z roku 2023! Przy zakupie możecie skorzystać z kodu: pasja-akademia w koszyku, uzyskując rabat -30% na bilety w wersji "Standard" - warto korzystać! Więcej szczegółów znajdziecie tutaj.

Książka: Wprowadzenie do bezpieczeństwa IT

Wprowadzenie do bezpieczeństwa IT

Niedawno wystartował dodruk świetnej, rozchwytywanej książki pt. "Wprowadzenie do bezpieczeństwa IT, Tom I" (około 940 stron). Mamy dla Was kod: pasja (wpisz go w koszyku), dzięki któremu otrzymacie 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla naszych Widzów! Jest to pierwszy tom serii o ITsec, który wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

Pomóż dzieciom

Polska Akcja Humanitarna od wielu lat dożywia dzieci. Proszę, poświęć teraz dosłownie chwilę i pomóż klikając w oznaczony strzałką zielony brzuszek Pajacyka. Dziękuję!

Komentarze

Disqus

Kategorie wpisów

Oto polecana książka warta Waszej uwagi.
Pełna lista polecanych książek jest tutaj.

Uwaga - w dniach od 18.03.2024 do 25.03.2024 trwa w Helion.pl wiosenna akcja promocyjna. Otrzymujemy zniżkę -35% na książki drukowane oraz -50% na ebooki. Zobacz promocję tutaj.

Bądź na bieżąco