Cascading Style Sheets 2009

822 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
822
On SlideShare
0
From Embeds
0
Number of Embeds
119
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • http://www.adobe.com/devnet/dreamweaver/articles/css_concepts_cs3.html
  • Cascading Style Sheets 2009

    1. 1. Cascading Style Sheets CSS basics CSS in Macromedia Dreamweaver
    2. 2. Wat zit er in deze les? <ul><li>Het wat en waarom van CSS </li></ul><ul><li>Tips </li></ul><ul><li>Link een externe style sheet aan een HTML pagina. </li></ul><ul><li>CSS code: tag, class & ID selectors </li></ul><ul><li>lettertype en andere teksteigenschappen </li></ul><ul><li>stijlbepalingen voor links </li></ul><ul><li>kleur & achtergrond </li></ul><ul><li>kaders & blokken </li></ul><ul><li>CSS 2: positioneren </li></ul>
    3. 3. Wat is CSS? <ul><li>Cascading Style Sheets </li></ul><ul><ul><li>een middel om stijlelementen aan web documenten toe te voegen </li></ul></ul><ul><ul><li>“ Cascade”: voorrangsregels </li></ul></ul><ul><li>Taakverdeling: </li></ul>HTML = structural mark-up CSS = presentational mark-up <ul><ul><li>Paragrafen </li></ul></ul><ul><ul><li>Lijsten </li></ul></ul><ul><ul><li>Hoofdingen </li></ul></ul><ul><ul><li>… </li></ul></ul><ul><ul><li>Lettertypes </li></ul></ul><ul><ul><li>Lettergrootte </li></ul></ul><ul><ul><li>Kleuren </li></ul></ul><ul><ul><li>Achtergrondbeelden </li></ul></ul><ul><ul><li>… </li></ul></ul>
    4. 4. Waar zet je CSS? - 4 manieren - <ul><li>Link een externe stylesheet (= te verkiezen!) </li></ul><ul><ul><li>Via de <link> tag binnen de <head> sectie van een HTML document </li></ul></ul><ul><li>@import </li></ul><ul><li>embedded style sheet of ook document style sheet </li></ul><ul><ul><li><style type=“text/css”> </style> element in de body van je HTML document </li></ul></ul><ul><li>Inline Styles </li></ul><ul><ul><li>via style attribuut <p style=“color:green;”> </p> </li></ul></ul>
    5. 5. Voorrangsregels: de cascade <ul><li>wanneer er meerdere CSS bepalingen of regels ( rules ) gelden voor hetzelfde element </li></ul><ul><li>hiërarchie van stijlbepalingen </li></ul><ul><ul><li>volgens de bron van de regels </li></ul></ul><ul><ul><ul><li>bvb: inline styles krijgen voorrang op externe stylesheet </li></ul></ul></ul><ul><ul><li>naar volgorde van de regels </li></ul></ul><ul><ul><ul><li>Binnen dezelfde stylesheet of een groep van stylesheets, krijgen latere bepalingen voorrang op eerdere bepalingen met hetzelfde gewicht. </li></ul></ul></ul><ul><ul><li>naar de specificiteit van de regels </li></ul></ul><ul><ul><ul><li>die is vastgelegd in een puntensysteem van 0 tot 100 </li></ul></ul></ul><ul><ul><ul><ul><li>bvb: class (10) krijgt voorrang op een selector (1). </li></ul></ul></ul></ul><ul><ul><ul><ul><li>ID (specificiteit 100) krijgt voorrang op class (10) </li></ul></ul></ul></ul><ul><ul><ul><li>!important krijgt voorrang op alles </li></ul></ul></ul>
    6. 6. Hou overzicht! <ul><li>Om niet verstrikt te raken in de cascade : </li></ul><ul><ul><li>gebruik 1 externe stylesheet </li></ul></ul><ul><li>Wanneer je al weet dat een deel van de stylesheet goed werkt: Hou de stylesheet bondig dmv </li></ul><ul><ul><li>groeperen </li></ul></ul><ul><ul><li>shorthand </li></ul></ul><ul><li>Voeg commentaar tussen: </li></ul><ul><ul><li>/* hier begint de stijl voor navigatie-items */ </li></ul></ul><ul><li>Debuggen: pas telkens 1 element aan en kijk naar het resultaat in je browser. </li></ul>
    7. 7. Link externe style sheet aan html-pagina <ul><li><!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN“ &quot;http://www.w3.org/TR/html4/strict.dtd&quot;> </li></ul><ul><li><HTML> </li></ul><ul><li><HEAD> </li></ul><ul><li><LINK </li></ul><ul><li>rel=&quot;stylesheet&quot; </li></ul><ul><li>type=&quot;text/css&quot; </li></ul><ul><li>media=“screen” </li></ul><ul><li>href=“ mijnstyles .css&quot;> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY> </li></ul><ul><li> <H1>Dit is een grote titel</H1> </li></ul><ul><li><P> Dit is een paragraaf . </P> </li></ul><ul><li></BODY> </li></ul><ul><li></HTML> </li></ul><ul><li>LINK tag : </li></ul><ul><li>mag enkel binnen de <HEAD> sectie. Geeft een relatie met een document weer. </li></ul><ul><li>attribuut REL : het linktype </li></ul><ul><li>W3C “ This attribute describes the relationship from the current document to the anchor specified by the href attribute .” bvb: alternate stylesheet </li></ul><ul><li>attribuut TYPE : =REQUIRED geeft stylesheet taal weer, altijd “text/css” </li></ul><ul><li>attribuut MEDIA : W3C “ This attribute specifies the intended destination medium for style information. It may be a single media descriptor or a comma-separated list. The default value for this attribute is &quot;screen&quot;. ” </li></ul><ul><li>attribuut HREF : W3C “ This attribute specifies the location of a Web resource, thus defining a link between the current element (the source anchor) and the destination anchor defined by this attribute. ” </li></ul>NOOT Bij een XHTML-document moet je /> toevoegen aan de link.
    8. 8. CSS comments <ul><li>komen voor in de stylesheet </li></ul><ul><li>worden door browsers genegeerd, net zoals HTML comments </li></ul><ul><li>gebruik ze </li></ul><ul><ul><li>om je stylesheet in te delen </li></ul></ul><ul><ul><li>of om regels die je even niet wil gebruiken “uit” te zetten. </li></ul></ul><ul><li>je kan comments niet nesten </li></ul><ul><ul><li>Fout: </li></ul></ul><ul><ul><li>/* als je comments probeert in elkaar te zetten /* op deze manier */ gebeuren er ongelukken */ </li></ul></ul><ul><li>Goed: </li></ul><ul><ul><li>/* =====vanaf hier begint navigatiestijl======== */ </li></ul></ul>
    9. 9. CSS code <ul><li>Regel ( rule ) structuur </li></ul>h1 {color: green; } p {font-size: small;} .mijnclass {background: yellow;} #navigatie {border: 1pt green;} declaration selector {property: value; }
    10. 10. Spaties worden genegeerd in stylesheets <ul><li>h1 {color: green; } </li></ul><ul><li>Doet hetzelfde als: </li></ul><ul><li>h1 { </li></ul><ul><li>color: green; </li></ul><ul><li>} </li></ul>
    11. 11. Voorbeelden <ul><li>h1 {color: green; } /* Tag selector */ </li></ul><ul><li>p {font: small Tahoma;} </li></ul><ul><li>/* Tag selector. separate multiple keywords with spaces */ </li></ul><ul><li>.mijnclass {background: yellow;} /* Class selector */ </li></ul><ul><li>#navigatie {border: 1pt green;} /* ID selector */ </li></ul>declaration selector {property: value; }
    12. 12. Selectors groeperen <ul><li>selectorA {propertyX: valueY;} </li></ul><ul><li>selectorB {propertyX: valueY;} </li></ul><ul><li>selectorC {propertyX: valueY;} </li></ul><ul><li>= </li></ul><ul><li>selectorA, selectorB, selectorC {propertyX: valueY; } </li></ul><ul><li>H1, H2, H3 {color: blue;} </li></ul>
    13. 13. Declarations groeperen <ul><li>selectorA {propertyX: valueY;} </li></ul><ul><li>selectorA {propertyZ: valueU;} </li></ul><ul><li>selectorA {propertyF: valueR;} </li></ul><ul><li>= </li></ul><ul><li>selectorA { propertyX: valueY; propertyZ: valueU; propertyF: valueR; } </li></ul>
    14. 14. Selectors én Declarations groeperen <ul><li>P, H1, H2, H3 { </li></ul><ul><li>color: gray; </li></ul><ul><li>background: white; </li></ul><ul><li>border: black 1px; </li></ul><ul><li>font-family: Arial, sans-serif; </li></ul><ul><li>} </li></ul><ul><li>P { </li></ul><ul><li>font-size: small; </li></ul><ul><li>} </li></ul>
    15. 15. Class & ID selectors <ul><li>Class en ID worden toegevoegd aan markup. </li></ul><ul><li>Je kan ze samen gebruiken op één element. </li></ul><ul><li>Wanneer te gebruiken? </li></ul><ul><ul><li>Om speciale gevallen te definiëren: </li></ul></ul><ul><ul><ul><li>Bv. Een groep links die de navigatie vormen, krijgen een bepaalde kleur en achtergrond. </li></ul></ul></ul><ul><ul><ul><li>Bv. Een bepaalde kleur duidt belangrijke woorden of zinssneden aan. </li></ul></ul></ul>
    16. 16. Class selectors <ul><li>Hoe herken je een “class”? </li></ul><ul><ul><li>In het document heeft een tag het attribuut class=“” </li></ul></ul><ul><ul><ul><li>Bv. <p class=“ belangrijk ” >Je moet dit hoofdstuk niet kennen voor het examen.</p> </li></ul></ul></ul><ul><ul><li>In de CSS staat er “ .myclass ” </li></ul></ul><ul><ul><ul><li>Bv. .belangrijk { font-weight: bold; color: red; } </li></ul></ul></ul>
    17. 17. ID selectors <ul><li>Hoe herken je een “ID”? </li></ul><ul><ul><li>In het document heeft een tag het attribuut id=“ myid ” </li></ul></ul><ul><ul><ul><li>Bv. <h1 id=“eerstetitel”>Welkom</h1> </li></ul></ul></ul><ul><ul><li>In de CSS staat er “ #myid ” </li></ul></ul><ul><ul><ul><li>Bv. #eerstetitel { font-weight: bold; color: red; } </li></ul></ul></ul>
    18. 18. Verschil tussen classes en ID’s <ul><li># of . </li></ul><ul><li>ID mag in hetzelfde document maar één keer voorkomen. </li></ul><ul><li>Een ID weegt zwaarder door dan een class. </li></ul>
    19. 19. Pseudo-classes <ul><li>Status-afhankelijk. </li></ul><ul><li>Wordt vooral gebruikt voor links </li></ul><ul><ul><li>A:link </li></ul></ul><ul><ul><li>A:visited </li></ul></ul><ul><ul><li>A:hover </li></ul></ul><ul><ul><li>A:active </li></ul></ul><ul><li>Voor veel browsers is de volgorde belangrijk (LVHA) </li></ul><ul><li>Er zijn ook 2 pseudo-elements, of fictional tags, in CSS1 </li></ul><ul><ul><li>:first-letter Bv. H1:first-letter </li></ul></ul><ul><ul><li>:first-line Bv. P:first-line </li></ul></ul>
    20. 20. Eenheden en waarden <ul><li>lengte-eenheden </li></ul><ul><li>kleurwaarden </li></ul>
    21. 21. Afmetingen <ul><li>Absolute waarden </li></ul><ul><ul><li>in =inch (2,54 cm) </li></ul></ul><ul><ul><li>cm =centimeter </li></ul></ul><ul><ul><li>mm =millimeter </li></ul></ul><ul><ul><li>pt =point (typografische term) </li></ul></ul><ul><ul><li>pc =pica (typografische term) </li></ul></ul><ul><li>Relatieve waarden </li></ul><ul><ul><li>em = de font-size waarde die gegeven of ingesteld is voor een bepaald element. </li></ul></ul><ul><ul><li>ex = x-height = de hoogte van de x van een gegeven lettertype (ex wordt zelden gebruikt) </li></ul></ul><ul><ul><li>% = percentage </li></ul></ul><ul><ul><li>px = pixels = afhankelijk van de resolutie en andere scherminstellingen </li></ul></ul>
    22. 22. Kleurwaarden <ul><li>Benoemde kleuren of Named Colors </li></ul><ul><ul><li>grey, red, etc. (zie lijsten) </li></ul></ul><ul><li>Hexadecimale waarden (3 hexadecimale koppels) </li></ul><ul><ul><li>voluit: #ef9966 </li></ul></ul><ul><ul><li>verkort: #ffeecc wordt #fec </li></ul></ul><ul><li>RGB waarden (rood groen blauw licht) </li></ul><ul><ul><li>percentages: wit = rgb(100%, 100%, 100%) </li></ul></ul><ul><ul><li>numeriek: wit = rgb(255,255,255) </li></ul></ul>
    23. 23. lettertypes <ul><li>font-family: serif, sans-serif, [font naam] </li></ul><ul><ul><li>bv. h1 { </li></ul></ul><ul><ul><ul><li>font-family: Arial, ‘Courier New’, sans-serif </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><li>font-weight: normal, bold, bolder, lighter </li></ul><ul><li>font-size: </li></ul><ul><ul><li>relatief: x-small, small, smaller, larger, % </li></ul></ul><ul><ul><li>absoluut: [een maateenheid] </li></ul></ul>
    24. 24. andere teksteigenschappen <ul><li>text-indent (met een maateenheid) </li></ul><ul><li>text-align (left, center, right, justify) </li></ul><ul><li>line-height </li></ul><ul><li>vertical-align </li></ul><ul><li>word-spacing </li></ul><ul><li>letter-spacing </li></ul><ul><li>text-transform (uppercase, lowercase, capitalize) </li></ul><ul><li>text-decoration (none, underline, overline, line-through) </li></ul><ul><li>font-variant: small-caps </li></ul>
    25. 25. stijlbepalingen voor links <ul><li>Zie “pseudo classes” </li></ul>
    26. 26. kleur & achtergrond <ul><li>color: voorgrondkleur </li></ul><ul><li>background-color </li></ul><ul><li>background-image </li></ul><ul><li>background-position </li></ul><ul><li>background-attachment p { </li></ul><ul><ul><li>background-image: url( http://www.maerlant.be/img/bg_blue.gif ); </li></ul></ul><ul><ul><li>background-repeat: no-repeat; </li></ul></ul><ul><ul><li>background-position: top center; </li></ul></ul><ul><ul><li>background-color: blue; </li></ul></ul><ul><ul><li>color: white; </li></ul></ul><ul><ul><li>} </li></ul></ul>
    27. 27. kaders & blokken <ul><li>http://www.w3.org/TR/REC-CSS2/box.html </li></ul><ul><li>padding </li></ul><ul><li>margin </li></ul><ul><li>border </li></ul>
    28. 28. CSS 2: positioneren <ul><li>het css-alternatief voor tabellen als basis voor bladschikking </li></ul><ul><li>Struikelblok: IE’s interpretatie van het box model. </li></ul>
    29. 29. Browserbeperkingen <ul><li>Netscape: beperkte css ondersteuning in NS4 </li></ul><ul><li>Internet Explorer (IE): box model problem </li></ul><ul><li>Mozilla of Firebird: zeer goede CSS ondersteuning </li></ul>
    30. 30. Division tags + CSS = layout WRAPPER DIV SIDEBAR DIV Maincontent div
    31. 31. HTML <div id=&quot;container&quot;> <div id=&quot;sidebar&quot;> <ul> <li>Sidebar </li> <li>ContentLorem ipsum </li> </ul> </div> <div id=&quot;mainContent&quot;> <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>
    32. 32. HTML design view
    33. 33. Afgewerkt:
    34. 34. voorbereiding <ul><li>Maak een nieuwe folder </li></ul><ul><li>Definieer een nieuwe site in DW </li></ul><ul><li>Maak een nieuwe blanco HTML-pagina </li></ul><ul><li>Zet er tekst in </li></ul><ul><li>Structureer die tekst: </li></ul><ul><ul><li>kleine list bovenaan </li></ul></ul><ul><ul><li>H1 </li></ul></ul><ul><ul><li>Paragrafen </li></ul></ul>

    ×