Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt 1 Les 3: Cascading Style Sheets

Webtechnologie Labo 1 2 Vraagjes 1. Waarvoor staat #FFFFFF? 2. Leg uit: title 3. Leg uit: alt 4. Geef een voorbeeld van een unaire tag 5. In een webcontext gebruikt men: A subtractieve kleurmenging B additieve kleurmenging D ik weet het niet 6. Wat is het verschil tussen een blok en een inline element? 7. Wat betekent: ‘deprecated’? 8. Onderstaand is vb van … A absolute padverwijzing B bookmark C relatieve padverwijzing D ik weet het niet

Webtechnologie Labo 1 3 Inhoud: Les 3 Basisprincipes CSS: Stijlregels xHTML-tag / klasse 3 niveau’s Validatie Efficient coderen Toolbar FF Properties en values Toepassen stijlregels

Webtechnologie Labo 1 4 Inleiding Style Sheets Stijlbladen Verzameling regels voor grafische opmaak van xHTML-pagina’s CSS Cascading Style Sheets Taal waarin Style Sheets geschreven zijn

Webtechnologie Labo 1 5 Kleuren: via inline CSS Cf vorige les: Kleuren koppelen aan elementen met het style-attribuut: Hoofdtitel Kleinste titel Dit is een gekleurde paragraaf OPGELET: om kleuren te gebruiken in een volledige website, zijn er veel efficiëntere manieren!

Webtechnologie Labo 1 6 CSS basisprincipes Grafische opmaak (CSS) wordt gescheiden van structuur (xHTML) Grafische opmaak wordt zoveel mogelijk in een extern bestand geplaatst (*.css) Gemakkelijk te onderhouden/updaten Geen overbodige code Voorbeelden:

Webtechnologie Labo 1 7 Validatie Valid CSS CSS1: CSS2: Compatibiliteit van verschillende browsers nagaan: DW / W3schools Efficiënt coderen!

Webtechnologie Labo 1 8 Browserondersteuning

Webtechnologie Labo 1 9 DW support

Webtechnologie Labo 1 10 Efficiënt coderen CSS: bedoeld om snel en makkelijk stijlen aan te passen; Op 3 verschillende plaatsen vb zelfde lettertype bepalen heeft niet zoveel zin en maakt aanpassen véél omslachtiger (en je schrijft teveel code) Geraak niet in de knoei met kleuren: als je start met kleuren: verder werken met kleuren… Goede hulp: FF toolbar

Webtechnologie Labo 1 12 Toolbar bdeveloper/download/#download Fouten moeten weg Waarschuwingen aandachtig evalueren

Webtechnologie Labo 1 13 Toolbar: validate local css

Webtechnologie Labo 1 14 Syntax: voorbeeld color: #FF0033; font-style: italic; font-weight: bold; font-size: 32pt; property:value (eigenschap)(waarde) scheidt property en value

Webtechnologie Labo 1 15 Syntax selector { property1 : value; property2 : value; } { } groepeert stijlregels xHTML- element of.klasse eigenschap : scheidt property en value waarde ; scheidt stijlregels

Webtechnologie Labo 1 16 Inhoud: Les 3 Basisprincipes CSS: Properties en values font color en background text box + onderdelen zwevende elementen Toepassen stijlregels

Webtechnologie Labo 1 17 Properties en values Overzicht CSS-properties html html ce.asp ce.asp

Webtechnologie Labo 1 18 Properties font font-family lettertype (meerdere lettertypes gescheiden door komma’s) font-style italic oblique font-variantsmall-caps font-weightnormal, bold, … font-sizexx-small xx-large (pt-waarde vb. 10pt)

Webtechnologie Labo 1 19 A-oefening 1 Gebruik de documenten A-oefening1.htm en A-oefening1.css (deze documenten zijn aan elkaar gekoppeld en moeten in dezelfde map blijven staan!) Laat A-oefening1.htm onveranderd! Dit bestand dient enkel om de veranderingen in A-oefening.css te tonen ! Werk in A-oefening1.css !

Webtechnologie Labo 1 20 A-oefening 1 De volgende items zijn aanpasbaar: body klasse.datum klasse.intro klasse.paratype1 klasse.paratype 2 h2 h1

Webtechnologie Labo 1 21 A-oefening 1 verander de stijlregels in A- oefening1.css met de volgende eigenschappen: body: lettertype Arial, Helvetica h1: lettergrootte x-large, weight 800 h2: lettergrootte 16pt, weight 600, cursief klasse.datum: cursief, 8pt klasse.intro: weight 600, grootte 12pt klasses.paratype1 en.paratype2: lettergrootte 10pt sla A-oefening1.css op en bekijk telkens de veranderingen in A-oefening1.htm

