login  Naam:   Wachtwoord: 
Registreer je!
 Tutorials
Tutorials > CSS

Gegevens:
Geschreven door:
 SmokaLot
Moeilijkheidsgraad:
 Normaal
Hits:
 17363
Punten:
Aantal punten:
  (3.2)
Aantal stemmen:
 5
Stem:
 Niet ingelogd
Nota's:
 Lees de nota's (6)
 



Tutorial:

Selectors

1. Class selectors
2. ID selector
3. Pseudo Class selectors

1. Class selectors


Class selectors worden veel gebruikt in Style Sheets. Veronderstel dat we een paar <h1> tags in ons HTML document hebben die we een verschillende kleur willen geven. Als we dit gebruiken:

h1 { color:yellow; } dan zullen alle <h1> tags een gele kleur hebben. Maar wat als we een gele, blauwe en rode hoofding willen hebben? Om dit te doen gebruiken we "classes".

Een voorbeeld:

<head>
<style type="text/css">
.yellow { color:yellow; }
.blue { color:blue; }
.red { color:red; }
</style>
</head>
<body>

<h1 class="yellow">Hoofding</h1>
<h1 class="blue">Hoofding</h1>
<h1 class="red">Hoofding</h1>
</body>

Geeft ons dit resultaat:

Hoofding

Hoofding

Hoofding



NOTA 1:
Als je een 'class' definieert dan MOET ze voorafgegaan worden door een . (punt). De naam van de 'class' kan eender welke naam zijn. De naam van de 'class' die je aan de HTML tag toevoegd MOET dezelfde zijn als de naam die je aan de 'class' gegeven hebt in de Style Sheet! Dus, als je een 'class' zoals deze definieert:
.yellow { text-color:yellow; } dan MOET je dit gebruiken:
<h1 class="yellow">

NOTA 2:
Van zodra je een 'class' gedefinieerd hebt kan je hem gebruiken in verschillende HTML tags.

Een voorbeeld:

<head>
<style type="text/css">
.red { color:red; }
</style>
</head>

<body>
<h1 class="red">Hoofding</h1>
<em class="red">wat tekst hier</em>
<p class="red">Welkom op mijn pagina!</p>
</body>

Geeft ons dit resultaat:

Hoofding

wat tekst hier

Welkom op mijn pagina!


NOTA 3:
'Classes' kunnen ook aan 1 enkel stijl element gegeven worden.

Bijvoorbeeld:

<head>
<style type="text/css">
h1.red { color:yellow; }
</style>
</head>

<body>
<h1>Deze hoofding is niet rood</h1>
<h1 class="red">Deze hoofding is wel geel</h1>
</body>

Geeft ons dit resultaat:

Deze hoofding is niet rood

Deze hoofding is wel rood


 top
2. ID selectors:

Verwant met class selectors. Het enige verschil is dat een ID voorafgegaan moet worden met een # in de style sheet terwijl de HTML tag het woord "ID" moet bevatten.

Een voorbeeld:

<head>
<style type="text/css">
#yellow { color:yellow; }
#blue { color:blue; }
#red { color:red; }
</style>
</head>

<body>
<h1 id="yellow">Hoofding</h1>
<h1 id="blue">Hoofding</h1>
<h1 id="red">Hoofding</h1>
</body>

Resultaat:

Hoofding

Hoofding

Hoofding

NOTA:
Als je een ID definieert dan MOET ze voorafgegaan worden door een #. De naam van de ID kan eender welke naam zijn. De naam van de ID die je aan de HTML tag toevoegd MOET dezelfde zijn als de naam die je aan de ID in de Style Sheet hebt gegeven!

Dus, als je een ID zoals deze definieert:
#yellow { text-color:yellow; }
dan MOET je dit gebruiken:
<h1 ID="yellow">.

Nota's 2 en 3 van de class selector zijn ook van toepassing op de ID selector!

 top
3. Pseudo Class selectors: A:link A:visited A:hover A:active

Deze pseudo classes worden gebruikt voor het aanmaken van links (HTML tag:<a>). Ze laten je toe de links aan je wensen aan te passen.

Een voorbeeld:

<head>
<style type="text/css">
A:link { color: red; }
A:visited { color: blue; }
A:hover { color: green; }
A:active { color: lime; }
</style>
</head>

<body>
Bezoek mijn pagina door <a href="http://mijnadres.com">hier te klikken</a>
</body>

Ziet er zo uit in je browser:

Bezoek mijn pagina door hier te klikken


A:link { color: red; } betekent een rode link.
A:visited { color: blue; } betekent 'bezochte links' worden blauw.
A:hover { color: green; } zal de link groen maken als men er met de cursor overgaat.
A:active { color: lime; } zal de link lichtgroen maken als men er op klikt.

NOTA 1:
Je MOET deze pseudo classes in deze volgorde gebruiken!

NOTA 2:
De volgende vorm is ook geldig:

A:link { color: red; } = :link { color: red; }
A:visited { color: blue; } = :visited { color: blue; }
A:hover { color: green; } = :hover { color: green; }
A:active { color: lime; } = :active { color: lime; }

NOTA 3:
Deze pseudo classes kunnen ook tesamen met classes gebruikt worden. Veronderstel dat je groene en blauwe links op 1 pagina wil hebben.
Dan kunnen we dit zo doen:

<head>
<style type="text/css">
A.green:link { color: green; }
A.green:visited { color: red; }
A.green:hover { color: white; }
A.green:active { color: lime; }
A.blue:link { color: blue; }
A.blue:visited { color: red; }
A.blue:hover { color: lime; }
A.blue:active { color: white; }
</style>
</head>

<body>
Bezoek mijn pagina door <a class="green" href="http://mijnadres.com">hier te klikken</a> <br>
Maar je kan ook <a class="blue" href="http://mijnvriend.com">de pagina van mijn vriend</a>bezoeken.
</body>

Ziet er zo uit:

Bezoek mijn pagina door hier te klikken
Maar je kan ook de pagina van mijn vriendbezoeken.

 top>

« Vorige tutorial : Lists Volgende tutorial : Z-index »

© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.015s