💚
Web technologie
Exam theorie praktijk1: 15%
Exam praktijk 85%
Les 2
Selectors
element type selectors
h1 {
color: green;}
p {
font-size: 35px;
font-family: sans-serif;}
ID selector
<h2 id="recept">Titel van mijn recept</h2>
#recept {
color: blue;}
gegroepeerde selectors
h1, h2, p, em, img {
border: 1px solid black;}
Web technologie 1
, Declaraties
Declaraties bestaan uit een eigenschap paar
p {
font-size: 35px;
font-family: sans-serif;
font-weight: 900;
}
Commentaar is css
/* Commentaar komt hier terecht */
CSS basisconcepten
Overerving
Bepaalde elementen worden doorgegeven, andere niet.
-Goed inzicht hebben in de boomstructuur-
Cascade
Conflict doordat je verschillende stylesheets kan koppelen aan
hetzelfde document.
Een CSS stijlregel blijft gelden tot ze mogelijk overruled
wordt door een stijlregel met meer “gewicht”.
❗ Hoe specifieker het element wordt aangeroepen, hoe meer
gewicht deze selector heeft
Vollegorde kan soms ook een rol spelen: de cascade heeft het
principe “de laatste wint”
Web technologie 2
, p {
color: blue;}
p {
color: red;}
Het box model
Je kan aan elk element eigenschappen aan de box toevoegen:
Borders
Margins
Padding
Backgrounds
p {
border: 5px solid red;
margin: 25px;
padding: 15px;
background-color: yellow;}
CSS Meeteenheden
Gebruik je voor: lettergrootte, breedte en hoogte, afstand
tussen elementen
Absolute meeteenheden
pt
cm
mm
px
Dit is minder geschikt voor een webpagina
Web technologie 3
, Relatieve meeteenheden
rem
div {
height: 10rem; /* zal 160px zijn */
}
em
vw
vh
header {
width: 90vw;
height: 90vh; }
%
img {
width: 50%;}
Beter voor een webpagina, omdat ze mee gaan met de lengte en
breedte
CSS opmaak van lijst elementen
even elementen
li:nth-child(even){
backgroundcolor: yellow;
}
oneven elementen
li:nth-child(odd){
backgroundcolor: yellow;
Web technologie 4
Web technologie
Exam theorie praktijk1: 15%
Exam praktijk 85%
Les 2
Selectors
element type selectors
h1 {
color: green;}
p {
font-size: 35px;
font-family: sans-serif;}
ID selector
<h2 id="recept">Titel van mijn recept</h2>
#recept {
color: blue;}
gegroepeerde selectors
h1, h2, p, em, img {
border: 1px solid black;}
Web technologie 1
, Declaraties
Declaraties bestaan uit een eigenschap paar
p {
font-size: 35px;
font-family: sans-serif;
font-weight: 900;
}
Commentaar is css
/* Commentaar komt hier terecht */
CSS basisconcepten
Overerving
Bepaalde elementen worden doorgegeven, andere niet.
-Goed inzicht hebben in de boomstructuur-
Cascade
Conflict doordat je verschillende stylesheets kan koppelen aan
hetzelfde document.
Een CSS stijlregel blijft gelden tot ze mogelijk overruled
wordt door een stijlregel met meer “gewicht”.
❗ Hoe specifieker het element wordt aangeroepen, hoe meer
gewicht deze selector heeft
Vollegorde kan soms ook een rol spelen: de cascade heeft het
principe “de laatste wint”
Web technologie 2
, p {
color: blue;}
p {
color: red;}
Het box model
Je kan aan elk element eigenschappen aan de box toevoegen:
Borders
Margins
Padding
Backgrounds
p {
border: 5px solid red;
margin: 25px;
padding: 15px;
background-color: yellow;}
CSS Meeteenheden
Gebruik je voor: lettergrootte, breedte en hoogte, afstand
tussen elementen
Absolute meeteenheden
pt
cm
mm
px
Dit is minder geschikt voor een webpagina
Web technologie 3
, Relatieve meeteenheden
rem
div {
height: 10rem; /* zal 160px zijn */
}
em
vw
vh
header {
width: 90vw;
height: 90vh; }
%
img {
width: 50%;}
Beter voor een webpagina, omdat ze mee gaan met de lengte en
breedte
CSS opmaak van lijst elementen
even elementen
li:nth-child(even){
backgroundcolor: yellow;
}
oneven elementen
li:nth-child(odd){
backgroundcolor: yellow;
Web technologie 4
