CSS - właściwości List

List - listy


zapis skrótowy


list-style: [ list-style-type list-style-position list-style-image ]

ul {
    list-style: disc inside;
}
ol {
    list-style: upper-roman outside;
}



obrazy jako znaczniki

odnosi się do elementu <ul> oraz <li>

style="list-style-image: url("adres_do_pliku");"


<div>języki romańskie:</div>
<ul style="list-style-image: url('grafika/strzalka_02.jpg')";>
  <li>hiszpański</li>
  <li>kataloński</li>
  <li>portugalski</li>
  <li>francuski</li>
  <li>włoski</li>
  <li>rumuński</li>
</ul>
wynik kodu
języki romańskie:


<div>języki romańskie:</div>
<ul style="list-style-image: url('grafika/kangur_06.jpg')">
  <li>hiszpański</li>
  <li>kataloński</li>
  <li>portugalski</li>
  <li>francuski</li>
  <li>włoski</li>
  <li>rumuński</li>
</ul>
wynik kodu
języki romańskie:



położenie znacznika

style="list-style-position: inside" - znaczniki są umieszczone wewnątrz bloku tekstu
style="list-style-position: outside" - znaczniki są umieszczone z lewej strony bloku tekstu


<div>języki romańskie:</div>
<ul style="list-style-position: inside;">
  <li style="background-color: yellow;">hiszpański</li>
  <li style="background-color: yellow;">kataloński</li>
  <li style="background-color: yellow;">portugalski</li>
  <li style="background-color: yellow;">francuski</li>
  <li style="background-color: yellow;">włoski</li>
  <li style="background-color: yellow;">rumuński</li>
</ul>
wynik kodu
języki romańskie:


<div>języki romańskie:</div>
<ul style="list-style-position: outside;">
  <li style="background-color: yellow;">hiszpański</li>
  <li style="background-color: yellow;">kataloński</li>
  <li style="background-color: yellow;">portugalski</li>
  <li style="background-color: yellow;">francuski</li>
  <li style="background-color: yellow;">włoski</li>
  <li style="background-color: yellow;">rumuński</li>
</ul>
wynik kodu
języki romańskie:


<div>australijskie zwierzęta:</div>
<ul style="list-style-position: outside;">
  <li>Kangury są zwierzętami o zróżnicowanej wielkości od małych filanderów, których masa ciała osiąga około 1 kg, po kangura rudego czy kangura olbrzymiego,
  u których samce mogą osiągać wzrost przekraczający 2 m przy masie ciała ponad 80 kg. Jak sugeruje nazwa naukowa podrodziny (Macropodinae), tylne kończyny
  kangurów są większe od przednich i zapewniają poruszanie się zwierzęcia szybkimi skokami.</li>
  <li>Miś Koala gatunek ssaka z rodziny koalowatych (Phascolarctidae), nadrzewne zwierzę roślinożerne, zamieszkujące wschodnią Australię. Koala schodzi na
  ziemię tylko po to, aby przejść na kolejne drzewo. Żyje samotnie lub w niewielkich grupach złożonych z samca i kilku samic. </li>
</ul>
wynik kodu
australijskie zwierzęta:


<div>australijskie zwierzęta:</div>
<ul style="list-style-position: inside;">
  <li>Kangury są zwierzętami o zróżnicowanej wielkości od małych filanderów, których masa ciała osiąga około 1 kg, po kangura rudego czy kangura olbrzymiego,
  u których samce mogą osiągać wzrost przekraczający 2 m przy masie ciała ponad 80 kg. Jak sugeruje nazwa naukowa podrodziny (Macropodinae), tylne kończyny
  kangurów są większe od przednich i zapewniają poruszanie się zwierzęcia szybkimi skokami.</li>
  <li>Miś Koala gatunek ssaka z rodziny koalowatych (Phascolarctidae), nadrzewne zwierzę roślinożerne, zamieszkujące wschodnią Australię. Koala schodzi na
  ziemię tylko po to, aby przejść na kolejne drzewo. Żyje samotnie lub w niewielkich grupach złożonych z samca i kilku samic. </li>
</ul>
wynik kodu
australijskie zwierzęta:



styl znacznika

style znaczników odnoszą się do elementów <ul> <ol> <li>

