Formatowanie list – dodatek

W kontynuacji artykułu opiszę pozostałe typy numerowania. Są one nieco mniej przydatne i z pewnością rzadziej używane – sam nazywam je typami egzotycznymi.

typy egzotyczne

Przedstawione style należą do CSS 2.0 i w przeglądarkach są widoczne dopiero od wersji 8, a i to nie wszystkie.
Na początek litery greckie: (niech nikogo nie zmieni słowo lower w „lower-greek”; „upper-greek” nie istnieje)

ol{list-style-type: lower-greek;}

1. Pozycja pierwsza listy uporządkowanej
2. Pozycja druga listy uporządkowanej
3. Pozycja trzecia listy uporządkowanej

następnie litery łacińskie – małe i duże:

ol{list-style-type: lower-latin;}

1. Pozycja pierwsza listy uporządkowanej
2. Pozycja druga listy uporządkowanej
3. Pozycja trzecia listy uporządkowanej

ol{list-style-type: upper-latin;}

1. Pozycja pierwsza listy uporządkowanej
2. Pozycja druga listy uporządkowanej
3. Pozycja trzecia listy uporządkowanej

numerowanie armeńskie:

ol{list-style-type: armenian;}

1. Pozycja pierwsza listy uporządkowanej
2. Pozycja druga listy uporządkowanej
3. Pozycja trzecia listy uporządkowanej

numerowanie gruzińskie:

ol{list-style-type: georgian;}

1. Pozycja pierwsza listy uporządkowanej
2. Pozycja druga listy uporządkowanej
3. Pozycja trzecia listy uporządkowanej

numerowanie hebrajskie:

ol{list-style-type: hebrew;}

1. Pozycja pierwsza listy uporządkowanej
2. Pozycja druga listy uporządkowanej
3. Pozycja trzecia listy uporządkowanej

numerowanie ideogramami:

ol{list-style-type: cjk-ideographic;}

1. Pozycja pierwsza listy uporządkowanej
2. Pozycja druga listy uporządkowanej
3. Pozycja trzecia listy uporządkowanej

i na koniec cztery odmiany numerowania japońskiego:

ol{list-style-type: hiragana;}

1. Pozycja pierwsza listy uporządkowanej
2. Pozycja druga listy uporządkowanej
3. Pozycja trzecia listy uporządkowanej

ol{list-style-type: katakana;}

1. Pozycja pierwsza listy uporządkowanej
2. Pozycja druga listy uporządkowanej
3. Pozycja trzecia listy uporządkowanej

ol{list-style-type: hiragana-iroha;}

1. Pozycja pierwsza listy uporządkowanej
2. Pozycja druga listy uporządkowanej
3. Pozycja trzecia listy uporządkowanej

ol{list-style-type: katakana-iroha;}

1. Pozycja pierwsza listy uporządkowanej
2. Pozycja druga listy uporządkowanej
3. Pozycja trzecia listy uporządkowanej

Jako ciekawostkę dodam, że typ listy jest niezależny od użytych znaczników. Lista:

ul{list-style-type: decimal;}

będzie wyglądała tak:

• Pozycja pierwsza listy uporządkowanej
• Pozycja druga listy uporządkowanej
• Pozycja trzecia listy uporządkowanej

a lista:

ol{list-style-type: circle;}

będzie wyglądała tak:

1. Pozycja pierwsza listy uporządkowanej
2. Pozycja druga listy uporządkowanej
3. Pozycja trzecia listy uporządkowanej

Odradzam jednak tego typu eksperymenty, gdyż zakłóca to semantykę dokumentu html.

Uwaga na margines

Listy mogą nas zaskoczyć przy ustalaniu lewego marginesu. Wbrew przypuszczeniom większości marginesy dla list standardowo liczone są od tekstu elementów, a nie od punktorów. Należy o tym szczególnie pamiętać podczas używania właściwości list-style-image. Zbyt szerokie grafiki mogą wyjść poza lewą krawędź elementu nadrzędnego.

Kolory w listach

Możemy też wpływać na kolor punktorów niezależnie od koloru tekstu. Wystarczy, że określimy jeden kolor dla listy, a tekst wyodrębnimy np. znacznikami <span> </span>, w których przywrócimy standardowy kolor.

ul{color: #ff0066;}
ul span{color: #000000;}

<ul>
	<li><span>Pozycja pierwsza listy nieuporządkowanej</span></li>
	<li><span>Pozycja druga listy nieuporządkowanej</span></li>
	<li><span>Pozycja trzecia listy nieuporządkowanej</span></li>
</ul>

• Pozycja pierwsza listy nieuporządkowanej
• Pozycja druga listy nieuporządkowanej
• Pozycja trzecia listy nieuporządkowanej

Można oczywiście określać kolory oddzielnie dla każdego elementu listy. Dla odmiany na przykładzie listy uporządkowanej.

li.parzyste{color: #ff0066;}
li.nieparzyste{color: #00ff66;}
ol span{color: #000000;}

<ol>
	<li class="nieparzyste"><span>Pozycja pierwsza listy uporządkowanej</span></li>
	<li class="parzyste"><span>Pozycja druga listy uporządkowanej</span></li>
	<li class="nieparzyste"><span>Pozycja trzecia listy uporządkowanej</span></li>
</ol>

1. Pozycja pierwsza listy uporządkowanej
2. Pozycja druga listy uporządkowanej
3. Pozycja trzecia listy uporządkowanej