Skip to content

Latest commit

 

History

History
1616 lines (1234 loc) · 59.6 KB

WebDevelopment_Cheatsheet.md

File metadata and controls

1616 lines (1234 loc) · 59.6 KB

Web Development I Cheatsheet (SEM I)

1. Basis HTML

1.1 Attribute tag

Attributen geven extra informatie over een element (naam + waarde)

In onderstaand voorbeeld is href een attribuut.

<a href="https://google.com/">Klikbaar element</a>

1.2 Block level vs inline

Block-elementen nemen heel de paginabreedte in

Inline-elementen komen na elkaar



1.2 Soorten secties

Sinds HTML5 kunnen we verschillende inhoudsblokken makkelijk definiëren met tags. We onderscheiden:

<header> <!-- Dit gebruiken we voor de hoofding-->
<nav> <!-- Dit gebruiken  we voor de navigatiebalk-->
<main> <!-- Dit gebruiken we voor de main content op je website-->
<article> <!-- Dit gebruiken we voor bepaalde herhalende elementen, zoals artikels bij een perswebsite-->
<aside> <!-- Dit gebruiken we als sidebar (zowel links als rechts)-->
<footer> <!-- Dit gebruiken we vanonder aan de website bij een footer-->
<section> <!-- Voor een onderdeel van een pagina-->

1.3 Hoofdingen

Om titels en ondertitels te maken, maken we gebruik van de <h> tag.

Deze bestaan van <h1> tot en met <h6>.

Door er het id attribuut aan toe te voegen kunnen we hier een ankerpunt van maken.

Let op: dit is enkel voor titels. Onderliggende teksten markeren we met de <p> tag.

<h1 id="hoofding1">Dit is een titel</h1>
<p>Dit is onderliggende tekst</p>

1.4 Regeleinde

Witruimte, regeleinde en tabs worden niet weergegeven in een browser. Daarom gebruiken we de <br/> tag om regels af te breken.

<p>Dit is een<br/>regeleinde.</p>

1.5 Speciale opmaaktags

Hieronder vind je een lijst van de meest belangrijke tags

<em> <!-- Klemtoon leggen, standaard cursief (emphasis)-->
<strong> <!-- Nadruk leggen, heel belangrijk, standaard vet-->
<small> <!--Aanvullende informatie-->
<cite> <!-- Citeren van de naam van een auteur (!NIET  VOOR BRONVERMELDING)-->
<q> <!-- Korte citaten in lopende zin-->
<abbr> <!--Afkortingen weergeven, in combinatie met title tag-->
<dfn> <!-- Markeert eerste keer dat definitie voorkomt-->
<code> <!-- Markeren van programmacode-->
<span> <!-- Een containerelement zonder betekenis, met mogelijke attirbuten-->
<pre> <!-- Behouden van tabs, witruimte, etc in code-->
<sub> <!-- Subscrips, bijvoorbeeld de 2 van H2O kleiner weergeven-->
<sup> <!-- Tegenovergestelde van sub-->
<s> <!--Strikethrough-->
<ins> <!-- Toegevoegde inhoud, zoals op Github (groene highlight)-->
<del> <!-- Verwijderde inhoud, zoals op Github (rode highlight)-->
<mark> <!--Markeren van tekst met 'fluostift'-->
<kbd> <!-- Gebruikersinvoermarkering-->
<samp> <!-- Computeruitvoer-->

1.6 Inhoud groeperen

We kunnen inhoud groeperen zoals adresgegevens, opsommingslijsten,...

1.6.1 Gegevens

De <address> tag gebruiken we voor contactinformatie.

De <main> tag gebruiken om de belangrijkste informatie te markeren (niet header, footer en navigatie).

De <blockquote> tag gebruiken we voor langere citaten uit andere bron waarbij bron wordt vermeld met cite attribuut.


1.6.2 Lijsten

We gebruiken de <ol> tag voor een ordered list (met nummers). Dit altijd in combinatie met <li> tag (dit is om het lijstelement zelf te plaatsen).

  1. Item 1
  2. Item 2
  3. Item 3
<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

We gebruiken de <ul>tag voor een niet ordered list (puntjes). Dit is eveneens in combinatie met de <li> tag.

  • Item 1
  • Item 2
  • Item 3
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

We gebruiken <dl> in combinatie met <dt> en <dd> voor een gepaarde lijst.

Hoofding
Beschrijving
<dl>
    <dt>Hoofding</dt>
    <dd>Beschrijving</dd>
</dl>

Lists kunnen ook genest worden.


1.6.3 Illustraties en bijschiften

We gebruiken de <figure> tag om illustraties met bijschrift te groeperen. Dit kan ook een tabel, grafiek, citaat of meer zijn. Dit in combinatie met <figcaption>.

<figure>
    <img src="/olifant.jpg"
         alt="Elephant at sunset">
    <figcaption>An elephant at sunset</figcaption>
</figure>

1.6.4 Makkelijk benaderen met opmaak en scripting

Voor dit gebruiken we de <div> tag. In combinatie met het class attribuut kan je vanuit een CSS bestand de div tag makkelijk benaderen.

<div class="voorbeeldclass">
    <p>Dit is een voorbeeldparagraaf</p>
</div>
.voorbeeldclass {
    margin: 1rem;
    border: 1px;
}