Webtechnologie Labo 1 22 Properties color/background colortekstkleur background-colorachtergrondkleur background-image URL(path/image.gif) background-repeatrepeat, norepeat repeat-x, repeat-y background-attachmentscroll, fixed background-position top, middle, bottom left, center, right meerdere waarden met spaties

Webtechnologie Labo 1 23 Shorthand 'font' property = shorthand property voor 'font-style' 'font-variant' 'font- weight' 'font-size', 'line-height' and 'font- family' 'background' property = shorthand property ipv alle individuele background properties (i.e., 'background-color', 'background-image', 'background- repeat', 'background-attachment' and 'background-position') etc

Webtechnologie Labo 1 24 Shorthand PIH: gebruik volledige vormen ajb: leesbaarheid code is hoger Gebruik geen shorthand in het 1 e sem p { font: 12pt/14pt sans-serif } p { font: 80% sans-serif } p { font: x-large/110% "new century schoolbook", serif } p { font: bold italic large Palatino, serif } p { font: normal small-caps 120%/120% fantasy }

Webtechnologie Labo 1 25 Kijk preferences na…

Webtechnologie Labo 1 26 A-oefening 2 Sla A-oefening1.htm op als A-oefening2.htm Sla A-oefening1.css op als A-oefening2.css verander de stijlregels in A- oefening1.css met de volgende eigenschappen: body: achtergrond #ffffcc, tekstkleur navy h1: achtergrond #330099, tekst #ffffcc h2: tekst # klasse.paratype2: achtergrond #99ccff

Webtechnologie Labo 1 27 B-oefening1 Verander de stijlregels in A-oefening1.css met de nodige eigenschappen tot je het volgende verkrijgt: (gebruik bgspace.gif als background image) 1024x768 (beeldscherm resolutie)

Webtechnologie Labo 1 28 Resolutie 800 op 600 (vervolg)

Webtechnologie Labo 1 29 Properties text text-decorationunderline, overline, line-through, none text-transformcapitalize, uppercase lowercase text-alignleft, right, center, justify text-indent(hoeveelheid inspringen 1e lijn)

Webtechnologie Labo 1 30 Properties text vertical-alignsub, super, top, middle, bottom text-top, text-bottom word-spacing (hoeveelheid spacing tussen woorden) letter-spacing(hoeveelheid spacing tussen letters) line-height(lijnhoogte)

Webtechnologie Labo 1 31 Properties extra margin-left (grootte linkermarge) margin-top (grootte bovenmarge) margin-right (grootte rechtermarge) margin-bottom (grootte ondermarge)

Webtechnologie Labo 1 32 A-oefening 3 verander de stijlregels in A-oefening1.css met de nodige eigenschappen tot je het volgende verkrijgt: ! de achtergrond scrollt niet mee !

Webtechnologie Labo 1 33 B-oefening 2 Pas de opmaak van A-oefening1.css aan tot je een compleet verschillende layout krijgt (opmaak naar keuze) Sla die nieuwe css op als B- oefening2.css, C-oefening2.css, enz. Bekijk in A-oefening1.htm hoe de stylesheet aan de xHTML-pagina gelinkt wordt Maak links in A-oefening1.htm zodat je dezelfde pagina telkens in een andere layout kan bekijken

Webtechnologie Labo 1 34 BOX structuur (1) Ieder xHTML element wordt beschouwd als een rechthoekig gebied : de box

Webtechnologie Labo 1 35 BOX structuur (2)

Webtechnologie Labo 1 36 BOX attributen De margin = afstand rand van element tot rand van parent-element of rand van aangrenzend element. De border = rand van element. De padding = afstand tussen rand van element en inhoud. width en height = afmetingen van de box

