abc HTML5 i CSS TUTORIAL

Boja teksta i pozadine definisane liste /DEFINITION LIST COLOR & BACKGROUND COLOR/ style="background-color & style="color


Slika 1. Izbor vrijednosti atributa - Linijski CSS /INLINE CSS/

Boja teksta i pozadine definisane liste /DEFINITION LIST COLOR & BACKGROUND COLOR/ style="background-color & style="color   Sintaksa: <TAG style="background-color:naziv_boje | kod_boje;"> | <TAG style="color:naziv_boje | kod_boje;"> | <TAG style="background-color:naziv_boje | kod_boje; color:naziv_boje | kod_boje;">

Oznake:
dl - TAG definisane liste
dt - element liste (nije uvučen)
dd - element liste (uvučen)
/dl - kraj liste

background-color - Atribut za boju pozadine
naziv_boje - engleski naziv boje - Popis kodova i naziva boja je u dodatku.
kod_boje - Vrijednosti boja su od 0 - 255 (>>) odnosno heksadimalno sa znakom # ispred broja (00 do FF)Heksadicimalni brojevi :
Red – crvena – 00 - 255 - #FF0000
Green – zelena – 00 - 255 - #00FF00
Blue – plava – 00 – 255 - #0000FF


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. >>


Slika 2. Primjer boje pozadine

<DL>
<DT>tekst1
<DD>tekst2
</DL>

 

Primjer 1. Žuta pozadina definisane liste /DEFINITION LIST/:

<!DOCTYPE html>
<html>
<head><title>Definisana lista - Boja pozadine</title>
</head>
<body>
<DL style="background-color:yellow;">
  <DT>jedan</DT>
  <DD>dva</DD>
  <DD>tri</DD>
</DL>
</body></html>
jedan
dva
tri

Primjer 2. Orannž pozadina definisane liste /DEFINITION LIST/:

<!DOCTYPE html>
<html>
<head><title>Definisana lista - Boja pozadine</title>
</head>
<body>
<DL style="background-color:orange;">
  <DT>Topli napici:</DT>
  <DD>čaj</DD>
  <DD>kafa</DD>
</DL>
</body></html>
Topli napici:
čaj
kafa

Primjer 3. Boja pozadina definisane liste /DEFINITION LIST/ je kod boje #C0C0C0:

<!DOCTYPE html>
<html>
<head><title>Definisana lista - Boja pozadine</title>
</head>
<body>
<DL style="background-color:#C0C0C0;">
  <DT>Topli napici:</DT>
  <DD>čaj</DD>
  <DD>kafa</DD>
</DL>
</body></html>
Topli napici:
čaj
kafa

Primjer 4. Crveni tekst definisane liste /DEFINITION LIST/:

<!DOCTYPE html>
<html>
<head><title>Definisana lista - Boja teksta</title>
</head>
<body>
<DL style="color:red;">
  <DT>jedan</DT>
  <DD>dva</DD>
  <DD>tri</DD>
</DL>
</body></html>
jedan
dva
tri

Primjer 5. Tamno plava boja /kod boje #0000A0) tekst definisane liste /DEFINITION LIST/:

<!DOCTYPE html>
<html>
<head><title>Definisana lista - Boja teksta</title>
</head>
<body>
<DL style="color:#0000A0;">
  <DT>jedan</DT>
  <DD>dva</DD>
  <DD>tri</DD>
</DL>
</body></html>
jedan
dva
tri

Primjer 6. Boja pozadina definisane liste /DEFINITION LIST/ je kod boje #C0C0C0 a boja tektsa je tamno plava #0000A0:

<!DOCTYPE html>
<html>
<head><title>Definisana lista - Boja pozadine i teksta </title>
</head>
<body>
<DL style="background-color:#C0C0C0;color:#0000A0;">
  <DT>Vojskovođe Rimskog carstva:</DT>
  <DD>Cezar</DD>
  <DD>Konstantin</DD>
</DL>
</body></html>
Vojskovođe Rimskog carstva:
Cezar
Konstantin

Primjer 7. Tekst je crven a boja pozadine oranž definisane liste /DEFINITION LIST/:

<!DOCTYPE html>
<html>
<head><title>Definisana lista - Boja pozadine i teksta</title>
</head>
<body>
<DL style="background-color:orange;color:red;">
  <DT>Vojskovođe Rimskog carstva:</DT>
  <DD>Cezar</DD>
  <DD>Konstantin</DD>
</DL>
</body></html>
Vojskovođe Rimskog carstva:
Cezar
Konstantin

Primjer 8. Tekst je crven a boja pozadine oranž definisane liste /DEFINITION LIST/, a poslednji ispis je pozadina žuta:

<!DOCTYPE html>
<html>
<head><title>Definisana lista - Boja pozadine i teksta</title>
</head>
<body>
<DL style="background-color:orange;">
  <DT style="color:blue;">Vojskovođe Rimskog carstva:</DT>
  <DD>Cezar</DD>
  <DD style="background-color:yellow;color:red;">Konstantin</DD>
</DL>
</body></html>
Vojskovođe Rimskog carstva:
Cezar
Konstantin

Primjer 9 Korištenje ove liste za uređenje teksta tipa riječnik   

Daljnji rad: Napisati html kod:

  1. Uređenje teksta sa izgledom rječnika 
  2. Sa izradom vaših omiljenih grupa pojmova i podpojmova sa različitim bojama.
  3. 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.

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