1.7 Koppelingen

1.7.1 Links

Het gebruik van hyperlinks in HTML maakt het mogelijk om van de ene webpagina naar een andere te gaan. Dit kan binnen de website zijn, buiten, e-mail clients, telefoonnummer bellen,...

We maken iets klikbaar met de <a> tag. Dit kan een kop, tekst, afbeelding,... zijn.

<a href="https://google.com">Dit is klikbare tekst</a>

Bij lokale links navigeren we door de mappen met / en om een niveau te stijgen gebruiken we ../.

Bij een link naar een e-mail adres gebruiken we mailto: en voor telefoneren gebruiken we tel:.

Door target:"_blank" te gebruiken kunnen we de URL openen in een nieuw tabblad.

Je kan als target ook een ankerpunt van een titel gebruiken.

<a href="#hoofding1">Spring naar hoofding 1!</a>

<a href="/overons.html#hoofding1">Spring naar hoofding 1 op over ons!</a>

1.7.2 Bestanden linken (stylesheets)

Om CSS te gebruiken in ons document moeten we de stylesheet linken aan onze HTML pagina. Dit doen we met onderstaande code.

<link rel="stylesheet" href="main.css">

Je kan ook het siteicoon veranderen met:

<link rel="icon" href="favicon.ico" type="image/x-icon">

1.8 Afbeeldingen

We kunnen een afbeeldingen weergeven met de <img> tag. Dit altijd in combinatie met het src attribuut. Het alt attribuut is een tekst wanneer de afbeelding niet zichtbaar zou zijn. Met width en height kan je de afmetingen doorgeven. De browser weet dan wat er komt. NIET OM TE SCHALEN!

<img src="olifant.jpg" alt="Een olifant uit Afrika" width="100" height="100">

Omdat sommige beeldschermen een hele hoge pixeldensity hebben (denk maar aan Retina), kan het zijn dat je soms een betere versie van een afbeelding wilt inladen. De browser kan op zijn beurt verschillende resoluties inladen voor het geschikte beeldscherm. Dit gebeurt met het srcset attribuut.

<img src="olifant640.jpg" alt="Een olifant uit Afrika"
    srcset="olifant640.jpg 1x,
            olifant1280.jpg 2x,
            olifant1920.jpg 3x">

In CSS kunnen we een afbeelding de volledige grootte van zijn parent container laten innemen door zowel de width als height op 100% te zetten.

HTML video
HTML audio

Om captions bij een afbeelding te plaatsen gebruiken we de <figure> en <figcaption> tags (zie puntje 1.6.3 in dit document).


1.9 Tabellen

1.9.1 Algemeen

Iedere tabel start met de root tag <table>. Daaronder komen rijen met de <tr> tag en daarin kolommen met de <td> tag (je definiëert dus per rij, kolommen).

Header
Kolom 1.1 Kolom 1.2
Kolom 2.1 Kolom 2.2 
<table>
    <thead>
        <tr>
            <th>Header</th>
        </tr>
    </thead>
    <tr>
        <td>Kolom 1.1</td>
        <td>Kolom 1.2</td>
    </tr>
    <tr>
        <td>Kolom 2.1</td>
        <td>Kolom 2.2</td>
    </tr>
</table>

Door de attributen rowspan en colspan te gebruiken kan je 1 cel meerdere kolommen of rijden laten overvloeien.


Kolom 1.1 Kolom 1.2
Kolom 2.2 

<table>
    <tr>
        <td rowspan="2">Kolom 1.1</td>
        <td>Kolom 1.2</td>
    </tr>
    <tr>
        <td>Kolom 2.2</td>
    </tr>
</table>

TIP: In CSS kunnen wet met border-collapse: collapse dubbele borders enkelvoudig maken.


1.9.2 Tabelbijschrift

Men kan bij tabellen een bijschrift plaatsen. Dit doen we met het <caption> element. We zetten deze net binnen het <table> element.

Je kan de caption-positie aanpassen in CSS met caption-side.


1.10 Formulieren

Met de <form> tag kunnen we een inputformulier maken. Met het attribuut action zeggen we naar welke URL het formulier moet gestuurd worden. Met het attribuut method zeggen we de methode van versturen. Dit of get (toevoegen aan url) of post (toevoegen aan header van HTTP request).


Ieder veld stoppen we in een div element. Om de tekst voor het veld te krijgen, gebruiken we label met daarin een link naar het inputveld met for (met het id van het input veld).

<form action="" method="get">

  <div>
    <label for="name">Enter your name: </label>
    <input type="text" name="name" id="name" required>
  </div>

  <div>
    <label for="email">Enter your email: </label>
    <input type="email" name="email" id="email" required>
  </div>

  <div>
    <input type="submit" value="Subscribe!">
  </div>

</form>

Je kan ook de <label> tag rond de <input> tag zetten.

<div>
    <label>Enter your name
        <input type="text" name="name" required>
    </label>
</div>

Bij de <input> tag zijn er een paar attributen
- id in combinatie met label of voor css
- name nodig voor het versturen van het formulier
- value waarde van een invoerveld als de gebruiker zelf niets ingeeft
- placeholder voor helptekst.
We kunnen ook de invoer client-side valideren met:
- required verplichte infvoer
- minlenght en maxlenght min- en max lengte van de invoer
- size lengte van het invoerveld
- pattern een regex patroon
Gebruikersbeperkingen:
- readonly veld kan niet worden aangepast, enkel getoond
- disabled veld is uitgeschakeld

