Naam:  Wachtwoord:        Wachtwoord? Naam?   |   Register
Home CSS Starten met CSS

Starten met CSS

PDF Afdrukken E-mail
Webdesign - CSS

Grondbeginselen van CSS

Voordat we aan de slag gaan met het combineren van HTML en style sheets nemen we eerst een aantal grondbeginselen van de taal onder de loep. CSS is gebaseerd op rules en style sheets. Een rule is een definitie van een stilistisch aspect van één of meerdere elementen, bijvoorbeeld de kleur groen toekennen aan de <H2> tag. Een style sheet bevat op zijn beurt weer één of meerdere rules.

In het volgende voorbeeld ziet u de simpelste vorm van een style sheet, namelijk die met één rule. De rule geeft aan dat alle headings van het type <H2> groen gekleurd zijn.
H2 { color: green}
Deze rule bestaat uit twee onderdelen: een selector (alles voor de openings accolade) en een declaration (alles binnen de accolades). De declaration kan vervolgens worden onderverdeeld in een property (eigenschap) en een value (waarde). In dit voorbeeld is color de property en green de value. Eigenschap en waarde worden van elkaar gescheiden door een dubbelpunt. Kent u meerdere eigenschappen toe aan een selector dan worden deze gescheiden door een puntkomma.

H2 { color: green; font-style: italic; font-size: large}

Omdat één van de doelstellingen van CSS het terugbrengen van het dataverkeer is, zou het niet verstandig zijn om extreem lange codes op te nemen in het HTML-document. Stel dat u behalve de H2 tag ook alle headings van het type H1 groen, cursief en groot wilt maken. Normaal gesproken zou u dat dan als volgt doen.

H1 { color: green; font-style: italic; font-size: large}
H2 { color: green; font-style: italic; font-size: large}

Om dit in te korten, kunt u in CSS ook de selectors samenvoegen.

H1, H2 { color: green; font-style: italic; font-size: large}

Maar wat zou u doen als u alle inhoud op een pagina blauw wilt hebben en alle headings van het type <H3> rood? De meest logische manier is om alle elementen te benoemen waarvan u gebruik maakt. De style sheet zou er zo kunnen uitzien.

H1 { color: blue }
H2 { color: blue }
P { color: blue }
LI { color: blue }
LU { color: blue }
H3 { color: red }

Niet echt handig. Gelukkig kent HTML ook de zogenaamde ouder/kind-relaties, waardoor kinderen kunnen erven van de ouder. De ouder van alle tags in het bovenstaande voorbeeld is de <BODY> tag. Als we aan de <BODY> tag de kleur blauw toekennen zal de hele pagina (afgezien van de achtergrond) in het blauw worden weergegeven. Omdat we de <H3> tag rood willen hebben, geven we alleen daar de specificatie van op. De style sheet ziet er dan zo uit.

BODY { color: blue }
H3 { color: red }

Bij het erven wordt één belangrijke regel in acht genomen, namelijk dat alles wat specifieker is zal overwinnen. In het vorige voorbeeld is de tag <H3> specifieker gedefinieerd en zal dus rood worden weergegeven in plaats van blauw. Deze regel geldt zowel voor specificaties in style sheets als in de gewone HTML-tags. Bij deze HTML-tags kunt u er van uitgaan dat alles wat is genesteld voorrang krijgt boven de specificatie in de style sheet. Twee voorbeelden.

Voorbeeld 1:
Als u in de body van het document heeft staan,

<H1>Wie zal er <I>winnen</I></H1>

en in de style sheet

h1 { color: red }

dan zal de hele regel rood worden weergegeven en het woord 'winnen' cursief staan.

Voorbeeld 2:
Als u in de body van het document heeft staan,

<H1>Wie zal er <I><FONT color="blue">winnen</FONT></I></H1>

en in de style sheet

H1 { color: red }

dan zal de hele regel rood worden weergegeven en zal het woord 'winnen' cursief en blauw zijn. In Cascading Style Sheets krijgt alles wat gespecificeerder is voorrang.

Deel dit bericht met anderen

Submit to Delicious Submit to Digg Submit to Facebook Submit to Google Bookmarks Submit to Stumbleupon Submit to Technorati Submit to Twitter Submit to LinkedIn

Commentaar (0)add comment


Schrijf commentaar

feedToon/Verberg commentaar formulier
kleiner | groter
password
 

busy
 

Lente Actie!

Omdat het lente is, vieren we feest! We geven daarom alleen in de lente 50 euro korting op alle basistrainingen van Avid Studio, Magix Video deluxe, Sony Vegas Movie Studio en Adobe Premiere Elements.

U betaalt dus geen 149 euro per trainingsdag, maar 99 euro. Schrijf je snel in, want er zijn maar een beperkt aantal plaatsen beschikbaar!

Cursussen en trainingen

Dvscene geeft trainingen en cursussen in het trainingscentrum van Iscenes multimedia.

Er zijn verschillende cursussen per pakket voor beginners en gevorderden.  U kunt zich inschrijven voor de volgende cursussen en trainingen:

 

 

 

Dvscene.nl is onderdeel van Iscenes multimedia specialist in videomontage-, cms- en cameratrainingen. Copyright © 2012. Dvscene.nl.