abc HTML5 i CSS TUTORIAL - Linijski CSS /INLINE CSS/

Boja teksta paragrafa /PARAGRAPH/ <p> i boja pozadine dokumenta /BACKGROUND COLOR/


Slika 1. Boja teksta /TEXT COLOR/ STYLE="color

Boja teksta paragrafa /PARAGRAPH/ Sintaksa: <p style="color:naziv_boje | kod_boje;">
Boja pozadine dokumenta /BACKGROUND COLOR/ Sintaksa: <BODY style="background-color:naziv_boje | kod_boje;">

Oznake:
p paragraf /PARAGRAPH/
BODY - Tekst u cijelom dokumentu
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


Slika 2. Boja teksta /TEXT COLOR/

Parametri teksta paragrafa /PARAGRAPH/.

Primjer koda Primjer ispis
<p style="color:red;">Ovo je crveno</p>

Ovo je crveno
<p style="color:yellow;">Ispis žutom</p>

Ispis žutom
<p style="color:#FF0000;">Kod boje teksta paragrafa</p>

Kod boje teksta paragrafa
<p style="color:#C0C0C0;">Siv tekst</p>

Siv tekst
<p style="color:#FFFF00">Kod za žutu boju</p>

Kod za žutu boju

Parametri teksta paragrafa /PARAGRAPH/ i boja dokumenta.

Primjer 2.1. Boja pozadine      BACKGROUND COLOR    (Boja dokumenta žuta a teksta crvena)

<!DOCTYPE html>
<html>
<head>
<title>zuto</title>
</head>
<body style="background-color:yellow;">
<p style="color:red;">Tekst je crven</p>
</body>
</html>

Tekst je crven
 

Primjer 2.2. Boja pozadine        BACKGROUND COLOR    (Kod boje dokumenta plava i siv tekst)
Opis rješenja:

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

Siv tekst
 

Primjer 2.3. Boja pozadine        BACKGROUND COLOR    (Kod boje dokumenta crvena i žut tekst)
Opis rješenja:

<!DOCTYPE html>
<html>
<head>
<title>plavo</title>
</head>
<body style="background-color:#FF0000;">
<p style="color:#FFFF00;">Kod za žutu boju</p>
</body>
</html>

Kod za žutu boju

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