abc HTML5 i CSS TUTORIAL

Boja teksta i pozadine definisane liste /DEFINITION LIST - DL & DT DD COLOR & BACKGROUND COLOR/ {background-color:}


Korištenje atributa - Interni CSS /INTERNAL CSS/

Boja teksta i pozadine definisane liste /DEFINITION LIST - DL & DT DD COLOR & BACKGROUND COLOR/ {background-color:}   
Korištenje internog CSS-a se izvodi u oba dijela HTML fajla: Sintaksa:

Sintaksa:

  • HEAD dio (za definisanu listu): <style> DL {background-color: Naziv_boje | #kod_boje;} </style>
  • BODY dio: <DL>

Oznake:
TAG - dl | dt | dd
dl - TAG definisane liste
dt - element liste (nije uvučen)
dd - element liste (uvučen)
/dl - kraj liste
- boja pozadine cijele liste.
background-color - Atribut za boje pozadine dokumenta
color - Atribut za boje teksta
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
color - boja teksta
naziv_boje | kod_boje - Naziv boje na engelskom ili kod boje. Popis kodova i naziva boja je u dodatku. 

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

Kreiranje internog iz linijskog css-a /INTERNAL CSS FROM LINE CSS/ u BODY TAG-u


Slika 2. Definisana lista /DEFINITION LIST - DL & DT & DD/

Primjer 1. Žuta pozadina definisane liste:

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

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

<!DOCTYPE html>
<html>
<head><title>Definisana lista - Boja pozadine</title>
<style>
  DL {background-color:orange; }
</style>
</head>
<body>
<DL>
  <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>
<style>
  DL {background-color:#C0C0C0; }
</style>
</head>
<body>
<DL>
  <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>
<style>
  DL {color:red; }
</style>
</head>
<body>
<DL>
  <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>
<style>
  DL {color:#0000A0; }
</style>
</head>
<body>
<DL>
  <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>
<style>
  DL {background-color:#C0C0C0;
      color:#0000A0; }
</style>
</head>
<body>
<DL>
  <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>
<style>
  DL {background-color:orange;
      color:red; }
</style>
</head>
<body>
<DL>
  <DT>Vojskovođe Rimskog carstva:</DT>
  <DD>Cezar</DD>
  <DD>Konstantin</DD>
</DL>
</body></html>
Vojskovođe Rimskog carstva:
Cezar
Konstantin

Primjeri:

dl {
margin-bottom:50px;
}

dl dt {
background:#5f9be3;
color:#fff;
float:left;
font-weight:bold;
margin-right:10px;
padding:5px;
width:100px;
}

dl dd {
margin:2px 0;
padding:5px 0;
}

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

1. Provjerite svoje znanje:
 
Zadatak Ispis
Napišite kod koji ispisuje tekst
  • Glava 3
    • Hard disk
    • Monitor
    • Disketna jedinica
    • Tastatura
    • Miš
  • Glava 4
   
2. Provjerite svoje znanje:
 
Zadatak Ispis
Napišite kod koji ispisuje tekst
  • Glava 2
  • Glava 3
    • Hard disk
    • Monitor
    • Disketna jedinica
    • Tastatura
    • Miš
  • Glava 4
   
3. Provjerite svoje znanje:
 
Zadatak Ispis
Napišite kod koji ispisuje tekst
  • Meni 1
        supa
        jelo
        dezert
  • Meni 2

Spisak .css fajlova /CSS FILES LIST/

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