‹Revenir à la recherche

HTML & CSS 04 - 4.1 tmt 4.3 - CSS methodes, opmaak

                      HTML & CSS
1 / 26
suivant
Slide 1: Diapositive
InformaticaWOStudiejaar 4,5

Cette leçon contient 26 diapositives, avec quiz interactifs et diapositives de texte.

time-iconLa durée de la leçon est: 45 min

Éléments de cette leçon

                      HTML & CSS

Slide 1 - Diapositive

Cet élément n'a pas d'instructions

Fundament
Kerndomein A

A2. HTML & CSS
Hoofdstuk 4.1 tmt 4.3
https://fundament-online.nl/leeromgeving/content.php?paragraaf_id=114663


Slide 2 - Diapositive

Cet élément n'a pas d'instructions

Leerdoelen:
Na deze les kun je:
  1. vertellen waar CSS voor staat en wat het doet
  2. commentaar toevoegen aan CSS
  3. drie manieren beschrijven om CSS in HTML te gebruiken
  4. aangeven welke rangorde tussen de 3 manieren bestaat
  5. beschrijven hoe CSS regels er uitzien






Slide 3 - Diapositive

Rode achtergrond betekent: klas is stil, dit zijn de leerdoelen en quizzes waarbij niet overlegd mag worden.

Doel van deze les is om het leren zichtbaar te maken voor zowel leerling als docent.
CSS
CSS staat voor Cascading Style Sheet
Dit betekent ruwweg: "Overkoepelend StijlDocument"
Een (extern) CSS bestand is een tekstbestand met de bestandsextensie .css

Voordat we ingaan op hoe we CSS opmaken, eerst de manieren waarop je het kan gebruiken:

Slide 4 - Diapositive

Cet élément n'a pas d'instructions

CSS: 3 methoden
  1. external

  2. internal

  3. inline

Je kunt alle 3 manieren naast elkaar gebruiken

Slide 5 - Diapositive

Cet élément n'a pas d'instructions

CSS: external 1/3
1. external
extern tekstbestand waarnaar in je .html bestand wordt verwezen in de <head> in een <link>:


Deze link kan relatief of absoluut zijn
Let op: het is een href link (een verwijzing, geen bron)

Slide 6 - Diapositive

Cet élément n'a pas d'instructions

CSS: external 2/3


Vier opmerkingen:
  • unpaired tag: <link>
  • rel="stylesheet": geeft relatie aan van de link
  • type="text/css": geeft type bestand van de link
  • href="...": pad en bestand van extern CSS bestand

Slide 7 - Diapositive

Cet élément n'a pas d'instructions

CSS: external 3/3
We gaan het later over de precieze opmaak hebben, maar de CSS in een external CSS bestand ziet er zo uit:

Slide 8 - Diapositive

Cet élément n'a pas d'instructions

CSS: internal
2. internal
de CSS stijl staat in je .html bestand in de <head> in een <style> tag:




Slide 9 - Diapositive

Cet élément n'a pas d'instructions

CSS: inline
2. inline
bij elke tag geef je in je .html via <style> afzonderlijk je CSS stijl:



Dat geldt dan alleen voor die tag!




Slide 10 - Diapositive

Cet élément n'a pas d'instructions


Welke van onderstaande is INLINE CSS?
A
<a style="color: red">
B
<head> <link href="a.css"> </head>
C
<head><style> a {color:red;} </style></head>
D
(/¯◡ ‿ ◡)/¯ ~ ┻━┻

Slide 11 - Quiz

Cet élément n'a pas d'instructions


Welke is INTERNAL CSS?
A
<a style="color: #c0c0c0">
B
<head> <link href="a.css"> </head>
C
<head><style> a {color:red;} </style></head>
D
（°々°）

Slide 12 - Quiz

Cet élément n'a pas d'instructions


Welke is EXTERNAL CSS?
A
<a style="color: red">
B
<head> <link href="a.css"> </head>
C
<head><style> a {color:red;} </style></head>
D
┻━┻ ︵ ლ(⌒-⌒ლ)

Slide 13 - Quiz

Cet élément n'a pas d'instructions


Welke is INTERNAL CSS?
A
<a style="color: red">
B
<head> <link href="a.css"> </head>
C
<head><style> a {color:red;} </style></head>
D
( ͠° ͟ʖ ͡° )

Slide 14 - Quiz

Cet élément n'a pas d'instructions


Welke van onderstaande is INLINE CSS?
A
<a style="color: red">
B
<head> <link href="a.css"> </head>
C
<head><style> a {color:red;} </style></head>
D
ᕦ(⪧︹⪦)ᕤ

Slide 15 - Quiz

Cet élément n'a pas d'instructions

