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

Presentatie over: "Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt 1 Les 3: Cascading Style Sheets."— Transcript van de presentatie:

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

2 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

3 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

4 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

5 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!

6 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: http://www.brainjar.com/asp/schemes/ http://ond.vvkso-ict.com/vvksomain/css/css.htm http://www.cssref.be

7 Webtechnologie Labo 1 7 Validatie Valid CSS CSS1: http://www.w3.org/TR/REC-CSS1http://www.w3.org/TR/REC-CSS1 CSS2: http://www.w3.org/TR/REC-CSS2http://www.w3.org/TR/REC-CSS2 Compatibiliteit van verschillende browsers nagaan: DW / W3schools Efficiënt coderen!

8 Webtechnologie Labo 1 8 Browserondersteuning www.w3schools.com

9 Webtechnologie Labo 1 9 DW support

10 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

11

12 Webtechnologie Labo 1 12 Toolbar http://chrispederick.com/work/firefox/we bdeveloper/download/#download Fouten moeten weg Waarschuwingen aandachtig evalueren

13 Webtechnologie Labo 1 13 Toolbar: validate local css

14 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

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

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

17 Webtechnologie Labo 1 17 Properties en values Overzicht CSS-properties http://www.htmlhelp.com/reference/css/ http://builder.com.com/5100-31- 5071268.html http://builder.com.com/5100-31- 5071268.html http://www.w3schools.com/css/css_referen ce.asp http://www.w3schools.com/css/css_referen ce.asp

18 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, … 100-900 font-sizexx-small xx-large (pt-waarde vb. 10pt)

19 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 !

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

21 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

22 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

23 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

24 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 }

25 Webtechnologie Labo 1 25 Kijk preferences na…

26 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 #330099 klasse.paratype2: achtergrond #99ccff

27 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)

28 Webtechnologie Labo 1 28 Resolutie 800 op 600 (vervolg)

29 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)

30 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)

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

32 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 !

33 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

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

35 Webtechnologie Labo 1 35 BOX structuur (2)

36 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

37 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;} - ->

38 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)

39 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 !!!

40 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

41 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

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

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

44 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

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

46 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

47 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 !

48 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

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

50 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; } -->

51 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

52 Webtechnologie Labo 1 52 New document: css

53 href rel type

54 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 

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

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

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

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

59 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;}

60 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

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

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

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

64 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

65 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

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

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

68 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.

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

70 Webtechnologie Labo 1 70 Magnifying tool / guides

71 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 (@import) 4. externe stijlbladen ( ) "cascading” volgorde is bepalend : hoe dichter bij de elementen zelf, hoe hoger de prioriteit

72 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

73 Webtechnologie Labo 1 73 Inheritance

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

75 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

76 Webtechnologie Labo 1 76 http://www.w3.org/TR/REC-CSS2/selector.html#link-pseudo-classes

77 Webtechnologie Labo 1 77 A-oefening 7 Voeg in A-oefening1.htm een paar hyperlinks toe http://spaceflight.nasa.gov/station/ http://www.nasa.gov/ 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….

78 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

79 Webtechnologie Labo 1 79 Browserondersteuning…

80 Webtechnologie Labo 1 80 Herhalingsoefening 1 Maak volgend document na