Rodzaje wypunktowania wykazów.

powrót    naprzód   menu

Listy (wykazy).


Aby istniała różnorodność w tworzeniu list lub wykazów stworzono w Css-2 deklaracje typu list-style-type, list-style-image oraz list-style-position. Poniższe przykłady wyjaśnią nam wszystkie niuanse tych styli.

Nazwa deklaracjiKod w headKod w bodyEfekt

list-style-type:
disc
.disc
{list-style-type:
disc;}
<ul class="disc">
<li>
pierwszy</li>
<li>
drugi</li>
<li>
trzeci</li>
</ul>
  • pierwszy
  • drugi
  • trzeci

list-style-type:
circle
.circle
{list-style-type:
circle;}
<ul class="circle">
<li>
pierwszy</li>
<li>
drugi</li>
<li>
trzeci</li>
</ul>
  • pierwszy
  • drugi
  • trzeci

list-style-type:
square
.square
{list-style-type:
square;}
<ul class="square">
<li>
pierwszy</li>
<li>
drugi</li>
<li>
trzeci</li>
</ul>
  • pierwszy
  • drugi
  • trzeci

list-style-type:
decimal
.decimal
{list-style-type:
decimal;}
<ul class="decimal">
<li>
pierwszy</li>
<li>
drugi</li>
<li>
trzeci</li>
</ul>
  • pierwszy
  • drugi
  • trzeci

list-style-type:
decimal-leading-zero
.decimal0
{list-style-type:
decimal-leading-zero;}
<ul class="decimal0">
<li>
pierwszy</li>
<li>
drugi</li>
<li>
trzeci</li>
</ul>
  • pierwszy
  • drugi
  • trzeci

list-style-type:
upper-alpha
.upper-alpha
{list-style-type:
upper-alpha;}
<ul class="upper-alpha">
<li>
pierwszy</li>
<li>
drugi</li>
<li>
trzeci</li>
</ul>
  • pierwszy
  • drugi
  • trzeci

list-style-type:
lower-alpha
.lower-alpha
{list-style-type:
lower-alpha;}
<ul class="lower-alpha">
<li>
pierwszy</li>
<li>
drugi</li>
<li>
trzeci</li>
</ul>
  • pierwszy
  • drugi
  • trzeci

list-style-type:
upper-roman
.upper-roman
{list-style-type:
upper-roman;}
<ul class="upper-roman">
<li>
pierwszy</li>
<li>
drugi</li>
<li>
trzeci</li>
</ul>
  • pierwszy
  • drugi
  • trzeci

list-style-type:
lower-roman
.lower-roman
{list-style-type:
lower-roman;}
<ul class="lower-roman">
<li>
pierwszy</li>
<li>
drugi</li>
<li>
trzeci</li>
</ul>
  • pierwszy
  • drugi
  • trzeci

list-style-type:
upper-latin
.upper-latin
{list-style-type:
upper-latin;}
<ul class="upper-latin">
<li>
pierwszy</li>
<li>
drugi</li>
<li>
trzeci</li>
</ul>
  • pierwszy
  • drugi
  • trzeci

list-style-type:
lower-latin
.lower-latin
{list-style-type:
lower-latin;}
<ul class="lower-latin">
<li>
pierwszy</li>
<li>
drugi</li>
<li>
trzeci</li>
</ul>
  • pierwszy
  • drugi
  • trzeci

list-style-type:
lower-greek
.lower-greek
{list-style-type:
lower-greek;}
<ul class="lower-greek">
<li>
pierwszy</li>
<li>
drugi</li>
<li>
trzeci</li>
</ul>
  • pierwszy
  • drugi
  • trzeci

list-style-type:
hebrew
.hebrew
{list-style-type:
hebrew;}
<ul class="hebrew">
<li>
pierwszy</li>
<li>
drugi</li>
<li>
trzeci</li>
</ul>
  • pierwszy
  • drugi
  • trzeci

list-style-type:
armenian
.armenian
{list-style-type:
armenian;}
<ul class="armenian">
<li>
pierwszy</li>
<li>
drugi</li>
<li>
trzeci</li>
</ul>
  • pierwszy
  • drugi
  • trzeci

list-style-type:
georgian
.georgian
{list-style-type:
georgian;}
<ul class="georgian">
<li>
pierwszy</li>
<li>
drugi</li>
<li>
trzeci</li>
</ul>
  • pierwszy
  • drugi
  • trzeci

list-style-type:
cjk-ideographic
.cjk
{list-style-type:
cjk-ideographic;}
<ul class="cjk">
<li>
pierwszy</li>
<li>
drugi</li>
<li>
trzeci</li>
</ul>
  • pierwszy
  • drugi
  • trzeci

list-style-type:
hiragana
.hiragana
{list-style-type:
hiragana;}
<ul class="hiragana">
<li>
pierwszy</li>
<li>
drugi</li>
<li>
trzeci</li>
</ul>
  • pierwszy
  • drugi
  • trzeci

list-style-type:
katakana
.katakana
{list-style-type:
katakana;}
<ul class="katakana">
<li>
pierwszy</li>
<li>
drugi</li>
<li>
trzeci</li>
</ul>
  • pierwszy
  • drugi
  • trzeci

list-style-type:
katakana-iroha
.katakana-iroha
{list-style-type:
katakana-iroha;}
<ul class="katakana-iroha">
<li>
pierwszy</li>
<li>
drugi</li>
<li>
trzeci</li>
</ul>
  • pierwszy
  • drugi
  • trzeci

list-style-type:
hiragana-iroha
.hiragana-iroha
{list-style-type:
hiragana-iroha;}
<ul class="hiragana-iroha">
<li>
pierwszy</li>
<li>
drugi</li>
<li>
trzeci</li>
</ul>
  • pierwszy
  • drugi
  • trzeci

list-style-type:
none
.none
{list-style-type:
none;}
<ul class="none">
<li>
pierwszy</li>
<li>
drugi</li>
<li>
trzeci</li>
</ul>
  • pierwszy
  • drugi
  • trzeci

list-style-image:
url(../css1.png)
.url
{list-style-image:
url(../css1.png);}
<ul class="url">
<li>
pierwszy</li>
<li>
drugi</li>
<li>
trzeci</li>
</ul>
  • pierwszy
  • drugi
  • trzeci

list-style-image:
none
.url-none
{list-style-image:
none;}
<ul class="url-none">
<li>
pierwszy</li>
<li>
drugi</li>
<li>
trzeci</li>
</ul>
  • pierwszy
  • drugi
  • trzeci

do góry    menu    powrót    naprzód