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

Recommended

Recommended

More Related Content

Similar to Cascading Style Sheets 2009

Similar to Cascading Style Sheets 2009 (20)

More from culturelestudies

More from culturelestudies (20)

Cascading Style Sheets 2009

Editor's Notes