Voor de <input> tag hebben we ook het type attribuut.
Op Mozilla MDN vinden we hier een hele lijst van.

Er zijn nog een paar overige elementen die op een andere manier geïmplementeerd worden.
- <button>: knop
- <textarea>: uitgebreide tekstinvoer
- <option>: keuzemogelijkheid
- <optgroup>: groeperen van keuzemogelijkheden
- <select>: keuzelijst
- <datalist>: keuzelijst met invoervak
- <legend>: een legende toewijzen aan een formulier (tekst vanboven)

Om een groot tekstvak te creëren maakt men gebruik van de <textarea> tag. Om het tekstvak onder het label te zetten kan je <br> gebruiken. Voorbeeld:

<div>
  <label for="reden">Reden afspraak: <br></label>
  <textarea name="reden" id="reden" cols="60" rows="5">Dit is placeholder tekst</textarea>
</div>

TIP:
Als je van een formulier een flex box maakt, kan je de input boxes mooi aligneren.

  • Gehele formulier op display: flex zetten
  • Flex value van bv. 1 toekennen aan label met flex: 1.

1.10.1 Fieldset

We gebruiken het <fieldset> element om rond een formulier een box te tekenen met eventueel een legenda. Voorbeeld:

<form>
  <fieldset>
    <legend>Choose your favorite monster</legend>

    <input type="radio" id="kraken" name="monster">
    <label for="kraken">Kraken</label><br/>

    <input type="radio" id="sasquatch" name="monster">
    <label for="sasquatch">Sasquatch</label><br/>

    <input type="radio" id="mothman" name="monster">
    <label for="mothman">Mothman</label>
  </fieldset>
</form>

wordt:

2. CSS

2.1 De plaatsing van CSS

We kunnen CSS op verschillende manieren implementeren.
- In een external stylesheet met <link rel="stylesheet" href="css/stijlen.css">.
- In het HTML document zelf met de <style> tag.
- Als inline element in de begin tag van het element. Bv. <p style="font-family:'Courier New'; font-size: 20px;">Test</p>

We kunnen andere stijlbladen importeren met @import url('bestand.css').

Browsers hebben hun eigen standaard stylesheet. Soms kan dit voor inconsistenties zorgen tussen browsers. Hiervoor gebruiken we een browser reset stylesheet.


2.2 CSS eenheden

CSS heeft verschillende eenheden. Hieronder een korte opsomming.
Absolute eenheden
- px: CSS pixel, optische referentie-eenheid
Relatieve eenheden
- em: gelijk aan de berekende tekstgrootte van het ouderelement
- rem: de tekstgrootte van het rootelement
- ch: breedte van tekst
Viewport percentages
- vw: 1% van de breedte van het venster
- vh: 1% van de hoogte van het venster
- vmin: de kleinste waarde van vh en vw
- vmax: de grootste waarde van vh en vw


2.3 Verwerking van CSS door de browser

Als er meerdere waarden zijn toegewezen aan een property, zal de browser de meest specifieke kiezen. In het onderstaande geval zal de kleur dus rood zijn.

body > div {
    background-color: red;
}

div {
    background-color: black;
}

* {
    background-color: green;
}

In onderstaande tabel zien we wat belangrijker is. Hoe meer naar rechts, hoe minder belangrijk. Het helemaal linkse getal is inline style.

Selector Specificiteit Toelichting
div ul ul li 0,0,0,4 4 elementselectors
div.klasse ul li 0,0,1,3 1 klasseselector, 3 elementselectors
a::before 0,0,0,2 1 pseudoklasse, 1 elementselector
a.klasse:hover 0,0,2,1 1 klasse, 1 pseudoklasse, 1 elementselector
p.eerste 0,0,1,1 1 klasseselector, 1 elementselector
#id p.eerste 0,1,1,1 1 id-selector, 1 klasseselector, 1 elementselector

Volgorde van gebruikte stijlbladen (naar belangrijkheid):

  • Declaraties in de browser
  • Declaraties van de gebruiker
  • Declaraties van de auteur
  • Declaraties van de auteur met kenmerk !important
  • Declaraties van de gebruiker met kenmerk !important

2.4 Overerving

Een opmaakeigenschap hoeft niet rechtstreeks een waarde te krijgen. De waarde kan overgeerfd worden van het ouderelement.

Zonder de onderstaande CSS zal de <em> tag de tekst gewoon cursief maken (overerving van een ouderelement). Als we de onderstaande CSS dan wel gebruiken, zal hij de tekst tussen de <em> tags ook blauw maken.

em {color:blue;}
<p>Hey, <em>look</em> at that sheepdog</p>

Opgelet: Eigenschappen zoals padding, width, height, background-color, border,... zijn niet erfelijk. Je kan dit toch forceren door inherit mee te geven.

h2 { color: inherit; }

Welke properties worden overgeërfd?

  • Tekst-gerelateerde properties
    font-family, font-size, font-style, font-variant, font-weight, font, letter-spacing, line-height, text-align, text-indent, tekst-transform, word-spacing
  • List-gerelateerde properties
    list-style-image, list-style-position, list-style-type, list-style
  • Kleuren
    color

