abc HTML5 i CSS TUTORIAL

Izgled i veličina fonta nenumerisana lista /UNORDERED LIST FONT FAMILY & FONT SIZE/ { font-family: } & { font-size: }


Slika 1. Korištenje atributa - Interni CSS /INTERNAL CSS/

Izgled i veličina fonta nenumerisana lista /UNORDERED LIST FONT FAMILY & FONT SIZE/ { font-family: } & { font-size: }
Sintaksa:

  • HEAD dio (za numerisanu listu /ORDERED LIST/):
    <style>
    TAG {font-family:naziv_fonta;} | TAG {font-size:Veličina_fonta;} | TAG {font-family:naziv_fonta; font-size:Veličina_fonta;}
    </style>
  • BODY dio: <TAG>

Oznake:
TAG - ol | li
ul - početak nenumerisne liste
/ul - kraj nenumerisne liste
li - Element liste

font-family - Atribut za ime fonta
naziv_fonta - Otkucati ime fonta (vidi iz tabele).
font-size - Atribut za veličinu fonta
Veličina_fonta - Brojna vrijednost fonta i mjerna jedinica veličine fonta (em, px, pt, %).

FONT FACE tag je zastario i u HTML 5 verziji se za izbor parametera fonta koristi CSS.

Numerisana lista počinje sa TAG-om OL (ORDERED LIST) a ispred svakog elementa liste je <LI> (element liste /LIST ITEM/). Na kraju elementa lista je </LI> odnosno na kraju liste </UL>. >>


Slika 2. Numerisana lista - buliti /UNORDERED LIST - OL & LI/

Primjer 1. Nenumerisana lista /UNORDERED LIST/ u dokumentu. Promjena fonta u TAHOMA.

<!DOCTYPE html>
<html>
<head><title>Numerisana lista - Ime fonta</title>
<style>
  ul { font-family:Tahoma; }
</style>
</head>
<body>
<p>Tekst ispred liste</p>
<UL>
  <LI>Leonardo</LI>
  <LI>Donatelo</LI>
  <LI>Rafaelo</LI>
</UL>
</body></html>

Tekst ispred liste

  • Leonardo
  • Donatelo
  • Rafaelo

Primjer 2. Nenumerisana lista /UNORDERED LIST/ u dokumentu. Promjena fonta u Comic Sans MS.

<!DOCTYPE html>
<html>
<head><title>Numerisana lista - Ime fonta</title>
<style>
  ul { font-family:Tahoma }
</style>
</head>
<body>
<p>Tekst ispred liste</p>
<UL style="font-family:Comic Sans MS;">
  <LI>Kolos sa Rodosa</LI>
  <LI>Velike piramide</LI>
  <LI>Viseći vrtovi</LI>
</UL>
</body></html>

Tekst ispred liste

  • Kolos sa Rodosa
  • Velike piramide
  • Viseći vrtovi

Primjer 3. Promjena veličine fonta u nenumerisanoj listi /UNORDERED LIST/:

<!DOCTYPE html>
<html>
<head><title>Numerisana lista - Veličina fonta</title>
<style>
  ul { font-family:Tahoma }
</style>
</head>
<body>
<p>Tekst ispred liste</p>
<UL style="font-size:1.5em;">
  <LI>Šantić</LI>
  <LI>Dučić</LI>
  <LI>Rakić</LI>
</UL>
</body></html>

Tekst ispred liste

  • Šantić
  • Dučić
  • Rakić

Primjer 4. Promjena veličine i imena fonta u nenumerisanoj listi /UNORDERED LIST/.

<!DOCTYPE html>
<html>
<head><title>Numerisana lista - Veličina i ime fonta</title>
<style>
  ul { font-size:1.2em; font-family:Comic Sans MS; }
</style>
</head>
<body>
<UL>
  <LI>TALES</LI>
  <LI>EUKLID</LI>
  <LI>PITAGORA</LI>
  <LI>ARHIMED</LI>
</UL>
</body></html>

Tekst ispred liste

  • TALES
  • EUKLID
  • PITAGORA
  • ARHIMED

Primjer 5. Promjena veličine i imena fonta u nenumerisanoj listi /UNORDERED LIST/:

<!DOCTYPE html>
<html>
<head><title>Numerisana lista - Veličina i ime fonta</title>
<style>
  ul { font-size:2em; font-family:Script; }
</style>
</head>
<body>
<p>Tekst ispred liste</p>
<UL>
  <LI>Grigorije</LI>
  <LI>Aksinja</LI>
  <LI>Natalija</LI>
</UL>
</body></html>

Tekst ispred liste

  • Grigorije
  • Aksinja
  • Natalija

Daljnji rad: Napisati html kod za slijedeće primjere:

1. Provjerite svoje znanje:
 

Zadatak

Ispis
Napišite kod koji ispisuje tekst

Vojskovođe Rimskog carstva:

  • Cezar
  • Oktavijan
  • Konstantin
   

2. Provjerite svoje znanje:
 

Zadatak

Ispis
Napišite kod koji ispisuje tekst
  • Hard disk
  • Monitor
  • Disketna jedinica
  • Tastatura
  • Miš
    •
   

3. Provjerite svoje znanje:
 

Zadatak

Ispis
Napišite kod koji ispisuje tekst
  • Meni 1
        supa
        jelo
        dezert
  • Meni 2

Prozor na dnu stranice je namjenje za provjeru koda:
- kopirajte kod (edit, copy, paste ili CTRL+C, CTRL+V ili DRAG&DROP metodom), editovanje je moguće u prozoru

Index