Subscribe

CSS serijal

CSS – Cascading Style Sheets

CssTumb

CSS je jezik koji se koristi za opis izgleda i formata dokumetna pisanog u markup jeziku. Najčešće se koristi za web stranice pisane u HTML ili XHTML-u1.

U ovom serijalu i tekstovima koji će uslediti obradićemo sledeće teme:

Zašto CSS?

Imamo jedan jednostavan primer stilizovanja stranice na sledeći način:

U ovom primeru smo koristili stilove za podešavanje boje pozadine i veličine fonta. Ako bismo ovakav način stilizovanja koristili svuda na stranicama, svaka izmena stilova bi bila vremenski zahtevna.

Takođe ukoliko bismo želeli da zadržimo konzistentnost na svim web stranicama, morali bismo svaki put da kucamo kôd za podešavanje stila a u slučaju da redizajniramo sajt, morali bismo izvršiti izmene u svim HTML fajlovima.

Ukratko, CSS nam omogućava da prezentacione detalje našeg sajta izdvojimo od sadržaja i na taj način skratimo vreme potrebno za izmenu.

Primer izdvojenog CSS-a u okviru istog HTML-a:

Iako definisanje stila jeste dozvoljeno u okviru HTML dobra praksa je kreiranje posebnog fajla sa ekstenzijom .css koji će sadržati naše stilove.

U tu namenu kreiraćemo fajl stylesheet.css u okviru istog direktorijuma (mada ne mora biti) gde i naša stranica.
Ovaj fajl ćemo uključiti u html na sledeći način:

Saržaj stylesheet.css fajla je:

Pravila

Definisanje pravila  smo već imali u prethodnom kodu i u nastavku ćemo dati opis elemenata koja si koriste za kreiranje pravila.

body – predstavlja selektor (označava jedan ili više elemenata na koje će pravilo biti primenjeno)

background-color – naziv svojstva

#EF7070 – vrednost svojstva

Svako pravilo mоže imati više redova svojstvo: vrednost kao npr.

Selektori

Selektor predstavlja instrukciju u CSS pravilu kojim se definiše browser-u koje elemente da uključi prilikom primene pravila.

Id selektori su najčešće u praksi, mada ne omogućavaju ponovno iskorišćavanje, jednom definisanog pravila.
Primer id selektora:

Class selektor

Gore smo dali primer class selektora, što znači da će na grupu elemenata (jednog ili više) koji imaju definisanu klasu .error  biti primenjeno pravilo definisano u toj klasi.

Ostali selektori

U ostale selektora ubrajamo sledeće:

  • Descendant selector
  • Child selector
  • Attribute selector
  • Pseudo class

Descendant selector

Ovaj selektor će primeniti pravilo na sve elemente koji se nalaze u okviru div elementa, bez obzira u kojoj dubini se nalazi.

Child selector

Ovaj selektor će naći sve elemente koji se nalaze direktno ispod elementa na koga se operator > odnosi.

Attribute selector

Pseudo class

Pored visited psuedo klase ima mnogo više dostupnih klasa o kojima možete više saznati na css-tricks.

Korisni linkovi

3 Comments

Leave a Reply