Šta je CSS

Izrada sajtova » Šta je CSS

Članak napisan 21.07.2012. Broj komentara 0 komentar/a Broj pregleda 11356 pregleda

CSS (Cascading Style Sheets ), a služi za definisanje stilova koji određuju izgled html elemenata (font, boje, pozadine, razmake...). Stilovi su definisani u formatu:

sektor {
    atribut1: vrednost1;
    atribut2: vrednost2;
    atribut3: vrednost3;
    …
}

SEKTORI

Sektori mogu da se podele u tri grupe:

HTML selektori (osnovni),
ID selektori,
Class selektori,

HTML sektori su osnovni sektori i predstavljaju nazive tagova koji se koriste u html/php dokumentu i na koje će biti primenjen. Primer:

body {
    color: #333333;
    margin: 0 auto;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
h1 {
    color: #0000ff;
}

ID sektori nose prefiks # (tarabu). Koriste se ako je potrebno primeniti odrđeni stil na jedinstveni element u html/php dokumentu koji je obeležen određenim ID atributom. Primer:

#zaglavlje {
color: #009900;
}

a u samoj stranici (kodu stranice) biće prikazano kao:

<p id=”zaglavlje”>Naziv firme</p>

CLASS sektori nose prefiks . (tačku). Koriste se ako je potrebno primeniti odrđeni stil na element u html/php dokumentu koji je obeležen određenim CLASS atributom. Primer:

.polozaj {
text-align: right;
}

a u samoj stranici (kodu stranice) biće prikazano kao:

<p class=”polozaj”>Potpis direktora</p>

KORIŠĆENJE

CSS stilovi se mogu nalaziti u zasebnom (eksternom, External) fajlu sa ekstenzijom .css, ili se mogu nalaziti na samoj html/php stranici (interni). Interni stilovi mogu biti definisani u zaglavlju stranice (u okviru head taga, Embeded), ili biti u samom html elementu (Inline).

Inline CSS - Najjednostavniji i najmanje preporučljiv način za upotrebu CSS. Koristi se ako je potrebno na licu mesta (u samom HTML-u) izmeniti neki već postojeći CSS stil ili zadati određeni izgled bez kreiranja stila. Nije fleksibilan, jer kod eventualnog menjanja stila, potrebno je više vremena da se pronađe i zameni. Ukoliko na sajtu postoji vše stranica sa istim podešavanjem, utom vše posla. Primer:

<p style=”color: #FF0000; text-align: center; ”>Ovo je neki pasus</p>

Embeded CSS - CSS definisan u zaglavlju stranice je bolji način od prethodnog, ali i dalje može da predstavlja problem pri eventualnoj izmeni. U tom slučaju dizajner bi morao svaku stranicu “ručno” da proveri i izmeni stil i samim tim troši vše vremena. Ovaj način koristimo ako su nam potrebni stilovi za koje smo sigurni da ćemo ih koristiti samo na toj stranici. Primer:

<head>
<style type='text/css'>
body,td,th {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333333;
}
a:link {
    color: #006600;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
</style>
</head>

External CSS – Definisanje zasebnog CSS fajla je najpreporučljiviji način, jer pri eventualnoj izmeni sadržaja CSS fajla, stil će se automatski menjati i za sve stranice. Stranicu možete da povežete sa .css dokumentom, tako što head tagu unesete sledeći kod:

gde je stil.css eksterni css fajl.

Nastavak uskoro...