2.5 Selectors

2.5.1 Basisselectors

Basisselector (A)
Ieder <p> element zal groen kleuren.

p {
  color: green;
}

Klassenselector (.A)
Ieder element met class="klasse1" als attribuut zal zwart kleuren.
Ieder <span> element in een ander element met class="klasse1 als attribuut kleurt rood.
Bij het laatste voorbeeld zal ieder <span> element met het klasseattribuut class=klasse1 rood kleuren.

.klasse1 {
  color: black;
}

.klasse1 span {
  color: red;
}

span.klasse1 {
  color: red;
}

ID Selector (#A)
Ieder element met id="uniekid1" als attribuut zal aqua kleuren.

ID's zijn altijd uniek en worden bij maar 1 element gebruikt!

#uniekid1 {
  color: aqua;
}

2.5.2 Combinatieselectors

Combinatieselector (A>B)
Ieder <p> element waarvan de rechtstreekse parent een <div> element is zal blauw kleuren.

div > p {
  color: blue;
}

Combinatieselector (A B)
Ieder <p> element dat een afstammeling is van <div> (kind, kleinkind,...) kleurt paars.

div p {
  color: purple;
}

Combinatieselector (A+B)
Ieder <p> element, op hetzelfde nivau als <div> en dat onmiddelijk op <div> volgt kleurt geel.

div+p {
  color: yellow;
}

Combinatieselector (A~B)
Ieder <p> element, op hetzelfde nivau als <div> en dat op <div> volgt kleurt groen (moet niet onmiddelijk).

div~p {
  color: green;
}

Combinatieselector (A,B)
Ieder <p> en <div> element kleurt oranje. Op welk niveau dan ook.

div,p {
  color: orange;
}
div,p {
  color: orange;
}

2.5.3 Attribuutselectors

Teken Beschrijving Voorbeeld Betekenis voorbeeld
img[alt] elk element img met attribuut alt
= Exact gelijk aan img[alt="foto"] elk img element waarvan alt attribuut gelijk aan de waarde foto
~= Bevat waarde img[alt~="fotoboek"] elk img element waarvan class attribuut meerdere waarden kan hebben waaronder fotoboek
|= Begint met waarde [hreflang|="nl"] elk element waarvan hreflang attribuut gelijk aan nl, of begint met nl- (nl-NL, nl-BE)
^= Begint met exacte waarde [name^="keuze"] name attribuut begint met het exacte woord "keuze" (bv. keuzevak of keuze2)
$= Eindigt met exacte waarde [href$=".com"] href attribuut eindigt op ".com" (bv. google.com)
*= Bevat exacte waarde [href*="user"] href attribuut bevat het exacte woord "user" (bv. hogent.be/user/jan)

TIP: Door :not() te gebruiken achter een selector kan je een element selecteren waar een voorwaarde NIET van waar is. Voorbeeld: a:not([href]).


2.5.4 Pseudoklassen

Pseudoklassen duiden een toestand van een element aan.

Hyperlink pseudoklassen

UI toestand

  • :enabled elementen die beschikbaar zijn
  • :disabled elementen die niet beschikbaar zijn
  • :checked een keuzerondje of selectievakje die is ingeschakeld

Varia

Structurele pseudoklassen

  • :root hoofdelement <html>
  • :first-child een element dat het eerste child is van zijn parent-element
  • :last-child een element dat het laatste child is van zijn parent-element
  • :only-child een element waarvan de ouder geen andere child elementen heeft
  • :first-of-type het eerste element van dat type
  • :last-of-type het laatste element van dat type
  • :only-of-type het enige element van dat type
  • :nth-child(n) elk zoveelste kindelement (je kan ook odd oneven of even even gebruiken)
  • :nth-last-child(n) nu gerekend vanaf het laatste kind (je kan ook odd oneven of even even gebruiken)
  • :nth-of-type(n) elk zoveelste element van een type (je kan ook odd oneven of even even gebruiken)
  • :nth-last-of-type(n) nu gerekend vanaf laatste element (je kan ook odd oneven of even even gebruiken)
  • :empty leeg element

Pseudo elementen
Toegang tot onderdelen van een document waarvoor geen gewone elementen bestaan (bijvoorbeeld voor een URL).

Voorbeeld:

/* Add a heart before links */
a::before {
  content: "♥";
}

2.6 CSS Properties

Enkele CSS properties


2.7 Boxmodel

Een HTML-pagina is opgebouwd uit blokken. Deze blokken worden bovenop mekaar geplaatst. Een box bestaat uit content (bv. tekst), padding (ruimte rond het content) een border (de rand rond de padding) en de margin (ruimte rond de border).

2.7.1 Box-sizing

Er zijn 2 mogelijke manieren van box-sizing:

  • content-box
    Ingestelde width en height hebben enkel betrekking op de content.
  • border-box
    Ingestelde width en height hebben betrekking op de content + padding + de border.

Eigenschappen width en height (niet bij inline tekst)

  • auto (standaardwaarde) box is zo groot dat de inhoud erin past
  • lengte of percentage
  • max-content afmeting van het grootste item in de box
  • min-content de kleinst mogelijke afmeting zonder overloop te veroorzaken

