abc HTML5 i CSS TUTORIAL

Izgled i veličina fonta definisane liste /DEFINITION LIST FONT FAMILY & FONT SIZE/ { font-family: } & { font-size: }


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

Izgled i veličina fonta definisane liste /DEFINITION LIST FONT FAMILY & FONT SIZE/ { font-family: } & { font-size: }

Korištenje internog CSS-a se izvodi u oba dijela HTML fajla:

Sintaksa:

  • HEAD dio (za definisanu listu): <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;

Definisana lista počine sa tagom <DL> a završava sa </DL>. Elementi se označavaju sa tagovima <DT> i <DD>. Ovi tagovi ne trebaju završne tagove. Razlikuju se po nivou uvučenosti. <DT> (od engl. riječi DEFINITION TERM) ne uvlači dok <DD> (od engl. riječi DEFINITION)  uvlači tekst. 

Oznake:
dl - TAG definisane liste
dt - element liste (nije uvučen)
dd - element liste (uvučen)
/dl - kraj 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, %).
Vojskovođe Rimskog carstva:
Cezar
Konstantin

Primjer parametara fonta

 

Primjer 1. Promjena fonta u TAHOMA kod definisane liste /DEFINITION LIST/:

<!DOCTYPE html>
<html>
<head><title>Definisana lista - Ime fonta</title>
<style>
  DL {font-family:Tahoma; }
</style>
</head>
<body>
<p>Tekst ispred liste</p>
<DL>
  <DT>Atinga</DT>
  <DD>Sparta</DD>
  <DD>Delfi</DD>
</DL>
</body></html>

Tekst ispred liste

Atinga
Sparta
Delfi

Primjer 2. Promjena fonta u Comic Sans MS kod definisane liste /DEFINITION LIST/:

<!DOCTYPE html>
<html>
<head><title>Definisana lista - Ime fonta</title>
<style>
  DL {font-family:Comic Sans MS; }
</style>
</head>
<body>
<p>Tekst ispred liste</p>
<DL>
  <DT>Softver</DT>
  <DD>Windows</DD>
  <DD>Word</DD>
</DL>
</body></html>

Tekst ispred liste

Softver
Windows
Word

Primjer 3. Promjena veličine fonta kod definisane liste /DEFINITION LIST/:

<!DOCTYPE html>
<html>
<head><title>Definisana lista - Veličina fonta</title>
<style>
  DL {font-size:1.5em; }
</style>
</head>
<body>
<p>Tekst ispred liste</p>
<DL>
  <DT>Hardware</DT>
  <DD>Tastatura</DD>
  <DD>Miš</DD>
</DL>
</body></html>

Tekst ispred liste

Hardware
Tastatura
Miš

Primjer 4. Promjena veličine fonta kod definisane liste /DEFINITION LIST/:

<!DOCTYPE html>
<html>
<head><title>Definisana lista - Veličina fonta</title>
<style>
  DT {font-size:1.5em; }
  DD {font-size:1.2em; }
</style>
</head>
<body>
<p>Tekst ispred liste</p>
<DL>
  <DT>Vojskovođe Rimskog carstva:</DT>
  <DD>Cezar</DD>
  <DD>Konstantin</DD>
</DL>
</body></html>

Tekst ispred liste

Vojskovođe Rimskog carstva:
Cezar
Konstantin

Primjer 5. Različiti fontovi i veličina fonta tekst definisane liste /DEFINITION LIST/:

<!DOCTYPE html>
<html>
<head><title>Definisana lista - Veličina fonta</title>
<style>
  DT {font-size:1.5em; font-family:Comic Sans MS; }
  DD {font-size:1.2em; font-family:Impact;}
</style>
<body>
<DL>
  <DT>Vojskovođe Rimskog carstva:</DT>
  <DD>Cezar</DD>
  <DD>Konstantin</DD>
</DL>
</body></html>

Tekst ispred liste

Vojskovođe Rimskog carstva:
Cezar
Konstantin

Daljnji rad: Napisati html kod:

  1. sa izradom rječnika 
  2. sa izradom vaših omiljenih grupa pojmova i podpojmova.
  3. Šta će ispisati slijedeći kod
    <P>Na ulici:
    <DL>
    <DD><I>Mladić</I> Nestrpljivo puši i gleda na sat.
    <DD><I>Djevojka</I> Žurno dolazi iza ugla.
    </DL>
    </P> 
  4. Napisati HTML kod koji će imati za posljedicu ispis taksta:
    Na sceni su bili:
    Majka Radi u kuhinji, spremajući sinu doručak.
    Sin Sjedi za stolom, nestrpljivo čekajući obrok.
  5. Ispisati kod ze slijedeći tekst
    Dijelovi računara:
    HARD DISK tvrdi diks.
    DISK DRIVE disketna jedinica
    ...

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