Font betekent lettertype, de vele font eigenschappen wijzigen dan ook de opmaak van je lettertype. Hiermee bepaal je het lettertype.

Maat: px

Weergave met pagina beginnen:

Download "Font betekent lettertype, de vele font eigenschappen wijzigen dan ook de opmaak van je lettertype. Hiermee bepaal je het lettertype."

Nora Meijer
6 jaren geleden
Aantal bezoeken:

1 Stijlregels I Nu je de verschillende soorten CSS kent kan je deze ook gaan toepassen. Onthoudt dat alle opmaak in xhtml met CSS gemaakt moet worden. Tegenwoordig zijn er meer dan 200 CSS properties, deze allemaal bespreken zou ons te ver brengen, we zullen daarom de meest gebruikte bespreken. Deze les handelt over de sim pele pure opm aak eigenschappen. Voor de eerder exotische eigenschappen kan je terecht op de site van het W3C. Om echt met deze eigenschappen te leren werken moet je ze proberen, enkel dan zal je ze onder de knie krijgen. Font betekent lettertype, de vele font eigenschappen wijzigen dan ook de opmaak van je lettertype. font-family font-size color Hiermee bepaal je het lettertype. Hiermee bepaal je de grootte van het lettertype. Hiermee geef je de letters een kleur. Een kleur wordt hexadecimaal geschreven en bestaat uit 3 hexadecimale getallen, 1 voor de R,G en B van de RGB-waarde. De RGB waarde vertelt een beeldscherm hoeveel rood, blauw en groen er in een bepaalde kleur moet zitten om de kleur te bekomen. Voor meer informatie over het hexadecimale talstelsel: LINK NAAR SITE MET TALSTELSEL Je kan ook gewoon één van de constanten pakken als kleuren. vb. st yle= color: #ff0000; vb. st yle= color: black; font-style Met font-style kan je probleemloos tekst in italic (= de schuine variant van het lettertype) zetten of obllique (bij oblique worden de gewone letters simpelweg schuin gezet). mogelijke waarden : Italic Oblique

2 font-weight Wanneer je de dikte of vette van het lettertype wil instellen gebruik je font-weight. normal bold bolder lighter font-variant Bij font variant kan je instellen of je letters er als small-caps moeten uitzien, ja dan nee. normal small-caps Backgrounds (=achtergrond) kunnen op vele vlakken gecreëerd worden. Zowel inline (in één regel) als over een gehele pagina, of een alinea. background-color Hiermee geef je een achtergrond een kleur. < body style= background-color:black; > </body> Voegt een achtergrondafbeelding toe. Mogelijke waarden: URL( link ) none < body style= background-image: URL ('images/foto.jpg') > </body>; backgroundimage backgroundrepeat Geeft je de mogelijkheid een afbeelding te herhalen of niet te herhalen. Mogelijke waarden:

3 repeat repeat-x repeat-y no-repeat vb. background-repeat: repeat-x; Geeft je de mogelijkheid de afbeelding mee te laten scrollen met de inhoud of de afbeelding te laten staan. scroll fixed backgroundattachment backgroundposition Bepaalt de startpositie van de afbeelding die je met background-image hebt toegevoegd. top left top center top right center left center center center right bottom left bottom center bottom right x-%, y-% in percentage van de window x-pos, y-pos in pixels vb background-position: top left; background-position: 0% 0%; background-position: 10px 10px)

4 Je kunt nu al je lettertypes en je achtergrond opsmukken, nu kan je ook nog je tekst in het algemeen een finishing touch geven. text-decoration Voegt decoratie toe aan je tekst zoals bv onderlijning van de tekst tussen bijvoorbeeld je <div> of <span> none underline overline linetrough blink text-transform vb < div style= text-decoration: underline; > Deze tekst is onderlijnd</div> Zorgt voor een transformatie van de letters in een element zoals een <div> of <span>. capitalize uppercase lowercase none text-align vb. < div style= text-transform:capitalize; > < / div> Bepaalt de alineëring van tekst in een element. left right center justify vb. text-align:justify; text-indent Zorgt voor het inspringen van de eerste regel tekst.

5 vb. text-indent: 20px; -lengte- -percentage- vertical-align Bepaalt de verticale alineëring van een element zoals een <div> of <span> of <img />. Experimenteer hiermee om hun betekenis te vinden. baseline sub super top text-top middle bottom text-bottom -lengte- in pixels -percentage- word-spacing vb img { vertical-align: top } Verhoogt of verlaagt de ruimte tussen woorden. Mogelijke waarden: normal -lengte- in pixels vb. { word-spacing: 10px } letter-spacing Verhoogt of verlaagt de ruimte tussen letters. normal -lengte- line-height vb. p {letter-spacing: 10px} Bepaalt de afstand tussen twee regels tekst. Mogelijke Waarden: normal -nummer- -lengte- -

6 percentage- vb. div { line-height: 1.4 } div { line-height: 16pt } div { line-height: 120% } De margin properties worden gebruikt om de afstand tussen de rand van de window en een zeker element aan te duiden. margin-top margin-bottom margin-left margin-right De mogelijke waarde wordt in pixels uitgedrukt. < div style= m argin-left: 20px; > 20 px< / div>

7 This document was created with Win2PDF available at The unregistered version of Win2PDF is for evaluation or non-commercial use only.

Vergelijkbare documenten

Stelt de voorgrondkleur van de tekst van een element in. Stelt in hoe de achtergrondfiguur moet worden herhaald, standaard: repeat.

OVERZICHT CSS - EIGENSCHAPPEN Eigenschap Beschrijving Mogelijke waarden KLEUR EN ACHTERGROND color Stelt de voorgrondkleur van de tekst van een element in. background-color Stelt de achtergrondkleur van