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

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


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

Boja teksta zaglavlja teksta /HEADINGS COLOR/ <h1> ... <h6> / Sintaksa: <h1 | h2 | h3 | h4 | h5 | h6 style="color:naziv_boje | kod_boje;">
Boja pozadine zaglavlja teksta /HEADINGS BACKGROUND COLOR/ <h1> ... <h6> / Sintaksa: <h1 | h2 | h3 | h4 | h5 | h6 style="color:naziv_boje | kod_boje;">
Boja pozadine dokumenta /BACKGROUND COLOR/ Sintaksa: <BODY style="background-color:naziv_boje | kod_boje;">

Oznake:
h1 | h2 | h3 | h4 | h5 | h6 - izaberi jedanu od navedenih oznaka (jedan od zaglavlja teksta)
BODY - Boja pozadine dokumenta
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. 

Opis Zaglavlje teksta /HEADING/ <h1> ... <h6>


Slika 2. Boja teksta /TEXT COLOR/

Parametri boje pozadine zaglavlja teksta /HEADINGS BACKGROUND COLOR/ <h1> ... <h6>

Opis Primjer kod Primjer ispis

zaglavlje1 [H1]

 <h1 style="color:red;">znanje1 [H1]</h1>

znanje1 [H1]

zaglavlje2 [H2]

 <h2 style="color:blue;">znanje2 [H2]</h2>

znanje1 [H2]

zaglavlje3 [H3]

<h3 style="color:yellow;">znanje3 [H3]</h3>

znanje3 [H3]

zaglavlje4 [H4]

<h4 style="color:#FFFF00;">Žuta [H4]</h4>

znanje4 [H4]

zaglavlje5 [H5]

<h5 style="color:#804000;">Braon - H5</h5>

Braon [H5]

zaglavlje6 [H6]

<h6 style="color:#FF0000">CRVENA - H6</h6>

znanje6 [H6]

Boja teksta i boje pozadine zaglavlja teksta /HEADINGS COLOR/

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

<!DOCTYPE html>
<html>
<head>
<title>zuto</title>
</head>
<body>
<h5 style="color:red; background-color:yellow;">Tekst je crven</h5>
</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>
<h4 style="color:#C0C0C0; background-color:#0000FF;">Siv tekst</h4>
</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>Žuto na crvenom</title>
</head>
<body>
<h1 style="color:#FFFF00; background-color:#FF0000;">Kod za žutu boju</h1>
</body>
</html>

Kod za žutu boju

Boja teksta i pozadine zaglavlja teksta /HEADINGS COLOR/ i boja dokumenta

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

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

Primjer 3.2. Boja pozadine        BACKGROUND COLOR    (Kod boje dokumenta plava i bijel tekst na braon podlozi):
Opis rješenja:

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

Siv tekst
 

Primjer 3.3. Boja pozadine        BACKGROUND COLOR    (Boja dokumenta crvena i žut tekst na šumskoj zelenoj).
Opis rješenja:

<!DOCTYPE html>
<html>
<head>
<title>Žut na crvenom </title>
</head>
<body style="background-color:#FF0000;">
<h1 style="color:#FFFF00; background-color:#808000">Kod za žutu boju</h1>
</body>
</html>

Kod za žutu boju

Daljnji rad:
1. Izvesti sljedeće primjere.

<h1>znanje1 [H1]</h1> (Boja zaglavlja teksta SIVA)
<h2>znanje1 [H2]</h2> (Boja zaglavlja teksta CRVENA)
<h3>znanje1 [H3]</h3> (Boja zaglavlja teksta ZELENA)
<h4>znanje1 [H4]</h4> (Boja zaglavlja teksta LJUBIČASTA)
<h5>znanje1 [H5]</h5> (Boja zaglavlja teksta SIVA)
<h6>znanje1 [H6]</h6> (Boja zaglavlja teksta BIJELA)

2. Boja prvog reda crvena a drugog plava:
<h3>Nikola Tesla [H3]</h3>
<h5>Ivo Andrić [H5]</h5>

3. Ispisati vlastiti tekst da se vidi promjena na tekstu i boji.
<h2>Otkucaj svoje ime u ovom prosturu</h2>

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