Tematy: typ stylu wykazu | obraz jako marker wykazu | pozycja markera wykazu | mieszane atrybuty wykazu

 

Dane w pigułce
Zastosowanie	określa typ markera (punktora) wykazu
Dziedziczenie	tak
Wartości	disc, circle, square decimal, decimal-leading-zero, lower-roman, upper-roman, lower-latin, lower-alpha, upper-latin, upper-alpha, lower-greek, georgian, armenian, hebrew
Wartość domyślna	disc
Przykład	list-style-type: square
Uwagi
Odpowiednik w HTML	atrybut type

Aby zdefiniować typ stylu wykazu, należy wpisać w definicji stylu list-style-type: wartość

Punkty wykazu mogą być na wiele sposobów wyróżniane markerami (punktorami):

<ul style="list-style-type: disc">
<li>pierwszy punkt
<li>drugi punkt
<li>trzeci punkt
</ul>

• pierwszy punkt
• drugi punkt
• trzeci punkt

list-style-type: circle

• pierwszy punkt
• drugi punkt
• trzeci punkt

list-style-type: square

• pierwszy punkt
• drugi punkt
• trzeci punkt

list-style-type: decimal

• pierwszy punkt
• drugi punkt
• trzeci punkt

list-style-type: lower-roman

• pierwszy punkt
• drugi punkt
• trzeci punkt

list-style-type: upper-roman

• pierwszy punkt
• drugi punkt
• trzeci punkt

list-style-type: lower-alpha

• pierwszy punkt
• drugi punkt
• trzeci punkt

list-style-type: upper-alpha

• pierwszy punkt
• drugi punkt
• trzeci punkt

list-style-type: none

• pierwszy punkt
• drugi punkt
• trzeci punkt

Interpretacja: Internet Explorer, Opera, Firefox, Chrome

Najnowsze wersje przeglądarek obsługują wiele wartości z przewidzianych list-style-type, jak decimal-leading-zero (wiodące zero, np. 01, 02, 03...), lower-greek, lower-latin, upper-latin, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha, armenian, georgian, hebrew.

list-style-type: decimal-leading-zero

• pierwszy punkt
• drugi punkt
• trzeci punkt

list-style-type: lower-greek

• pierwszy punkt
• drugi punkt
• trzeci punkt

list-style-type: upper-greek

• pierwszy punkt
• drugi punkt
• trzeci punkt

list-style-type: lower-latin

• pierwszy punkt
• drugi punkt
• trzeci punkt

list-style-type: upper-latin

• pierwszy punkt
• drugi punkt
• trzeci punkt

list-style-type: cjk-ideographic (Firefox, Chrome)

• pierwszy punkt
• drugi punkt
• trzeci punkt

list-style-type: hiragana (Firefox, Chrome)

• pierwszy punkt
• drugi punkt
• trzeci punkt

list-style-type: katakana (Firefox, Chrome)

• pierwszy punkt
• drugi punkt
• trzeci punkt

list-style-type: hiragana-iroha (Firefox, Chrome)

• pierwszy punkt
• drugi punkt
• trzeci punkt

list-style-type: katakana-iroha (Firefox, Chrome)

• pierwszy punkt
• drugi punkt
• trzeci punkt

list-style-type: armenian

• pierwszy punkt
• drugi punkt
• trzeci punkt

list-style-type: georgian

• pierwszy punkt
• drugi punkt
• trzeci punkt

list-style-type: hebrew (Firefox, Chrome)

• pierwszy punkt
• drugi punkt
• trzeci punkt

 

Dane w pigułce
Zastosowanie	ustawienie grafiki w roli markera wykazu
Dziedziczenie	nie
Wartości	adres i nazwa grafiki
Wartość domyślna	none
Przykład	list-style-image: url(obrazek.png)
Uwagi
Odpowiednik w HTML	brak

Aby zdefiniować obraz jako marker wykazu, należy wpisać w definicji stylu list-style-image: url(adres_obrazka)

Oprócz "wbudowanych" markerów, jako wyróżnik pozycji wykazu można też zastosować grafikę znajdującą się na dysku. Na przykład:

<ul style="list-style-image: url(owal2.gif)">

• pierwszy punkt
• drugi punkt
• trzeci punkt

<ul style="list-style-image: url(doc.gif)">

• pierwszy punkt
• drugi punkt
• trzeci punkt

Interpretacja: Internet Explorer, Firefox, Opera, Chrome

 

Dane w pigułce
Zastosowanie	ustalenie pozycji markera w punktach wykazu
Dziedziczenie	tak
Wartości	inside, outside
Wartość domyślna	outside
Przykład	list-style-position: outside
Uwagi
Odpowiednik w HTML	brak

Aby zdefiniować pozycję markera wykazu, należy wpisać w definicji stylu list-style-position: wartość

Style pozwalają określić, czy punkty wykazu dłuższe niż jeden wiersz na ekranie będą zawijane z wcięciem do pozycji pierwszego wiersza (outside), czy też bez wcięcia, a więc do pozycji wyróżnika (markera) punktu (inside). Innymi słowy, czy markery będą "wewnątrz", czy też "na zewnątrz" punktów wykazu.

Przykłady ze zwykłymi wyróżnikami i grafiką jako markerem.

list-style-position: inside

• pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt
• drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt
• trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt

• pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt
• drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt
• trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt

list-style-position: outside

• pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt
• drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt
• trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt

• pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt
• drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt
• trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt

Interpretacja: Internet Explorer, Firefox, Opera, Chrome

 

Dane w pigułce
Zastosowanie	określenie kombinacji atrybutów
Dziedziczenie	tak
Wartości	wartości atrybutów składowych
Wartość domyślna	domyślne wartości atrybutów składowych
Przykład	list-style: circle outside
Uwagi
Odpowiednik w HTML	ul type, ol type, li type

Aby zdefiniować mieszane atrybuty tła, należy wpisać w definicji stylu list-style: wartości

Podobnie jak w przypadku wielu innych elementów, możemy się posługiwać mieszanymi definicjami wykazu. Zamiast kolejno wyliczać poszczególne własności, możemy podać polecenie list-style, za którym znajdą się od razu wartości. Na przykład:

Zamiast

list-style-type: circle; list-style-position: outside;

list-style-image: url(greendot.gif); list-style-position: inside;

Możemy użyć

list-style: circle outside;

list-style: url(greendot.gif) outside;

Interpretacja: Internet Explorer, Firefox, Opera