Links er meget almindelige på websider, men mange webdesignere forstår ikke den magt, de har med CSS til at manipulere og administrere deres links effektivt. Du kan definere links med besøgte, svinge og aktive stater. Du kan også arbejde med grænser og baggrunde for at give dine links flere pizzaz eller få dem til at ligne knapper eller lige billeder.
De fleste webdesignere begynder ved at definere en stil på -en tag:
en {farve: rød; }
Dette vil stile alle aspekter af linket (svever, besøgt og aktivt). Hvis du vil formatere hver enkelt del separat, skal du bruge link pseudo-klasser.
Link Pseudo-klasser
Der er fire grundlæggende typer af link pseudo-klasser du kan definere:
- : link - dette er standardstil for linket
- : besøgt - efter at et link er blevet klikket
- : svinge - som en mus er klar over et link (forud klik)
- : Aktiv - lige som linket bliver klikket
For at definere en link pseudoklasse, brug den med -en tag i din CSS vælger. Så, for at ændre den besøgte farve af alle dine links til grå, skriv:
a: besøgte {farve: grå; }
Hvis du stiler en link pseudoklasse, er det en god idé at style dem alle. På den måde bliver du ikke overrasket over fremmede resultater. Så hvis du bare vil ændre den besøgte farve til grå, mens alle andre pseudoegenskaber af dine links forbliver sorte, vil du skrive:
a: link, a: svæver, a: aktiv {farve: sort; } a: besøgte {farve: grå; }
Skift linkfarverne
Den mest populære måde at style links på er at ændre farven, når musen svæver over det:
en {farve: # 00f; } a: svever {farve: # 0f0; }
Men glem ikke, at du kan påvirke, hvordan linket ser ud, når de klikker på det med: aktiv ejendom:
en {farve: # 00f; } a: aktiv {farve: # f00; }
Eller hvordan linket ser ud efter at du har besøgt det med: besøgt ejendom:
en {farve: # 00f; } a: besøgte {farve: # f0f; }
For at sætte det sammen:
en {farve: # 00f; } a: besøgte {farve: # f0f; } a: svever {farve: # 0f0; } a: aktiv {farve: # f00; }
Sæt baggrunde på linkene for at tilføje ikoner eller kugler
Ved at lege med baggrunden lidt kan du oprette et link, der har et tilknyttet ikon. Vælg et ikon, der er lille, omkring 15px med 15px, medmindre din tekst er større. Anbring baggrunden til den ene side af linket, og angiv gentagelsesindstillingen for at gentage. Derefter sætte linket op, så teksten i linket flyttes langt nok til venstre eller højre for at se ikonet.
en {polstring: 0 2px 1px 15px; baggrund: #fff url (ball.gif) venstre center no-repeat; farve: # c00; }
Når du har fået dit ikon, kan du indstille et andet billede som din hover, aktiv og besøgte ikoner for at gøre linket ændret:
en {polstring: 0 2px 1px 15px; baggrund: #fff url (ball.gif) venstre center no-repeat; farve: # c00; } a: svever {baggrund: #fff url (ball2.gif) venstre center no-repeat; } a: aktiv {baggrund: #fff url (ball3.gif) venstre center no-repeat; }
Få dine links til at ligne knapper
Knapper er meget populære, men indtil CSS kom sammen, var du nødt til at oprette knapper med billeder, hvilket gør dine sider længere at indlæse. Heldigvis er der en grænsestil, der kan hjælpe dig med at skabe en knaplignende effekt nemt med CSS.
en {grænse: 4px start; polstring: 2px; tekst dekoration: ingen; } a: aktiv {grænse: 4px input; }
Bemærk, når du lægger farver i starten og indsæt stilarter, er browsere ikke så tilbøjelige til at gøre dem som du kunne forvente. Så her er en mere avanceret knap med farvede grænser:
en {border-style: solid; kantbredde: 1px 4px 4px 1px; tekst dekoration: ingen; polstring: 4px; border-color: # 69f # 00f # 00f # 69f; }
Og du kan også påvirke svingeren og de aktive stilarter i en knap-forbindelse, brug bare disse pseudoklasser:
a: link {border-style: solid; kantbredde: 1px 4px 4px 1px; tekst dekoration: ingen; polstring: 4px; border-color: # 69f # 00f # 00f # 69f; } a: svæver {border-color: #ccc; }
