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 voorbeeld2.html.

Je hebt dan onderstaand beeld:

Een aardig detail is overigens dat je als bestandsnaam nu voorbeeld2.html* ziet. Het * duidt er op dat je de laatste wijzigingen nog niet opgeslagen hebt. Probeer steeds tussentijds op te slaan, Ctrl+S is hiervoor de toetsencombinatie.

Selecteer Inleiding en geef deze met behulp van Format in het Properties-Panel het kenmerk Heading1.

In de Code view 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.
Zorg dat het CSS-Panel uitgeklapt is en klik op New CSS Rule (zie onderstaande figuur)

Je krijgt dan de gelegenheid om de stijlregel te maken:

Kies voor Tag en dan h1 en voor This document only; we hebben dan gekozen voor de opmaak van <h1> en de opmaakt geldt alleen voor deze pagina.

We hebben nu dus de selector gedaan. Nu moet de declaratie (attribuut met waarde) gemaakt worden. Klik op OK om de declaratie te maken.


figuur 11

Je moet dus ook aangeven welke selector je wilt en dan de naam van de selector

Vervolgens ontstaat na het klikken van OK het volgende scherm:

 

We willen nu alleen de kleur wijzigen dus zetten we Color, (het attribuut) op oranje (de waarde): #FF6600. Je begrijpt dat hier erg veel mogelijkheden liggen voor de opmaak van deze tag (en uiteraard vele anderen!)
Klik op OK om de declaratie af te ronden en te bekijken hoe de kop er nu uitziet!


 

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

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

 


Het is geheel in overeenstemming met de structuur zoals aangegeven is in de inleiding: selector { declaratie }
In het CSS-Panel zie je de stijlregel ook terug:

 

 

 

 

 

 

 

Je ziet overigens dat de inleiding ook de opmaakkenmerken heeft gekregen van de body. Dat is logisch omdat <h1> ook “in” <body> zit. De h1-tag erft de kenmerken van de body; het is een afstammeling van de body. Dit is een ander belangrijk aspect van CSS. Voor beginnende CSS-ers leidt dat nog wel eens tot verwarring. Zie hoofdstuk 2 voor een inleiding op de overerving. We komen later nog weer terug op de overerving.

De grootte van de letter (font-size).
Maak nu ook de volgende stijlregel aan:

body {
font-size: 100%;
}


Het lijkt misschien wat gek om voor de font-size 100% op te geven. Toch is dat een goede gewoonte. Zo weet je zeker dat de browser zelf niet bepaalt wat de grootte is. De browser heeft zelf namelijk ook een ingebouwd style sheet. Indien er voor een element geen stijlkenmerken worden opgegeven, wordt de interne regel van de browser gebruikt.
Wil je de grootte van het font opgeven, gebruik dan een relatieve maat zoals procenten of em en zeker geen pixel, punten of cm.

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