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

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


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

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

Oznake:
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


Slika 2. Boja teksta /TEXT COLOR/

Primjeri 1. Boja teksta u cijelom dokumentu ( <body style="color:NazivBojeIliKodBoje;"> )

R.br.

Sintaksa 

HTML5 kod

Ekran

1. Boja fonta crvena: RED

 <body style="color:red;"> <!DOCTYPE html>
<html>
<head>
<title>Tekst crven</title>
</head>
<body style="color:red;">
<p>Ko rano rani dvije sreće grabi</p>
<h5>Ko rano rani dvije sreće grabi</h5>
</body>
</html>

Ko rano rani dvije sreće grabi

Ko rano rani dvije sreće grabi

2. Boja fonta plava: BLUE

<body style="color:blue;"> <!DOCTYPE html>
<html>
<head>
<title>Tekst plav </title>
</head>
<body style="color:blue;">
<p>Prijatelj je najbolja imovina u životu.</p>
<h5>Prijatelj je najbolja imovina u životu.</h5>
</body>
</html>

Prijatelj je najbolja imovina u životu.

Prijatelj je najbolja imovina u životu.

3. Kod boje fonta crvena: #FF0000

 <body style="color:#FF0000;"> <!DOCTYPE html>
<html>
<head>
<title>Tekst crven</title>
</head>
<body style="color:#FF0000;">
<p>Ko rano rani dvije sreće grabi</p>
<h5>Ko rano rani dvije sreće grabi</h5>
</body>
</html>

Ko rano rani dvije sreće grabi

Ko rano rani dvije sreće grabi

Primjeri 2. Boja teksta u cijelom dokumentu ( <body style="color:NazivBojeIliKodBoje;"> ) i boja pozadine cijelog dokumentu ( <body style="background-color:NazivBojeIliKodBoje;"> )

R.br.

Sintaksa 

HTML5 kod

Ekran

2.1. Boja fonta žuta a pozadine crvena: YELLOW & RED

 <body style="background-color:red; color:yellow;"> <!DOCTYPE html>
<html>
<head>
<title>Pozadina crvena a tekst žut </title>
</head>
<body style="background-color:red; color:yellow;">
<p>Veliku sreću prati zavist.</p>
<h5>Veliku sreću prati zavist.</h5>
</body>
</html>

Veliku sreću prati zavist.

Veliku sreću prati zavist.

2.2. Boja fonta oranž a pozadine plava: ORANGE & BLUE

 <body style="background-color:orange; color:blue;"> <!DOCTYPE html>
<html>
<head>
<title>Pozadina oranž a tekst plav</title>
</head>
<body style="background-color:red; color:yellow;">
<p>Oboje je zlo: i svima vjerovati, i nikome.</p>
<h5>Oboje je zlo: i svima vjerovati, i nikome.</h5>
</body>
</html>

Oboje je zlo: i svima vjerovati, i nikome.

Oboje je zlo: i svima vjerovati, i nikome.

2.3. Boja fonta zelena a pozadine braon: Brown & Kod boje fonta zelena: #00FF00

 <body style="background-color:brown; color:#00FF00;"> <!DOCTYPE html>
<html>
<head>
<title>pozadina braon</title>
</head>
<body style="background-color:brown; color:#00FF00;">
<p>LUPUS IN FABULA.</p>
<h5>LUPUS IN FABULA.</h5>
</body>
</html>

LUPUS IN FABULA.

LUPUS IN FABULA.

2.4. Boja fonta oranž a pozadine plava: ORANGE & BLUE. Drugi red je braon.

<body style="background-color:orange; color:blue;"> <!DOCTYPE html>
<html>
<head>
<title>Pozadina oranž a tekst plav</title>
</head>
<body style="background-color:red; color:yellow;">
<p>Oboje je zlo: i svima vjerovati, i nikome.</p>
<p style="color:brawn;">Promjeni boju.</p>
<h5>Oboje je zlo: i svima vjerovati, i nikome.</h5>
</body>
</html>

Oboje je zlo: i svima vjerovati, i nikome.

Promjeni boju.

Oboje je zlo: i svima vjerovati, i nikome.

Daljnji rad:.
1. Boja teksta dokumenta je siva, tekst je crven "Istrajnost je odlika uspješnih."

2. Boja teksta dokumenta je #FF0000, tekst je #00FFFFI "strajnost je odlika uspješnih."

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