Download - Css senza paura - Emma Tracanella
Come affrontare i CSS senza paura
Emma TracanellaGGD Team Milano
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)
Un gioco!Un gioco!
•Scopo
•Strumenti
•Principi di base
•Scopo
•Strumenti
•Principi di base
Idea di baseSeparare contenuto da presentazione
HTML vs CSS
HTMLHTML CSSCSS
ContenutoContenuto PresentazionePresentazione
Tag, classi e id - HTML
<div class=”rettangolo” id=”pippo”>
contenuto
</div>
Classi e id - CSS. rettangolo {
border: 1px solid Gray;...
}
#pippo {background-color: OrangeRed;...
}
ImportanteVince sempre l’ultimo!
.rettangolo {background-color: Yellow;...}..... rettangolo {background-color: Red;...}
Strumenti
• Editor di testo
• Programma di grafica
Strumenti
Browser = Firefox
Strumenti
Web developer addon
Ricordarsi sempre
•W3C e W3CSchool
•Google!
•....
E ora si iniza!•Riuso dei CSS
•Cercare la soluzione più semplice
F12
Modifiche in diretta
Costruire un layout
Identificare la struttura
HTML
•Ben formato <tag> ... </tag>
•Non inserire tag inutili
•Usare body, h1, h2, a, ...
Costruire il CSS•Ereditarietà => no ripetizioni
•/* commenti */
•Ordine
•Come le scatole cinesi
•Testing continuo
Il CSS vi fa ancora paura?
Attenzione :)
Emma TracanellaGGD Team Milano - [email protected]