CSS by Rick

CSS bestand koppelen

r_hazebroek — 2017-05-31 13:25:52 UTC

Plaats de link naar je CSS-bestand in je head-tag:

CSS Spiekbriefje

r_hazebroek — 2017-05-31 13:31:16 UTC

In deze PDF staan allerlei eigenschappen en waarden in die je kunt gebruiken. De meesten staan ook op deze pagina.

Meer variatie?
Er zijn op het internet nog meer spiekbriefjes te vinden, Google op "CSS cheatsheet" en vind je eigen.

Eigenschappen en waarden zoeken

r_hazebroek — 2017-05-31 13:31:41 UTC

Syntax: Element selector

r_hazebroek — 2017-05-31 13:39:42 UTC

In CSS kun je aan de hand van de afkorting van de tag deze tag gaan vormgeven.

Selector: de afkorting van de tag.

Eigenschap (property): de eigenschap die je wilt wijzigen, bijvoorbeeld de tekstkleur is 'color'.

Waarde (value): de waarde die daar bijhoort, bijvoorbeeld de kleurcode.

w3schools.com/css/css_syntax.asp

Schaduw

r_hazebroek — 2017-05-31 13:45:13 UTC

box-shadow: 10px 10px 10px rgba(0,0,0,0.75);

10px 10px 10px =
horizontaal, verticaal en spreiding
0,0,0, = RGB code
0.75 = doorzichtbaarheid

Ronde hoeken

r_hazebroek — 2017-05-31 13:45:41 UTC

border-radius: 10px 10px 10px 10px;

Linksboven - rechtsboven - linksonder - rechtsonder

CSS Generator

r_hazebroek — 2017-05-31 13:47:40 UTC

Met een CSS generator kun je een CSSeigenschap visueel ontwerpen, zoals schaduw (box-shadow) of ronde hoeken (border-radius)

Tekst schaduw

r_hazebroek — 2017-05-31 13:49:07 UTC

text-shadow: 2px 2px #ff0000;

Achtergrondkleur

r_hazebroek — 2017-05-31 13:50:06 UTC

background-color: #0000000;

Achtergrond-afbeelding

r_hazebroek — 2017-05-31 13:50:20 UTC

background-image: url('images/plaatje.jpg');

Achtergrond herhaling

r_hazebroek — 2017-05-31 13:50:50 UTC

background-repeat: 
no-repeat;

Mogelijke waarden:
no-repeat:
geen herhaling

repeat-x:
herhaal horizontaal

repeat-y:
herhaal verticaal

Achtergrond grootte

r_hazebroek — 2017-05-31 13:51:42 UTC

Achtergrond-vullend

backgrounde-size: cover;

Achtergrond aanpassen aan de breedte:

backgrounde-size: 100% auto;

Achtergrond aanpassen aan de hoogte:

backgrounde-size: auto 100%;

Eenheden in CSS

r_hazebroek — 2017-05-31 13:56:28 UTC

Voor breedtes, hoogtes en afstanden kun je in CSS verschillende eenheden gebruiken.

1. px: Pixels
Pixels schrijf je als px, wil je een breedte invoeren van 100 pixels, dan typ je:

100px

2. vw: Viewpoint width
De breedte van het venster van je browser. 1vw is 1/100 van de breedte van je venster. De hele breedte van je scherm is dus:

100vw

3. vh: Viewpoint height
De hoogte van het venster van je browser. 1vw is 1/100 van de hoogte van je venster. De hele hoogte van het venster is dus:

100vh

4. %: Procenten
Procenten kun je gebruiken om voor een achtergrond de breedte of hoogte van het element te gebruiken.

100%

Syntax: Class selector

r_hazebroek — 2017-05-31 14:15:08 UTC

In HTML kun je een tag een eigenschap class geven. De waarde is dan de naam die je de tag wilt geven. Met die naam kun je in CSS aan de hand van de class-selector deze tag gaan vormgeven.

