Doosje....

Last updated 4 years ago

Was this helpful?

Doosje....

In HTML zijn er 2 soorten elementen: block elementen en inline elementen

Inline elementen zijn onderdeel van een lopende regel, zoals <a>, <span>, <strong>, etc.
Block elementen vormen een onderdeel (blok) op je site. Je kent er al een stel: <p>, <h1>, <body>, <ul>, etc.

Je kunt block elementen in je pagina zien als een doos (een box) met een inhoud erin. Zo'n doos heeft altijd een aantal eigenschappen en het is erg belangrijk deze te kennen. Je gebruikt deze eigenschappen voor het indelen van je pagina (bij de eindopdracht leer je hier meer over) en je kunt ze be:invloeden met css. Dit noemen we ook wel het css "box-model"

Hieronder zie je een box, bijvoorbeeld van een paragraaf <p>. Van buiten naar binnen zie het volgende:

Margin. Dat is de ruimte tussen de border en de omliggende andere elementen. Deze gebruik je om ruimte aan de buitenkant van het box-element te maken. Zo kun je elementen wat verder van elkaar af zetten wat vaak overzichtelijker is.
Border. Een rand om het element met zijn eigen stijl (dikte, kleur, etc)
Padding. De ruimte tussen de inhoud van de box en de rand
Content. De inhoud zelf. De height en width van een box element worden bepaald door de inhoud. De padding, border en margin komen daar nog extra bij

Bij blockelementen kun je de inhoud een hoogte en breedte geven. In een volledig vormgegeven website heb je natuurlijk veel elementen die in elkaar zitten (hierover meer bij de eindopdracht). Dus het kan behoorlijk complex worden!

In dit hoofdstukje bekijken we de borders. In het volgende hoofdstuk mogen de margin en padding aan bod.

Een border heeft altijd 3 eigenschappen:

de dikte van de rand
de kleur van de rand
het type (dotted, dashed, solid, double, groove, ridge, inset, outset, none) - (none betekent geen rand)

Bijvoorbeeld:

h1, h2 {
  color: rgb(0, 51, 153);
  text-align: center; /* Centreer de inhoud*/
  
  /* rand: 4 pixels dik, volle rand, kleur oranje*/
  border: 4px solid orange;
}

Je kunt ook ronde borders maken. Je geeft dan de radius (straal) van de ronding op. Je doet dit voor iedere hoek apart en de volgorde is: linksboven, rechtsboven, rechtsonder, linksonder Je kunt ook in een keer alle hoeken gelijk maken.

h1, h2 {
  text-align: center;
  border: 4px solid orange;
  border-radius: 20px 0px 20px 0px;
}
 
p {
  border: 4px solid orange;
  border-radius: 20px;  /* alle hoeken straal van 20 pixels */
}

PreviousOpdracht NextOpdracht

Last updated 4 years ago

Was this helpful?

In HTML zijn er 2 soorten elementen: block elementen en inline elementen

Inline elementen zijn onderdeel van een lopende regel, zoals <a>, <span>, <strong>, etc.
Block elementen vormen een onderdeel (blok) op je site. Je kent er al een stel: <p>, <h1>, <body>, <ul>, etc.

Hieronder zie je een box, bijvoorbeeld van een paragraaf <p>. Van buiten naar binnen zie het volgende:

Margin. Dat is de ruimte tussen de border en de omliggende andere elementen. Deze gebruik je om ruimte aan de buitenkant van het box-element te maken. Zo kun je elementen wat verder van elkaar af zetten wat vaak overzichtelijker is.
Border. Een rand om het element met zijn eigen stijl (dikte, kleur, etc)
Padding. De ruimte tussen de inhoud van de box en de rand
Content. De inhoud zelf. De height en width van een box element worden bepaald door de inhoud. De padding, border en margin komen daar nog extra bij

In dit hoofdstukje bekijken we de borders. In het volgende hoofdstuk mogen de margin en padding aan bod.

Een border heeft altijd 3 eigenschappen:

de dikte van de rand
de kleur van de rand
het type (dotted, dashed, solid, double, groove, ridge, inset, outset, none) - (none betekent geen rand)

Bijvoorbeeld:

h1, h2 {
  color: rgb(0, 51, 153);
  text-align: center; /* Centreer de inhoud*/
  
  /* rand: 4 pixels dik, volle rand, kleur oranje*/
  border: 4px solid orange;
}

h1, h2 {
  text-align: center;
  border: 4px solid orange;
  border-radius: 20px 0px 20px 0px;
}
 
p {
  border: 4px solid orange;
  border-radius: 20px;  /* alle hoeken straal van 20 pixels */
}