‹Return to search

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

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

This lesson contains 26 slides, with interactive quizzes and text slides.

time-iconLesson duration is: 45 min

Items in this lesson

                      HTML & CSS

Slide 1 - Slide

This item has no 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 - Slide

This item has no 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 - Slide

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

This item has no instructions

CSS: 3 methoden
  1. external

  2. internal

  3. inline

Je kunt alle 3 manieren naast elkaar gebruiken

Slide 5 - Slide

This item has no 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 - Slide

This item has no 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 - Slide

This item has no 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 - Slide

This item has no instructions

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




Slide 9 - Slide

This item has no 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 - Slide

This item has no 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

This item has no 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

This item has no 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

This item has no 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

This item has no 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

This item has no 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 - Slide

This item has no 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 - Slide

This item has no 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 - Slide

This item has no 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, je de selectoren kunt scheiden met een ,
Ook verschillende selectoren
kun je combineren

Slide 19 - Slide

This item has no 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 - Slide

This item has no 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 - Slide

This item has no instructions

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

Slide 22 - Open question

This item has no 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 - Slide

This item has no 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 - Slide

This item has no 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 - Slide

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

This item has no instructions

More lessons like this

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

- Lesson with 31 slides
InformaticaWOStudiejaar 4,5

HTML & CSS 07 - 5.8 tmt 5.12 - wrapper float

- Lesson with 24 slides
InformaticaWOStudiejaar 4,5

HTML & CSS 90 - herhaling

- Lesson with 33 slides
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4,5

WEEK 3 - INFORMATICA

- Lesson with 33 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

WEEK 3 - INFORMATICA

- Lesson with 35 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

03 - CSS - css toevoegen

- Lesson with 11 slides
ICTMBOStudiejaar 1,2

03 - CSS - Toevoegen: de integratie met HTML

- Lesson with 10 slides
ICTMBOStudiejaar 1,2

CSS_ALA_webdesign 1

- Lesson with 10 slides
Applicatie- en mediaontwikkelaarMBOStudiejaar 1