CSS – Kreiranje stila za linkove (III deo)

  –  

Nakon upoznavanja sa linkovima i pseudoklasama prelazimo na kreiranje selektora, tj. stilova za linkove, i to u programu Dreamweaver. Prvi selektor koji ฤ‡emo kreirati je a:link, selektor za hiperlinkove koji joลก nisu poseฤ‡eni od strane korisniฤkog browser-a:

  1. Otvorite u Dreamweaver-u bilo koji sajt, HTML stranicu, i kliknite desnim tasterom miลกa bilo gde na stranici.
  2. Iz kontekstnog menija izaberite opciju „CSS Styles> New Style“.
  3. U novom dijalogu izaberite opciju „Use CSS Selector“, pa onda iz liste „Selector“ izaberite „a:link“.
  4. U donjem delu dijaloga izaberite polje „Define In“, te iz liste izaberite opciju „New Style Sheet File“ radi kreiranja novog CSS fajla, u kome ฤ‡e se ฤuvati svi stilovi za sve selektore (videti sliku).
  5. Na kraju kliknite „OK“.

Na ovaj naฤin ฤ‡emo nauฤiti ne samo o link klasama, veฤ‡ i o tome kako se kreiraju linkovane liste stilova (style sheet). Jedina osobina koju ฤ‡emo podesiti za naลก izabrani selektor je boja (Color):

  1. Odmah po kliku na prethodno „OK“, otvoriฤ‡e vam se dijalog „Save Style Sheet File As“. Proverite da se u polju „Save In“ nalazi folder, u kome je definisan i ceo sajt.
  2. U polje „File name“ unesite buduฤ‡i naziv za CSS fajl. Neka ekstenzija fajla bude .CSS. Kada unesete naziv fajla, Dreamweaver ฤ‡e automatski popuniti polje URL.
  3. Proverite i da li je u polju „Relative To“ odgovarajuฤ‡e podeลกeno (najฤeลกฤ‡e je to Document)
  4. Kliknite dugme „Save“ i otvoriฤ‡e vam se prozor za definiciju stila naลกeg selektora a:link – prozor „Style Definition for a:link in mojstil.css“. Sada imamo pravu linkovanu listu stilova. Ovakav CSS fajl moลพe biti ulinkovan na bilo koju stranicu vaลกeg sajta, odnosno na osnovu njega moลพe se definisati izgled na svim stranicama sajta. Ovo znaฤi da kada ลพelite da promenite izgled celog sajta, biฤ‡e dovoljno da izmenite podeลกavanja u CSS fajlu.
  5. U polje „Color“ unesite #333333, ลกto je heksadecimalna triplet oznaka za nijansu sive boje. Boju moลพete uneti i preko dugmeta „pipete“ sa leve strane polja.
  6. Nakon svega, kliknite „OK“.

Da biste dodali i stilove za ostale selektore (pseudoklase), kliknite dugme „New style“ u okviru palete „CSS Styles“. Nakon ovoga otvoriฤ‡e vam se veฤ‡ poznati dijalog „New style“, gde ฤ‡ete u polju Selector redom birati: a:visited, a:hover i a:active. Neka za sve selektore u polju „Define in“ stoji vaลก prethodno kreirani CSS fajl. Za svaki selektor ฤ‡ete u dijalogu „Style Definition“ odrediti potrebne osobine (uglavnom je reฤ o boji).

Pratite Krstaricu na www.krstarica.com