abc HTML5 i CSS TUTORIAL

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


Sllika 1. Izbor vrijednosti atributa - Eksterni CSS /EXTERNAL CSS/

Boja teksta dokumenta /PAGE TEXT COLOR/ Korištenje eksternog CSS-a se izvodi u oba dijela HTML fajla i posebna CSS fajl:

  • CSS fajl: body { background-color: naziv_boje | #kod_boje; color: naziv_boje | #kod_boje;}
  • HTML FAJL - HEAD dio: <link rel="stylesheet" type="text/css" href="Putanja/ImeCssFajla.css">
  • HTML FAJL - BODY dio: <body>Sadržaj_za_izabrani_tag</body>

Oznake:
BODY - Tekst u cijelom dokumentu

color - Atribut za boju 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
Atribut se definiše u CSS fajlu istom sintaksom kao i interni CSS /INTERNAL CSS/..
Svaka stranica mora imati link (u HEAD dijelu) na .css fajl sa stilom /STYLE SHEET/ koristeći <link> TAG ( <link rel="stylesheet" type="text/css" href="Putanja/ImeCssFajla.css">).


Slika 2. Boja teksta /TEXT COLOR/

Prethodne lekcije Boja teksta dokumenta /PAGE TEXT COLOR/ >> i boja pozadine dokumenta /BACKGROUND COLOR/ >>. .Popis kodova i naziva boja je u dodatku. 

Vrijednost

Opis

Primjer

 

DEFAULT. Boja pozadine dokumenta je bijela

red

Boja pozadine dokumenta je crvena /RED/.

body {
color:red;
}

yellow

Boja pozadine dokumenta je žuta /YELLOW/

body {
color:yellow;
}

#FF0000

Boja pozadine dokumenta je crvena /RED/. Kod #FF0000 je crvena boja.

body {
color:#FF0000;
}

#FFFF00

Boja pozadine dokumenta je žuta /YELLOW/. Kod #FFFF00 je žuta boja.

body {
color:#FFFF00;
}

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

Interni CSS (CSS u HTML fajlu)

html5 fajl

.css (Eksterni CSS fajl)

Ispis na ekranu

<!DOCTYPE html>
<html>
<head> <title>Crven i žut</title>
<style>
  body { background-color:red; color:yellow; }
</style>
</head>
<body>
<h5>LUPUS IN FABULA.</h5>
<p>Mi o vuku vuk na vrata.</p>
</body></html>

<!DOCTYPE html>
<html>
<head><title>Crven i žut</title>
<link rel=stylesheet href="css/10_BODY_red_yellow.css" type="text/css">
</head>
<body>
<h5>LUPUS IN FABULA.</h5>
<p>Mi o vuku vuk na vrata.</p>
</body></html>

Fajl: 10_BODY_red_yellow.css

body {
background-color:red;
color:yellow;
}

LUPUS IN FABULA.

Mi o vuku vuk na vrata.

Primjer 2. 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.

Interni CSS (CSS u HTML fajlu)

html5 fajl

.css (Eksterni CSS fajl)

Ispis na ekranu

<!DOCTYPE html>
<html>
<head> <title>Braon i cijan</title>
<style>
  body {background-color:brown; color:cyan; }
</style>
</head>
<body>
<h5>LUPUS IN FABULA.</h5>
<p>Mi o vuku vuk na vrata.</p>
</body></html>

<!DOCTYPE html>
<html>
<head><title>Braon i cijan</title>
<link rel=stylesheet href="css/10_BODY_brown_cyan.css" type="text/css">
</head>
<body>
<h5>LUPUS IN FABULA.</h5>
<p>Mi o vuku vuk na vrata.</p>
</body></html>

Fajl: 10_BODY_brown_cyan.css

body {
background-color:brown;
color:cyan;
}

LUPUS IN FABULA.

Mi o vuku vuk na vrata.

Primjer 3. Kod boje pozadine dokumenta je oranž /ORANGE/ a boja teksta #0000FF.
Opis rješenja: Boja pozadine dokumenta bira se atributom <style> body {background-color:ORANGE;}. ORANGE je engleski naziv za oranž boju. Boja teksta se bira sa atributom color:#0000FF;. #0000FF je kod za plavu boju. Vidi kodove u dodatku.

Interni CSS (CSS u HTML fajlu)

html5 fajl

.css (Eksterni CSS fajl)

Ispis na ekranu

<!DOCTYPE html>
<html>
<head> <title>Pozadina žuta</title>
<style>
  body { background-color:orange; color:#0000FF; }
</style>
</head>
<body>
<h5>LUPUS IN FABULA.</h5>
<p>Mi o vuku vuk na vrata.</p>
</body></html>

<!DOCTYPE html>
<html>
<head><title>Pozadina žuta</title>
<link rel=stylesheet href="css/10_BODY_orange_0000FF.css" type="text/css">
</head>
<body>
<h5>LUPUS IN FABULA.</h5>
<p>Mi o vuku vuk na vrata.</p>
</body></html>

Fajl: 10_BODY_orange_0000FF.css

body {
background-color: orange;
color:#0000FF;
}

LUPUS IN FABULA.

Mi o vuku vuk na vrata.

Daljnji rad:

  1. Boja pozadine dokumenta je plava, a teksta žuta. Koristiti eksterni fajl 10_BODY_0000FF_FFFF00.css.
  2. Boja pozadine dokumenta je braon a teksta žuta.. Koristiti eksterni fajl 10_BODY_brown_yellow.css.
  3. Za boju pozadine i teksta dokumenta koristiti eksterni fajl 10_BODY_808080_800080.css. Koja je to boja teksta a koja boja pozadine dokumenta?

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