Krok 5 Listy

Innymi elementami formatowania tekstu są tz. listy. Są podobne do paragrafów z pewną jednak różnicą.

HTML zawiera dwa podstawowe rodzaje list: t.z nieuporządkowaną (unordered list) <ul>…</ul> i numeryczną (ordered lists) <ol>…</ol>. Każdy podpunkt listy jest zawarty w znacznikach <li>…</li>.

Każda z nich może posiadać dodatkowe opcje takie jak typ np.: <li type=”square”>…</li>. Opcja ta określila podpunkty w kształcie kwadratowym. <li type=”i”>…</li> – małe rzymskie numery.

  • Lista nieuporządkowana
  • Lista nieuporządkowana
  • Lista nieuporządkowana

Lista nieuporządkowana domyślna

  • Lista nieuporządkowana
  • Lista nieuporządkowana
  • Lista nieuporządkowana

Lista nieuporządkowana z podpunktami kwadratowymi

  1. Lista numeryczna – pozycja 1
  2. Lista numeryczna – pozycja 2
  3. Lista numeryczna – pozycja 3

Domyślna lista numeryczna

  1. Lista numeryczna – pozycja 1
  2. Lista numeryczna – pozycja 2
  3. Lista numeryczna – pozycja 3

Lista numeryczna z cyframi rzymskimi

CSS pozwala na większą kontrolę. Wystarczy jedynie zdefiniować właściwości znaczników ol lub ul.

ol {list-style-type: lower-roman; margin: 1em 0 1em 40px }

Określiliśmy typ podpunktów dla wszystkich list numerycznych naszej witryny oraz margines. Cztery wartości marginesu 1em 0 1em 40px określa margines górny, prawy, dolny i lewy. Można go wyrażać w procentach, pikselach lub em.

Mozna również określać dokładnej poszczególne elementy listy np.:

ol li { margin: .5em 0 .5em 0 }

Można również zastosować grafikę zamiast podstawowych kulek czy też kwadracików.

ul { list-style-image: url(/images/smiley.gif) }
ul li { margin: 1em 0 1em 0}

  • Spodoba ci się to
  • Spodoba ci się to
  • Spodoba ci się to

Można też użyć różnych obrazków …

<li style=”margin: 1em 0pt; list-style-image: url(‘/images/icon1.gif’)”>We know about people</li>
<li style=”margin: 1em 0pt; list-style-image: url(‘/images/icon2.gif’)”>We know about images</li>

<li style=”margin: 1em 0pt; list-style-image: url(‘/images/icon3.gif’)”>We know about ideas</li>
<li style=”margin: 1em 0pt; list-style-image: url(‘/images/icon4.gif’)”>We know about writing</li>

  • Wiemy dużo o ludziach
  • Wiemy dużo o obrazach
  • Mamy pomysły
  • Wiemy dużo o pisaniu

Poprzednia strona | Następna strona