Lesson 4: CSS - basis deel 1
Structuur CSS
h1 {
color: aqua;
border: 1px solid black;
}
Achtergronden
background property bv background-color
background-image: url(”../images/sheef.gif”)
linear-gradient en radial-gradient
doe dit met gradient generator
Kleuren
color = tekstkleur
background-color = achtergrondkleur
Met verschillende modellen → rgb, hsl, …
rgb(R,G,B[,A])
Opmaken van lijsten
list-style-type : opsommingsteken
list-style-image : afbeelding als opsommingsteken
list-style-position : plaatsing opsommingsteken
Lesson 4: CSS - basis deel 1 1
, inside / outside
Tekst en typografie
Font styles
font-family : geprioritiseerde lijst van lettertypes
font-size : de grootte van het lettertype
font-size-adjust : om tekstgrootte gelijk te houden wanneer wordt
teruggevallen op een 2de,… keus in de font-family
line-height : regelafstand, hoeveelheid wit tussen regels tekst
font-weight : de vetheid, 100-900 of normal(400), bold(700), bolder, lighter
font-style : weergave tekst, zoals normal, italic of oblique(schuin)
font-variant : kleinkapitaal, zoals small-caps
font-stretch : uitrekken of indrukken
font : de shorthand property: font-style font-variant font-weight fontsize/line-height font-family
Text Layout styles
color : kleur
text-align : uitlijnen (left, right, center, justify,…)
text-align-last : uitlijnen laatste regel
text-decoration : lijneffect
text-decoration-line : none, underline, …
text-decoration-style : solid, …
text-decoration-color
text-indent : inspringen van de eerste regel van een tekstblok
text-orientation : horizontale of vertical tekst
text-overflow : overlopende tekst, bepaalt welk visueel effect de gebruiker krijgt als er meer tekst is dan hij ziet (clip,
ellipses)
text-shadow : schaduw (horizontale verschuiving, vertical verschuiving, vervaging, optioneel een kleur)
text-transform : hoofdletters, kleine letters (capitalize, uppercase, lowercase, none)
white-space : witruimte al dan niet behouden (normal: wit wordt samengevoegd tot 1 spatie, pre: alles behouden, ….)
letter-spacing : ruimte tussen letters
word-spacing : ruimte tussen woorden
word-break : automatisch afbreken
overflow-wrap : is afbreken van een woord toegestaan
Lettertype
Lettergrootte
font-size
Op verschillende manieren uit te drukken:
Lesson 4: CSS - basis deel 1 2
Structuur CSS
h1 {
color: aqua;
border: 1px solid black;
}
Achtergronden
background property bv background-color
background-image: url(”../images/sheef.gif”)
linear-gradient en radial-gradient
doe dit met gradient generator
Kleuren
color = tekstkleur
background-color = achtergrondkleur
Met verschillende modellen → rgb, hsl, …
rgb(R,G,B[,A])
Opmaken van lijsten
list-style-type : opsommingsteken
list-style-image : afbeelding als opsommingsteken
list-style-position : plaatsing opsommingsteken
Lesson 4: CSS - basis deel 1 1
, inside / outside
Tekst en typografie
Font styles
font-family : geprioritiseerde lijst van lettertypes
font-size : de grootte van het lettertype
font-size-adjust : om tekstgrootte gelijk te houden wanneer wordt
teruggevallen op een 2de,… keus in de font-family
line-height : regelafstand, hoeveelheid wit tussen regels tekst
font-weight : de vetheid, 100-900 of normal(400), bold(700), bolder, lighter
font-style : weergave tekst, zoals normal, italic of oblique(schuin)
font-variant : kleinkapitaal, zoals small-caps
font-stretch : uitrekken of indrukken
font : de shorthand property: font-style font-variant font-weight fontsize/line-height font-family
Text Layout styles
color : kleur
text-align : uitlijnen (left, right, center, justify,…)
text-align-last : uitlijnen laatste regel
text-decoration : lijneffect
text-decoration-line : none, underline, …
text-decoration-style : solid, …
text-decoration-color
text-indent : inspringen van de eerste regel van een tekstblok
text-orientation : horizontale of vertical tekst
text-overflow : overlopende tekst, bepaalt welk visueel effect de gebruiker krijgt als er meer tekst is dan hij ziet (clip,
ellipses)
text-shadow : schaduw (horizontale verschuiving, vertical verschuiving, vervaging, optioneel een kleur)
text-transform : hoofdletters, kleine letters (capitalize, uppercase, lowercase, none)
white-space : witruimte al dan niet behouden (normal: wit wordt samengevoegd tot 1 spatie, pre: alles behouden, ….)
letter-spacing : ruimte tussen letters
word-spacing : ruimte tussen woorden
word-break : automatisch afbreken
overflow-wrap : is afbreken van een woord toegestaan
Lettertype
Lettergrootte
font-size
Op verschillende manieren uit te drukken:
Lesson 4: CSS - basis deel 1 2
