abc HTML5 i CSS TUTORIAL

Boja pozadine dokumenta /PAGE BACKGROUND COLOR/ .css


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

Boja pozadine dokumenta /PAGE BACKGROUND 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; }
  • 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 - TAG za boju pozadine dokumenta
background-color - Atribut za boju pozadine dokumenta
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

Putanja - za primjere iz abc tutorijala to je css
ImeCssFajla - ime zavisi od stila koji se koristi. Osim stilova na ovom stranici pogledajte: Spisak .css fajlova /CSS FILES LIST/
Atribut u CSS fajlu definiše se istom sintaksom kao i interni CSS /INTERNAL CSS/.


Slika 2. Boja pozadine dokumenta /PAGE BACKGROUND COLOR/ 

Prethodne lekcije Boja pozadine dokumenta /PAGE 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 {
background-color:red;
}

yellow

Boja pozadine dokumenta je žuta /YELLOW/

body {
background-color:yellow;
}

#FF0000

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

body {
background-color:#FF0000;
}

#FFFF00

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

body {
background-color:#FFFF00;
}

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

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 { background-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_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_red.css

body {
background-color:red;
}

LUPUS IN FABULA.

Mi o vuku vuk na vrata.

Primjer 2. Kod boje pozadine dokumenta je #FFFF00.
Opis rješenja: Boja pozadine dokumenta bira se atributom <style> body {background-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 { background-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_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_FFFF00.css

body {
background-color:#FFFF00;
}

LUPUS IN FABULA.

Mi o vuku vuk na vrata.

Daljnji rad:

  1. Boja pozadine dokumenta je plava. Koristiti eksterni fajl 10_BODY_blue.css.
  2. Boja pozadine dokumenta je braon. Koristiti eksterni fajl 10_BODY_brown.css.
  3. Za boju pozadine dokumenta koristiti eksterni fajl 10_BODY_C0C0C0.css. Koja je to boja dokumneta?

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