abc HTML5 i CSS TUTORIAL

Boja teksta /COLOR/ i boja pozadine dokumenta /BACKGROUND COLOR/


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

Boja teksta /COLOR/ i boja pozadine dokumenta /BACKGROUND COLOR/ Ovo su dva atributa i odvojeno su opisana:
Boja pozadine dokumenta /BACKGROUND COLOR/.Korištenje internog CSS-a se izvodi u oba dijela HTML fajla: Sintaksa:

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

Boja tekst dokumenta /COLOR/.Korištenje internog CSS-a se izvodi u oba dijela HTML fajla: Sintaksa:

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

Oznake:
BODY - TAG za boju pozadine dokumenta i boju teksta u dokumentu
background-color - Atribut za boju pozadine dokumenta
color - Atribut za boju teksta dokumenta
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

Sintaksa kad se navode dva atributa je da se piše zajedno unutar jedne STYLE naredbe:

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

Popis kodova i naziva boja je u dodatku. 

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


Slika 2. Boja teksta /TEXT COLOR/

Parametri teksta /color/ i boje pozadine /background-color/.

Primjer koda Primjer ispis
color:red ili color:#FF0000

Ovo je crveno
color:yellow ili color:#FFFF00

Ispis žutom
color:#C0C0C0

Siv tekst

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

<!DOCTYPE html>
<html>
<head> <title>zuto</title>
<style>
  body { background-color:yellow; color:red; }
</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 plava a teksta siva.
Opis rješenja: Boja pozadine dokumenta bira se atributom <style> body {background-color:#0000FF;}. #0000FF je kod za plavu boju. Boja teksta se bira sa atributom body {color:#C0C0C0;. #C0C0C0 je kod za sivu boju. Vidi kodove u dodatku.

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

Siv tekst

Primjer 3. Boja pozadine dokumenta je crvena /RED/ a tekst je žut.
Opis rješenja: Boja pozadine dokumenta bira se atributom <style> body {background-color:#FF0000;}. red je engleski naziv za crvenu boju. Boja teksta se bira sa atributom body {color:#FFFF00;. yellow je engleski naziv za žutu boju.

<!DOCTYPE html>
<html>
<head> <title>plavo</title>
<style>
  body { background-color:#FF0000; color:#FFFF00; }
</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. Boja teksta se bira sa atributom <style> body {color:CYAN;}. CYAN je engleski naziv za cian boju.

<!DOCTYPE html>
<html>
<head> <title>plavo</title>
<style>
  body { background-color:brown; color:cyan; }
</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