Odkazy sú veľmi časté na webových stránkach, ale mnohí web dizajnéri si neuvedomujú silu, ktorú majú s CSS efektívne manipulovať a spravovať svoje odkazy. Môžete definovať prepojenia s navštívenými, vznášajúcimi sa a aktívnymi stavmi. Môžete tiež pracovať s hranicami a pozadím, aby vaše odkazy viac pizzaz, alebo aby vyzerali ako tlačidlá alebo dokonca obrázky.
Väčšina web dizajnérov začína definovaním štýlu na značke "a":
a {farba: červená; }Toto bude štýl všetkých aspektov odkazu (vznášať, navštívil a aktívny). Ak chcete štýl jednotlivých častí oddelene, musíte použiť pseudotriedy odkazov.
Prepojte pseudotriedy
Existujú štyri základné typy pseudotriedy odkazov, ktoré môžete definovať:
- : link - toto je predvolený štýl pre odkaz
- : navštívil - po kliknutí na odkaz
- : vznášať sa myšou - ak je myš umiestnená nad odkazom (pred kliknutím)
- : aktívny - vpravo po kliknutí na odkaz
Ak chcete definovať pseudotriedu odkazu, použite ju s označením vo vašom voliči CSS . Ak chcete zmeniť navštívenú farbu všetkých odkazov na šedú, napíšte:
a: navštívené {farba: šedá; }Ak napíšete jeden pseudotriedny odkaz, je dobré ich všetko napísať. Týmto spôsobom vás nebudú prekvapení cudzími výsledkami. Ak chcete zmeniť navštívenú farbu na šedú, zatiaľ čo všetky ostatné pseudo-vlastnosti vašich odkazov zostanú čierne, napíšeme:
a: odkaz, a: vznášať, a: aktívny {farba: čierna; } a: navštívené {farba: šedá; }Zmeňte farby odkazov
Najpopulárnejšou cestou k štýlovému odkazu je zmena farby, keď sa myš pohybuje nad ňou:
a {farba: # 00f; } a: vznášať sa {color: # 0f0; }Ale nezabudnite, že môžete mať vplyv na to, ako odkaz vyzerá, keď kliknú na neho pomocou: aktívnej vlastnosti:
a {farba: # 00f; } a: aktívna {farba: # f00; }Alebo ako sa odkaz stará po tom, ako ste ho navštívili s navštíveným:
a {farba: # 00f; } a: navštívil {color: # f0f; }Všetko spolu:
a {farba: # 00f; } a: navštívil {color: # f0f; } a: vznášať sa {color: # 0f0; } a: aktívna {farba: # f00; }Vložte pozadie do odkazov a pridajte ikony alebo odrážky
Môžete dať pozadie na odkaz ako v štýle Štýlový pozadia, ale tým, že hrá trochu s pozadím, môžete vytvoriť odkaz, ktorý má priradenú ikonu. Vyberte ikonu, ktorá je malá, okolo 15 pixelov až 15 pixlov, pokiaľ text nie je väčší. Umiestnite pozadie na jednu stranu prepojenia a nastavte opakovanie na možnosť opakovania. Potom prepojte prepojenie tak, aby text v rámci odkazu bol presunutý dostatočne ďaleko doľava alebo doprava, aby sa zobrazila ikona.
{padding: 0 2px 1px 15px; pozadie: #fff url (ball.gif) vľavo centrum no-repeat; farba: # c00; }Po získaní vašej ikony môžete nastaviť iný obrázok ako ikony na presunutie, aktívne a navštívené, aby ste zmenili odkaz:
{padding: 0 2px 1px 15px; pozadie: #fff url (ball.gif) vľavo centrum no-repeat; farba: # c00; } a: vznášať sa {background: #fff url (ball2.gif) left center no-repeat; } a: aktívna {background: #fff url (ball3.gif) vľavo centrum no-repeat; }Vytvorte vaše odkazy ako tlačidlá
Tlačidlá sú veľmi populárne, ale kým CSS prišiel, musíte vytvoriť tlačidlá pomocou obrázkov , čo robí vaše stránky dlhšie na načítanie. Našťastie existuje hraničný štýl, ktorý vám pomôže vytvoriť efekt podobný tlačidlám pomocou funkcie CSS.
{hraničná hodnota: 4px začiatok; polstrovanie: 2px; textová dekorácia: žiadne; } a: aktívna {okraj: 4px vložka; }Upozorňujeme, že keď vložíte farby na začiatok a štýly vloženia, prehliadače ich pravdepodobne nevytvárajú tak, ako by ste mohli očakávať. Takže tu je falošnejšie tlačidlo s farebnými okrajmi:
{border-style: solid; šírka hranice: 1px 4px 4px 1px; textová dekorácia: žiadne; polstrovanie: 4px; hraničná farba: # 69f # 00f # 00f # 69f; }Môžete tiež ovplyvniť vznášadlo a aktívne štýly tlačidla odkazu, stačí použiť tie pseudotriedy:
a: odkaz {border-style: solid; šírka hranice: 1px 4px 4px 1px; textová dekorácia: žiadne; polstrovanie: 4px; hraničná farba: # 69f # 00f # 00f # 69f; } a: vzdialiť {border-color: #ccc; }