CSS - hoofdstuk 3

-

Soorten Selectors

Er zijn 4 hoofdsoorten selectors te onderscheiden

  1. Tag selector
  2. Klasse selector
  3. ID-selector
  4. Samengesteld

Met behulp van Dreamweaver zullen we ze gaan bekijken.

1. Tagselector


Deze wordt gebruikt om de opmaak van een tag te verfijnen. Stel we willen <h1> een oranje kleur geven. We gaan dan als volgt te werk:

Open voorbeeld.html. Kopieer de tekst en plak het in een nieuw html bestand in Dreamweaver. Let op: je kiest voor plakken speciaal en vervolgens de tweede mogelijkheid

Je hebt dan onderstaand beeld:

 

Selecteer Inleiding en geef deze met behulp van Formaat in het Properties-Panel het kenmerk Kop1.

In de code weergave zie je nu het volgende:

<body>
<h1>Inleiding </h1>
<p>Lorem ipsum dolor sit amet,……

Je ziet dat de inleiding nu een h1-tag heeft. We gaan <h1> met behulp van CSS oranje maken.

In het CSS paneel, rechter muisknop, nieuw

Je krijgt dan de gelegenheid om de stijlregel te maken:

Kies voor Tag en dan h1;

Stel de kleur in op oranje #FF6600

 

In de Code View zie je dat terug in het style sheet met de regel:

<style type="text/css">
<!--
h1 {
color: #FF6600;
}
-->
</style>

 

Op deze manier kun je dus alle html tags een aparte opmaak meegeven. Bedenk wel dat als je een <h1> een stijlkenmerk meegeeft, dat dit geldt voor alle <h1> op de pagina. Dat is niet altijd wat je wilt, in het vervolg zullen we zien hoe dat anders kan.

Dat de CSS van toepassing is op een tag zie aan het feit dat er in de CSS voor de h1 verder niets staat.

h1 {
color: #FF6600;
}

Opdrachten:

1. Open een nieuw bestand en sla dit op als CSS3

2. Geef de pagina de achtergrondkleur grijs

3. Zet in het bestand 5 alinea's Lorem Ipsum

4. geef de alinea's een gele achtergrondkleur

5. Geef de alinea's het lettertype Lucida Sans Unicode, Lucida Grande, sans-serif, met als grootte 1 em

6. Zet boven iedere alinea een kop Alinea 1, 2 enz en geef deze in HTML de grootte H2

7. Geef de kop de kleur rood

8. Maak een apart CSS bestand met bovenstaande opmaak.

9. Koppel dit aan het HTML bestand en sla dit op als CSS3

10. Koppel dit bestand aan je indexpagina.

 

 

 

 

 

 

 

 

 

©jw webdesign