Download - Css senza paura - Emma Tracanella
![Page 1: Css senza paura - Emma Tracanella](https://reader035.vdocuments.mx/reader035/viewer/2022062705/556f16cfd8b42ac8048b4bc3/html5/thumbnails/1.jpg)
Come affrontare i CSS senza paura
Emma TracanellaGGD Team Milano
![Page 2: Css senza paura - Emma Tracanella](https://reader035.vdocuments.mx/reader035/viewer/2022062705/556f16cfd8b42ac8048b4bc3/html5/thumbnails/2.jpg)
Definizione
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.
(da Wikipedia)
![Page 3: Css senza paura - Emma Tracanella](https://reader035.vdocuments.mx/reader035/viewer/2022062705/556f16cfd8b42ac8048b4bc3/html5/thumbnails/3.jpg)
Un gioco!Un gioco!
•Scopo
•Strumenti
•Principi di base
•Scopo
•Strumenti
•Principi di base
![Page 4: Css senza paura - Emma Tracanella](https://reader035.vdocuments.mx/reader035/viewer/2022062705/556f16cfd8b42ac8048b4bc3/html5/thumbnails/4.jpg)
Idea di baseSeparare contenuto da presentazione
![Page 5: Css senza paura - Emma Tracanella](https://reader035.vdocuments.mx/reader035/viewer/2022062705/556f16cfd8b42ac8048b4bc3/html5/thumbnails/5.jpg)
HTML vs CSS
HTMLHTML CSSCSS
ContenutoContenuto PresentazionePresentazione
![Page 6: Css senza paura - Emma Tracanella](https://reader035.vdocuments.mx/reader035/viewer/2022062705/556f16cfd8b42ac8048b4bc3/html5/thumbnails/6.jpg)
Tag, classi e id - HTML
<div class=”rettangolo” id=”pippo”>
contenuto
</div>
![Page 7: Css senza paura - Emma Tracanella](https://reader035.vdocuments.mx/reader035/viewer/2022062705/556f16cfd8b42ac8048b4bc3/html5/thumbnails/7.jpg)
Classi e id - CSS. rettangolo {
border: 1px solid Gray;...
}
#pippo {background-color: OrangeRed;...
}
![Page 8: Css senza paura - Emma Tracanella](https://reader035.vdocuments.mx/reader035/viewer/2022062705/556f16cfd8b42ac8048b4bc3/html5/thumbnails/8.jpg)
ImportanteVince sempre l’ultimo!
.rettangolo {background-color: Yellow;...}..... rettangolo {background-color: Red;...}
![Page 9: Css senza paura - Emma Tracanella](https://reader035.vdocuments.mx/reader035/viewer/2022062705/556f16cfd8b42ac8048b4bc3/html5/thumbnails/9.jpg)
Strumenti
• Editor di testo
• Programma di grafica
![Page 10: Css senza paura - Emma Tracanella](https://reader035.vdocuments.mx/reader035/viewer/2022062705/556f16cfd8b42ac8048b4bc3/html5/thumbnails/10.jpg)
Strumenti
Browser = Firefox
![Page 11: Css senza paura - Emma Tracanella](https://reader035.vdocuments.mx/reader035/viewer/2022062705/556f16cfd8b42ac8048b4bc3/html5/thumbnails/11.jpg)
Strumenti
Web developer addon
![Page 12: Css senza paura - Emma Tracanella](https://reader035.vdocuments.mx/reader035/viewer/2022062705/556f16cfd8b42ac8048b4bc3/html5/thumbnails/12.jpg)
Ricordarsi sempre
•W3C e W3CSchool
•Google!
•....
![Page 13: Css senza paura - Emma Tracanella](https://reader035.vdocuments.mx/reader035/viewer/2022062705/556f16cfd8b42ac8048b4bc3/html5/thumbnails/13.jpg)
E ora si iniza!•Riuso dei CSS
•Cercare la soluzione più semplice
![Page 14: Css senza paura - Emma Tracanella](https://reader035.vdocuments.mx/reader035/viewer/2022062705/556f16cfd8b42ac8048b4bc3/html5/thumbnails/14.jpg)
F12
![Page 15: Css senza paura - Emma Tracanella](https://reader035.vdocuments.mx/reader035/viewer/2022062705/556f16cfd8b42ac8048b4bc3/html5/thumbnails/15.jpg)
Modifiche in diretta
![Page 16: Css senza paura - Emma Tracanella](https://reader035.vdocuments.mx/reader035/viewer/2022062705/556f16cfd8b42ac8048b4bc3/html5/thumbnails/16.jpg)
Costruire un layout
![Page 17: Css senza paura - Emma Tracanella](https://reader035.vdocuments.mx/reader035/viewer/2022062705/556f16cfd8b42ac8048b4bc3/html5/thumbnails/17.jpg)
Identificare la struttura
![Page 18: Css senza paura - Emma Tracanella](https://reader035.vdocuments.mx/reader035/viewer/2022062705/556f16cfd8b42ac8048b4bc3/html5/thumbnails/18.jpg)
HTML
•Ben formato <tag> ... </tag>
•Non inserire tag inutili
•Usare body, h1, h2, a, ...
![Page 19: Css senza paura - Emma Tracanella](https://reader035.vdocuments.mx/reader035/viewer/2022062705/556f16cfd8b42ac8048b4bc3/html5/thumbnails/19.jpg)
Costruire il CSS•Ereditarietà => no ripetizioni
•/* commenti */
•Ordine
•Come le scatole cinesi
•Testing continuo
![Page 20: Css senza paura - Emma Tracanella](https://reader035.vdocuments.mx/reader035/viewer/2022062705/556f16cfd8b42ac8048b4bc3/html5/thumbnails/20.jpg)
Il CSS vi fa ancora paura?