Websitecursus deel 2 CSS

Transcriptie

1 Websitecursus deel 2 CSS A Eskwadraat WebCie [email protected] 5 oktober 2015

2 Introductie Vorige week HTML Deze week CSS Volgende week Javascript

3 CSS CSS (Cascading Style Sheets) bepalen hoe een website eruit ziet Bijvoorbeeld kleur van text en achtergrond, maar ook plaats van blokken tekst of plaatjes HTML wordt soms ook gebruikt om bijvoorbeeld kleur en lettertype te bepalen, maar hier is HTML oorspronkelijk nooit voor bedoeld! CSS wel Door de code voor opmaak en de code voor stijl appart te houden is het veel overzichtelijker: HTML dient alleen voor opmaak en CSS alleen voor hoe de website eruit ziet

4 CSS syntax CSS ziet er als volgt uit: CSS voorbeeld p { color: red; text-align: center;} Voor leesbaarheid is het (net als bij HTML) mooier om het netjes onder elkaar te zetten: CSS voorbeeld 2 p { color: red; text-align: center; }

5 CSS syntax (2) De selector kan een html-tag zijn, maar kan ook verwijzen naar een class of id Je kan een class of id definieren in bijna elke html-tag op de volgende manier; class in HTLM <div class="naam"> Voor het selecteren van een id gebruikt CSS een # en voor een class een. class in CSS.naam { color: red;}

6 CSS in HTML gebruiken Voor het gebruiken van CSS met HTML zijn er drie mogelijkheden: 1 Een los CSS bestand, die wordt ingeladen in de head van HTML: Voorbeeld 1 <link rel="stylesheet" type="text/css href="mystyle.css" /> Voorbeeld 2 2 CSS in de head van HTML: <style> p { color: red;} </style> 3 CSS rechtstreeks tussen de code: Voorbeeld 3 <div style="color: red;">

7 Achtergrond en tekst Je kunt met CSS vele dingen aanpassen, zoals de achtergrond CSS achtergrond body { background-color: #d0e4fe;} en tekst: CSS tekst p { font-family: "Times New Roman"; font-size: 20px;} Maak nu een los CSS bestand, include het in html en probeer bovenstaande uit (Hint: kijk op voor alle properties die je mbv CSS kan aanpassen)

8 Box model Een HTML element kan je zien als een Box Een Box bestaat uit 4 lagen: Content Dit is de inhoud van je element (bijvoorbeeld tekst) Padding Dit is de ruimte tussen de inhoud en de rand van je element, dit heeft geen kleur Border Dit is de rand van je element Margin Dit is de ruimte om de rand heen, zodat verschillende elementen niet met hun rand over elkaar zitten Als je de size van een element aanpast met CSS, veranderd alleen de grootte van de Content, het eigenlijke element is dus groter! De breedte van een element wordt gegeven door: width + left padding + right padding + left border + right border + left margin + right margin

9 Positionering Om html elementen op de goede plek te zetten zijn verschillende mogelijkheden: Standaard zijn alle elementen static; dat wil zeggen elementen worden van boven naar beneden geplaatst Fixed elementen worden gepositioneerd relatief aan je scherm, maar blijven wel staan als je naar beneden scrollt. Relative elementen worden gepositioneerd relatief aan hun normale plaats Absolute elementen worden gepositioneerd relatief aan het element dat eromheen staat CSS positie p { position: relative; left: -20px;}

10 Float Soms wil je dat tekst om een plaatje heen wrapt Dat kan je doen met behulp van float Elementen kunnen alleen maar horizontaal floaten Bijvoorbeeld: CSS float img { float: right;} elementen die na een float komen wrappen erom heen

11 Align Block elemten zijn elementen zoals <p>, <div> en <h1> Deze elementen nemen standaard de hele breedte van het scherm in beslag en hebben een regelovergang ervoor en erna Om deze elementen op de goede plek te krijgen zijn een aantal opties: Om een element in het midden te zetten, kan je margin-left en margin-right op auto zetten Wil je een element links of rechts hebben, dan kan je dat doen door float: right; Of door een absolute positie: postion: absolute; right: 0px; Probeer nu zelf alle delen van je website op de goede plaats te krijgen. Maak bijvoorbeeld een menubalk aan de linkerkant, en tekst rechts. Of verzin zelf iets

12 CSS3 CSS3 is de nieuwste versie van CSS en hiermee kan je heel makkelijk dingen voor elkaar krijgen waar normaal gesproken veel code voor nodig was. Het is bijvoorbeeld mogelijk om ronde hoeken te maken in je randen via de border-radius property Ook is het mogelijk om gradients in je website te krijgen via linear-gradient property Verder kan je ook makkelijk schaduw effecten toevoegen aan tekst en boxes Het is zelfs mogelijk om animaties te maken in CSS, zoals bijvoorbeeld een kleurovergang, of een element dat kan bewegen Probeer dit zelf uit. Kijk op voor voorbeelden