Eigenschappen min-width, max-width, min-height en max-height.
Deze waarden overriden width en height.

  • auto (standaardwaarde) box is zo groot dat de inhoud erin past
  • none
  • lengte of percentage
  • max-content afmeting van het grootste item in de box
  • min-content de kleinst mogelijke afmeting zonder overloop te veroorzaken

2.7.2 Marges

Marges ingesteld worden op 2 manieren:

/* Apply to all four sides */
margin: 1em;
margin: -3px;

/* vertical | horizontal */
margin: 5% auto;

/* top | horizontal | bottom */
margin: 1em auto 2em;

/* top | right | bottom | left */
margin: 2px 1em 0 auto;

Opgelet: Marges worden aan de onder en bovenkant samengevoegd, zodat er geen dubbele marges ontstaan. Wanneer de bottom margin van een element de top margin van een ander element overlapt, is het resultaat NIET de som, maar de grootste margin.

Belangrijk: om een gewone box te centreren, kunnen we de margin waarde op auto zetten!


2.7.3 Borders

Van een border kunnen we 3 waarden instellen:

  • border-width (px, %, em, rem, thin, medium, thick) (top/right/left/bottom)
  • border-style (none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset)
  • border-color (een kleurwaarde of transparent)

Men kan deze eigenschappen ook combineren:

border: 1px solid black;

De volgorde maakt niet uit.
Aparte randen kunnen ook gedefinieerd worden met border-left, border-right, border-top, border-bottom.


2.7.4 Overflow

Overflow treedt op indien de content te groot wordt voor de box. Dit kan enkel als een breedte of hoogte is ingesteld. Wat er met die inhoud gebeurt hangt af van de waarde die wordt toegekend aan overflow.


2.7.5 Weergavemodel - display

De indeling van boxes wordt bepaald door de display eigenschap. Er wordt een onderscheid gemaakt tussen:

  • display-outside gedrag van boxen tov andere boxen (in flow).
    block/inline/run-in
  • display-inside gedrag van de afstammelingne van de box.
    flow/flow-root/table/flex/grid/list-item
  • display-legacy waarden kunnen ook gekoppeld worden
    inline-block/inline-grid/inline-flex

2.7.6 Visibility

Je kan makkelijk een element verbergen door de visibility eigenschap op hidden te zetten. Er wordt wel nog steeds een box aangemaakt en bestaat ook in de boomstructuur. Het wordt niet weergegeven in de browser, maar de ruimte nodig voor de box wordt wel gereserveerd op het scherm. Als je de visibility op collapse zet wordt er ook geen ruimte gereserveerd.

a {
  visibility: hidden;
}

Het is mogelijk dat collapse niet altijd de witruimte weglaat (bv. bij inline elementen). Om dit te overkomen kunnen we display: none gebruiken.


2.8 Lay-out positionering

Elk blok krijgt een positie toegewezen in het omvattende blok (containing blok). Schema's:

  • normale flow - plaatsing afhankelijk van display waarde
  • floats: vlottend/zwevend (links/rechts), uit normale flow gehaald
  • absolute positionering: krijgt absolute positie ten opzichte van de eerste niet static omvattende blok.

2.8.1 Position & offset

Position eigenschap

  • static (standaard)
    Het element volgt de normale positie van het document. Offsets hebben geen invloed.
  • relative
    Het element wordt gepositioneerd volgens zijn positie in de normale flow. Offsets zijn dus relatief aan zijn flow positie.
  • absolute
    Het element wordt uit de normale flow gehaald en er wordt dus geen plaats voorzien. Zijn positie is relatief aan zijn voorouder (content area).
  • fixed
    Het element wordt uit de normale flow gehaald en er wordt dus geen plaats voorzien. Zijn positie is relatief aan de viewport. Dit betekent dat bij scrollen het element blijft staan.
  • sticky
    Het element varieert tussen relative en fixed afhankelijk van de scrollpositie. Zijn positie is relatief aan zijn dichtsbijzijnde scrolling voorouder (bijvoorbeeld een element met scrollbar door overflow). Als je verder scrollt zal deze blijven plakken en meegaan als fixed element.

Met de eigenschappen top, bottom,... kan je de positie instellen van het element. Om het element voor of achter een element weer te geven kan je z-index gebruiken.

Offset eigenschap

  • top, right, bottom, left
    We gebruiken offsets om een element te positioneren afhankelijk van zijn relatieve positie (viewport, voorouder,...)
    Voorbeeld:
div.absolute {
 position: absolute;
 top: 80px;
 right: 0;
 width: 200px;
 height: 100px;
}

Je kan hier een eenheid achter zetten (zie 2.2).


2.8.2 Float & clear

Door float (left/right) te gebruiken haal je het blok uit de normale flow en kan de inhoud van de onderliggende blokken erom heen lopen.
Voorbeeld met float: left:

Door clear (none/left/right/both) te gebruiken kan men voorkomen dat de inhoud er rond loopt. Bij het gebruik van clear komt de inhoud van onderliggende blokken er onder te liggen.
Voorbeeld met clear: left:

Voor volledige pagina lay-outs gebruiken we eerder flex en grid.


2.9 Responsive design

Responsive design: media queries
We koppelen opmaak aan eigenschappen van een device.

  • media queries:
    • apparaat type (all, screen, print, speech)
    • media kenmerken (breedte, orientatie)
    • een blok van stijlregels die geldig izjn voor het gedeclareerde apparaat type en de media kenmerken
