CSS priručnik
CSS Tutorial
CSS Priručnici


   CSS Tutorial
   Uvod
1. Umetanje
2. Background...
3. Selectori
4. Margin...
5. Fonts
6. Text
7. Tablice
8. Popis
9. Positioning
10. Napredno
CSS Elementi


Kontaktirajte nas...

Naručite CD

CSS Tutorial

2. Background & Color

2.1 Background:

   Predefinirana boja pozadine kod većine browsera je bijela no vrlo lako ju možemo promijeniti. Pogledajte slijedeći primjer:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#00ff00; color:#ffffff }
</style>
 </head>
<body>
Sadržaj ide ovdje ...
</body>
</html>

Kod body { background:#00ff00 } pozadina će pozeleniti.
Takođe vrijedi: body { background:green }

2.2 Background-image:

   Također može se upotrijebiti slika za pozadinu.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background-image: url("image.gif") }
</style>
 </head>
<body>
Sadržaj ...
</body>
</html>


body { background-image: url("image.gif") } će koristiti "image.gif" za pozadinu. Naravno to može biti i neki drugi fajl s nekakvom drugačijom extenzijom npr. "image.jpg". Ukoliko slika nije na istom serveru gdje je i HTML dokument morate upotrijebiti apsolutni put do fajla npr.:
body { background-image: url("http://somewhere.com/image.gif") } .

2.3 Background-attachment:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background-image: url("image.gif"); background-attachment: fixed }
</style>
 </head>
<body>
Sadržaj ...
</body>
</html>

background-attachment: fixed pozadina će ostati "statična" dok sadržaj bude scroll-irao.
Ako stavite background-attachment: scroll pozadina i sadržaj će zajedno scroll-irati preko ekrana.

2.4 Background-repeat:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background-image: url("image.gif"); background-repeat: repeat-y }
</style>
 </head>
<body>
Sadržaj ...
</body>
</html>

background-repeat: repeat-y pozadina će se ponavljati vertikalno (širina i visina slike u samo jednom stupcu).

Ostale vrijednosti mogu biti:
background-repeat: repeat-x: horizontalno ponavljanje (samo jedan red)
background-repeat: repeat i horizontalno i vertikalno
background-repeat: no-repeat samo jedna slika će biti prikazana.


UOČITE :
U jedan style element može se staviti više atributa. Primjer:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background-image: url("image.gif"); background-repeat: repeat-y; background-attachment: fixed }
</style>
 </head>
<body>
Sadržaj ...
</body>
</html>

Također dopušteno je koristiti i slijedeće oblike. Primjer:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background-image: url("image.gif");
background-repeat: repeat-y;
background-attachment: fixed }
</style>
 </head>
<body>
Sadržaj ...
</body>
</html>

Ili skraćeni oblik:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background-image: url("image.gif"); repeat-y fixed }
</style>
 </head>
<body>
Sadržaj ...
</body>
</html>

2.5 Color

   I boja texta se može promijeniti.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffff00 }
</style>
 </head>
<body>
Sadržaj ...
</body>
</html>
body { background:#000000; color:#ffff00 } označava crnu pozadinu i žuti text. Boju možete promijeniti sa color:#ffff00 atributom. Dozvoljeno je i upotrijebiti background:black; color:yellow.

VEOMA VAŽNO : U svakom style elementu koji definira boju pozadine definirajte obavezno i boju texta. To vrijedi i obratno.Pa npr. background: i color: bi trebali uvijek ići zajedno. To je ujedno i preporuka W3C standarda.

  Color vrijednosti određene u body style elementu utjecat će na cio dokument, tj. cijeli text u HTML dokumentu koristiti će tu boju. Također možemo upotrijebiti različite boje u textu. Pretpostavimo npr. da želimo da naš header bude zelen, a italic text plav. To će izgledati ovako:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffff00 }
h1 { background:#000000; color:red }
em { background:#000000; color:blue }
</style>
 </head>
<body>
<h1>Zeleni header</h1>
Normalan text je crn <em>italic text je plav</em>
</body>
</html>

Ovo izgleda ovako:

Zeleni header

Normalan text je crn italic text je plav

2.6 Grupiranje

Grupiranje style elementa također je moguće. Pretpostavimo da želite sve header-e i italic text u istoj boji. To će izgledati ovako:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffff00 }
h1, h2, h3, h4, h5, h6, em { background:#000000; color:green }
</style>
 </head>
<body>
<h1>Header</h1>
<h2>Header</h2>
<h3>Header</h3>
<h4>Header</h4>
<h5>Header</h5>
<h6>Header</h6>
<em>italic text</em>
</body>
</html>

Ovo izgleda ovako:

Header


Header


Header


Header


Header

Header

italic text
Text Oglasi Foto Oglasi Besplatne Stvari Besplatan Web Hosting Web Direktorij Dizajn