Css1

748 views

Published on

Breve introduzione ai fogli stile CSS

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

  • Be the first to like this

No Downloads
Views
Total views
748
On SlideShare
0
From Embeds
0
Number of Embeds
290
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Css1

  1. 1. css C ascading S tyle S heets Fogli di Stile a Cascata Introduzione Carla Stefani
  2. 2. HTML e CSS <ul><li>HTML e CSS sono due delle tecnologie di base per costruire pagine Web:  </li></ul><ul><ul><li>l'HTML (HTMLe XML) definisce la struttura della pagina,  </li></ul></ul><ul><ul><li>i CSS, o fogli stile, determinano lo stile e il layout (colori, caratteri e impaginazioni) delle pagine web per diversi dispositivi (schermo, stampante, mobile...).  </li></ul></ul><ul><li>  </li></ul><ul><li>http://www.w3.org/ </li></ul>
  3. 3. Gli standard W3C <ul><li>Il World Wide Web Consortium (W3C)  crea degli standard di riferimento ai quali si attengono  gli sviluppatori di browser; in particolare crea e aggiorna </li></ul><ul><ul><li>i protocolli di comunicazione tra server, PC ed altri dispositivi, </li></ul></ul><ul><ul><li>i linguaggi con cui sono scritti i file delle pagine web (ora è in fase di standardizzazione l'HTML5). </li></ul></ul><ul><li>  </li></ul><ul><li>Il W3C studia inoltre sistemi per garantire l'accessibilità delle pagine web anche a persone con disabilità fisiche anche gravi. </li></ul>
  4. 4. Gli standard W3C
  5. 5. CSS3 e HTML5 saranno tra breve gli standard di riferimento.
  6. 6. Vantaggi dei CSS <ul><li>L'uso dei  fogli stile consente di: </li></ul><ul><ul><li>separare i contenuti dall'aspetto della presentazione della pagina, </li></ul></ul><ul><ul><li>creare pagine web accessibili, </li></ul></ul><ul><ul><li>condividere un foglio stile con diverse pagine, </li></ul></ul><ul><ul><li>modificare l'aspetto della pagina al variare del dispositivo utilizzato (schermo grande, piccolo o stampante), </li></ul></ul><ul><ul><li>facilitare modifiche o aggiornamenti del sito. </li></ul></ul>
  7. 7. Come associo i CSS ai file HTML? <ul><li>I CSS possono essere associati alle pagine web in diversi modi: </li></ul><ul><ul><li>incorporando i fogli stile nel documento HTML </li></ul></ul><ul><ul><li><head> </li></ul></ul><ul><ul><li><style type=&quot;text/css&quot;> </li></ul></ul><ul><ul><li>p {color: red;} </li></ul></ul><ul><ul><li></style> </li></ul></ul><ul><ul><li></head> </li></ul></ul><ul><ul><li>con fogli stile esterni </li></ul></ul><ul><ul><li><head> </li></ul></ul><ul><ul><li><link rel=&quot;stylesheet&quot; href=&quot;prova.css&quot; type=&quot;text/css&quot;> </li></ul></ul><ul><ul><li></head> </li></ul></ul><ul><ul><li>con fogli stile importati </li></ul></ul><ul><ul><li><head> </li></ul></ul><ul><ul><li><style type=&quot;text/css&quot;> </li></ul></ul><ul><ul><li>@import &quot;prova2.css&quot;; </li></ul></ul><ul><ul><li></style> </li></ul></ul><ul><ul><li></head> </li></ul></ul><ul><li>  </li></ul>
  8. 8. Le regole CSS <ul><li>Ogni elemento presente nel file HTML può essere ripreso nei file CSS per definirne le modalità di rappresentazione.  </li></ul><ul><li>  </li></ul><ul><li>In questo esempio  è assegnato il colore rosso ai testi dei paragrafi p. </li></ul><ul><li>p {color: red;} </li></ul><ul><ul><ul><ul><li>p è il selettore </li></ul></ul></ul></ul><ul><ul><ul><ul><li>color: red è la dichiarazione dove </li></ul></ul></ul></ul><ul><ul><ul><ul><li>color è la proprietà e  red il valore </li></ul></ul></ul></ul>
  9. 9. I commenti nei CSS <ul><li>In un foglio stile possiamo inserire dei commenti, come il seguente </li></ul><ul><li>/* barra di navigazione */ </li></ul><ul><li>che saranno ignorati dal browser. </li></ul><ul><li>  </li></ul>
  10. 10. http://www.osservatoriosullacomunicazione.com/w3c/firstcss.html Tutorial Questo tutorial ti accompagnerà nell'uso dei fogli stile, proponendoti 7 passi da provare al computer. Alla fine di ogni passo, ti proponiamo di verificare quanto appreso con un quiz.
  11. 11. Fine introduzione

×