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

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

Oznake:
p paragraf /PARAGRAPH/ boja teksa
BODY - Boja pozadine 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 i boja pozadine paragrafa /PARAGRAPH BACKGROUND COLOR/

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

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

Tekst je crven
 

Primjer 2.2. Boja pozadine        BACKGROUND COLOR    (Kod pozadine paragrafa je plav, tekst je siv)
Opis rješenja:

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

Siv tekst
 

Primjer 2.3. Boja pozadine        BACKGROUND COLOR    (Boja paragrafa je crvena i tekst je žut)
Opis rješenja:

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

Kod za žutu boju

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

Primjer 3.1. Boja pozadine      BACKGROUND COLOR    (Boja dokumenta oranž (orange), teksta crvena a boja pozadine paragrafa je bijela)

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

Tekst je crven
 

Primjer 3.2. Boja pozadine        BACKGROUND COLOR    (Kod boje dokumenta plava i siv tekst a boja pozadine teksta crvena)
Opis rješenja:

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

Siv tekst
 

Primjer 3.3. Boja pozadine        BACKGROUND COLOR    (Kod boje dokumenta crvena, braon tekst i tirkizna podloga)
Opis rješenja:

<!DOCTYPE html>
<html>
<head>
<title>plavo</title>
</head>
<body style="background-color:#FF0000;">
<p style="color:#804000;background-color:#00FFFF;">Braon na tirkiznom</p>
</body>
</html>

Braon na tirkiznom

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