‹Terug naar zoeken

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

                      HTML & CSS
1 / 26
volgende
Slide 1: Tekstslide
InformaticaWOStudiejaar 4,5

In deze les zitten 26 slides, met interactieve quizzen en tekstslides.

time-iconLesduur is: 45 min

Onderdelen in deze les

                      HTML & CSS

Slide 1 - Tekstslide

Deze slide heeft geen instructies

Fundament
Kerndomein A

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


Slide 2 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

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 - Tekstslide

Deze slide heeft geen instructies

CSS: 3 methoden
  1. external

  2. internal

  3. inline

Je kunt alle 3 manieren naast elkaar gebruiken

Slide 5 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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




Slide 9 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies


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 - Quizvraag

Deze slide heeft geen instructies


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 - Quizvraag

Deze slide heeft geen instructies


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 - Quizvraag

Deze slide heeft geen instructies


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 - Quizvraag

Deze slide heeft geen instructies


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 - Quizvraag

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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

Slide 22 - Open vraag

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

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 - Tekstslide

Deze slide heeft geen instructies

Meer lessen zoals deze

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

- Les met 34 slides
InformaticaWOStudiejaar 4,5

HTML & CSS 90 - herhaling

- Les met 33 slides
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4,5

03 - CSS - css toevoegen

- Les met 11 slides
ICTMBOStudiejaar 1,2

HTML & CSS: Opmaak met CSS

- Les met 18 slides
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

03 - CSS - Toevoegen: de integratie met HTML

- Les met 10 slides
ICTMBOStudiejaar 1,2

HTML & CSS: Opmaak met CSS

- Les met 21 slides
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

Les4 - CSS Selectoren: HTML Elementen Aanspreken

- Les met 22 slides
Applicatie- en mediaontwikkelaarMBOStudiejaar 1

WEEK 3 - INFORMATICA

- Les met 33 slides
InformaticaMiddelbare schoolhavoLeerjaar 4