CSS: cascading stylesheets Mediamatic NetLes | dHTML 30 December 201830 December 2018 CSS: cascading stylesheets Ontwerpen met webstandaarden

Wat is een cascading stylesheet? CSS 30/12/18 Mediamatic NetLes | dHTML 30 December 201830 December 2018 Wat is een cascading stylesheet? Opmaakinstructie (stijl), gescheiden van content Cascading: “Trapsgewijs opmaakmodel” de laatstgekregen instructie overruled de vorige, nakomelingen erven eigenschappen van (voor)ouders Voorbij de beperkingen van HTML Toepassen kan op 3 manieren: extern, embedded, inline Oefening: embedded stijl bekijken en wijzigen, inline stijl bekijken

Mediamatic NetLes | dHTML CSS 30/12/18 Mediamatic NetLes | dHTML 30 December 201830 December 2018 Wat is de syntax? H1, h2, h3, h4 { font-size: 175%; text-transform: uppercase; color: yellow } H1 is de selector en zijn properties staan tussen {} Oefening: tik deze code in maak de h1 groter

Mogelijke selectors Alle html-tags: h1, p, body, etcetera CSS 30/12/18 Mogelijke selectors Alle html-tags: h1, p, body, etcetera Een custom class: of een unieke id: in de css .menu { } #uniek { } in de html <p class=‘menu’> <p id=“uniek”> pseudo-class (bijv. links) a:link, a:hover { } (let op de volgorde: link, visited, hover, active) Combinaties, zoals: h4 ul { } ul#uniek li { } a.menu:link { } Oefening: links zonder onderstreping, met hover-effect

Mediamatic NetLes | dHTML CSS 30/12/18 Mediamatic NetLes | dHTML 30 December 201830 December 2018 Waarom stylesheets? Design scheiden van content: via een extern css is de hele site snel aanpasbaar Zelfde site, andere css (media: print of: handheld) Structured text; semantiek; SEO; database Toegankelijkheid Webstandaard, cross-platform, cross-browser Meer controle over het ontwerp, voorheen onmogelijk in HTML Oefening: externe CSS in Dreamweaver aanroepen en marges en kleuren aanpassen

Mediamatic NetLes | dHTML CSS 30/12/18 Mediamatic NetLes | dHTML 30 December 201830 December 2018 Beperkingen van HTML Niet uniform cross-platform (bijv. Font-size) Interlinie, spatiering, fontgrootte, stijl van links Images, bijv. niet clipbaar Positionering alleen via geneste tabellen en trans.gifs Border-mogelijkheden zeer beperkt Oefening: wijzig van p de interlinie, Wijzig van h1 fontgrootte, spatiering, border Maak een bijpassende unordered list-stijl (ul) (zo simpel mogelijk!)

En hoezo geen tabellen? Traag Excessief gebruik van trans.gif CSS 30/12/18 En hoezo geen tabellen? Traag Excessief gebruik van trans.gif Drama qua onderhoud Bedoeld voor tabulaire data (schemaatjes) Maar wat dan?

CSS-positioning Tabellen zijn niet meer nodig om te positioneren 30/12/18 CSS-positioning Tabellen zijn niet meer nodig om te positioneren Spacer-gifs ook niet Oefening: bekijk oefening4_3coldemo.html en pas ‘m hier en daar aan. (Go to Code in Dreamweaver) Bekijk dan oefening4_3coldemo2.html Bekijk thenoodleincident.com

CSS 30/12/18 Zijn er ook nadelen? Verschillen in browsers (bijv. met meerkoloms) Op te lossen met truukjes en hacks Oude browsers (IE4 etc) ondersteunen css slecht of niet Moeilijker te leren en toe te passen dan HTML Wysiwyg editors previewen (nog) niet perfect

Tips Groeperen: h1, h2, h2 ul, p.special { } CSS 30/12/18 Tips Groeperen: h1, h2, h2 ul, p.special { } Fontgrootte in % (of em) zorgt dat IE/win kan schalen. Let wel op overerven! Numerieke interlinie werkt het best: 85%/1.5 Shorthand voorbeeld: {font: bold italic small-caps 28px/1.5 Arial, "Lucida Console"} Shorthand margin/padding/border (clockwise): margin: 0, 10%, 0, 10px (Top Right Bottom Left) margin: 0, 10% (TB, RL) Display: block, inline, list-item, none

Handige sites csszengarden.com sitepoint.com (o.a. het boek) 30/12/18 Handige sites csszengarden.com sitepoint.com (o.a. het boek) alistapart.com thenoodleincident.com (bijv. 3-koloms-layout) glish.com (bijv. dynamische menu's) hotscripts.com (sniffer scripts) positioniseverything.net (bugs en css) w3.org css validator handleidinghtml.nl, blooberry.com (reference)

30/12/18 CSS