CSS – Korišćenje kaskadnih stilova

  –  

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 na www.krstarica.com