Cascading Style Sheets (CSS) ili Kaskadni stilovi su postojali kao preporuka W3C još od 1996, ali tek u zadnjih godinu-dve je došlo do pravog proboja ovog jezika. Danas gotovo svi web-sajtovi na Internetu imaju u svom kodu i CSS. Da bi se razumeo CSS potrebno je poznavanje HTML-a.
Datoteke sa stilom se koriste za prikazivanje povezanih delova teksta povezanim načinom prezentacije. Ugradjuju se u zaglavlje (head) HTML dokumenta i onda se prepoznaju po tagu <style>...</style>. Druga mogućnost je unutar tela dokumenta (body) i tu se mogu koristiti gotovo unutar svih tagova (npr: <p style="color:red;font:bold 18">). I treća mogućnost je upotreba eksternih datoteka sa stilom: to je dokument sa jednostavnim tekstom u kome su navedena pravila i sačuvan je sa ekstenzijom .css. Pravila definisana u takvom dokumentu mogu se primeniti na sve HTML dokumente koji se linkuju s njim, tj. ako u zaglavlju HTML dokumenta postoji ovakav link: <link rel="stylesheet" href="xy.css" type="text/css>, gde je xy ime spoljašnjeg dokumenta.
Evo jednog jednostavnog HTML dokumenta kao primer:
<HTML><HEAD>
<TITLE>Moja stranica</TITLE>
</HEAD>
<BODY>
<H1>Ovo je naslov</H1>
<P>Ovo je tekst na stranici.
</BODY></HTML>
Da bi boja teksta elementa H1 bila plava, možete napisati sledeće CSS pravilo:
H1 {color: blue}
CSS se sastoji iz dva glavna dela: selektora ('H1') i deklaracije ('color: blue'). Deklaracija ima dva dela: svojstvo (engl. property) ('color') i vrednost (engl. value) ('blue').
HTML 4.0 specifikacija definiše kako CSS pravila mogu biti postavljena za HTML dokumente: ili unutar HTML dokumenta, ili preko eksterne CSS datoteke. Ako se stavlja unutar HTML dokumenta, onda se koristi element STYLE:<HTML><HEAD>
<TITLE>Moja stranica</TITLE>
<STYLE type="text/css">
H1 {color: blue}
</STYLE>
</HEAD>
<BODY>
<H1>Ovo je naslov stranice</H1>
<P>Ovo je tekst na stranici.
</BODY></HTML>
Za maksimalnu fleksibilnost se preporučuje da autori postave eksternu CSS datoteku; ova se može modifikovati bez intervencija u izvornom kodu HTML dokumenta i takvu jednu datoteku mogu da ih dele više HTML dokumenata. Za povezivanje spoljne CSS datoteke sa HTML dokumentom se koristi element LINK:
<HTML><HEAD>
<TITLE>Moja stranica</TITLE>
<LINK rel="stylesheet" href="moj.css" type="text/css">
</HEAD>
<BODY>
<H1>Ovo je naslov stranice</H1>
<P>Ovo je tekst na stranici.
</BODY></HTML>
Da dodamo našem primeru još malo boje:
<HTML><HEAD>
<TITLE>Moja stranica</TITLE>
<STYLE type="text/css">
BODY {color: black}
H1 {color: blue}
</STYLE>
</HEAD>
<BODY>
<H1>Ovo je naslov stranice</H1>
<P>Ovo je tekst na stranici.
</BODY></HTML>
Kaskadni stil sada sadrži sada dva pravila: prvo postavlja boju teksta za element BODY na 'black' (crno), dok drugo pravilo postavlja boju za H1 element na 'blue' (plavo). Pošto nije postavljena boja za P element, taj element će naslediti boju od roditeljskog elementa, tj. BODY. Element BODY je roditelj i elementu H1, ali drugo pravilo prevazilazi nasleđeno pravilo.
CSS2 ima više od 100 različitih svojstava, uključujući 'color'. Evo još nekih:
<HTML><HEAD>
<TITLE>Moja stranica</TITLE>
<STYLE type="text/css">
BODY {font-family: "Verdana", sans-serif;
font-size: 14pt}
</STYLE>
</HEAD>
<BODY>
<H1>Ovo je naslov stranice</H1>
<P>Ovo je tekst na stranici.
</BODY></HTML>
Prvo što treba zapaziti jeste da je nekoliko deklaracija grupisano u blok unutar {...} zagrada, razdvojenih tačkom i zarezom (;).
Prva deklaracija postavlja postavlja za element BODY font family na "Verdana". Ako nema tog fonta, browser će koristiti 'sans-serif' font family koji je jedan od pet generičkih font familija koji poznaju svi browsersi. "Deca" elementi će naslediti vrednost svojstva 'font-family' elementa roditelja, tj. BODY.
Druga deklaracija postavlja veličinu fonta (font size) za BODY element na 14.
• Class i ID
Selektor atributa Class se može pojaviti više puta unutar dokumenta i njemu prethodi pri definisanju tačka (.).
Primer:
<style>
P {font-family: sans-serif; font-size: 12pt}
H2 {font-family: serif; font-size: 24pt}
.red {color: red}
.green {color: green}
.blue {color: blue}
</style>
Selektor atributa ID ima identičnu funkcionalnost kao i class, s tim da se on može pojaviti samo jednom u dokumentu. Za njegovo označavanje se koristi znak #. Primer:
#dab {color: red;font: bold 20}
I kad stavite u BODY : <h2 id="dab">Tekst u dab stilu.</h2>
Kada se to primeni na stranici to izgleda ovako: Tekst u dab stilu.
• Atributi na nivou teksta: <SPAN> i <DIV>
<span> tag se uglavnom koristi da bi se neki stil primenio na neki kraći deo teksta, tj. za rad u liniji:
<p><span class="red">Ovaj tekst bi bio u 'red' stilu </span> a ovaj ne bi.
<div> tag se generalno koristi da bi se neki stil primenio na nivou bloka, što može uključivati i druge HTML elemente:
<div class="green">
<p>Stil "green" bi bio primenjen na ovaj tekst, ali i <a href="strana.html">na ovaj tekst</a> takođe.
</div>
Atribut style daje mogućnost da se definiše stil unutar samog elementa. Primer za paragraph:
<p style="font-size:10pt;color:red">Ovaj tekst ...</p> To bi izgledalo onda ovako:
Ovaj tekst je crven, veličine 10
Atributi class, ID, i style mogu biti primenjeni unutar <span> i <div> elemenata. U kombinaciji sa class ili ID, <span> i <div> tagovi dozvoljavaju da maltene napravite sopstvene HTML tagove.
|