CSS – Korišćenje kaskadnih stilova

Krstarica 21. novembar 2000. 00:00

Style sheets(kaskadni stilovi) su veoma snažan alat svakog web dizajnera. Oni vam omogućavaju da vaše stranice budu potpuno konzistentne, daju vam mnogo više kontrole u vezi uređenja stranica. Kreirani su 1997, Cascading Style Sheets (CSS) se sada mnogo koriste i podržani su od većine browser-a (od verzije 4.0) i od većine dizajnera. Ukoliko ste vični MS Word-u, stilovi imaju sličan način korišćenja i primenu.

Informacije o stilovima se smeštaju na tri moguća mesta: u <HEAD> tag, u spoljni fajl i ubačeni stil u tagovima. Za sada ćemo govoriti samo o prvom slučaju. Pravila:

Informacije o stilu moraju biti ugnježdene u tag <STYLE> </STYLE>. Na ovaj način web čitači prepoznaju da je reč o informacijama za stilove.
Sam tag obavezno uključuje atribut TYPE koji indicira koji tip stilova koristite (najčešće je to CSS, ali može biti i XSL, JSS…).
Smestite sve stil tagove u komentar tagove. Ovo zbog starijih browser-a koji ne podržavaju CSS.

Jedan stil je određen sa dve stvari: selektorem i deklaracijom.

Selektor – selektor određuje na koji HTML tag se zadati stil odnosi
Deklaracija – osobine stila koje će se primeniti na izabrani tip selektora

Evo i kompletne sintakse:

      selektor {osobina : vrednost ;}

Na primer ukoliko želite da sav bold tekst bude crvene boje, napisaćete u deklaraciji:

      b {color: red;}

Jedna od prednosti koja CSS čini jednostavniom za korišćenje, je i ta da možete grupisati komponente kojima želite da dodelite isti stil. Na primer, ako želite da naslovi H1, H2 i bold-ovan tekst budu crveni pisali biste:



b {color: red;}

h1 {color: red;}

h2 {color: red;}

Ali njihovim grupisanjem, sve njih možete postaviti u istu liniju:

      b, h1, h2 {color: red;}

Analogno ovome, i više definicija stilova možete grupisati (odvojite ih tačka-zarezom). Na primer, svi naslovi H3 želimo da budu plave boje i Arial fonta:

h3 {

  font-family: Arial;

  color: blue;

}

Kao što vidite različite deklaracije stila se pišu u zasebnim linijama, ovo je konvencija koja nije obavezna (radi se o plain-text-u).

Osobina stila font ima sledeće stilove:

font-family – specifikacija fonta, moguće je navesti više fontova odjednom
font-size – specifikacija veličine fonta, može biti izražena relativno (npr. +1), apsolutno (npr.4 – u pikselima ili pointima) ili procentualno
font-style – način prikaza teksta: italic, oblique ili normal
font-variant – specifikacija prikaza u malim slovima (small caps) ili normal
font-weight – podešavanje koliko će tekst biti taman ili svetao.

I na kraju još jedan vrlo korišćen stil je text-decoration, uz pomoć koga možete npr. ukloniti podvlačenje linkova, postaviti liniju preko teksta itd. Primer, uklanjanje podvučenih linija ispod linkova:

        a { text-decoration: none;}

Pratite Krstaricu i preko mobilne aplikacije za Android i iPhone.

programiranje