abc HTML5 i CSS TUTORIAL

Boja pozadine dokumenta /BODY BACKGROUND COLOR/


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

Boja pozadine dokumenta /BODY BACKGROUND COLOR/
Sintaksa:

  • HEAD dio : <style> body { background-color: Naziv_boje | #kod_boje; } </style>
  • BODY dio: <body>

Oznake:
BODY - TAG za boju pozadine dokumenta
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


Slika 2. Boja pozadine dokumenta /BODY BACKGROUND COLOR/

Slijedeća animacija prikazuje kako se iz linijskog krerira interni css.

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

  1. { } otukucati u HEAD dio između <> i </>.
  2. STYLE - Premjestiti u <> dobija te <STYLE>.
  3. STYLE - Kopirati (CTRL+DRAG&DROP) u </> dobija te </STYLE>.
  4. Provjeriti ispis (F5-REFRESH) nema više linijskog css-a /LINE CSS/ bijela pozadina.
  5. Atribut premjestitI ( background-color:red ) u vitičaste zagrade.
  6. TAG (BODY) kopirati u interni css.
  7. Obrisati višak znakova.
  8. Provjeriti ispis (F5-REFRESH) nema više linijskog css-a /LINE CSS/ crvena pozadina.

Boja pozadine dokumenta postavlja se u TAG-u BODY naredbom BGCOLOR="#kod_boje". Može se navesti ili naziv boje ili kod (Npr. "#0000FF" za plavu boju.).
Popis kodova i naziva boja je u dodatku. 

Boje pozadina:

  1. Stranice-dokumenta /PAGE, DOCUMENT/ body TAG. <BODY>
  2. Zaglavlja u tekstu /HEADINGS/ (H1-H6).
  3. Paragrafa /PARAGRAPH/ <P>

Tri su nivoa boje pozadine teksta:

  1. Stranica-dokument /PAGE, DOCUMENT/ body TAG.
  2. DIV grupa  TAG-ova.
  3. Paragraf i zaglavlje teksta p h1,h2,h3,h4,h5,h6 TAG.

Parametri boje pozadine atubutom: < style="background-color>.

Primjer 1. Boja pozadine dokumenta /BACKGROUND COLOR/ je žuta.
Opis rješenja: Boja pozadine dokumenta bira se atributom <style> body {background-color:yellow;} . yellow je engleski naziv za žutu boju. .

<!DOCTYPE html>
<html>
<head> <title>zuto</title>
<style>
  body { background-color:yellow; }
</style>
</head>
<body>
<h5>Oboje je zlo: i svima vjerovati, i nikome.</h5>
<p>Tekst je crven</p>
</body> </html>
Oboje je zlo: i svima vjerovati, i nikome.

Tekst je crven
 

Primjer 2. Boja pozadine dokumenta /BACKGROUND COLOR/ je siva.
Opis rješenja: Boja pozadine dokumenta bira se atributom <style> body {background-color:#C0C0C0;}. #C0C0C0 je kod za sivu boju. Vidi kodove u dodatku.

<!DOCTYPE html>
<html>
<head> <title>plavo</title>
<style>
  body { background-color:#C0C0C0; }
</style>
</head>
<body>
<p>Siv tekst</p>
</body> </html>

Siva pozadina.

Primjer 3. Boja pozadine dokumenta je crvena /RED/.
Opis rješenja: Boja pozadine dokumenta bira se atributom <style> body {background-color:#FF0000;}.

<!DOCTYPE html>
<html>
<head> <title>plavo</title>
<style>
  body { background-color:#FF0000; }
</style>
</head>
<body>
<h5>LUPUS IN FABULA.</h5>
<p>Kod za žutu boju.</p>
</body></html>
LUPUS IN FABULA.

Kod za žutu boju

Primjer 4. Boja pozadine dokumenta je braon /brown/ a teksta cijan /CYAN/.
Opis rješenja: Boja pozadine dokumenta bira se atributom <style> body {background-color:brown;} . brown je engleski naziv za braon boju.

<!DOCTYPE html>
<html>
<head> <title>plavo</title>
<style>
  body { background-color:brown; }
</style>
</head>
<body>
<h2>Narodne poslovice</h2>
<p>Ko rano rani dvije sreće grabi.</p>
</body></html>

Narodne poslovice

Ko rano rani dvije sreće grabi.

Daljnji rad: 

  1. Ispis teksta na plavoj podlozi (naziv boje)
  2. Ispis teksta na sivoj podlozi (naziv boje)
  3. Ispis teksta na zelenoj podlozi (naziv boje)
  4. Ispis teksta na plavoj podlozi (kod boje)
  5. Ispis teksta na sivoj podlozi (kod boje)
  6. Ispis teksta na zelenoj podlozi (kod boje)
  7. Ispis teksta na ljubičastoj podlozi (kod boje)
  8. Ispisati dvije poslovice sa različitim bojama
  9. Ispista imena 6 naučnika sa različitim boja pozadine paragrafa.
  10. Kod boje unijeti proizvoljnu vrijednost.

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