Successfully reported this slideshow.

Css senza paura - Emma Tracanella

813 views

Published on

Presentazione alla Girl Geek Dinner #12 di Milano, una serata dedicata all'How to in formato Ignite

Published in: Self Improvement
  • Be the first to comment

Css senza paura - Emma Tracanella

  1. 1. Come affrontare i CSS senza paura <ul><li>Emma Tracanella </li></ul><ul><li>GGD Team Milano </li></ul>
  2. 2. Definizione <ul><li>I fogli di stile a cascata , meglio noti con l'acronimo CSS (dall' inglese Cascading Style Sheet ) e detti anche semplicemente fogli di stile , vengono usati per definire la rappresentazione di documenti HTML , XHTML e XML . Le regole per comporre i fogli di stile sono contenute in un insieme di direttive ( Recommendations ) emanate a partire dal 1996 dal W3C . </li></ul><ul><li>( da Wikipedia ) </li></ul>
  3. 3. Un gioco! <ul><li>Scopo </li></ul><ul><li>Strumenti </li></ul><ul><li>Principi di base </li></ul>
  4. 4. Idea di base <ul><li>Separare contenuto da presentazione </li></ul>
  5. 5. HTML vs CSS HTML CSS Contenuto Presentazione
  6. 6. Tag, classi e id - HTML <ul><li><div class=”rettangolo” id=”pippo”> </li></ul><ul><ul><li>contenuto </li></ul></ul><ul><li></div> </li></ul>
  7. 7. Classi e id - CSS <ul><li>. rettangolo { </li></ul><ul><ul><li>border: 1px solid Gray; </li></ul></ul><ul><ul><li>... </li></ul></ul><ul><li>} </li></ul><ul><li>#pippo { </li></ul><ul><ul><li>background-color: OrangeRed; </li></ul></ul><ul><ul><li>... </li></ul></ul><ul><li>} </li></ul>
  8. 8. Importante <ul><li>Vince sempre l’ultimo! </li></ul>.rettangolo { background-color: Yellow; ... } .... . rettangolo { background-color: Red; ... }
  9. 9. Strumenti <ul><li>Editor di testo </li></ul><ul><li>Programma di grafica </li></ul>
  10. 10. Strumenti Browser = Firefox
  11. 11. Strumenti Web developer addon
  12. 12. Ricordarsi sempre <ul><li>W3C e W3CSchool </li></ul><ul><li>Google! </li></ul><ul><li>.... </li></ul>
  13. 13. E ora si iniza! <ul><li>Riuso dei CSS </li></ul><ul><li>Cercare la soluzione più semplice </li></ul>
  14. 14. F12
  15. 15. Modifiche in diretta
  16. 16. Costruire un layout
  17. 17. Identificare la struttura
  18. 18. HTML <ul><li>Ben formato <tag> ... </tag> </li></ul><ul><li>Non inserire tag inutili </li></ul><ul><li>Usare body, h1, h2, a, ... </li></ul>
  19. 19. Costruire il CSS <ul><li>Ereditarietà => no ripetizioni </li></ul><ul><li>/* commenti */ </li></ul><ul><li>Ordine </li></ul><ul><li>Come le scatole cinesi </li></ul><ul><li>Testing continuo </li></ul>
  20. 20. Il CSS vi fa ancora paura?
  21. 21. Attenzione :) <ul><li>Emma Tracanella </li></ul><ul><li>GGD Team Milano - [email_address] </li></ul>

×