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 tag:
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 v prehliadač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
Hrajúc s pozadím trochu, 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; }
