Länkar är mycket vanliga på webbsidor, men många webbdesigners inser inte kraften som de har med CSS att manipulera och hantera sina länkar effektivt. Du kan definiera länkar med besökta, svävar och aktiva stater. Du kan också arbeta med gränser och bakgrunder för att ge dina länkar mer pizzaz eller få dem att se ut som knappar eller till och med bilder.
De flesta webbdesigners börjar med att definiera en stil på en märka:
en {färg: röd; }
Detta kommer att utforma alla aspekter av länken (svävar, besökta och aktiva). För att utforma varje del separat måste du använda länkpseudoklasser.
Länk Pseudo-klasser
Det finns fyra grundläggande typer av länkpseudoklasser du kan definiera:
- : länk - det här är standardstilen för länken
- : besökte - efter att en länk har klickats
- : sväva - som en mus är klar över en länk (förklick)
- : Aktiv - precis som länken klickas
För att definiera en länk pseudoklass, använd den med en tag i din CSS-väljare. Så, för att ändra den besökta färgen på alla dina länkar till grå, skriv:
a: besökte {färg: grå; }
Om du stilar en länk pseudoklass, är det en bra idé att utforma dem alla. På det sättet kommer du inte att bli överraskad av utomordentliga resultat. Så om du bara vill ändra den besökta färgen till grå, medan alla andra pseudoegenskaper hos dina länkar är svarta, skriver du:
a: länk, a: svävar, a: aktiv {färg: svart; } a: besökte {färg: grå; }
Ändra länkfärgerna
Det mest populära sättet att stila länkar är att ändra färgen när musen svävar över den:
en {färg: # 00f; } a: svävar {färg: # 0f0; }
Men glöm inte att du kan påverka hur länken ser ut när de klickar på den med: aktiv egenskap:
en {färg: # 00f; } a: aktiv {färg: # f00; }
Eller hur länken ser ut efter att du har besökt den med: besökta fastigheten:
en {färg: # 00f; } a: besökte {färg: # f0f; }
Att sätta allt ihop:
en {färg: # 00f; } a: besökte {färg: # f0f; } a: svävar {färg: # 0f0; } a: aktiv {färg: # f00; }
Sätt bakgrunder på länkarna för att lägga till ikoner eller kulor
Genom att leka med bakgrunden lite kan du skapa en länk som har en associerad ikon. Välj en ikon som är liten, cirka 15px med 15px, om inte din text är större. Placera bakgrunden till ena sidan av länken och ställ in upprepningsalternativet för att inte upprepa. Därefter pekar länken så att texten i länken flyttas över tillräckligt långt åt vänster eller höger för att se ikonen.
en {padding: 0 2px 1px 15px; bakgrund: #fff url (ball.gif) vänster center no-repeat; färg: # c00; }
När du har fått din ikon kan du ställa in en annan bild som din svängare, aktiv och besökte ikoner för att länken ska ändras:
en {padding: 0 2px 1px 15px; bakgrund: #fff url (ball.gif) vänster center no-repeat; färg: # c00; } a: svävar {bakgrund: #fff url (ball2.gif) vänstercentrum utan repetition; } a: aktiv {bakgrund: #fff url (ball3.gif) vänstercentrum utan repetition; }
Gör dina länkar likna Knappar
Knappar är väldigt populära, men tills CSS kom med, måste du skapa knappar med bilder, vilket gör att dina sidor tar längre tid att ladda. Lyckligtvis finns det en gränsstil som kan hjälpa dig att skapa en knappliknande effekt enkelt med CSS.
en {gräns: 4px början; vaddering: 2px; text-dekoration: ingen; } a: aktiv {gräns: 4px-inmatning; }
Obs! När du lägger färger i början och inmatningsstilarna kan webbläsare inte troligen göra dem som du kan förvänta dig. Så här är en mer avancerad knapp med färgade gränser:
en {gränsstil: solid; kantbredd: 1px 4px 4px 1px; text-dekoration: ingen; vaddering: 4px; kantfärg: # 69f # 00f # 00f # 69f; }
Och du kan också påverka svängaren och aktiva stilar på en knapplänk, använd bara de pseudoklasserna:
a: länk {border-style: solid; kantbredd: 1px 4px 4px 1px; text-dekoration: ingen; vaddering: 4px; kantfärg: # 69f # 00f # 00f # 69f; } a: svep {gränsvärde: #ccc; }
