Linkit ovat hyvin yleisiä verkkosivuilla, mutta monet web-suunnittelijat eivät ymmärrä CSS: n kanssa voimaa hallita ja hallita linkkejä tehokkaasti. Voit määrittää linkit vierailevien, vieviä ja aktiivisten tilojen kanssa. Voit myös työskennellä rajojen ja taustojen kanssa, jotta linkit saataisiin enemmän pizzaziksi tai ne näyttävät painikkeilta tai jopa kuvilta.
Useimmat web-suunnittelijat alkavat määritellessään tyyliä "a" -tunnisteella:
a {väri: punainen; }Tämä muotoilee kaikki linkin osat (hiiren osoitin, vierailu ja aktiivinen). Jos haluat muotoilla jokaisen osan erikseen, sinun on käytettävä pseudo-luokkien linkkiä.
Linkki Pseudo-luokat
Voit määrittää neljä perustyyppistä pseudo-luokkia:
- : link - tämä on linkin oletustyyli
- : vierailu - kun linkkiä on napsautettu
- : hiiren osoitin - hiiren ollessa lähellä linkkiä (esiklikkaus)
- : aktiivinen - oikein, kun linkkiä napsautetaan
Jos haluat määritellä linkin pseudo-luokan, käytä sitä a-tunnisteen CSS-valitsimessa . Joten, jos haluat muuttaa kaikkien linkkien sivun värejä harmaaseen, kirjoita:
a: visited {väri: harmaa; }Jos luodat yhden linkin näennäisluokan, on hyvä suunnitella ne kaikki. Näin et jää yllättävää ulkomaisten tulosten perusteella. Joten jos haluat vain vaihtaa vierailun väriä harmaaksi, kun kaikki muut linkkisi pseudo-ominaisuudet pysyvät mustana, kirjoitat:
a: linkki, a: hover, a: aktiivinen {väri: musta; } a: vieraili {väri: harmaa; }Muuta Linkin värit
Suosituin tapa muodostaa linkkejä on vaihtaa väriä, kun hiiri lepää sen yli:
{color: # 00f; } a: hover {väri: # 0f0; }Mutta älä unohda, että voit vaikuttaa siihen, miten linkki näyttää, kun napsautetaan sitä: aktiivinen ominaisuus:
{color: # 00f; } a: aktiivinen {väri: # f00; }Tai miten linkki näyttää sen jälkeen, kun olet käynyt sen vieressä: visited property:
{color: # 00f; } a: vieraili {color: # f0f; }Voit laittaa sen yhteen:
{color: # 00f; } a: vieraili {color: # f0f; } a: hover {väri: # 0f0; } a: aktiivinen {väri: # f00; }Laita taustat linkkeihin lisätäksesi kuvakkeita tai luoteja
Voit luoda taustaksi linkin, kuten tyylikkäässä taustat-artikkelissa, mutta pelaamalla taustalla hieman, voit luoda linkin, jolla on siihen liittyvä kuvake. Valitse kuvake, joka on pieni, noin 15px 15px, ellei teksti ole suurempi. Aseta tausta linkin yhdelle puolelle ja aseta toistotila toistuvaksi. Sitten liipaise linkki niin, että linkin teksti siirretään tarpeeksi kauas vasemmalle tai oikealle nähdäksesi kuvakkeen.
{padding: 0 2px 1px 15px; tausta: #fff url (ball.gif) vasen keskusta ei-toista; väri: # c00; }Kun olet saanut kuvasi, voit asettaa eri kuvan kuin leijuvasta, aktiiviset ja vierailut kuvakkeet, jotta linkki muuttuu:
{padding: 0 2px 1px 15px; tausta: #fff url (ball.gif) vasen keskusta ei-toista; väri: # c00; } a: hover {tausta: #fff url (ball2.gif) vasen keskusta ei-toista; } a: aktiivinen {tausta: #fff url (ball3.gif) vasen keskusta ei-toista; }Tee linkit näyttävät painikkeilta
Painikkeet ovat erittäin suosittuja, mutta kunnes CSS tuli eteenpäin, sinun tarvitsee luoda painikkeita kuvien avulla , jolloin sivuillasi kestää kauemmin lataamista. Onneksi on rajatyyli, joka voi auttaa sinua luomaan painikkeen kaltaisen vaikutelman helposti CSS: llä.
{border: 4px alusta; pehmuste: 2px; teksti-decoration: none; } a: aktiivinen {border: 4px inset; }Huomaa, että kun asetat värit alusta ja upotetaan tyylejä, selaimet eivät ole yhtä todennäköisiä kuin olette odotettavissa. Joten, tässä on miellyttävämpi painike, jossa on värilliset reunat:
{border-style: kiinteä; raja-leveys: 1px 4px 4px 1px; teksti-decoration: none; pehmuste: 4px; raja-väri: # 69f # 00f # 00f # 69f; }Voit myös vaikuttaa painikkeen linkin hover- ja aktiivisiin tyyleihin, vain käyttää näitä pseudo-luokkia:
a: linkki {border-style: kiinteä; raja-leveys: 1px 4px 4px 1px; teksti-decoration: none; pehmuste: 4px; raja-väri: # 69f # 00f # 00f # 69f; } a: hover {border-color: #ccc; }