Što je to CSS?
- CSS je skraćenica za Cascading Style Sheets
- CSS-om se definira kako će se HTML elementi prikazati na web stranici
- CSS je dodan HTML-u 4.0 kako bi se riješio problem dizajna
- CSS se koristi interno (unutar style tagova) ili eksterno (CSS datoteka)
CSS vam može uštedjeti puno vremena!
Kao što sam već napomenuo, CSS-om definiramo kako će se HTML elementi prikazati na web stranici (krajnjem korisniku). Stil (CSS) se obično sprema u eksterne CSS datoteke (tipično, datoteke sa .css kao ekstenzijom). Eksterne CSS datoteke omogućuju vam da promijenite izgled svih web stranica (koje koriste istu CSS datoteku), uređujući samo jednu datoteku.
CSS Sintaksa
CSS se sastoji od dva glavna dijela - CSS selektora, te deklaracija. Svaka se deklaracija sastoji od svojstva, te vrijednosti svojstva. Svojstvo je stilski atribut koji želite promjeniti. Svako svojstvo mora sadržavati vrijednost.
Svaka deklaracija završava sa točkom-zarezom. Preporučljivo je da svaku deklaraciju stavljate u zaseban redak, kako bi vaš CSS bio pregledniji. Primjer:
selektor
{
svojstvo1:vrijednost;
svojstvo2:vrijednost;
svojstvo3:vrijednost;
}
CSS Komentari
Kao i u većini programskih jezika ili metoda i CSS podržava komentare. Uglavnom se komentari koriste za objašnjavanje köda, kako bi se kasnije lakše snašli. Važna napomena je da web preglednici ne interpretiraju komentare. CSS komentar počinje sa "/*" (bez navodnika), te završava sa "*/". Primjer
#izbornik
{
margin-top:20px; /* Pomiče izbornik 20 piksela od vrha */
}
CSS ID i Klasa
CSS vam omogućuje da odredite svoje selektore - ID, te klasu (ID, class). ID selektor se koristi za specificiranje stila za jedan, unikatan element. ID selektor koristi HTML-ov id atribut, te je definiran sa "#" (bez navodnika). Primjer ispod će biti primijenjen na HTML elementu čiji je id atribut postavljen na "dijalog".
#dijalog
{
color:#DD0000; /* Postavlja boju teksta na tamno crvenu */
padding-left:15px; /* Pomiče sadržaj unutar elementa za 15 piksela u lijevu stranu */
}
Selektor klase (class selector) se koristi za specificiranje stila za grupu elemenata. Suprotno od ID selektora, class selektor se često koristi na nekoliko elemenata. Ova metoda vam omogućuje definiranje stila grupi elemenata sa istim class atributom. Class selektor koristi HTML-ov class atribut, te je definiran sa "." (bez navodnika). Primjer ispod će biti primijenjen na grupu HTML elemenata kojima je class atribut postavljen na "centriraj".
.centriraj
{
text-align:center; /* Poređuje tekst iz sredine u lijevu i desnu stranu */
}
Također možete specificirati da se klasa odnosi na samo određene HTML elemente. Primjer ispod će biti primijenjen samo na p (paragraf) elemente kojima je class atribut definiran kao "centriraj".
p.centriraj
{
text-align:center; /* Poređuje tekst iz sredine u lijevu i desnu stranu */
}
Tri načina za umetanje CSS-a
Postoje tri načina za umetanje CSS-a, a to su:
- Eksterna CSS datoteka
- Interni CSS
- Postaviti CSS u istu liniju kao i HTML element
Eksterna CSS datoteka
Eksterna CSS datoteka je odličan način za primjenu stila na više različitih web stranica. Sa eksternom CSS datotekom, možete promijeniti izgled web stranice, uređujući samo jednu datoteku. Svaka web stranica mora ostvariti "vezu" do eksterne CSS datoteke, koristeći <link> tag unutar <head> tag-a. Primjer:
<head>
<link rel="stylesheet" type="text/css" href="moj_stil.css" />
</head>
Eksterna CSS datoteka se može pisati/uređivati u bilo kojem tekstualnom ureditelju (text-editor). Datoteka ne bi smjela koristiti nikakve HTML tagove, te bi trebala biti spremljena sa .css ekstenzijom. Primjer CSS datoteke:
hr { color: sienna; }
p { margin-left:20px; }
body { background-color:#44444AA; }
Interni CSS
Interni CSS bi se trebao koristiti u situaciji kada zasebna stranica zahtjeva zaseban stil. Interni CSS se definira unutar <head> i <style> taga. Primjer:
<head>
<style>
hr { color: sienna; }
p { margin-left:20px; }
body { background-color:#4444AA; }
</style>
</head>
CSS u liniji HTML elementa
Ovakav način uređivanja CSS-a bi trebalo izbjegavati, ili barem ne koristiti u prevelikoj dozi. Stil se u ovoj situaciji piše u liniji elementa, točnije style atributu. Primjer:
<p style="margin-left:25px;">Ovaj je paragraf pomaknut u lijevo.</p>
Lista CSS svojstava
http://www.w3.org/TR/CSS21/propidx.html
Prioriteti Izvršavanja (napisao: Nemo_BJ)
1. Interpretacija inline (linijskog) koda
2. Interpretacija CSS-a napisanog u head tagu
3. Interpretacija CSS-a u eksternoj datoteci
