abc HTML5 i CSS TUTORIAL

Boja teksta dokumenta /PAGE TEXT 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 { 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
background-color - Atribut za boju pozadine dokumenta
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/ >>. .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 teksta dokumenta je crvena /RED/.
Opis rješenja: Boja teksta dokumenta bira se stilom <style> body {color:red;}. red je engleski naziv za crvenu 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>Crven dokument</title>
<style>
  body { color:red; }
</style>
</head>
<body>
<h5>LUPUS IN FABULA.</h5>
<p>Mi o vuku vuk na vrata.</p>
</body></html>

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

Fajl: 10_BODY_text_red.css

body { color:red; }

LUPUS IN FABULA.

Mi o vuku vuk na vrata.

Primjer 2. Kod boje teksta dokumenta je #FFFF00.
Opis rješenja: Boja teksta dokumenta bira se stilom <style> body {color:#FFFF00;} .#FFFF00 je kod za žutu 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 { color:#FFFF00; }
</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_text_FFFF00.css" type="text/css">
</head>
<body>
<h5>LUPUS IN FABULA.</h5>
<p>Mi o vuku vuk na vrata.</p>
</body></html>

Fajl: 10_BODY_text_FFFF00.css

body { color:#FFFF00; }

LUPUS IN FABULA.

Mi o vuku vuk na vrata.

Daljnji rad:

  1. Boja teksta dokumenta je plava. Koristiti eksterni fajl 10_BODY_text_blue.css.
  2. Boja teksta dokumenta je braon. Koristiti eksterni fajl 10_BODY_text_brown.css.
  3. Za boju teksta dokumenta koristiti eksterni fajl 10_BODY_text_C0C0C0.css. Koja je to boja teksta 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