Webmaster Training: CSS CSS2 & XHTML By Frederik Van Outryve

Webmaster Training: CSS Agenda Inleiding CSS / XHTML –XHTML vs. HTML –Semantische markup –CSS linken met HTML –De CSS-syntaxis –CSS-selectoren –CSS box-model Een CSS-layout maken –Gebruik van floats –DIV’s positioneren –Layout testen Een CSS-menu ontwikkelen –Semantische markup –CSS toevoegen Meer info

Webmaster Training: CSS Inleiding CSS & XHTML

Webmaster Training: CSS XHTML vs. HTML Huidige HTML 4.x specificaties –Bepaalde tags bevatten informatie over de presentatie, bv. –Niet compatibel met XML-standaard XHTML 1.0 –Compatibel met XML Alle tags in kleine hoofdletters Alle tags moeten gesloten worden, bv. –Enkel semantische markup XHTML toont het type en de structuur van de informatie CSS bevat alle info over de presentatie

Webmaster Training: CSS Semantische markup XML beschrijft de informatie: –Over welke informatie gaat het? –Welke structuur heeft de informatie? XML geeft geen info over de presentatie Presentatie kan afhankelijk zijn van: –gebruikte kanaal –instrument dat gebruikt wordt om toegang te hebben tot de informatie –persoonlijke instellingen van de gebruiker –...

Webmaster Training: CSS CSS linken met HTML 3 manieren om CSS te linken –Externe style sheets rule –In de tag van de webpagina –Als attribuut in de bestaande HTML tag Cascading system

Webmaster Training: CSS De CSS-syntaxis selector { property: value; }

Webmaster Training: CSS CSS-selectoren CSS-classes –Kunnen in één document verschillende keren worden gebruikt –Hebben hun eigen naam, bv. “.selected” CSS-ID’s –Kunnen in één document slechts één keer worden gebruikt –Hebben hun eigen naam, bv. “#navigation” Child selectors –Bevatten een “pad” naar de doeltag –Bv. “ul#navigation li” Bestaande HTML tags –Herdefinieert de presentatie van een bestaande HTML tag –Meestal gebruikt voor algemene presentatie & in child selectors

Webmaster Training: CSS Het CSS Box-Model

Webmaster Training: CSS Het CSS Box-Model

Webmaster Training: CSS Een CSS-layout maken

Webmaster Training: CSS Een CSS-layout maken 1.HTML-document creëren met semantische markup 2.CSS-bestand linken 3.Body padding & marge op 0 afstellen 4.Voeg wrapper-DIV toe 5.Definieer presentatie van de header 6.Menu floaten 7.Body positioneren

Webmaster Training: CSS Het XHTML-document Begin met DOCTYPE definitie DOCTYPE zou zich steeds op de eerste lijn van het document moeten bevinden XHTML-types –Strict –Transitional XHTML doctype plaatst IE in de juiste rendering engine

Webmaster Training: CSS Structuur van XHTML-document site title site menu site content

Webmaster Training: CSS Regel de BODY Elke browser voegt padding en/of marge toe aan de tag Om het veld voor alle browsers te regelen stellen we de marge & padding af op 0 BODY { padding:0px; margin:0px; }

Webmaster Training: CSS De wrapper DIV De wrapper DIV bevat al de inhoud van de pagina Hij wordt gebruikt om de pagina op het scherm te centreren #wrapper{ width: 770px; background-color:#FFFFFF; margin:10px auto; border: 1px solid #000000; text-align:left; }

Webmaster Training: CSS Het menu floaten “float” haalt de DIV uit de “page flow” We kunnen nu de DIV plaatsen waar we willen. “Breedte” nog toevoegen. #menu{ float: left; width: 170px; background-color:#FFFF00; }

Webmaster Training: CSS De inhoud positioneren Positioneer de inhoud door aan het menu een linkermarge toe te voegen #content { margin-left: 200px; border-left: 1px solid gray; }

Webmaster Training: CSS Een CSS-menu ontwikkelen

Webmaster Training: CSS Een CSS-menu ontwikkelen 1.Creëer het XHTML-document met semantische markup 2.Regel het veld 3.Presenteer list-items als inline 4.Float de links 5.Formateer de links 6.Voeg een roll-overkleur toe

Webmaster Training: CSS Het XHTML-document menu1 menu2 menu3 menu4

Webmaster Training: CSS Regel het veld Sommige browsers voegen marges of padding toe aan list-items We hebben geen bullet nodig ul#navlist { margin: 0; padding: 0; list-style-type: none; }

Webmaster Training: CSS Float de links Om de list-items naast elkaar te plaatsen zonder tussenruimtes ul#navlist li a { float: left; width: 5em; }

Webmaster Training: CSS Presenteer inline Breng de list-items samen in één lijn. Nu zijn ze blok-elementen. ul#navlist li { display: inline; }

Webmaster Training: CSS Formateer de links Formateer de links om ze op knopjes te doen lijken color: #fff; background-color: #036; padding: 0.2em 1em; text-decoration: none; border-right: 1px solid #fff;

Webmaster Training: CSS Voeg een roll-overkleur toe Zorg ervoor dat de achtergrond verandert wanneer de gebruiker met zijn cursor over een knop gaat. ul#navlist li a:hover { background-color: #369; color: #fff; }

Webmaster Training: CSS Meer info