CSS (CascadingStyleSheets) je stilski jezik, koji se koristi za formatiranje i definisanje izgleda HTML stranica.
Stilove je moguće koristiti na 3 načina:
Eksterni CSS fajl
Eksterni CSS fajlovi se koriste za više stranica koje koriste iste stilove. Sa eksternim stilovima možete menjati celokupan izled sajta menjanjem samo jednog fajla. Moguće je i korišćenje više eksternih fajlova (idealno za definisanje odeljaka na stranici).
<head>
<link href="/css/general.css" rel="stylesheet" type="text/css" />
</head>
Interni stil
Interni stilovi se koriste kada pojedinačne stranice imaju jedinstvene stilove (što je malo kada slučaj).
<head>
<style>
a {color: #fff;}
</style>
</head>
Umetnuti stil
Umetnuti stilovi se kotiste direktno na HTML elementima, ali se ne preporučuju jer time poništavate sve globalne stilove primenjene na taj element.
<a style="color:#fff">Link</a>
Zašto eksterni CSS fajl?
Na ovaj način svi stilovi se nalaze u jednom ili nekoliko fajlova (multi stilovi), koji se učitaju jednom i ostaju učitani u keš memoriji, pa je odziv znatno brži. Za razliku od internih i umetnutih stilova, sve stilove elemenata definišete na jednom mestu, dok bi, ukoliko bi stil bio u okviru HTML dokumenta, promena morala da se izvrši na svakom mestu gde se taj element nalazi.
Izbegavajte korišćenje internih i umetnutih stilova u vašim stranicama.
CSS sintaksa
CSS sintaksa se sastoji iz dva glavna dela:
- selektor
- deklaracija (jedna ili više)
Deklaracija se deli na osobinu i vrednost.
h1 {font-size: 20px; color: #fff;}
- h1 - selektor
- font-size: 20px i color:#fff - deklaracije
- font-size, color - osobina
- 20px, #fff - vrednosti
Deklaracije se grupišu unutar vitičastih zagrada { }, a svaka deklaracija se završava oznakom ;.
Komentari u CSS-u pišu se unutar /* */
/*ovo je komentar*/
CSS sintaksu možete pisati jednolinijski ili višelinijski. Odaberite sami kako vam više odgovara.
/*jednolinijska sintaksa*/
h1 {font-size: 20px; color: #fff;}
/*višelinijska sintaksa*/
h1 {
font-size: 20px;
color: #fff;
}
Selektori:
Univerzalni selektor (*)
Selektuje sve elemente u dokumentu.
* {margin: 10px}
Svi elementi u dokumentu imaće marginu veličine 10px.
Selektor po tipu elementa
Selektuje sve elemente određenog tipa.
ul {margin: 10px}
a {margin: 10px}
Svi ul i a elementi imaće marginu veličine 10px.Selektor klase
Označava se tačkom (.) i selektuje elemente sa datim nazivom klase.
.imeKlase {deklaracija}
ID selektor
Označava se hash-om (#) i selektuje elemente sa određenim ID-om.
#mojId {deklaracija}
Selektor atributa
Pise se unutar uglastih zagrada ([]) i selektuje elemente sa određenim atributima.
input[type="submit"] {deklaracija}
Pseudo-klase
Označavaju se dvotačkom (:). Neke od pseudo-klasa su :link, :active, :visited, :hover, :focus.
a:hover {deklaracija}
Detaljnije o CSS selektorima u sledećem tutorijalu.
Osobine (property):
Osobine pozadine:
- background - definiše sve osobine pozadine u jednoj deklaraciji
- background-attachment - definiše da li će pozadinska slika biti fiksirana ili će se skrolovati sa ostatkom stranice
- background-color - boja pozadine
- background-image - pozadinska slika
- background-position - definiše početnu poziciju pozadinske slike
- background-repeat - definiše da li će se i kako pozadinska slika ponavljati
Osobine ivica (border):
- border - definiše sve osobine ivice elementa u jednoj deklaraciji
- border-bottom/left/right/top - definisanje osobina svake ivice pojedinačno
- border-color - podešavanje boje svih ivica
- border-style - definisanje stila svih ivica
- border-width - definisanje širine svih ivica
Osobine dimenzija:
- height - postavlja visinu elementa
- max-height - postavlja maksimalnu visinu elemnta
- min-height - postavlja minimalnu visinu elementa
- width - postavlja širinu elementa
- max-width - postavlja maksimalnu širinu elementa
- min-width - postavlja minimalnu širinu elementa
Osobine fonta:
- font - definiše sve osobine fonta u jednoj deklaraciji
- font-family - definiše porodicu fonta koja se koristi (Arial, Helvetica, Droid Sans...)
- font-size - veličina fonta
- font-style - stil fonta
- font-weight - širina/debljina fonta
Osobine liste:
- list-style - definiše sve osobine liste u jednoj deklaraciji
- list-style-image - definiše sliku za obeleživač stavke u listi
- list-style-position - definiše poziciju slike kao obeleživača stavke
- list-style-type - definiše vrstu obeleživača stavke u listi
Osobine margina:
- margin - razmak elementa od ostalih elemenata, u sva 4 pravca; definiše sve osobine margina u jednoj deklaraciji
- margin-bottom/left/right/top - definiše osobine svake pojedinačne margine
Osobine povećanja unutar elementa (padding):
- padding - za razliku od margina koje postavljaju razmak ka drugim elementima, padding povećava prostor unutar elementa i tako stvara razmak, takođe u sva 4 pravca; definiše sve osobine padding-a u jednoj deklaraciji
- padding-bottom/left/right/top - osobine padding-a u na svakoj strani pojedinačno
Osobine pozicioniranja:
- position - definiše vrstu pozicioniranja elementa
- bottom/left/right/top - definiše poziciju elementa prema donjoj/levoj/desnoj/gornjoj ivici elementa u odnosu na koji je pozicioniran
- float - definiše da li i na koju stranu element treba da "lebdi", odnosno da li da bude postavljen maksimalno levo/desno
- z-index - definiše nivo pozicioniranog elementa u okviru slojeva
Osobine teksta:
- color - boja teksta
- letter-spacing - razmak između slova
- line-height - visina linije teksta
- text-align - definiše poravnjanje teksta
- text-decoration - definiše da li i kakve dodatke tekst ima
- text-transform - definiše pisanje velikih slova u tekstu, da li da bude veliko samo prvo ili sva ili nijedno slovo
Sve osobine i njihova primena biće detaljnije objašnjene u narednim tutorijalima kroz praktične primere.
