Deze les is gemaakt door: V van Dalen

Cssles 4; Properties en selectors!

In de voorgaande lessen ging de aandacht vooral uit naar; Wat is css en hoe is het toe te passen! U weet nu hoe u van die bestanden moet maken, maar hoe kunnen we nou echt css maken? Welke selectors en properties zijn er(voor properties en selectors- zie les1)?
We gaan nu zelf een cssbestand maken, maar niet voordat we dit op een rijtje hebben gezet:
1)Er zijn drie soorten Casting Style Sheets, namelijk embedded, linked en inline. 
2)Er zijn selectors, properties en values!! 

We gaan in deze les dus leren hoe we een cssbesstand maken en wat er allemaal extra kan in zo'n bestand(commentaar toevoegen, meer properties bij een selector!).
Laten we beginnen(voor alle duidelijk; Sommige dingen heeft u al gezien in les 1 of 2)!!

Laten we beginnen
Laten we beginnen met het begin! De browser moet weten dat het om css gaat, dus
<STYLE TYPE="text/css"> of <style> en weer afsluiten met </style>

<STYLE TYPE="text/css">
<!--
De csscodes
//-->
</style>

Zo ziet een standaard cssdocument eruit! Nu moeten we nog dingen toe gaan voegen. De selectors zijn vaak htmltags, zoals h1, b, alink, vlink enzovoort.

Laten we h1 en h4 als voorbeeld nemen!

<STYLE TYPE="text/css">
<!--
h1 {color:gold; font-family:Times New Roman; font-size:18pt; font-weight:bold; font-style:normal; text-decoration:underline }
h4{color:silver; font-family:Times New Roman; font-size:14pt; font-weight:italic; font-style:normal; text-decoration: none}
//-->
</style>

Dan krijgen we dit:

Dit is h1

Dit is h4

U ziet de leuke effecten die er aan toegevoegd zijn!! Voor alle duidelijk: Alles wat blauw is in het voorbeeld is een selector(dat is vaak een htmltag)! Alles wat rood is in het voorbeeld is een propertie! En alles wat teal is in eht voorbeeld is een value!

U ziet nu ook de structuur van de css!
Zet eerst de selector neer! Bijvoorbeeld h1. Open daarna met dit: { Hierna kunt u een propertie toevoegen met een bijbehorende value! Wilt u voor een selector meerdere properties, gebruik dan een ;(een punt komma dus!)
Oftewel: selector{propertie:value;propertie:value}

Pseudo

Zoals u weet zijn er verschillende hyperlinks; actieve, bezocht, actieven en de zgn hoverlink! Laten we er is een voorbeeld bijnemen:
In de <head> Plaatst u dit!

<style type="text/css">
<!--
A:link {COLOR: red; CURSOR: hand; TEXT-DECORATION: none}
A:visited {COLOR: red; CURSOR: hand; TEXT-DECORATION: none}
A:active {COLOR: red; CURSOR: hand; TEXT-DECORATION: none}
A:hover {COLOR: blue; CURSOR: hand; TEXT-DECORATION: none}
//-->
</style>
In de body plaatst u een hyperlink!
Dan krijgt u dit:

Een link

Opmerking; U kunt ook meerdere properties toevoegen zoals tekstgrootte, lettertype enzovoort!
Opmerking; Zodra u met uw muis over de link gaat wordt die blauw dat is de hover!
Belangrijk; bij h1 en h4 was de A: niet belangrijk hier moet het!!

Wat heeft u geleerd?
<><Wat er nog meer mogelijk is met css!
<><Dat u links kan laten verkleuren met css!

U heeft nu de basis onder de knie! In het volgende en laatste hoofdstuk gaat de aandacht uit naar de extra opties van de css!

Vincent

<Vorige les||Volgende les>