CSS – Kontekstualni selektori (II deo)
Selektori klasa (class selectors) predstavljaju veoma snažnu alatku CSS-a, koja nam dozvoljava da stilizujemo bilo koji element na web stranici, po svojoj želji. U najpopularnijoj alatki web dizajnera – Dreamweaver-u, ovi stilovi se nazivaju Custom Styles, a CSS specifikacija ih definiše kao selektore klasa. Zato ćemo sada da kreiramo dva selektora klasa: jedan selektor za levu kolumnu (levakolumna) i jedan selektor za desnu kolumnu (desnakolumna).
1. Pokrenite Dreamweaver i otvorite neku od vaših web stranica.
2. Kliknite desnim tasterom bilo gde na stranici, te iz kontekstnog menija izaberite „CSS Styles> New Style“. Otvoriće vam se „New style“ dijalog prozor.
3. Izaberite polje za potvrdu „Make Custom Style (class)“, te u polje „Name“ unesite naziv novog selektora: „.levakolumna„.
4. U donjem delu dijaloga, u opciji „Define In“ izaberite linkovani fajl sa stilovima (.css fajl). Ako ste ispratili prethodne priloge, onda već imate kreiran fajl sa listom stilova.
5. Kliknite dugme „OK“. Otvoriće vam se „Style Definition“ prozor sa aktivnom kategorijom „Type“, koja se odnosi na definisanje izgleda teksta. Savetujemo vam da izaberete neku od predefinisanih grupa fontova, radi maksimalne kompatibilnosti na različitim platformama.
6. Postavite sledeća podešavanja (budući izgled teksta u levoj kolumni):
Font: Arial, Helvetica, sans-serif
Size: 12 pixels
Color: #000000 (crna)
7. Pređite na kategoriju Background i u polje background color unesite #FFFFFF (bela boja).
8. Kliknite „OK“.
9. Ponovo kliknite desnim tasterom bilo gde na web stranici, te iz kontekstnog menija izaberite „CSS Styles> New Style“. Otvoriće vam se „New style“ dijalog prozor, kao u drugom koraku.
10. Izaberite polje za potvrdu „Make Custom Style (class)“, te u polje „Name“ unesite naziv novog selektora: „.desnakolumna“ (prethodno smo ovo isto uradili za stil leve kolone).
11. U donjem delu dijaloga, u opciji „Define In“ izaberite linkovani fajl sa stilovima (.css fajl).
12. Kliknite „OK“.
13. U prozoru „Style Definition“ postavite sledeća podešavanja:
Font: Arial, Helvetica, sans-serif
Size: 10 pixels
Color: #FFFFFF (bela)
14. Pređite na kategoriju Background i u polje background color unesite #333333 (nijansa sive boje).
15. I konačno, na kraju kliknite „OK“.
Na ovaj način smo podesili selektore klasa – .levakolumna i .desnakolumna – preostaje nam još samo da stilove primenimo na stranici.
1. Kliknite unutar leve kolone, leve ćelije ukoliko ste stranicu organizovali u tabelu.
2. Izaberite <td> tag na statusnoj liniji, koja se nalazi na donjoj ivici prozora Dreamweaver-a.
3. Kliknite desnim tasterom na tag i izaberite opciju Set Class. Izaberite „levakolumna“.
4. Kliknite unutar desne ćelije (kolumne), izaberite <td> tag na statusnoj liniji, te desnim klikom kliknite na dati tag. Izaberite opciju Set Class.
5. Izaberite „desnakolumna“.
Pratite Krstaricu i preko mobilne aplikacije za Android i iPhone.