Cascading Style Sheets 2009

Cascading Style Sheets CSS basics CSS in Macromedia Dreamweaver

Wat zit er in deze les? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Wat is CSS? ,[object Object],[object Object],[object Object],[object Object],HTML = structural mark-up CSS = presentational mark-up ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Waar zet je CSS? - 4 manieren - ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Voorrangsregels: de cascade ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Hou overzicht! ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Link externe style sheet aan html-pagina ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],NOOT Bij een XHTML-document moet je /> toevoegen aan de link.

CSS comments ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

CSS code ,[object Object],h1 {color: green; } p {font-size: small;} .mijnclass {background: yellow;} #navigatie {border: 1pt green;} declaration selector {property: value; }

Spaties worden genegeerd in stylesheets ,[object Object],[object Object],[object Object],[object Object],[object Object]

Voorbeelden ,[object Object],[object Object],[object Object],[object Object],[object Object],declaration selector {property: value; }

Selectors groeperen ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Declarations groeperen ,[object Object],[object Object],[object Object],[object Object],[object Object]

Selectors én Declarations groeperen ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Class & ID selectors ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Class selectors ,[object Object],[object Object],[object Object],[object Object],[object Object]

ID selectors ,[object Object],[object Object],[object Object],[object Object],[object Object]

Verschil tussen classes en ID’s ,[object Object],[object Object],[object Object]

Pseudo-classes ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Eenheden en waarden ,[object Object],[object Object]

Afmetingen ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Kleurwaarden ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

lettertypes ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

andere teksteigenschappen ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

stijlbepalingen voor links ,[object Object]

kleur & achtergrond ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

kaders & blokken ,[object Object],[object Object],[object Object],[object Object]

CSS 2: positioneren ,[object Object],[object Object]

Browserbeperkingen ,[object Object],[object Object],[object Object]

Division tags + CSS = layout WRAPPER DIV SIDEBAR DIV Maincontent div

HTML <div id="container"> <div id="sidebar"> <ul> <li>Sidebar </li> <li>ContentLorem ipsum </li> </ul> </div> <div id="mainContent"> <h1> Main Content </h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum.</p> <p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,.</p> </div> </div>

voorbereiding ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Cascading Style Sheets 2009

Recommandé

Recommandé

Contenu connexe

Similaire à Cascading Style Sheets 2009

Similaire à Cascading Style Sheets 2009 (20)

Plus de culturelestudies

Plus de culturelestudies (20)

Cascading Style Sheets 2009

Notes de l'éditeur