@media apparaat and (media feature) {
 selector {
   declaraties;
 }
}
@media screen and (min-width: 1024px) {
 main {
   display: grid;
   grid-template-columns: 66% 34%;
 }
}

In het bovenstaande voorbeeld zal indien het scherm minimaal 1024px breed is, het main element opgedeeld worden in twee kolommen van 66% en 34% van de breedte van het scherm.

2.10 Lay-out: grid

Extra leermateriaal (aangeraden)

2.10.1 Grids aanmaken

Creëren van een grid container element

  • display: grid block-level grid
  • display: inline-grid inline-level grid
#grid {
  display: grid;
  width: 100%;
  grid-template-columns: 50px 1fr;
  gap: 10px;
}

Definiëren van de grid

#page {
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-areas: "head head"
                       "nav  main"
                       "nav  foot";
  grid-template-rows: 50px 1fr 30px;
  grid-template-columns: 150px 1fr;
}

Gebruik van de repeat() functie
Met de repeat() functie kan je een deel van een 'track list' herhalen. Zo kan met in plaats van:

grid-template-columns: 1fr 1fr 1fr;

Gebruik maken van:

grid-template-columns: repeat(3, 1fr)

Het eerste getal geeft het aantal keer herhalen weer. Een meer uitgebreid voorbeeld:

grid-template-columns: 20px repeat(4, 1fr 2fr);

Is hetzelfde dan:

grid-template-columns: 20px 1fr 2fr 1fr 2fr 1fr 2fr 1fr 2fr;

Note: de eenheid fr is een flexibele ruimte die de overgebleven ruimte inneemt. Bij dus 2fr 1fr zal 2 delen aan de eerste waarde gegeven worden en 1 deel aan de tweede waarde.

Bij de repeat() functie kan men ook gebruik maken van auto-fill en auto-fit
Hier zal de browser zelf het aantal kolommen of rijen bepalen aan de hand van de beschikbare ruimte van de container.

grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

Bij bovenstaand stuk CSS zal de browser de blokken naast elkaar zetten tot de elk minder dan 150px ruimte over hebben. Dan zal de browser de blokken beginnen te verzetten naar volgende rij. Hebben ze meer ruimte dan 150px, dan verdelen ze de ruimte.
Het verschil tussen auto-fill en auto-fit, is dat bij auto-fill de browser kolommen zal blijven aanmaken. auto-fit zal de kolommen gewoon uitrekken. Onderstaande afbeelding maakt dit duidelijk. (bron)


Expliciet en impliciet raster
Bij een expliciet raster definiëren we manueel de columns en rijen met de grid-template-* eigenschap (bovenstaand).

Bij een impliciet raster zijn gedefiniëerde rijen en kolommen standaard 'auto-sized', maar je kan hiervoor een hoogte/breedte instellen via de properties grid-auto-rows en grid-auto-columns. Een impliciet raster is het raster buiten het bereik van het expliciet raster. Voorbeeld (items 1 en 2 liggen in het impliciet grid):

Afmetingen tracks
Mogelijke afmetingen instellen voor tracks (lentewaarden px % fr):

  • max-content lengte van de maximale content van het element
  • min-content lengte van de minimale content van het element (bv. 1 woord van een zin)
  • minmax(min,max) Vaak gebruikt bij grid-elementen, stelt de minimale en maximale waarde in van bv. een kolom
  • fit-content(value) zorgt er voor dat de content past door deze te verlenger naar onder toe
  • auto

2.10.2 Plaatsen van elementen op raster

Rijen

In het onderstaande voorbeeld kan grid-row-end: 3 ook als grid-row-end: span 2 geschreven worden.

#item1 {
  background-color: lime;
  grid-row-start: 1;
  grid-row-end: 3;
}

#item2 {
  background-color: yellow;
  grid-row: 2 / 4;
}

Kolommen

  • grid-column-start startkolom van element
  • grid-column-end eindkolom van element
  • grid-column afgekorte versie voor kolomspan (bv. 1 / 2)

In het onderstaande voorbeeld kan grid-column-end: 3 ook als grid-column-end: span 2 geschreven worden.

#item1 {
  background-color: lime;
  grid-column-start: 1;
  grid-column-end: 3;
}

#item2 {
  background-color: yellow;
  grid-column: 2 / 4;
}

Grid area
We gebruiken grid-area om het element op een specifiek gedefiniëerde area (met grid-template-areas) en om zowel de span van kolommen als rijen tegelijk te definiëren.

  • grid-area: rowstart/columnstart/rowend/columnend
#item1 {
 background-color: lime;
 grid-area: 2 / 2 / auto / span 3;
}
  • grid-area: areaid
#item2 {
 background-color: green;
 grid-area: a;
}


Ruimte tussen tracks

  • column-gap ruimte tussen kolommen
  • row-gap ruimte tussen rijen
  • gap ruimte tussen zowel kolommen als rijen (rij, kolom) (beide)

2.10.3 Uitlijnen

Er zijn 2 mogelijke uitlijningen

  • Uitlijnen van grid in zijn container
    • justify-content (start/center/space-between/space-around/space-evenly) horizontaal uitlijnen
    • align-content (start/center/space-between/space-around) verticaal uitlijnen
  • Uitlijnen van een item in een grid-cell/track/area
    • Alle items in grid (flexbox, declaratie in container element)
    • Éen item zelf (declaratie in specifieke item)

