Lekcje >> Podstawy HTML 5
Polimax

Drukarnia w Warszawie realizująca druk wizytówek, plakatów jak również fotoksiążki, fotoobrazy i fotokalendarze - z wysyłką na terenie całego kraju.

Tworzenie list z CSS

Typ stylu list-style-type

Style list podzielono na typy w zależnosci od rodzaju stosowanych wyróżników. Podstawowe wartości list-style-type:

  • disc - koło;
  • circle - okrąg;
  • square - kwadrat;
  • decimal - liczby arabskie;
  • lower-alpha - małe litery;
  • upper-alpha - duże litery;
  • upper-roman - duże liczby rzymskie;
  • lower-roman - małe liczby rzymskie;
  • none - brak wyróżnika (markera).

Możemy definiować tak całą listę, jak i poszczególne jej punkty.

Różne typy stylów - ćwiczenie 3_2_11_1

<body>
  <p>
    Lista wypunktowana:
  </p>
  <ul style="list-style-type:disc;">
    <li>list-style-type:disc</li>
    <li>list-style-type:disc</li>
    <li style="list-style-type:circle;">list-style-type:circle</li>
    <li style="list-style-type:square;">list-style-type:square</li>
    <li style="list-style-type:none;">list-style-type:none</li>
  </ul>
  
  <p>
    Lista numerowana:
  </p>
  <ol style="list-style-type:decimal;">
    <li>list-style-type:decimal</li>
    <li>list-style-type:decimal</li>
    <li style="list-style-type:lower-alpha;">list-style-type:lower-alpha</li>
    <li style="list-style-type:upper-alpha;">list-style-type:upper-alpha</li>
    <li style="list-style-type:lower-roman;">list-style-type:lower-roman</li>
    <li style="list-style-type:upper-roman;">list-style-type:upper-roman</li>
    <li style="list-style-type:none;">list-style-type:none</li>
  </ol>
</body>

Pozycja markera względem zawijanego tekstu list-style-position

Podstawowe wartości list-style-type:

  • outside - wyróżniki na zewnątrz listy (domyślnie);
  • inside - wyróżniki wewnątrz listy.

Selektorami mogą być znaczniki dotyczące list ul, ol oraz li - pojedyncze punkty listy.

Pozycja markera względem zawijanego tekstu - ćwiczenie 3_2_11_2

<body style="font-family:Arial,sans-serif;font-size:16px;line-height:30px;">
  <ul>
    <li>
      W tym punkcie mamy domyślny sposób sytuaowania markera 
      <i>list-style-position:outside</i> - znajduje się on na zewnątrz 
      bloku tekstu, tworzonego przez zawijane wiersze. Ten tekst 
      jest długi, popnieważ musimy pokazać zawijanie wierszy.
    </li>
    <li style="list-style-position:inside;">
      W tym punkcie mamy sposób sytuaowania markera 
      <i>list-style-position:inside</i> - znajduje się on wewnątrz bloku 
      tekstu, tworzonego przez zawijane wiersze. Ten tekst jest długi, 
      popnieważ musimy pokazać zawijanie wierszy.
    </li>
  </ul>    
</body>

Wyróżnik obrazkowy list-style-image

Selektorami mogą być znaczniki dotyczące list ul, ol oraz li - pojedyncze punkty listy.

Wyróżnik obrazkowy - ćwiczenie 3_2_11_3

<body style="font-family:Arial,sans-serif;font-size:16px;line-height:30px;">
  <ul style="list-style-image:url(punkt.png)">
    <li>
      Możemy również podać <i>list-style-type</i>, wtedy w przypadku 
      braku dostępu do obrazka będzie wzięty ten typ;
    </li>
    <li>
      To jest drugi punkt tej listy.
    </li>
  </ul>    
</body>