Webtechnologie Labo 1 37 BOX margins Margin-top, margin-right, margin-bottom, margin-left of margin Waarden = Lengte, percentage of auto (kunnen negatief zijn) <!- -.p1{background-color : #FF00FF ;}.p2{background-color : #00FF00 ; margin-left : 15px;}.p3{background-color : #FFFF00 ; margin-left : 30 px;} - ->

Webtechnologie Labo 1 38 BOXBorder(2) border-top-width border-right-width border-bottom-width border-left-width border-width border liever (nog) niet gebruiken thin, medium, thick en (lengte) vier door spaties gescheiden waarden verkorte schrijfwijze voor eigenschappen van de rand (border-width, border- style, border-color)

Webtechnologie Labo 1 39 BOX padding padding-top padding-right padding-bottom padding-left padding liever (nog) niet gebruiken (lengte) of (percentage) verkorte schrijfwijze voor eigenschappen van padding Let op browser ondersteuning !!!

Webtechnologie Labo 1 40 BOX samenvatting de margin de border de padding width, height margin, margin-left, margin-right, margin-bottom, margin-left border-style, border-color, border-width, border-top-width, border-top, border-right-width, border-right, border-bottom-width, border-bottom, border-left-width, border-left, border padding, padding-top, padding-right, padding-bottom, padding-left width, height

Webtechnologie Labo 1 41 BOX border(1) border-style border-color none, dotted, dashed, solid, double, groove, ridge, inset en outset één, twee, drie of vier door Spaties gescheiden kleuren. Volgorde = één : voor alle zijden twee : eerste = boven en onder tweede = rechts en links drie : tweede = rechts en links Vier : boven, rechts, onder en links

Webtechnologie Labo 1 42 Om volgende blok eronder te krijgen ipv ernaast=> clear: none, left, right, both Zwevende elementen

Webtechnologie Labo 1 43 voorbeeld <!--.s1{ float: left; font-size:36pt; width: 100px; margin: 15px; padding: 10px; background-color: #00FF00 }.s2 { background-color: #FFFF00 ; } -->

Webtechnologie Labo 1 44 Inhoud: Les 3 Basisprincipes CSS: Properties en values Toepassen stijlregels Inline, stijblokken, extern Selectoren combineren Contextgebonden selectoren DW als hulp bij bestaande css Cascading Inheritance

Webtechnologie Labo 1 45 Toepassen stijlregels Stijlregels voor elementen h1 body …. Stijlregels voor objecten van bepaalde klasse.paragraaf_standaard.paragraaf_opvallend.nadruk

Webtechnologie Labo 1 46 Stijlregels voor objecten van een bepaalde klasse Om verschillende types (klasses) te maken van een xHTML-element bijvoorbeeld: 2 soorten paragrafen Oproepen: class=“ …“ bijvoorbeeld: class=“paraopvallen” Voorbeeld:.parastandaard { background-color: white; }.paraopvallen {background-color: silver; }. geeft aan dat het om een zelfgekozen naam gaat, i.p.v. een xHTML-element

Webtechnologie Labo 1 47 Stijlregels 3 niveau’s Inline Style: opmaak specifiek voor één tag binnen pagina Stijlblokken in header van pagina: opmaak specifiek voor één xHTML- pagina Externe style sheets: opmaak voor meerdere xHTML-pagina's We verkiezen extern bestand !

Webtechnologie Labo 1 48 Stijlregels INLINE “inline”-methode style=“eigenschap:waarde ; eigenschap: waarde ; …” Veranderen alleen uitzicht van wat tussen begin- en eindtag staat. Voorbeeld: twee ogen zo blauw Bij uitzondering gebruiken

Webtechnologie Labo 1 49 Stijlregels STIJLBLOK Stijlblokken kunnen binnen xHTML documenten geplaatst worden met <!-- stijlregels -->... Om oudere browsers te helpen

Webtechnologie Labo 1 50 Stijlregels STIJLBLOK <!-- body {font-family:Arial, Helvetica, sans-serif; font-size: 10pt; } h1 { font-size: 32pt; } h2 { font-size: 20pt; } h1, h2 { font-weight: bold; color: #336699; }.code { font-family: "Courier New"; font-size: 13pt; } -->

Webtechnologie Labo 1 51 Stijlregels EXTERN STIJLBLAD Apart tekstbestand waarin stijlregels staan, met extensie.css (enkel css- syntax) Hoe hangen we alles aan elkaar? Door middel van het element In de head van de pagina, zodat de browser weet hoe de opmaak is, voor hij begint met de pagina te tonen. 3 attributen meegeven aan link

Webtechnologie Labo 1 52 New document: css

href rel type

Webtechnologie Labo 1 54 Stijlregels EXTERN STIJLBLAD href=“voorbeeld.css” Een hypertext reference naar de CSS file Relatief adresseren rel=“stylesheet” Meegeven om welk bestand het gaat type=“text/css” Het MIME type meegeven zodat de browser weet hoe hij de code moet behandelen Link is een unaire tag 

Webtechnologie Labo 1 55 Stijlregels EXTERN STIJLBLAD Alles op één lijn tikken, dit is slechts een voorbeeld. Oppassen: als er # in de relatieve padverwijzing staat, CSS kan moeilijk doen.

Webtechnologie Labo 1 56 Stijlregels EXTERN STIJLBLAD stijlregels voor klasses stijlregels voor elementen

Webtechnologie Labo 1 57 Stijlregels samenvatting Extern bestand: *.css-file vb. spacewalk.css Stijlblok:... Inline bij xHTML-element css-stijlregels

Webtechnologie Labo 1 58 A-oefening 4 Maak de volgende opmaakoefening met paragrafen met inline styles

Webtechnologie Labo 1 59 Selectoren combineren Indien dezelfde stijlregels gelden voor meerdere elementen/selectoren : selectoren combineren met “,” h1, h2 { color:red;} h1 {font-size : 32pt;} h2 {font-size : 28pt;}

Webtechnologie Labo 1 60 Contextgebonden selectoren (1) Als elementen binnen andere elementen voorkomen, kan men daaraan ook Afwijkende eigenschappen toekennen : h3 b {font-weight : 900;} tekst met default bold font-weight tekst met font-weight 900 tekst met default font-weight

Webtechnologie Labo 1 61 Contextgebonden selectoren (2) LET OP : verschil tussen p.red {color : red;} rood en p.red {color : red;} rood rood

Webtechnologie Labo 1 62 A-oefening 5 Voeg een stijlblok toe in oefeningA5.htm zodat je volgende opmaak krijgt:

Webtechnologie Labo 1 63 A-oefening 6 Maak bij A-oefening6.htm een externe stylesheet link zodat je de volgende opmaak krijgt

Webtechnologie Labo 1 64 B-oefening6 Maak 2 andere stylesheets voor de opmaak van A-oefening6.htm aan tot je een compleet verschillende layout krijgt Sla die nieuwe css op als Boefening6.css, Coefening6.css, enz. Maak de link tussen de CSS en de xHTML-file!! Hou er ook rekening mee dat het 1024x768 en 640x480 behoorlijk dient uit te zien

Webtechnologie Labo 1 65 Weergave van stijlregels Attribuut media van bepaalt voor welke media de stijlregels worden toegepast screenweergave zonder pagina-indeling op een scherm printweergave in pagina-opmaak bij het afdrukken of als print-preview auralweergave door een spraaksynthesizer allweergave door alle apparaten projectiongeprojecteerde presentaties brailleweergave met braillemachines tvweergave op televisie

Webtechnologie Labo 1 66 Weergave van stijlregels Graag ook specifieke print css; In DW 8 kan je style rendering kiezen

Webtechnologie Labo 1 67 Weergave van stijlregels Ipv via menu kan je ook icoontjes zichtbaar zetten…

Webtechnologie Labo 1 68 A-oefening 6 vervolg Voeg bij A-Oefening6 een CSS toe die er voor zorgt dat het recept mooi kan worden afgedrukt.

Webtechnologie Labo 1 69 Interpreteren van bestaande css? Design view:

Webtechnologie Labo 1 70 Magnifying tool / guides

Webtechnologie Labo 1 71 Cascading hoe meer specifiek een stijlregel is, hoe meer prioriteit deze heeft: 1. inline stijlen (,,…) 2. ingesloten stijlblokken ( ) 3. geïmporteerde stijlbladen 4. externe stijlbladen ( ) "cascading” volgorde is bepalend : hoe dichter bij de elementen zelf, hoe hoger de prioriteit

Webtechnologie Labo 1 72 DW 8: css: cascading Zelfs als je maar enkele specifieke kenmerken toevoegt, moet je steeds rekening houden met eventuele properties die worden overgeërfd

Webtechnologie Labo 1 73 Inheritance

Webtechnologie Labo 1 74 Effecten met hyperlinks CSS:4 aspecten pseudo-selectoren linka:link activea:active visiteda:visited hover (bij mouse-over)a:hover

Webtechnologie Labo 1 75 Effecten met hyperlinks a:link, a:visited, a:active {text-decoration: none; color: white; } a:hover { text-decoration: underline; color: red; } als dezelfde regels gelden voor meerdere selectoren: scheiden met komma

Webtechnologie Labo

Webtechnologie Labo 1 77 A-oefening 7 Voeg in A-oefening1.htm een paar hyperlinks toe Voeg in A-oefening1.css de nodige stijlregels toe zodat links standaard onderlijnd zijn en bij mouse-over van achtergrondkleur veranderen en niet langer onderlijnd worden Zorg dat je precies door hebt wat de verschillende aspecten van a zijn….

Webtechnologie Labo 1 78 B-oefening7 Pas de eigenschappen van de box toe om volgende lay-out na te bootsen in IE. Gebruik de file B-oefening8.htm

Webtechnologie Labo 1 79 Browserondersteuning…

Webtechnologie Labo 1 80 Herhalingsoefening 1 Maak volgend document na