Selector: de naam van de class

Eigenschap (property):
hetzelfde als de element selector

Waarde (value):
hetzelfde als de element selector

w3schools.com/css/css_syntax.asp

Tekst-kleur

r_hazebroek — 2017-05-31 14:21:50 UTC

color: #000000;

Tekst-grootte

r_hazebroek — 2017-05-31 14:22:05 UTC

font-size: 20px;

Lijnhoogte

r_hazebroek — 2017-05-31 14:22:15 UTC

line-height: 20px;

Lettertype

r_hazebroek — 2017-05-31 14:35:22 UTC

font-family: Helvetica, arial, serif;

Een serie lettertypes. De eerste wordt gekozen door de browser, tenzij deze niet beschikbaar is, dan kijkt de browser naar het volgende lettertype.
Alleen 'web safe fonts' zijn mogelijk, tenzij je @font-face gebruikt. Zie: "Een zelfgekozen lettertype toevoegen".

https://www.w3schools.com/cssref/css_websafe_fonts.asp

Extra eigenschappen

r_hazebroek — 2017-05-31 14:37:40 UTC

Tekst eigenschappen

r_hazebroek — 2017-05-31 14:37:58 UTC

Achtergrond eigenschappen

r_hazebroek — 2017-05-31 14:38:13 UTC

Witruimte

r_hazebroek — 2017-05-31 14:38:48 UTC

Witruimte binnen een element

r_hazebroek — 2017-05-31 14:39:04 UTC

Met padding voeg je witruimte toe binnen een div (of andere tag).

padding: 5px 10px 20px 30px;

De volgorde is klokgewijs: padding boven, padding rechts, padding onder en padding links.

Witruimte buiten een element

r_hazebroek — 2017-05-31 14:39:20 UTC

Met margin voeg je witruimte toe buiten een div (of andere tag).

margin: 5px 10px 
20px 30px;

De volgorde is kloksgewijs: margin boven, margin rechts, margin onder en margin links.

CSS bestand koppelen

r_hazebroek — 2017-05-31 14:43:03 UTC

CSS: Achtergrondkleur en witruimte

r_hazebroek — 2017-05-31 14:43:22 UTC

background-color, padding

CSS: Tekst vormgeven

r_hazebroek — 2017-05-31 14:44:26 UTC

font-family, font-size, color...

Een zelfgekozen lettertype toevoegen

r_hazebroek — 2017-05-31 14:47:23 UTC

Breedte en hoogte

r_hazebroek — 2017-05-31 14:51:25 UTC

Breedte

r_hazebroek — 2017-05-31 14:51:38 UTC

width: 100px;

Hoogte

r_hazebroek — 2017-05-31 14:51:47 UTC

height: 100px;

Tekst uitlijnen

r_hazebroek — 2017-05-31 14:53:04 UTC

text-align: left;

left, center of right

Tekst gewicht

r_hazebroek — 2017-06-12 11:43:34 UTC

font-weight: bold;bold, normal, light
of: 100,200,300,400.,500..

Border (rand)

r_hazebroek — 2017-06-12 11:44:49 UTC

Rand

r_hazebroek — 2017-06-12 11:45:13 UTC

border: 1px solid #0000;

1px = dikte
solid = dashed, solid, double, grouve...
#0000 = kleurcode

https://www.w3schools.com/css/css_border.asp

Uitlijnen

r_hazebroek — 2017-06-12 11:46:24 UTC

Naast elkaar zetten van tags

r_hazebroek — 2017-06-12 11:46:44 UTC

float:left;

r_hazebroek — 2017-06-12 11:48:22 UTC

Afbeelding in het midden plaatsen

r_hazebroek — 2017-06-12 11:48:30 UTC

img{
text-align: center;
}

Animeren in CSS

r_hazebroek — 2017-06-12 11:55:57 UTC