Štýlovanie odkazu
Potom, ako sme si vysvetlili všeobecné vlastnosti jazyka CSS, ktoré sa dajú aplikovať na všetky elementy a ako sme si ukázali štandardné definovanie pravidiel jazyka CSS v hlavičke dokumentu, ukážeme si ešte dizajnovanie niektorých špeciálnych elementov, ktoré majú svojské správanie a nastavenia ako je odkaz, zoznam alebo tabuľka. V tejto kapitole začneme prvým menovaným – odkazom (linkom), čiže elementom a (anchor). Pozrite si výsledok nasledujúceho kódu a skúste sa nad ním zamyslieť:
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<p>Text</p>
<a href="http://w3schools.com">Klikni!</a>
</body>
</html>
Na prvom riadku máme zadaný obyčajný text v elemente p a na druhom riadku máme zadaný text v elemente a. Všimnite si rozdiel v zobrazené jednotlivých textov. Text v odkaze je podčiarknutý a ešte je aj inou farbou. Toto sú defaultné nastavenia elementu a (text-decoration, color). Pri štýlovaní odkazov treba na toto myslieť, pretože ak chceme, aby tieto dve pravidlá neboli aplikované, musíme ich prepísať (override – nahradiť, prevážiť), resp. anulovať.
Jazyk CSS rozlišuje štyri stavy odkazu, ktoré odkaz počas interakcie s ním nadobúda a týmto štyrom stavom môžeme priradiť rôzny štýl. Normálny stav odkazu sa označuje slovom link (link – odkaz) a určuje normálny odkaz, nad ktorým nie je zobrazený kurzor myši a ešte naň nikto neklikol, vo väčšine pri načítaní stránky a nevykonaní žiadnej akcie. Druhý stav linku je visited (navštívený) a predstavuje situcáiu, kedy sa už na odkaz z danej stránky kliklo, čiže už sme navštívili cieľ odkazu a vrátili sme sa späť na stránku. Jednoducho, už na daný odkaz bolo kliknuté. Tretím stavom odkazu je hover (hover – vznášať sa, obletovať) a je to stav, kedy sa myšou nachádzame nad úzmemím (priestorom) odkazu. Posledný stav odkazu je active (aktívny) a je to moment, kedy sa na daný odkaz kliklo, resp. keď sme s myšou nad odkazom a držíme stlačené tlačidlo myši – moment kliknutia. Možno ste sa spýtali, na čo je toto dôležité.
Je dobré určovať rôzne štýly pre tieto jednotlivé stavy odkazov jednak preto, aby bolo jasné na stránke, čo je odkazom (na čo sa dá kliknúť) a aby sa rozoznalo, na ktoré odkazy napríklad používateľ už klikol. Ten druhý prípad sa ani tak často nevyužíva, ale môžete ho vidieť napríklad na stránke google. Ak si dáte niečo vyhľadať, všetky odkazy majú jednotnú farbu (výsledky vyhľadávania). Ak na niektoré z nich kliknete a následne sa vrátite na stránku, kde ste vyhľadávali, tie odkazy, ktoré ste už navštívili, majú inú farbu (stav visited). Je to preto, aby ste vedeli, čo ste si už pozreli a aby ste na to neklikli viackrát, ak si to neprajete. Alebo aby ste videli, ktoré ste ešte nenavštívili. Prvý dôvod sa využíva takmer všade. Stránka vo väčšine obsahuje množstvo textov, nadpisov, ako aj tlačítiek, obrázkov a podobne. Preto aby sa odkaz nestratil v celkovom obsahu a bol jasne viditeľný, aby bolo používateľovi jasné, kde môže kliknúť, rozlišuje sa dizajnovo (pozadie, farba, podčiarknutie a podobne) od zvyšku. Takisto sa používa stav hover, aby keď používateľ prebehol myšou ponad, dostal nejako zmenom dizajnu odkazu najavo, že na to môže kliknúť. Preto je aj defaultné zobrazenie odkazu rôzne od štandardného textu (modrý a podčiarknutý text). Tieto stavy sa pri definovaní štýlu pridávajú k pôvodnému selectoru (typ tagu – a, class, id) cez dvojbodku, za ktorou nasleduje názov stavu:
<!DOCTYPE html>
<html>
<head>
<style>
a{
font-size: 30px;
display: block;
margin-bottom: 50px;
}
.vynulovanie{
color: black;
text-decoration: none;
}
.standard{
text-decoration: none;
font-weight: bold;
}
.standard:link{
color: red;
}
.standard:visited{
color: blue;
}
.standard:hover{
color: grey;
text-decoration: underline;
}
.standard:active{
color: black;
}
.pretty{
color: black;
text-decoration: none;
border: 3px solid green;
background-color: white;
text-align: center;
padding: 10px 50px;
}
.pretty:hover{
background-color: green;
color: white;
border: 3px solid blue;
}
.pretty:active{
background-color: yellow;
color: blue;
border: 3px solid blue;
}
</style>
</head>
<body>
<a href="http://w3schools.com">Klikni!</a>
<a class="vynulovanie" href="http://w3schools.com">Klikni!</a>
<a class="standard" href="http://w3schools.com">Klikni!</a>
<a class="pretty" href="http://w3schools.com">Klikni!</a>
<a class="standard" href="http://w3schools.com/sadf">Klikni!</a>
</body>
</html>
Všetkým odkazom sme nastavili väčšiu veľkosť písma, spôsob zobrazovania blokového elementu a spodný okraj pre lepšiu prehľadnosť. Prvý odkaz sa zobrazuje s defaultnými nastaveniami, čiže je modrý a podčiarknutý. Pri druhom odkaze sme použili triedu, ktorá nám zruší – vynuluje defaultné nastavenie odkazu, zrušili sme podčiarknutie a nastavili farbu na čiernu. Tretiemu odkazu sme nastavili triedu s názvom standard a okrem zadefinovania štýlu všeobecne sme zadali aj štýly pre všetky jeho stavy. Odkaz sa vám bude pravdepodobne zobrazovať už ako visited (modrou farbou), pretože na uvedenú adresu ste už možno klikli a je to zapamätané ako navštívený odkaz. Ak nie, bude sa zobrazovať červenou farbou. Základný štýl, ktorý sme nadefinovali bez určenia stavu (zadaním selectora standard), sme určili tým pádom pre všetky stavy. Skúste ísť myšou ponad tento element a uvidíte, ako sa aplikuje štýl definovaný v stave hover. Zmení sa farba na šedú a text bude podčiarknutý. Skúste teraz kliknúť myšou na daný link, ale tlačítko nepustiť. Tým, že držíte stlačené tlačítko nad týmto odkazom, nachádza sa v stave active a teda sa zobrazuje príslušný štýl, text sa zobrazí čiernou farbou. Pri štandardnom (krátkom) kliknutí sa tento štýl aplikuje iba krátko, resp. iba preblikne, kým pustíme tlačítko myši a sme presmerovaní. Vráťte sa späť (tlačítko dozadu/back v prehliadači). Vyskúšajte si podobný postup aj so štvrtým odkazom, ktorý vyzerá troška odlišne. Nie je to iba textový odkaz, ale pomocou dizajnu sme mu určili vzhľad tlačítka. Poslednému odkazu sme naschvál zadali zlú url adresu v atribúte href, aby ste videli rozdiel medzi stavom link a stavom visited. Skúšajte si zadávať zlú adresu, mal by sa zobraziť v stave link, potom kliknúť, vrátiť sa a následne by mal byť zobrazený v stave visited. Stav visited sa neviaže na konkrétny jeden odkaz, ale na použitú linku (url adresu – cieľ). Čiže ak aj máme viacej odkazov s tým istým cieľom, po kliknutí na jeden z nich sa všetky ostatné nastavia na visited, pretože daná linka už bola nami navštívená.