Atribút Kaskádové štýly (CSS) sa najčastejšie používa na zmenu farby hypertextových odkazov na webových stránkach. Menej funkčné riešenia tohto problému sú v jazyku HTML (HyperText Markup Language - „hypertextový značkovací jazyk“).
Je to nevyhnutné
Základné znalosti jazykov HTML a CSS
Inštrukcie
Krok 1
Pripravte si štýlový blok pre hypertextové odkazy. V najjednoduchšej podobe by to mohlo vyzerať takto: a {color: Green} Tu sa „a“nazýva „selektor“, čo naznačuje, že popis štýlu v zátvorkách by sa mal použiť na všetky značky odkazov v dokumente. Zelená definuje farbu odkazu; toto je veľmi hrubá definícia farby a používa sa zriedka. Oveľa častejšie sa k selektoru „a“pridáva „pseudotrieda“- je to štítok, ktorý umožňuje určiť štýl odkazu v troch rôznych stavoch.
Krok 2
Pomocou pseudotriedy odkazu upravte normálny (neaktívny) stav odkazu. Môže to vyzerať napríklad takto: a: link {color: Green}
Krok 3
Použite kurzor myši na pseudo-triedu a určte, ako sa má odkaz zobraziť pri ukázaní. Napríklad: a: hover {color: Lime}
Krok 4
Pomocou navštívenej pseudotriedy popíšte štýl už navštíveného odkazu. Napríklad: a: navštívil {color: DarkGreen}
Krok 5
Spojte všetky tri stavy do jedného bloku popisu štýlu. Vzhľad kódu HTML obsahujúceho popisy štýlov CSS môže napríklad vyzerať takto:
a: link {color: Green}
a: navštívil {color: DarkGreen}
a: hover {color: Lime}
Otváracia a záverečná značka štýlu HTML tu informuje prehliadač o tom, kde sa popisy štýlov začínajú a končia, a medzi nimi je popis správania odkazu v troch stavoch.
Krok 6
Vyššie použitá vzorka zobrazuje iba farebné charakteristiky, ale do popisu možno zahrnúť ďalšie atribúty. Ak napríklad návrh stránky vyžaduje, aby odkaz nebol podčiarknutý v normálnom (neaktívnom) stave, ale podčiarknutý, keď na ňu umiestnite kurzor, potom je možné kód upraviť takto:
a: link {color: Green; dekorácia textu: žiadny;}
a: navštívil {color: DarkGreen; dekorácia textu: žiadny;}
a: hover {color: Lime; dekorácia textu: podčiarknutie;}
Krok 7
Ak chcete zmeniť farbu iba niektorých odkazov na stránke a zvyšok ponechať na predvolených nastaveniach, pridajte do značky každého zmeneného odkazu atribút class. Napríklad pomenujte túto triedu hypertextových odkazov newLinks. Potom môže značka odkazu vyzerať takto: textový odkaz K popisu štýlu musí byť pridaný rovnaký názov triedy:
a.newLinks: link {color: Green; dekorácia textu: žiadny;}
a.newLinks: navštívené {color: DarkGreen; dekorácia textu: žiadny;}
a.newLinks: hover {color: Lime; dekorácia textu: podčiarknutie;}
Krok 8
Vložte kód popisu štýlu pripravený z príkladov popísaných vyššie do hlavičky stránky - medzi značky a. V prípade potreby pridajte do značiek odkazov atribút triedy s názvom použitým v popisoch štýlov. Potom uložte upravenú stránku a postup na zmenu farby hypertextových odkazov bude dokončený.
