Textové odkazy
Pomocí kaskádových stylů můžeme vkládat styly do každého prvku HTML, ať už to jsou značky < P> či < DIV> nebo také HTML atributy jako např. aktivní a navštívené odkazy.
Tuto techniku použijete k:
Vytvoření originálních textových odkazů.
Odstraníte ze stránky nevzhledné podtržené odkazy a navrhnete čistší provedení textu za přítomnosti barvy jako jediného hypertextového odkazového indikátoru.
Navržení vizuálně typografické navigace.
Využitím kaskádových stylů ke specifikaci odkazů můžete vytvořit nepodtržené odkazy bez nutnosti uchýlit se k obrázkům a obrázkovým mapám.
Definice stylů pro odkazy:
Do hlavičky HTML dokumentu nebo do externího souboru vložíme kód:
Text za // do kódu nepište - jde o komentář.
< STYLE TYPE="text/css"> // začátek delkarací stylů - POUZE V HLAVIČCE!
A { // deklarace stylu pro tag A
... // sem přijdou definice vlastností písma
} // konec deklarace stylu pro tag A
A :active {text-decoration: none} // definice NEPODTRŽENÉHO písma pro aktivní odkaz
A :link {text-decoration: none}// definice NEPODTRŽENÉHO písma pro odkaz
A :visited {text-decoration: none}// definice NEPODTRŽENÉHO písma pro navštívený odkaz
BODY :active {color: jméno nebo kód barvy}// definice barvy písma pro aktivní odkazy v celém těle dokumentu
BODY :link {color: jméno nebo kód barvy}// definice barvy písma pro odkazy v celém těle dokumentu
BODY :visited {color: jméno nebo kód barvy}// definice barvy písma pro navštívené odkazy v celém těle dokumentu
< /STYLE> // konec delkarací stylů - POUZE V HLAVIČCE!

POZOR!
Definovaný styl pro značku < A> bude použit pro veškerý text uzavžený do < A> a < /A>, tedy i pro "NÁVĚŠTÍ" < A NAME="návěští"> text < /A>, které není odkazem!
Nezapomínejte na STŘEDNÍK za každou definovanou vlastností stylu!
Odkazy budou mít stejnou úpravu v celém dokumentu!
Příklad:
Definice stylů písma pro tuto stránku:
A { font-family: Verdana, Arial, Helvetica; font-size: 12pt; line-height: 14pt; }
A :active {text-decoration: none}
A :link {text-decoration: none}
A :visited {text-decoration: none}
BODY :active {color: yellow}
BODY :link {color: red}
BODY :visited {color: tomato}
Začátek
Další
Předchozí