Styla länkarna
Det finns en lång rad metoder för att ändra utseendet på vanliga textlänkar, utan att använda en enda bild.
Alla de här länkarna styrs i grunden av en och samma stilmall som tar bort understrykningen och ger en ändrad textfärg när muspekaren förs över länktexten. Stilmallen ser ut så här:
<STYLE TYPE="text/css">
A, A:LINK {font-family:arial, sans-serif; font-size:10pt; text-decoration:none; color: Blue;}
A:VISITED {color: Purple;}
A:HOVER {color: Fuchsia;}
</STYLE>
Du kan ändra stilmallen efter egen smak, men du bör åtminstone behålla "text-decoration: none;", eftersom de flesta metoderna ger ett sämre resultat om länkarna är understrukna.
Om du tänker använda en av metoderna nedan för att sätta stil på länkarna, kan du utöka stilmallen med den eller de egenskaper som är gemensamma för alla länkar, till exempel bakgrundsfärgen. Dessutom kan du bygga på med diverse klasser, men det förklarar jag i texten nedan.
Läs även om hur du får stilmallen att gälla för alla dina webbsidor.
Jag
har kontrollerat alla metoderna nedan i Internet Explorer 6 och Netscape
6. Alla fungerar i IE 6, men en del fungerar inte i Netscape. I dessa fall har jag
markerat detta med en bild och en förklarande text.
Vissa metoder som fungerar i Netscape 6 fungerar inte i tidigare versioner av Netscape. Ett exempel är pseudoklassen A:hover, som inte fungerar i Netscape 4.
Först den allra mest grundläggande länken, utan några som helst krusiduller:
<A HREF="länkens URL">Normallänk</A>
Ett enkelt sätt att framhäva länken är att lägga till en bakgrundsfärg:
<SPAN STYLE="background-color: #EEE8AA;">
<A HREF="länkens URL">Bakgrundsfärg</A>
</SPAN>
Nästa steg blir att göra plattan med bakgrundsfärgen litet större än själva texten. Metoden fungerar inte i löpande text, men vi kan använda den för att göra en fuskknapp:
<SPAN STYLE="background-color: #8FBC8F; width:100; height:30; padding:6px; text-align: center;">
<A HREF="länkens URL">Färgplatta</A>
</SPAN>
Den färgade plattan bakom länken kan få en ram, gärna i en avvikande men harmonierande färg:
<SPAN STYLE="background-color: #F0E68C; width:130; height:30; padding:6px; border-top: 2px solid #F0B48C; border-right: 2px solid #F0B48C; border-bottom: 2px solid #F0B48C; border-left: 2px solid #F0B48C; text-align: center;">
<A HREF="länkens URL">Färgplatta med ram</A>
</SPAN>
I stort sett samma kod, men med en "width" som är för liten för texten, ger en radbruten länk.
Inget hindrar att vi använder två olika färger på ramen:
I Netscape bryts plattan sönder till tre plattor som ligger
överlappande. Det här är den enda metoden som blir direkt ful i Netscape.
<SPAN STYLE="background-color: #F5DEB3; width:100; height:30; padding:6px; border-top: 2px solid #F5BEB4; border-right: 2px solid #EBF5B4; border-bottom: 2px solid #EBF5B4; border-left: 2px solid #F5BEB4; text-align: center;">
<A HREF="länkens URL">Färgplatta med ram och radbrytning</A>
</SPAN>
Med ett glödfilter kan vi sätta litet extra piff på länken. Gör värdet "width" tillräckligt stort så att effekten inte klipps tvärt av i ytterkanterna.
I Netscape får
vi en helt vanlig länk utan några effekter alls.
<SPAN STYLE="position:relative; width:60; height:35; filter:glow(color=#FFA500,strength=6);
text-align: center;">
<A HREF="länkens URL">Textglöd</A>
</SPAN>
Här skapas en knapp utan att vi behöver använda någon bild. De flesta egenskaperna kan varieras.
Filtret
"glow" fungerar inte i Netscape. I stället får vi en enkel ram i
två färger.
<SPAN STYLE="position:relative; width:150; height:30; padding: 5px; border-top: 3px solid #F0B880; border-right: 3px solid #F080B8; border-bottom: 3px solid #F080B8; border-left: 3px solid #F0B880; text-align: center; filter:glow(color=#F08080,strength=6)">
<A HREF="länkens URL" STYLE="font-size: 12px">Glödknapp</A>
</SPAN>
Länktexten kan få en skugga. Vi sätter en färg på skuggan och anger en riktning för den. Riktningen anges i gradtal med parametern "direction" och de åtta värden som kan användas är 0 – 315 i jämna 45-steg.
Filtret "shadow" fungerar inte i Netscape. Precis som med "Textglöd" ovan får vi i stället en helt
normal länk.
<SPAN STYLE="position:relative; width:120; filter:shadow (color=#C0C0C0, direction=315); text-align: center;">
<A HREF="länkens URL">Skuggad text</A>
</SPAN>
Även filtret "dropshadow" skapar en skugga, men den ger i stället ett intryck av att texten lyfts ut framför skärmen eller av att skuggan sjunker in bakom den. Vi kan ange en färg för skuggan. Med parametrarna "offX" och "offY" anger vi har långt från texten skuggan skall placeras. Dessa parametrar anges i pixlar och värdena kan vara positiva eller negativa.
Observera att värdet på "height" skapar ett ökat avstånd till det efterförljande innehållet. Du kan minska detta avstånd genom att minska på värdet, men om du gör det för litet kommer skuggan att bli avklippt. Detta gäller även för nästa metod.
Filtret "dropshadow" fungerar inte i Netscape. Precis som med "Textglöd" ovan får vi i stället en helt
normal länk.
<SPAN STYLE="position:relative; width:120; height:30; filter:dropshadow (color=#808080, offX=-6, offY=5); text-align: center;">
<A HREF="länkens URL">3D-skuggad text</A>
</SPAN>
I stället för att visa 3D-skuggan redan från början, kan vi ta fram
den med muspekaren. Vi lägger en ny klass i sidans stilmall (se 3D-knapp
litet längre ned) och anropar klassen från A-taggen. Inte heller det här
kommer att fungera i Netscape.
Klassen innehåller i stort sett samma attribut som ovan, men med två viktiga undantag. Båda beror på att länken inte får sitt förändrade utseende förrän muspekaren rör vid den.
För det första tar vi bort "text-align: center;" därför att länktexten annars kommer att hoppa ut till mitten av elementet där den befinner sig.
För det andra ger vi både X och Y positiva värden. Annars finns det risk för att en del av skuggan hamnar under vänstermarginalen.
Eftersom skuggan får det efterföljande innehållet att förflyttas, passar den här metoden bäst i till exempel en länkmeny som ligger i en tabell för sig själv.
Det här är klassen som skall ligga i HEAD-elementet:
A:hover.3D {position:relative; width:120; height:30; filter:dropshadow (color=#808080, offX=6, offY=5);}
Och det här är anropet från A-taggen.
<A class="3D" HREF="#">länkens URL</A>
Vi kan markera länkar med ett streck under länktexten och ett ovanför. Den här markeringen kan användas även i löpande text, och eftersom stilattributet läggs direkt i A-taggen fungerar det även om sidans stilmall anger "textdecoration: none" för länkarna.
<A HREF="länkens URL" STYLE="text-decoration:overline underline">Linjemarkering</A>
Ett enkelt sätt att förklara vad en länk innehåller är att skriva ett länktips. Vi gör radbrytningar i tipstexten, utan att använda BR-taggar, där vi vill att texten skall brytas. Utan dessa radbrytningar visas texten som en enda rad, men det är lättare att läsa flera korta rader än en lång.
Det här fungerar delvis i Netscape, men
tipstexten radbryts inte som i Internet Explorer utan visas i en enda lång
rad.
<A HREF="länkens URL" TITLE="Här skriver du länktipset.
Det visas bara några sekunder,
så gör inte texten för lång.">Länktips</A>
Så här gör vi en 3D-knapp utan att använda bilder eller JavaScript. Om sidan redan har en stilmall, bygger vi ut den med en klass som sedan anropas från A-taggen. I annat fall lägger vi in en stilmall på sidan. Det gör att vi kan ge enstaka länkar det här utseendet, men låta övriga länkar få det normala utseendet eller följa den vanliga stilmallen.
Stilmallen läggs i HEAD-elementet – kopiera gärna härifrån:
<STYLE type="text/css">
A:link.knapp {text-decoration: none; color: #ffffff; background-color: #FF4040; border-top: 2px solid #FFC0C0; border-right: 2px solid #C00000; border-bottom: 2px solid #C00000; border-left: 2px solid #FFC0C0; padding: 3px; width: 60px; height="20"}
A:active.knapp {text-decoration: none; color: #ffffff; background-color: #FF4040; border-top: 2px solid #FFC0C0; border-right: 2px solid #C00000; border-bottom: 2px solid #C00000; border-left: 2px solid #FFC0C0; padding: 3px; width: 60px; height="20"}
A:visited.knapp {text-decoration: none; color: #ffffff; background-color: #FF4040; border-top: 2px solid #FFC0C0; border-right: 2px solid #C00000; border-bottom: 2px solid #C00000; border-left: 2px solid #FFC0C0; padding: 3px; width: 60px; height="20"}
A:hover.knapp {text-decoration: none; color: #FFFF00; background-color: #FF4040; border-top: 2px solid #C00000; border-right: 2px solid #FFC0C0; border-bottom: 2px solid #FFC0C0; border-left: 2px solid #C00000; padding: 3px; width: 60px; height="20"}
</STYLE>
Om det redan finns en stilmall på sidan, tar vi bort första och sista raden. Sedan anropas klassen .knapp från A-taggen:
A class="knapp" href="länkens URL">3D-länk</A>
Vi lägger till ytterligare en klass i stilmallen. Den gör att vi kan byta färg på både bakgrund och text när muspekaren förs över länken. Den här metoden kan användas även i löpande text, men det är viktigt att välja färger med hög kontrast.
Klassen placeras i stilmallen som i föregående exempel:
A:hover.byta {color:FFFFFF; background-color:000000;}
Anropet läggs sedan i A-taggen:
<A class="byta" href="länkens URL">Ny bakgrund</A>
Med en klass kan vi ändra textens utseende när muspekaren förs över den. Metoden kan användas i löpande text, men om vi ändrar från vanlig text till halvfet, kommer resten av texten att förskjutas.
Klassen läggs i stilmallen som i föregående exempel:
A:hover.stor {font-weight: bold;}
I A-taggen lägger vi anropet av klassen:
<A class="stor" href="länkens URL">Halvfet text</A>
Eftersom vi kan kombinera olika parametrar i en och samma klass, kan vi skapa nästan hur många länkstilar som helst. I den här länken byter vi bakgrundsfärg, teckensnitt, teckenstil, teckenstorlek och textfärg, samtidigt som vi lägger till överstreck och understreck.
Klassen läggs i stilmallen:
A:hover.allt {background-color: #FFE4E1; font-family:"times new roman"; font-style: italic; font-weight: bold; font-size:14pt; color: #FF1493; text-decoration: underline overline;}
Och anropet i A-taggen:
<A class="allt" href="länkens URL">Byt allt</A>
Även om länkarna normalt inte är understrukna, kan vi lägga till en understrykning när muspekaren förs över länken. Även här använder vi en klass:
A:hover.streck {text-decoration: underline;}
Och anropet ligger som vanligt i A-taggen:
<A class="streck" href="länkens URL">Stryk under</A>
Stilmall för alla sidor
Om du vill använda förändrade länkar på flera sidor, bör du göra en stilmall som alla sidor kan använda utan att du behöver lägga stilmallen på varje sida. Den stilmallen kan du sedan bygga ut med egenskaper för praktiskt taget alla objekt på sidan.
Jag tar den mycket enkla stilmallen i inledningen som exempel:
A, A:LINK {font-family:arial, sans-serif; font-size:10pt; text-decoration:none; color: Blue;}
A:VISITED {color: Purple;}
A:HOVER {color: Fuchsia;}
Den här texten skriver du - eller kopierar härifrån - i en vanlig textredigerare som Anteckningar. Spara detta som till exempel minstil.css och lägg filen i rotmappen till dina hemsidor.
På varje sida som skall använda stilmallen, placerar du i HEAD-elementet ett anrop för stilmallen:
<LINK REL="stylesheet" TYPE="text/css" HREF="minstil.css">
Se sedan till att sökvägen till minstil.css blir rätt på alla sidor.
© SupportData.Net