CSS Dizajn sajta
CSS (Cascading Stile Sheets) je jezik stilova koji se koristi za opisivanje prezentacije dokumenta napisanog u markup jeziku. Najčešće se koristi za stilizovanje vizuelnog izgleda veb stranica napisanih u HTML-u i XHTML-u.
CSS vam omogućava da kontrolišete izgled, boje, fontove i druge vizuelne aspekte veb stranice, odvojeno od njene strukture i sadržaja. Ovo razdvajanje prezentacije i sadržaja olakšava održavanje i ažuriranje dizajna veb stranice.
CSS pruža širok spektar opcija za stilizovanje, kao što je podešavanje boja pozadine, određivanje veličina i stilova fontova i kreiranje rasporeda korišćenjem svojstava položaja, prikaza i savijanja.
CSS stilovi su definisani u posebnoj datoteci ili u elementu <stile> u <head> HTML dokumenta. Jednom definisani, stilovi se mogu primeniti na određene elemente na stranici korišćenjem selektora i atributa klase ili id u HTML-u.
Upotreba CSS stilova
CSS Selektori
CSS selektori se koriste za odabir elemenata na HTML stranici i za primenu stilova na njih. Postoji nekoliko tipova selektora dostupnih u CSS-u, od kojih svaki ima svoju sintaksu i svrhu.
Evo nekoliko primera često korišćenih CSS selektora:
Element Selektor
Ovaj selektor bira elemente na osnovu naziva njihove oznake. Na primer, p selektor bira sve <p> elemente.
p {
color: blue;
}
ID selektor
Ovaj selektor bira elemente na osnovu njihovog id atributa. Id selektor počinje simbolom "#". Na primer, #myId selektor bira element sa ID-om "myId". U jednom HTML dokumentu može da postoji samo jedan element sa ID selektorom.
<p id="myId">This is some text</p>
#myId {
color: blue;
}
Class selektor
Ovaj selektor bira elemente na osnovu njihovog atributa klase. Selektor klase počinje sa "." simbol. Na primer, .myClass selektor bira sve elemente sa klasom "myClass".
<p class="myClass">This is some text</p>
.myClass {
color: blue;
}
Descendant selektor
Ovaj selektor bira elemente koji su potomci određenog elementa. Na primer, 'p em' selektor bira sve elemente <em> koji se nalaze unutar <p> elemenata.
<p>This is <em>some</em> text</p>
p em {
color: blue;
}
Child Selektor
Ovaj selektor bira elemente koji su direktni potomci određenog elementa. Na primer, 'p > em' selektor bira sve elemente <em> koji su direktni potomci <p> elemenata.
CSS tekst stilovi
Evo nekoliko primera uobičajenih CSS stilova teksta:
Veličina teksta
'font-size:' Ovo svojstvo postavlja veličinu teksta. Može se podesiti u pikselima (px), poenima (pt) ili kao procenat (%).
p {
font-size: 16px;
}
Porodica fontova teksta
'font-famili': Ovo svojstvo postavlja porodicu fontova za tekst. Može se postaviti na određenu porodicu fontova kao što je „Arial“, „Helvetica“ ili „Verdana“, ili na generičku porodicu fontova kao što je „serif“, „sans-serif“ ili „monospace“.
p {
font-family: Arial, sans-serif;
}
Boja teksta
'color:' Ovo svojstvo postavlja boju teksta. Može se podesiti korišćenjem imenovane boje, kao što je „plava“, ili heksadecimalnog koda, kao što je „#0000ff“.
p {
color: blue;
}