Atribut Kaskádové styly (CSS) se nejčastěji používá ke změně barvy hypertextových odkazů na webových stránkách. Méně funkční řešení tohoto problému jsou v jazyce HTML (HyperText Markup Language - „hypertext markup language“).
Je to nutné
Základní znalost jazyků HTML a CSS
Instrukce
Krok 1
Připravte si stylový blok pro hypertextové odkazy. V nejjednodušší podobě to může vypadat takto: a {color: Green} Zde se „a“nazývá „selektor“, což znamená, že popis stylu v závorkách by měl být použit na všechny značky odkazů v dokumentu. Zelená definuje barvu odkazu; jedná se o velmi hrubou definici barvy a používá se jen zřídka. Mnohem častěji se do selektoru „a“přidává „pseudotřída“- je to štítek, který umožňuje určit styl odkazu ve třech různých stavech.
Krok 2
Pomocí pseudotřídy odkazu upravte normální (neaktivní) stav odkazu. Může to vypadat například takto: a: link {color: Green}
Krok 3
Použijte kurzor pseudo-třídy k určení, jak se má odkaz zobrazit při přechodu myší. Například: a: hover {color: Lime}
Krok 4
Pomocí navštívené pseudotřídy popište styl již navštíveného odkazu. Například: a: navštívil {color: DarkGreen}
Krok 5
Zkombinujte všechny tři stavy do jednoho bloku popisu stylu. Vzhled kódu HTML obsahujícího popisy stylů CSS může například vypadat takto:
a: link {color: Green}
a: navštíveno {color: DarkGreen}
a: hover {color: Lime}
Zde úvodní a závěrečné značky stylu HTML sdělují prohlížeči, kde začínají a končí popisy stylů, a mezi nimi je popis chování odkazu ve třech stavech.
Krok 6
Ukázka použitá výše zobrazuje pouze barevné charakteristiky, ale do popisu lze zahrnout další atributy. Například pokud design stránky vyžaduje, aby odkaz nebyl podtržen v normálním (neaktivním) stavu, ale podtržen, když je kurzor umístěn, pak lze kód upravit následujícím způsobem:
a: link {color: Green; textová výzdoba: žádná;}
a: navštívil {color: DarkGreen; textová výzdoba: žádná;}
a: hover {color: Lime; textová výzdoba: podtržení;}
Krok 7
Pokud chcete změnit barvu pouze některých odkazů na stránce a zbytek ponechat s výchozím nastavením, přidejte atribut třídy do značky každého odkazu, který se mění. Například pojmenujte tuto třídu hypertextových odkazů newLinks. Pak může značka odkazu vypadat takto: textový odkaz K popisu stylu musí být přidán stejný název třídy:
a.newLinks: link {color: Green; textová výzdoba: žádná;}
a.newLinks: navštíveno {color: DarkGreen; textová výzdoba: žádná;}
a.newLinks: hover {color: Lime; textová výzdoba: podtržení;}
Krok 8
Vložte kód popisu stylu připravený z výše popsaných příkladů do záhlaví stránky - mezi značky a. V případě potřeby přidejte do značek odkazů atribut třídy s názvem použitým v popisech stylů. Poté uložte upravenou stránku a bude dokončen postup pro změnu barvy hypertextových odkazů.
