Izrada sajtova » Šta je CSS

Šta je CSS

Članak napisan 21.07.2012.    Broj komentara 0 komentar/a     Broj pregleda 11633 pregleda Štampaj članak

Pošaljite svom prijatelju link

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:

<head>
<link rel='stylesheet' type='text/css' href='putanja-do-css-a/stil.css' />
</head>

gde je stil.css eksterni css fajl.

Nastavak uskoro...


Podelite sa prijateljima


Facebook Twitter Delicious Digg FriendFeed Google Bookmarks MySpace Reddit Sphere StumbleUpon Technorati Favorites Tumblr

POŠALJITE KOMENTAR

Ime:*
E-mail:*
Komentar:*
Anti-spam:* Anti-spam