Markup: CSS en HTML5 Hoorcollege Webdesign 5 16 mei 2014 Christof van Nimwegen

1

CSS: Waarom ook alweer…. 

HTML 

 



was bedoeld voor documentstructuur (text met verschillende levels in headings en body text) Plaatjes Tabellen (ook gebruikt voor positioneren)

HTML 3.2 



mogelijkheid om lettertypen, kleuren en vele andere visuale aspecten te definieren. De eigenlijke geboorte van web DESIGN (nu was de content niet meer het belangrijkste, ook de presentatie)

2

Style sheets en style sheet talen   



De plek van descriptive markup is helder Maar waar komt de presentatie dan terecht? Style sheets, geschreven in een style sheet taal Diverse style sheet talen   

DSSSL, voor SGML XSL, voor XML (XSL-FO, XSLT, XPath) CSS, voor (X)HTML en XML

Voordelen CSS   

Minder data download, kortere laadtijd Schonere code is beter voor zoekmachines Hoeft maar 1x iets te veranderen, dus:  

  

Efficiëntie en tijdswinst in het ontwikkelproces Makkelijker onderhoud

Meer vormgevingsmogelijkheden dan HTML Cooler design Responsivenses ! 4

Cascading?

  

Diverse plekken voor style specificatie Voorrangsregels bepalen welke style "wint" Prioriteit (in afnemende volgorde)  Inline style (in een HTML element  Embedded style (in the tag)  Extern style sheet  Browser standaardwaarden (default)

Cascading?

6

Locatie style sheet 

Externe style sheet

Head!

My text.



Externe style sheetS

CSS Selectors 

Selector: WAT krijgt een style? 

x (elementen van een bepaald type, bv. lijst) 



# (zaken die een ID hebben adresseren) 



.error {color: red;}

* (alles) 



#container {width: 960px;}

. (zaken die een CLASS hebben adresseren) 



ul { color: red; }

* {margin: 0;}

…….heel veel meer 8

Gecombineerde Selectors 

  

a.b *.b a#b a, b

a met class attribute b alle elementen met class attribute b a met id attribute b a of b



pseudo-classes, bij voorbeeld  A:active  A:visited  A:visited:active  …….



en nog veel meer in CSS3 9

CSS Property: welk eigenschap stylen? color

red, yellow, rgb(212,120,20)

font-style

normal, italics, oblique

font-size

12pt, larger, 150%, 1.5em

text-align

left, right, center, justify

line-height

normal, 1.2em, 120%

display

block, inline, list-item, none

 

http://www.w3schools.com/cssref/ vaardigheid, oefening en opzoeken  onze practicumoefeningen (basics)  http://www.w3.org/Style/Examples/011/firstcss  www.w3schools.com (maar zie ook www.w3fools.com) 10

Dus… 

Inline styles

Head!

My text.



Interne style sheet <style type="text/css"> h1 {font-family: 'Times New Roman';} p {color: red; margin-left: 20px;} […]

Head!

My text.

Eenheden, lengtematen 

Absolute eenheden   



in, cm, mm pt (point, 1pt=1/72in), pc (pica, 1pc=12pt) px

Relatieve eenheden 

  

body {font-size: 10pt;} p {border: 3px solid red;}

h1

{font-size: 1.8em;}

vw, vh, vm: viewport (CSS3) img {max-height: 95vh;} em: huidige font size ex: huidige hoogte van de kleine letter x ….

Centraal in CSS: Box model



algemeen model voor block elementen  



 

vier zones voor padding, border en margin 1 of 4 waarden eenheden: px, em, pt, cm (gooi ze niet door elkaar)

tools als Firebug laten box-eigenschappen duidelijk zien boxen kun je positioneren 13

Bijvoorbeeld de vaksite div.head { background-image: url(titel.gif); height: 70px; background-repeat: no-repeat; } div.body { position: absolute; left: 190px; margin: 0 1em 0 0; } div.menu { font-size: 13px; line-height: 19px; position: absolute; width: 190px; background-image: url(menu.gif); height: 953px; background-repeat: no-repeat; }



14



http://www.barelyfitz.com/screencast/html-training/css/positioning/ 15

Specificiteit in actie span {color: red;} span span {color: blue;} span.foo {color: green;} span span.foo {color: turquoise;} span.bar {color: maroon;} <span class="foo">Hey! <span>Wow! <span>Amazing! <span class="foo">Impressive! <span class="bar">k00l! Fantastic!

CSS 3

17

CSS 3 (sommigen waren er al in CSS2)  

    

 

Animations / transities Visuele effecten (border-radius, rgbacolor, boxshadow, text-shadow, gradient) Ronde hoeken Vrijheid fonts (ook Webfonts) Border images Aural style sheets? Media queries ….en nog veel meer En overal zijn tools voor! 18

Bijvoorbeeld: Web fonts 

http://www.fontsquirrel.com/fonts/list/find_fonts

19

Fonts als icons Waarom? 

 

Afbeeldingen zorgen (meestal) voor meer laadtijd) Afbeeldingen zijn niet altijd even scherp Fonts wel, ook bij inzoomen, of op een Retina scherm

20

Fonts als icons! Afbeelding-icon

Font-icon

Normaal

Zoom

Retina, HiDPI 21

Fonts als icons

22

En andere effecten….

23

En ……

24

Google fonts

25

Bijvoorbeeld: Animaties (simpel)

26

Bijvoorbeeld: Animaties (iets fancier)

27

Maar…we zijn er nog niet (vanaf)…. Browser specifieke prefixed properties 

  

-webkit voor Chrome, Safari -moz voor Firefox -o voor Opera -ms voor Internet Explorer).

Worden gebruikt om nieuwe, of experimentele CSS te testen, voordat ze officieel geaccepteerd zijn door W3C.

28

Dus: background: -webkit-linear-gradient(#ff0000, #000000); background: -moz-linear-gradient(#ff0000, #000000); background: -ms-linear-gradient(#ff0000, #000000);

background: -o-linear-gradient(#ff0000, #000000); background: linear-gradient(#ff0000, #000000);

29

30

Vele tools!   

   

http://css3generator.com/ http://www.css3maker.com/ http://westciv.com/tools/gradients/ http://font-combinator.com/ http://css3.mikeplate.com/ http://www.css3.me/ …..

31

Responsiveness

32

Responsiveness 

  

Responsive webdesign: een einde aan de mobiele versies? Eigenlijk….conditioneel CSS Ontwikkeltools zoals Gridset, Bootstrap! Test tools zoals 





http://mattkersley.com/responsive/ http://www.jamus.co.uk/demos/rwddemonstrations/ http://responsivetest.net/ 33

HTML5

HTML5

35

HTML5 

waarom was XHTML niet goed genoeg meer?  documentgericht  weinig interactie  gebrekkige ondersteuning multimedia



een paar highlights  minder scripting, minder code  minder overhead, meer vrijheid  living standard, klaar in 2022?  Cross-platform ( tablet ,smartphone, a netbook, notebook or a Smart TV).  Webapplications that still work when you are not online.

Audio en video 

in HTML5 geen externe plugins meer nodig

Nieuwe elementen, zoals 



,