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

3. Selector (Selektor)

3.1 Class selector:

   Class selector se dosta primjenjuje u CSS-u. Pretpostavite da koristite nekoliko <h1> tagova u našem HTML dokumentu, ali im želimo pridružiti različite boje.
Ako upotrijebimo ovaj oblik:
h1 { color:yellow; background:#000000 } svi <h1> tagovi će biti žuti. No što ako želimo imati i žutu, plavu i crvenu? Upotrijebit ćemo "class". Pogledajte naredni 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:#000000; color:#ffffff }
.yellow { color:yellow; background:#000000 }
.blue { color:blue; background:#000000 }
.red { color:red; background:#000000 }
</style>
 </head>
<body>
<h1 class="yellow">Header</h1>
<h1 class="blue">Header</h1>
<h1 class="red">Header</h1>
</body>
</html>

Rezultat je:

Header

Header

Header




NAPOMENA 1:
Kad se definira class ispred mora biti točka (.). Naziv class-a može biti bilo kakav. Taj naziv će se kasnije upotrijebiti u HTML tagu i mora biti isti kao u Style Sheet-u! Dakle, ako definirate class:
.yellow { text-color:yellow; background:#000000 } onda morate upotrijebiti: <h1 class="yellow">


NAPOMENA 2:
Jednom kada definirate class možete ga upotrijebiti u različitim tagovima. 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:#000000; color:#ffffff }
.yellow { color:yellow; background:#000000 }
</style>
 </head>
<body>
<h1 class="yellow">Header</h1>
<em class="yellow">neki text</em>
<p class="yellow">pisanje na zid (ne pišanje)...</p>
</body>
</html>

Rezultat je:

Header

neki text

pisanje na zid (ne pišanje)...



NAPOMENA 3:
Class se može primjeniti i samo na jedan html element. 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:#000000; color:#ffffff }
h1.yellow { color:yellow; background:#000000 }
</style>
 </head>
<body>
<h1>Ovaj header nije žut</h1>
<h1 class= "yellow">Ovaj header jest žut</h1>
</body>
</html>

Ovo daje:

Ovaj header nije žut

Ovaj header jest žut



3.2 ID selector

   Vrlo je sličan class selectoru. Jedina razlika je da ID mora ispred imati # u style sheet-u dok HTML tag mora sadržavati "ID". 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:#000000; color:#ffffff }
#yellow { color:yellow; background:#000000 }
#blue { color:blue; background:#000000 }
#red { color:red; background:#000000 }
</style>
 </head>
<body>
<h1 id="yellow">Header</h1>
<h1 id="blue">Header</h1>
<h1 id="red">Header</h1>
</body>
</html>

Rezultat je:

Header

Header

Header



NAPOMENA:
Kad definirate ID ispred mora biti znak #. Naziv može biti bilo kakav. Naziv koji upotrijebite za ID i koji dadate u HTML tag mora biti isti kao u Style Sheet-u! Primjer:
#yellow { text-color:yellow; background:#000000 }
pa morate napisati
<h1 ID="yellow">.

   Napomene 2 i 3 za class selector vrijede i kod ID selektora!


3.3 Pseudo Class selector: A:link A:visited A:hover A:active

   Ove pseudo class-ove koriste se za linkove (HTML tag: <a>). One određuju kako će linkovi u dokumentu izgledati. 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:#000000; color:#ffff00 }
A:link { color: red; background:#000000 }
A:visited { color: blue; background:#000000 }
A:hover { color: green; background:#000000 }
A:active { color: lime; background:#000000 }
</style>
 </head>
<body>
Posjetite nas <a href= "http://myaddress.com">click</a>
</body>
</html>


A:link { color: red; background:#000000 } link će biti crven.
A:visited { color: blue; background:#000000 } posjećeni link će biti plav.
A:hover { color: green; background:#000000 } link će postati crven kad stavimo miša na njega.
A:active { color: lime; background:#000000 } link postaje lime boje kad kliknemo na nj.
NAPOMENA 1:
Morate upotrijebiti pseudo class-ove po takvom redosljedu.

NAPOMENA 2:
Također može se upotrijebiti i ovakav oblik:
A:link { color: red; background:#000000 } ili
:link { color: red; background:#000000 }
A:visited { color: blue; background:#000000 } ili
:visited { color: blue; background:#000000 }
A:hover { color: green; background:#000000 } ili
:hover { color: green; background:#000000 }
A:active { color: lime; background:#000000 } ili
:active { color: lime; background:#000000 }


NAPOMENA 3:
Ove pseudo class-e mogu se upotrijebiti zajedno s class-ovima. Npr. želite zelene i plave linkove na stranici. 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:#000000; color:#ffff00 }
A.green:link { color: green; background:#000000 }
A.green:visited { color: red; background:#000000 }
A.green:hover { color: white; background:#000000 }
A.green:active { color: lime; background:#000000 }
A.blue:link { color: blue; background:#000000 }
A.blue:visited { color: red; background:#000000 }
A.blue:hover { color: lime; background:#000000 }
A.blue:active { color: white; background:#000000 }
</style>
 </head>
<body>
Posjetite nas <a class="green" href="http://www.yahoo.com">click 1</a> <br>
Posjetite nas opet <a class="blue" href= "http://www.google.com">click 2</a>
</body>
</html>

Rezultat je:

Posjetite nas click 1

Posjetite nas opet click 2
Text Oglasi Foto Oglasi Besplatne Stvari Besplatan Web Hosting Web Direktorij Dizajn