Automatisch staat deze waarde op stretch (volledig vullen van de cel).

Voorbeeld:

Belangrijk: om een gewone box te centreren, kunnen we de margin waarde op auto zetten!

TIP: Om elementen in hun respectievelijke cel zowel horizontaal als verticaal te centreren, maken we van het element een grid container met display: grid en gebruiken we justify-items: center en align-items: center. Voorbeeld:

.grid-center {
  display: grid;
  justify-items: center;
  align-items: center;
}

2.11 Flex container

Handige website

2.11.1 Aanmaken van een flex container

Je creëert een flex container-element met

  • display: flex
  • display: inline-flex

Alle directe kindelementen worden flexitems.


2.11.2 Richting items

Flex containers hebben een main axis en een cross axis.
Standaard gaat de main axis van links naar echts en de cross axis van boven naar onder. Dit kan aangepast worden met de flex-direction (row, row-reverse, column, column-reverse) property.

De container wordt opgevuld langs de main-axis.

Overflow (flex wrap)
Overflow van inhoud wordt geregeld met flex-wrap (nowrap/wrap/wrap-reverse).
Afgekort flex-flow.


2.11.3 Uitlijning

De uitlijning is op dezelfde manier van grid. Er zijn 2 mogelijke uitlijningen

  • Uitlijnen van grid in zijn container
    • justify-content (start/center/space-between/space-around/space-evenly) uitlijnen langs main axis
    • align-content (start/center/space-between/space-around) uitlijnen langs cross axis
  • Uitlijnen van een item in een grid-cell/track/area
    • Alle items in grid (flexbox, declaratie in container element)
      • justify-items (stretch/start/center/end/base-line) uitlijnen langs main axis
      • align-items (stretch/start/center/end/base-line) uitlijnen langs cross axis
    • Éen item zelf (declaratie in specifieke item)
      • justify-self (stretch/start/center/end/base-line) uitlijnen langs main axis
      • aligin-self (stretch/start/center/end/base-line) uitlijnen langs cross axis

Je kan bij flex-items makkelijk de tussenruimte verdelen met justify-content op space-between, space-evenly of space-around te zetten.

2.11.4 Volgorde items & grootte

Men kan de volgorde van items wijzigen met de order eigenschap (op item niveau).

De initiële grootte van een flex item kan ingesteld worden met flex-basis.

Flex items kunnen groeien of krimpen als er extra plaats (nodig) is in de container. Dit doen we met flex-grow en flex-shrink. Als deze waarde 0 is, kan deze niet groeien of krimpen. Vanaf >0 kan dit wel.
De afgekorte versie hiervan is gewoon flex.

flex-grow: 2;
flex-shrink 1;
flex-basis: auto;

wordt:

flex: 2 1 auto;

Handig voorbeeld: Om alle flex cellen even lang te maken over de breedte van een pagina, kan men de flex-basis op 0 zetten en de flex-grow op 1.


2.11.5 Marges

In het onderstaande voorbeeld staat margin op auto (standaardwaarde).

HTML CSS 
<ul>
  <li>Branding</li>
  <li>Home</li>
  <li>Services</li>
  <li>About</li>
  <li>Contact</li>
</ul>
 
ul {
  display: flex;
}

li {
  flex: 0 0 auto;
}


In het onderstaande stellen we de rechtermarge in op auto.

HTML CSS 
<ul>
  <li>Branding</li>
  <li>Home</li>
  <li>Services</li>
  <li>About</li>
  <li>Contact</li>
</ul>
 
ul {
  display: flex;
}

li {
  flex: 0 0 auto;
}
li:nth-child(1) {
  margin-right: auto;
}

In het laatste voorbeeld zetten we ook de linkermargin op auto.



2.12 Tekst en typografie

2.12.1 Lettertype

Als je custom lettertypes wilt gebruiken zijn er 2 opties om deze op een webpagina te gebruiken.

  • Beschik je over fysieke bestanden:
    • Download alle varianten
    • Plaats deze op de webserver in een aparte folder
    • Gebruik @font-face in CSS om lettertypes beschikbaar te maken
  • Beschik je over een embedcode:
    • Zoek bv. een Google Font en kies de gewenste stijlen
    • Kopieer de embedcode
      • Plaats dit in head van HTML pagina
      • Of @import regel in de CSS

Eigenschappen van lettertypes

  • font-family geprioritiseerde lijst van lettertypes
  • font-size grootte van het lettertype
  • font-size-adjust om de 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, bold, bolder, lighter
  • font-style weergave tekst, zoals normal, italic of oblique
  • font-variant kleinkapitaal, zoals small-caps
  • font-stretch uitrekken of indrukken
  • font de verzameleigenschap: font-style font-variant font-weight font-size/line-height font-family

2.12.2 Teksteigenschappen

Eigenschappen van tekst


2.12.3 Lijstopmaak

Eigenschappen voor lijstopmaak


2.13 Kleuren

Kleuren kunnen op 4 manieren omschreven worden:

  • een rgb(a)-code: rgba(145,233,12,0.7) (red, green, blue, (opacity))
  • een (verkorte) hex-code: #1e85af
  • keyword: red, green, blue
  • een hsl(a)-code: hsl(0, 100%, 100%) (hue, saturation, lightness, (opacity))

