CSS izbornik

Definiranje popisa linkova

 

Prvi korak do cilja je definiranje popisa linkova. Popisi se zbog svojih CSS svojstava redovito koriste za kreiranje izbornika. Popis glavnog izbornika sastoji se od četiri linka:

<ul>
<li><a href="#">Naslovnica</a></li>
<li><a href="#">Proizvodi</a></li>
<li><a href="#">O nama</a></li>
<li><a href="#">Kontakt</a></li>
</ul>

Kako je podizbornik popis podređen jednom članu popisa izbornika, linkove podizbornika dodajemo kao još jedan popis unutar nadređenog člana.

<ul>
<li><a href="#">Naslovnica</a></li>
<li><a href="#">Proizvodi</a>
<ul>
<li><a href="#">Proizvod 1</a></li>
<li><a href="#">Proizvod 2</a></li>
<li><a href="#">Proizvod 3</a></li>
</ul>
</li>
<li><a href="#">O nama</a></li>
<li><a href="#">Kontakt</a></li>
</ul>

Sada imamo definiran popis i slijedi njegovo formatiranje. Ovim smo završili izmjene HTML kôda, jer ćemo daljnje formatiranje izvršiti isključivo CSS-om.

Jedina će promjena u HTML kôdu biti na kraju, kad ćemo umjesto linkova koji vode na istu stranicu staviti prave linkove.

CARNet
Accessibility

Background Colour Background Colour

Font Face Font Face

Font Size Font Size

1

Text Colour Text Colour

Font Kerning Font Kerning

Image Visibility Image Visibility

Letter Spacing Letter Spacing

0

Line Height Line Height

1.2

Link Highlight Link Highlight