listy wypunktowane odnosi się do elementu <ul>

style="list-style-type: circle"
style="list-style-type: disc"
style="list-style-type: none"
style="list-style-type: square"


<div>języki romańskie:</div>
<ul style="list-style-type: circle">
  <li>hiszpański</li>
  <li>kataloński</li>
  <li>portugalski</li>
  <li>francuski</li>
  <li>włoski</li>
  <li>rumuński</li>
</ul>
wynik kodu

języki romańskie:


<div>języki romańskie:</div>
<ul style="list-style-type: disc">
  <li>hiszpański</li>
  <li>kataloński</li>
  <li>portugalski</li>
  <li>francuski</li>
  <li>włoski</li>
  <li>rumuński</li>
</ul>
wynik kodu

języki romańskie:


<div>języki romańskie:</div>
<ul style="list-style-type: none">
  <li>hiszpański</li>
  <li>kataloński</li>
  <li>portugalski</li>
  <li>francuski</li>
  <li>włoski</li>
  <li>rumuński</li>
</ul>
wynik kodu

języki romańskie:


<div>języki romańskie:</div>
<ul style="list-style-type: square">
  <li>hiszpański</li>
  <li>kataloński</li>
  <li>portugalski</li>
  <li>francuski</li>
  <li>włoski</li>
  <li>rumuński</li>
</ul>
wynik kodu

języki romańskie:



listy uporządkowane odnosi się do elementu <ol>

style="list-style-type: decimal"
style="list-style-type: decimal-leading-zero"
style="list-style-type: lower-alpha"
style="list-style-type: upper-alpha"
style="list-style-type: lower-roman"
style="list-style-type: upper-roman"


<div>języki romańskie:</div>
<ol style="list-style-type: decimal">
  <li>hiszpański</li>
  <li>kataloński</li>
  <li>portugalski</li>
  <li>francuski</li>
  <li>włoski</li>
  <li>rumuński</li>
</ol>
wynik kodu

języki romańskie:
  1. hiszpański
  2. kataloński
  3. portugalski
  4. francuski
  5. włoski
  6. rumuński


<div>języki romańskie:</div>
<ol style="list-style-type: decimal-leading-zero">
  <li>hiszpański</li>
  <li>kataloński</li>
  <li>portugalski</li>
  <li>francuski</li>
  <li>włoski</li>
  <li>rumuński</li>
</ol>
wynik kodu

języki romańskie:
  1. hiszpański
  2. kataloński
  3. portugalski
  4. francuski
  5. włoski
  6. rumuński


<div>języki romańskie:</div>
<ol style="list-style-type: lower-alpha">
  <li>hiszpański</li>
  <li>kataloński</li>
  <li>portugalski</li>
  <li>francuski</li>
  <li>włoski</li>
  <li>rumuński</li>
</ol>
wynik kodu

języki romańskie:
  1. hiszpański
  2. kataloński
  3. portugalski
  4. francuski
  5. włoski
  6. rumuński


<div>języki romańskie:</div>
<ol style="list-style-type: upper-alpha">
  <li>hiszpański</li>
  <li>kataloński</li>
  <li>portugalski</li>
  <li>francuski</li>
  <li>włoski</li>
  <li>rumuński</li>
</ol>
wynik kodu

języki romańskie:
  1. hiszpański
  2. kataloński
  3. portugalski
  4. francuski
  5. włoski
  6. rumuński


<div>języki romańskie:</div>
<ol style="list-style-type: lower-roman">
  <li>hiszpański</li>
  <li>kataloński</li>
  <li>portugalski</li>
  <li>francuski</li>
  <li>włoski</li>
  <li>rumuński</li>
</ol>
wynik kodu

języki romańskie:
  1. hiszpański
  2. kataloński
  3. portugalski
  4. francuski
  5. włoski
  6. rumuński


<div>języki romańskie:</div>
<ol style="list-style-type: upper-roman">
  <li>hiszpański</li>
  <li>kataloński</li>
  <li>portugalski</li>
  <li>francuski</li>
  <li>włoski</li>
  <li>rumuński</li>
</ol>
wynik kodu

języki romańskie:
  1. hiszpański
  2. kataloński
  3. portugalski
  4. francuski
  5. włoski
  6. rumuński