opacity: transparantie (waarde tussen 0 en 1)


2.13.1 Kleurverlopen

Kleurverlopen

Het gemakkelijkste is om hier een generator voor te gebruiken.

2.14 Achtergrond

Iedere box van een element heeft een achtergrond, default transparent


2.15 Afgeronde hoeken

Men kan de hoeken van elementen afronden. Dit doen we met:

Hier bestaat ook een generator voor.

2.16 Randafbeeldingen

Beeld voor de rand van een element

Hier bestaat eveneens een generator voor.

2.17 Boxshadow

box-shadow schaduw onder een element

Hier bestaat een generator voor.


2.18 Clip path

clip-path definieert een gebied/vorm en alles daarbuiten wordt weggeknipt

Hier bestaat een generator voor.


2.19 Beeldfilters en kleuren mengen

Beeldfilters

  • filter toepassen van grafische effecten, zoals blur of color shift, op afbeeldingen

Kleuren mengen

  • background-blend-mode mengen van achtergrondsafbeeldingen en achtergrondskleur element
  • mix-blend-mode inhoud van element mengne met zijn achtergrond en inhoud ouderelementen

2.20 CSS variabelen en rekenen

Rekenen
Je kan +, -, * en / gebruiken met alle eenheden.

De functie var() Je kan globale variabelen definiëren in het :root element (zie voorbeeld).

:root {
 --main-bg-color: pink;
}

body {
 background-color: var(--main-bg-color)
}

Dit doen we met een property value.


3. SASS

SASS is een CSS extension language. Het voegt extra features toe aan CSS. Tot voor kort ondersteunde CSS geen variabelen, maar in SASS bestaan variabelen al meer dan 10 jaar. SASS biedt naast variabelen ook nog andere features zoals interpolation, nested rules, mixins, functions, partials,... aan.

Voor SASS hebben we een preprocessor nodig, zoals 'Live Sass Compiler'. We schrijven deze code in een .scss bestand. Door op Watch Sass zal het bestand omgezet worden naar een normaal css bestand.

3.1 Variabelen

Men kan makkelijk variabelen maken met een $ teken. Voorbeeld: 

// Variabelen
$primary-color: rgb(173, 178, 247);
$light: white;
$font: Calibri, sans-serif;
$nav-link-color: white;

//Basis stijlen

body {
  font-family: $font;
  font-size: 1.1rem;
}

h1 {
  font-size: 3rem;
  text-align: center;
}

body, header {
  background-color: $primary-color;
}

//...

Vergeet geen link te leggen naar het CSS bestand vanuit HTML.


3.2 Nested rules

Met SASS kan je stijlregels nesten. Zo kan je onderstaande code

3.2.1 Descending selector

nav ul {
  ...
}
nav a {
  ...
}

Als volgt schrijven:

nav {
  ul {
    ...
  }

  a {
    ...
  }
}

3.2.2 Parent selector

Met het & teken kan men de parent selecteren in een nesting. Voorbeeld:

nav {
  a {
    display: block;
    color: $nav-link-color;
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
  }
}

&:hover staat in dit geval gelijk aan nav a:hover


3.3 Partials

Als je veel CSS @import-statements gebruikt dan kan dit het laden van de CSS in de browser vertragen. We doen dit beter uit slechts één file.
We kunnen in de main SCSS klasse bv. @import "variables" zetten. Dan zal de file genaamd _variables.scss door de compiler meegecompiled worden in 1 klasse. Je kan zo veel import regels doen als je wilt.
Note: de naam van een partial scss file moet met een _ beginnen.


4. Bootstrap

Bootstrap is een CSS-framework om op een eenvoudige en snelle manier een responsive website te maken. Er zijn twee manieren om bootstrap te gebruiken.

  • Compiled version
    Als we werken met de compiled version kan met Bootstrap gewoon zien als een CSS file (ev. met javascript).
  • Source files
    Het is ook mogelijk om met de .SCSS source files te werken en zelf het framework aan te passen.

We maken zelf meestal gebruik van gewoon de bootstrap.css file.

4.1 Containers

Om de webpagina van enige padding te voorzien en om eventueel de inhoud te centreren moet je een bootstrap container gebruiken. We voegen dus class="container" toe aan bv. een <div> element. Naar mate je venster vergroot/verkleint zal de container zich aanpassen.

4.2 Bootstrap grid system

Het bootstrap grid system gebruikt containers, rows en columns. Op onderstaande foto zie je hoe dit in zijn werk gaat.

4.3 Content

4.3.1 Reboot

Bootstrap maakt gebruik van een reboort-file die gebaseerd is op normalize.css. Je kan dit controleren door bootstrap-reboot.css eens te openen in VSCode.


4.3.2 Afbeeldingen

We kunnen afbeeldingen makkelijk responsive maken door aan het <img> element de bootstrap klasse img-fluid toe te wijzen.

4.4 Componenten

4.4.1 Buttons

We kunnen met Bootstrap snel mooie buttons maken door bv. class="btn btn-primary" toe te voegen aan een <button> element. Meer voorbeelden:

Er zijn nog veel componenten in bootstrap. Hiervoor ga je best naar de workshop 02_bootstrap_workshop.pdf of naar de boostrap website.