HTML + CSS - Lezione 3

933 views

Published on

La terza lezione :)

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

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

No notes for slide

HTML + CSS - Lezione 3

  1. 1. HTML + CSS<br />CSS: le proprietàprincipali e qualchetrucco.<br />LEZIONE 3<br />1/23<br />
  2. 2. CSS è un linguaggio che consente di formattare le pagine web<br />2/22<br />
  3. 3. Formattare:definire le dimensioni, il posizionamento, il colore, i bordi, lo sfondo, i margini esterni ed interni, etc.degli elementi di una pagina web<br />3/22<br />
  4. 4. Un CSS (Cascade Style Sheet)è un file che contiene un elenco di regole come questa:<br />p { color: red; font-size: 15px; }<br />Valore<br />Proprietà<br />Selettore di tag<br />4/22<br />
  5. 5. <html> <head> <title>Prima pagina</title> </head> <body> <div> <h1>Benvenuti!</h1> <p>La prima pagina web di Giuseppe Rossi</p> </div> </body></html><br />5/22<br />
  6. 6. Struttura ad albero dell’HTML:<br /><html><head> <body><title> <div> <h1> <p><br />6/22<br />
  7. 7. CSS = fogli di stile a cascata:assegnata una regola a un selettore, la regola si propaga a tutti i tag discendenti.A meno che non definiamo altre regole per essi.<br />7/22<br />
  8. 8. Esempio:body { color: red; }p { color: yellow; }Il testo del body (e dei suoi discendenti) sarà rosso.Ma per i p sarà giallo.<br />8/22<br />
  9. 9. Un file CSS si associa ad una pagina web così:<br /><head> <link type="text/css" rel="stylesheet" href="pippo.css“ /></head><br />9/22<br />
  10. 10. Le proprietà CSS più usate:<br />IL TESTO<br />colorfont-familyfont-sizefont-weighttext-align<br />10/22<br />
  11. 11. 11/22<br />
  12. 12. Le proprietà CSS più usate:<br />BORDI E SFONDI<br />background-colorbackground-imageborder-widthborder-styleborder-color<br />12/22<br />
  13. 13. div { background-image: url(' stelle.jpg'); }<br />13/22<br />
  14. 14. Le proprietà CSS più usate:<br />ALLINEAMENTI, MARGINI E DIMENSIONI<br />float,clearheight,widthmargin,paddingoverflow<br />14/22<br />
  15. 15. 15/22<br />
  16. 16. div{ margin-top: 10px; margin-right: 5px; margin-bottom: 7px; margin-left: 6px; }=div { margin: 10px 5px 7px 6px; }<br />16/22<br />
  17. 17. Affiancare i <div> e/o gli <li>:<br />17/22<br />
  18. 18. Allineare i <div> al centro:<br />18/22<br />
  19. 19. I SELETTORI:<br /><divid="blu">…</div><br />#blu { color: blue; }<br /><divclass=“verde">…</div><br />.verde { color: green; }<br />19/22<br />
  20. 20. I SELETTORI:<br />L’id è UNICO<br />La classe può essere condivisa da più tag<br />20/22<br />
  21. 21. I SELETTORI:<br />#bluul.rosso li { … }<br />seleziona tutti gli <li><br />che stanno dentro gli <ul> con class="rosso"<br />che stanno dentro il tag<br />con id="blu"<br />21/22<br />
  22. 22. Grazie dell’attenzione ;-)<br />Vincenzo Caico<br />vincenzocaico@gmail.com<br />

×