NinetNet    CSS - Stilmallar    Länkar & Listor   skriv ut  

Länkar

Med CSS är det hur enkelt som helst att förändra utseendet på länkar. Länkar, aktiva länkar och följda länkar kan ha olika egenskaper - eller samma om man hellre vill det!

När man bestämmer länkfärg ska man ange alla dessa tre attribut eller samlingsattributet: a. Glömmer man bort att ange något visas webläsarens färginställningar i stället...

a:link - länk
a:visited - besökt länk
a:active - aktiv länk ( när man klickat på länken )

Eller:

a - gäller alla typer av länkar på sidan

Så skriver du i Stilmallen för att ange färg på dina länkar:

a:link { color: #000000; }
a:visited { color: #666666; }
a:active { color: #000000; }

Vill du att alla typer av länkar ska ha samma färg räcker det här:

a { color: #000000; }

Ta bort understrykning

För att ta bort understrykningen på länkar lägger du till egenskapen text-decoration och anger värdet: none.

a:link { color: #000000; text-decoration: none; }

a:visited { color: #666666; text-decoration: none; }

a:active { color: #000000; text-decoration: none; }

• Kom ihåg att det inte alltid är så smart att ta bort understrykning på länkar annat än i menyer. Besökarna är vana vid att webbsidors länkar är understrukna.

På alla typer av länkar:

a { color: #000000; text-decoration: none; }

Hover

Med egenskapen hover kan man få länken att ändra utseende när muspekaren förs över den.

Här är några exempel:

De ovanstående egenskaperna går finfint att kombinera...

Så här till exempel:

Egenskaperna behöver inte heller vara knutna till just egenskapen hover - utan egentligen vilken typ av text som helst!

VIKTIGT!!
Enligt standarden är det viktigt vilken ordning man skriver in hur länkarna ska se ut...

a:hover MÅSTE komma efter a:link och a:visited för att det ska vara korrekt!

a:active MÅSTE komma efter a:hover för att det ska vara korrekt!

Men i alla webbläsare jag har testat fungerar det ändå!

I alla fall... I den här ordningen ska deklarationerna skrivas in i stilmallen:

a:link { color: #000000; }
a:visited { color: #666666; }
a:hover { color: #000000; }
a:active { color: #000000; }

Det vanligaste när man stajlar sina länkar - är att länkarna på sidan har ett avvikande utseende som förändras något när man för muspekaren över dem.

En besökt länk bör också ha ett annat utseende än obesökta länkar för att man bättre ska kunna orientera sig på sidan. Förslagsvis samma utseende som vid "hover".

Så här till exempel:

a { color: #333333; }
a:visited { color: #666666; }
a:hover { color: #666666; }

Ändra Muspekare

Med kan också använda egenskapen hover för att ändra utseendet på själva muspekaren när den förs över en länk.

Nedan ser du exempel på de muspekare som finns angivna i css-standarden. Observera att de kan se lite olika ut i olika webbläsare. Äldre webbläsare stöder inte den här funktionen.

Man kan också välja att muspekaren ska gälla för HELA sidan oavsett om man för den över en länk eller inte. Då skriver du koden med taggen body som selektor.

Så här i stilmallen - gäller alltså för hela sidan:

body { cursor: pointer; }

Vill du ha olika typer av muspekare för olika länkar skriver du css-koden direkt i länkens starttagg <a> med inlinestyle eller ännu hellre: Ger den speciella länken en klass som definieras i stilmallen.

Så här med inlinestyle i länkens starttagg - gäller för just den länken:

<a href="sida1.html" style="cursor: help">Sida 1</a>

<a href="sida2.html" style="cursor: pointer">Sida 2</a>

• Observera att det inte är korrekt att använda inline-style när man kodar enligt strict standard.

Alla de ovanstående metoderna går finfint att kombinera...

Egen muspekare

Vill du bestämma utseendet på muspekaren HELT själv?
Läs mer under CSS - Finesser.

 Till Toppen 

Listor

Naturligtvis kan du ange stilen på dina listor med CSS. Det görs med egenskapen list-style-type.

Punktlistor

För att bestämma utseende på alla punktlistor på sidan använder man ul som selector i stilmallen:

Skulle du vilja blanda utseende på "punkterna" i en lista kan du ange stilen direkt i taggen <li> i Html-koden eller ännu hellre ge den speciella länken en klass som definieras i stilmallen. Se längre ner.

Så här med inlinestyle i länkens starttagg:

<ul>
<li style="list-style-type: disc">Prick</li>
<li style="list-style-type: circle">Cirkel</li>
<li style="list-style-type: square">Kvadrat</li>
</ul>

• Observera att det inte är korrekt att använda inline-style när man kodar enligt strict standard.

På sidan skulle det kunna se ut så här:

Egen bild

Med CSS kan du till och med ha en egen bild som "punkt" i dina listor:

ul { list-style-image: url(bild.jpg); }

Skulle kunna se ut så här:

Egna klasser

Genom att skapa egna klasser i din stilmall kan du skapa listor med olika utseende på din sida.

Exempel 1

Så här skapar du klassen i Stilmallen:

.cirkellista {
font-family: Times New Roman, serif;
font-size: 11px;
font-weight: bold;
color: #000099;
list-style-type: circle;
}

Klassen anropas i Html-koden så här:

<ul class="cirkellista">
<li>Ett</li>
<li>Två</li>
<li>Tre</li>
</ul>

Så här ser det ut på sidan:

Ett
Två
Tre

Exempel 2

Så här skapar du klassen i Stilmallen:

.bildlista {
font-family: Century Gothic, sans-serif;
font-size: 11px;
color: #000000;
list-style-image: url(bild.jpg);
}

Klassen anropas i Html-koden så här:

<ul class="bildlista">
<li>Ett</li>
<li>Två</li>
<li>Tre</li>
</ul>

Så här ser det ut på sidan:

Ett
Två
Tre

Kombinera

Det går också bra att kombinera olika klasser i samma lista. Då anropar man klasserna direkt från taggen <li>. Här används de båda klasserna från exemplen ovan.

Anropa klasserna från taggen <li>:

<ul>
<li class="cirkellista">Ett</li>
<li class="bildlista">Två</li>
</ul>

Så här ser det ut på sidan:

Numrerade Listor

Genom att använda ol som selector anger du i din stilmall hur dina numrerade listor ska se ut.

Position på "prickarna"

Prickarna en lista hamnar som standard utanför texten. Vill man ändra på det används egenskapen list-style-position med värdet: inside. Värdet "flyttar in" listpunkterna. Motsatsen anges med outside.

Exempel

Så här i stilmallen:

ul { list-style-position: inside; }

Så här på sidan:

Slopa indraget!

Genom att "nolla" listans marginaler med margin och padding kan man bli av med indraget i listan.

Exempel

Om det ser ut så här i stilmallen...

ul { margin: 0; padding: 0; }

...kan se ut så här på sidan: