Next Web Sharing

631 views
524 views

Published on

A slideshow presentation about CSS.

Published in: Design, Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
631
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Next Web Sharing

  1. 1. Tips voor beginners
  2. 2. - Duidelijk en netjes coderen - Elke style eigen line geven ipv meerdere naast elkaar. # someDiv   {      background : red;      padding : 2em;      border : 1px solid black;   }   # someDiv {  background: red;padding: 2em;  border: 1px solid black;  }  
  3. 3. - Duidelijke, eenduidige naamgevingen - Hoofdlettergebruik, underscores etc.
  4. 4. <ul><li>- Makkelijker </li></ul><ul><li>Sneller/Tijdsbesparend </li></ul><ul><li>-Tip: Niet aan beginnen pas als je CSS goed beheerst. </li></ul>
  5. 5. - Elke browser geeft default settings mee - Reset zorgt dat alle elementen op alle browsers hetzelfde eruit komen te zien. * { margin: 0; padding: 0; border: 0; }
  6. 6. - Codeer je styles in een logische volgorde - Zet er comentaar bij - Versimpelt toekomstig gebruik Voorbeeld: /****** header *********/      Style hier    /******main content *********/      Style hier /******footer *********/      Style hier
  7. 7. <ul><li>Zelfde eigenschappen niet meerdere keren coderen </li></ul><ul><li>Tijdbesparend, efficient </li></ul>Voorbeeld: h1, h2, h3   { font-family: tahoma;  color: #333; } 
  8. 8. <ul><li>Niet tegelijk met je CSS </li></ul><ul><li>Tijdsbesparend als je eerst je hele HTML template maakt </li></ul><ul><li>-Op deze manier visualiseer je eerst je geheel en kun je daarna duidelijker je CSS toepassen </li></ul>
  9. 9. 8. Laat je klasse zien! <ul><li><div class=&quot;box right&quot;></div>   </li></ul><ul><li>Combinatie van stijl regels! </li></ul><ul><li>Volgorde van de klasse is belangrijk </li></ul>
  10. 10. 9. Gebruik de juiste DOCTYPE! <ul><li>Strict is het beste om te gebruiken </li></ul><ul><li>DTD </li></ul><ul><li>Andere DOCTYPES </li></ul><ul><ul><li>transitional </li></ul></ul><ul><ul><li>frameset </li></ul></ul><ul><ul><li>loose </li></ul></ul>
  11. 11. 10. Hou het kort <ul><li>Met meerdere margins: </li></ul><ul><li>#menu { margin-left:    5px; margin-right:   7px; margin-top: 8px; }   </li></ul><ul><li>Kan je beter margin gebruiken: </li></ul><ul><li>#menu { margin: 8px 7px 0px 5px; // top, right, bottom, left }  </li></ul>
  12. 12. 11. Commentaar <ul><li>Commentaar je CSS; </li></ul><ul><ul><li>Start met /* </li></ul></ul><ul><ul><li>En eindig met */ </li></ul></ul><ul><li>Structeert je CSS </li></ul>
  13. 13. 12. Block en Inline <ul><li>Inline; </li></ul><ul><ul><li>span, a, strong, em, img, br, input </li></ul></ul><ul><li>Block; </li></ul><ul><ul><li>div, h1...h6, p, ul, li, table, blockquote, pre, form </li></ul></ul>
  14. 14. 13. Alphabetiseer! <ul><li>Alphabetiseer je properties; </li></ul><ul><li>#menu { color: #fff; float: left; height: 200px;    </li></ul><ul><li>margin: 0; padding: 0; width: 150px; }   </li></ul>
  15. 15. .left { float: left; } .clear { clear: both; } .w30 { width: 30px; } <div id=&quot;container&quot;> <div id=&quot;menu&quot; class=&quot;left w30&quot;></div> <div id=&quot;content&quot; class=&quot;left&quot;></div> <div class=&quot;clear&quot; id=&quot;footer&quot;> </div> </div>
  16. 16. 15. margin: 0 auto <ul><li>float: center </li></ul><ul><li>margin: 0 auto; // top, bottombottom -  </li></ul><ul><li>and left, rightright values, respectively.   </li></ul>
  17. 17. 16. Gooi er niet zomaar een DIV tussen <ul><li><div class=&quot;header-text&quot;><h1>Header Text</h1></div>  </li></ul><ul><li><h1>Header Text</h1> </li></ul>
  18. 18. Deze tool is een must voor elke webdesigner. Naast de vele functies (HTML inspecteren, fouten vinden) kun je het CSS ook aanpassen en bewerken.
  19. 19. #menu { padding: 10px; *padding: 5px; }
  20. 20. Door geen rekening te houden met absolute positionering voor de andere elementen op de pagina, kan de lay-out er lelijk uit komen te zien doordat er meerdere ‘position absolute’ elementen omheen draaien.
  21. 21. text-transform: lowercase;  
  22. 22. 21. Verberg je H1? <ul><li>Geen CSS </li></ul><ul><li>Alttag gebruiken </li></ul><ul><li>H1 {margin: 0 0 0 -900; } </li></ul><ul><li><img src=“logo.png” alt=“your logo text”> </li></ul>
  23. 23. 22. Valideren <ul><li>Trots/waardering </li></ul><ul><li>Debugging </li></ul>
  24. 24. 23. Ems vs. Pixels <ul><li>Pixel is statisch </li></ul><ul><li>Ems is flexibeler </li></ul><ul><li>Verschillende manier van webbrowsing </li></ul><ul><li>font-size: 12px; </li></ul><ul><li>Of -> font-size: 2em; </li></ul>
  25. 25. 24. Kracht van de lijst <ul><li>Waarom een lijst? </li></ul><ul><li>Toepassing </li></ul><ul><li><ul> </li></ul><ul><ul><li><li class=“active”>Home</li> </li></ul></ul><ul><ul><li><li class=“n-active”>About</li> </li></ul></ul><ul><li></ul> </li></ul>
  26. 26. 25. Voorkom extra selectors <ul><li>Vb. </li></ul><ul><li>body #header .home ul li { .. } </li></ul><ul><li>.home li { .. } </li></ul>
  27. 27. 26. Margin en Padding <ul><li>Verschil tussen browsers </li></ul><ul><li>Reset gebruiken </li></ul><ul><li>* { margin: 0; padding: 0; } </li></ul>
  28. 28. 27. Object Orientated <ul><li>Wat is OOCSS? </li></ul><ul><li>Wanneer OOCSS? </li></ul>

×