1 Markup: CSS en HTML5 Hoorcollege Webdesign 5 16 mei 2014 Christof van Nimwegen 12 CSS: Waarom ook alweer. HTML was bedoeld voor documentstructuur (t...
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
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.