CSS: basis opmaak 1/5
CSS is dus voor opmaak (ook wel: stijl)
Daarvoor gebruikt CSS zgn. selectoren
er zijn meerdere selectoren, maar het meest gebruikt zijn:
  • tag selector

  • id selector

Slide 16 - Diapositive

Cet élément n'a pas d'instructions

CSS: basis opmaak 2/5
De opmaak van internal en external is gelijk:

Elke selector begint met een ander teken:
  • tag:        (geen teken dus)
  • id: #
  • alle elementen: *
  • class: .                        er zijn een heleboel selectoren!

Slide 17 - Diapositive

Cet élément n'a pas d'instructions

CSS: basis opmaak 3/5
De opmaak van internal en external is gelijk:

selector {
      eigenschap: waarde;
      eigenschap: waarde;
}
Elke regel in de { } eindigt op een ;

Slide 18 - Diapositive

Cet élément n'a pas d'instructions

CSS: basis opmaak 4/5
Je kunt selectoren ook combineren, maar het gaat te ver om hier alle combinaties te bespreken (w3schools heeft een overzicht)
Als je met CSS meerdere selectoren wil opmaken, kun je de selectoren scheiden met een , 
Ook verschillende selectoren
kun je combineren

Slide 19 - Diapositive

Cet élément n'a pas d'instructions

CSS: basis opmaak 5/5
De inline opmaak is anders...
maar ook een beetje hetzelfde 

style=" eigenschap: waarde; eigenschap: waarde; "

Elke eigenschap-waarde regel eindigt met een ;
Inline CSS geldt alleen voor die betreffende tag

Slide 20 - Diapositive

Cet élément n'a pas d'instructions

CSS: voor- en nadelen
Internal en external hebben als voordeel dat ze in principe gelden voor de selectoren die erin vermeld staan
Dit is met name handig als je meerdere HTML bestanden hebt die je hetzelfde wil opmaken

Nadeel (en voordeel) van inline is dat - zoals gezegd - de stijl van de inline CSS alleen voor dat element geldt


Slide 21 - Diapositive

Cet élément n'a pas d'instructions

Maak een HTML bestand met external,
internal, EN inline CSS
Bepaal welke voorrang krijgt
timer
4:00

Slide 22 - Question ouverte

Cet élément n'a pas d'instructions

Opdracht
1) Neem de HTML en CSS over
(niet het commentaar)
2) Bepaal 
welke manier 
voorrang
heeft
(inline, external, internal?)
timer
10:00

Slide 23 - Diapositive

Cet élément n'a pas d'instructions

CSS: naast elkaar
Zoals eerder gezegd kun je de 3 manieren naast elkaar gebruiken, om conflicten op te lossen moet er daarom natuurlijk wel een rangorde zijn:

                      Inline > Internal > External


Slide 24 - Diapositive

Cet élément n'a pas d'instructions

Leerdoelen
Je kunt:
  • vertellen waar CSS voor staat en wat het doet
  • commentaar toevoegen aan CSS
  • drie manieren beschrijven om CSS in HTML te gebruiken
  • aangeven welke rangorde tussen de 3 manieren bestaat
  • beschrijven hoe CSS regels er uitzien

Slide 25 - Diapositive

Rode achtergrond betekent: klas is stil, dit zijn de leerdoelen en quizzes waarbij niet overlegd mag worden.

Doel van deze les is om het leren zichtbaar te maken voor zowel leerling als docent.
Exit ticket
https://forms.gle/7J97NiRs9nqWjk5V6

Slide 26 - Diapositive

Cet élément n'a pas d'instructions

Plus de leçons comme celle-ci

HTML & CSS 05 - 4.4 tmt 4.9 - CSS kleuren, hyperlinks, lijsten, tabellen, valideren

- Leçon avec 34 diapositives
InformaticaWOStudiejaar 4,5

HTML & CSS 90 - herhaling

- Leçon avec 33 diapositives
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4,5

HTML & CSS: Opmaak met CSS

- Leçon avec 21 diapositives
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

03 - CSS - css toevoegen

- Leçon avec 11 diapositives
ICTMBOStudiejaar 1,2

HTML & CSS: Opmaak met CSS

- Leçon avec 18 diapositives
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

03 - CSS - Toevoegen: de integratie met HTML

- Leçon avec 10 diapositives
ICTMBOStudiejaar 1,2

WEEK 3 - INFORMATICA

- Leçon avec 33 diapositives
InformaticaMiddelbare schoolhavoLeerjaar 4

Les4 - CSS Selectoren: HTML Elementen Aanspreken

- Leçon avec 22 diapositives
Applicatie- en mediaontwikkelaarMBOStudiejaar 1