CSS - hoofdstuk 6

-

Pseudo selector -- Hyperlinks


We bekijken een aantal voorbeelden van de pseudo-class selector. Deze zullen we alleen inzetten om de links in een pagina op te maken. We geven eerst een opsomming:


a:link               hoe ziet een niet-bezochte link eruit
a:visited           hoe ziet een bezochte link eruit
a:hover            hoe ziet een link eruit als je met je muis er over heen gaat
a:active            hoe ziet een link eruit als deze actief, gekozen, wordt

Het zeer belangrijk dat, als je deze selectors inzet, je ze in deze volgorde vastlegt. Je loopt namelijk kans dat je anders niet het gewenste effect krijgt.

Let op!!! In de meeste browsers is de functie a:visited uit veiligheidsoverwegingen uitgeschakeld. Dat betekent dat deze dus niet of slechts gedeeltelijk werkt. Voor een uitleg kijk bijvoorbeeld hier. Om verwarring te vermijden zullen we a:visited niet verder bewerken.

In Dreamweaver kun je de instellingen van elk van de elementen snel instellen.

Klik hier om naar google te gaan


We gaan de links vormgeven. Klik op New CSS Rule in het CSS-Panel. Kies voor samengesteld (op basis van uw selectie)


Je krijgt dan het volgende als je daarna op het pijltje klikt:
(je ziet dat Dreamweaver ook de vereiste volgorde kent!)

figuur 15

We kiezen voor :link en klikken op OK. Je krijgt dan vervolgens de opmaakmogelijkheden voor dit element:

Voor een link is vooral de Decoration van belang: willen we onderstrepen (underline), boven een streepje (overline), doorstrepen (line-through), knipperen (blink) of niets (none). Het is ook mogelijk meerdere effecten tegelijk toe te passen.
Realiseer je dat bij het aanbrengen van een link, de standaardinstelling is dat er een streepje wordt aangebracht!
Een voorbeeld van een link zonder streepjes, ook niet bij aangeklikte links en met een achtergrond is bijvoorbeeld deze:

<!--
a:link {
background-color: #FFFF99;
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
color: #FF9966;
}

-->
</style>   

Er zijn nog veel meer pseudo selectoren. We zullen die hier niet verder behandelen. Wel kun met hover nog aardige effecten bereiken op bijvoorbeeld een div.

<div id="vb2"> Wel kun met hover nog aardige effecten bereiken op bijvoorbeeld een div.</div>

Hierbij gebruik je de CSS style #vb2:hover {
background-color: blue;
}

Let op!!

Bovenstaande werkt op alle links op je webpagina. Wil je dat slechts op een link toepassen dan moet je van de pseudoselector een klasse maken.

.a:link {
font-size: 100px;
background-color: #FF0;
}
.a:hover {
font-size: 400px;
color: #00F;
background-image: url(../jimi.jpg);
}
.a2:link {
font-size: 50px;
background-color: #666;
}
.a2:hover {
font-size: 100px;
color: #00F;
background-image: url(../smurf.jpg);
}

link1 (de link zonder toepassing van de klasse)

link2 klasse a

link3 klasse a2

 

Alternatief

In plaats van een klasse kun je ook gebruik maken van een id (#). Je zet de link dan in een div met een id en verwijst in de css naar de link in deze div.

#hyp a:link {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 40px;
color: #F00;
}
#hyp a:hover {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 80px;
color: #00F;
background-image: url(sv.jpg);
}

Opdracht 1

1. Maak een hyperlink die voldoet aan de volgende eisen:

a. koppeling naar google in een nieuw scherm

b. achtergrond dit plaatje en laten herhalen

c. lettertype 100 px

d. kleur zwart

e. bij aanraken met de muis dit plaatje en niet laten herhalen

f. bij het aanklikken dit plaatje, niet herhalen

Opdracht 2

a. maak een nieuwe hyperlink naar Werenict en zorg ervoor dat bovenstaande effecten daarop niet van toepassing zijn.

b. geef deze hyperlink zelf een aantal effecten mee (link, hover en active)

Opdracht 3

doe hetzelfde nog een keer maar maak nu gebruik van een id.

Opdracht 4

sla het bestand op als css6 en koppel het via een hyperlink aan je index-pagina

 

 

 

 

 

 

 

©jw webdesign