Introduzione ai CSS. Cosa è successo allHTML Perché usare i CSS Introduzione ai CSS Fondamenti.

Presentazione sul tema: "Introduzione ai CSS. Cosa è successo allHTML Perché usare i CSS Introduzione ai CSS Fondamenti."— Transcript della presentazione:

1 Introduzione ai CSS

2 Cosa è successo allHTML Perché usare i CSS Introduzione ai CSS Fondamenti

3 Cosa è successo allHTML? Alla nascita del Web non esisteva un linguaggio di stile Chi creava pagine non aveva controllo sullaspetto tipografico La rappresentazione era lasciata ai browser con molta frustrazione da parte dei programmatori ( es. usato per enfatizzare ) Iniziano a nascere estensioni al linguaggio ( es. ed ) Netscape v. 1.1 e lelemento Introduzione dellelemento Un bel sito preferibile ad un codice pulito (esempio)esempio

4 Cosa è successo allHTML? Conseguenze negative: Mancanza di accessibilità Uso di browser diversi Uso di screen reader Uso di media diversi (TV telefonini elettrodomestici) Degrado delle performance Uso di tabelle annidate Uso di troppi elementi Aumento del lavoro di produzione Siti difficilmente modificabili se non con un lungo lavoro

5 Come risolvere il problema? 1994 Hakon Lie pubblica la prima stesura di Cascading HTML StyleSheets 1994 nasce il W3C (World Wide Web) per la definizione degli standard per lo sviluppo e la crescita del Web 1996 Prime raccomandazioni duso dei CSS (CSS1) (apparenza dei font, applicazione dei colori, background di un documento) 1998 CSS2 – funzioni più avanzate per il controllo del layout

6 Perché usare i CSS? Cosè un CSS? Strumento semplice e potente Consente di associare regole stilistiche al codice HTML (es. colore testo, carattere ecc.) Consente di separare la struttura di un documento dalla sua rappresentazione

7 Perché usare i CSS Aumento di accessibilità Uso di browser diversi Uso di screen reader Uso di media diversi (TV telefonini elettrodomestici) Aumento delle performance Pagine MOLTO più leggere da scaricare Minore occupazione della banda Diminuzione del lavoro di produzione Facilità di modifica ( es. uso di un solo foglio di stile per più documenti )

8 Introduzione ai CSS I fogli di stile oggi utilizzati sono di tre tipi CSS (Cascading Style Sheet) usati essenzialmente per HTML XSL (Extensible Stylesheet Language) usati per formattare un docuemnto XML destinato alla stampa XSLT (Extensible Stylesheet Language Transformation) utilizzati per la trasformazione di un documento XML

9 Fondamenti Conoscere come il browser applica i CSS al documento (X)HTML I concetti fonadmantali sono: Distinzione tra elementi block e inline Ereditarietà e concatenazione Modello a gabbie

10 Fondamenti – elementi block Gli elementi a livello di blocco (block) cominciano sempre su una nuova riga (es. ecc.) Possono contenere altri elementi block Possono contenere altri elementi inline

11 Fondamenti – elementi inline Si susseguono senza interruzione di riga Vanno a capo solo quando lo spazio è terminato Possono contenere SOLO elementi inline (es. )

12 Fondamenti – applicare gli stili Possono essere applicati a tutti gli elementi presenti nella pagina Se si desidera applicare uno stile ad una sezione non definita da un elemento esistente su utilizzano i tag: per il block-level per linline

13 Fondamenti – ereditarietà e concatenazione Descrivono come applicare gli stili senza creare conflitti

14 Fondamenti – ereditarietà

15 Il diagramma ad albero precedente illustra come il capostipite contenga i sui discententi e come un elemento possa essere sia genitore che figlio. Tutti i discendenti di un elemento erediteranno lo stesso tipo di carattere e colore dei loro capostipiti (es. definisco il colore del testo rosso per il tutti i sui discendenti erediteranno questo stile) body { color: #F00; }

16 Fondamenti - concatenazione Possibilità di concatenare un certo numero di fogli di stile diversi in un unico risultato Una pagina può avere associati più fogli di stile con questordine di importanza: Autore Utente Browser Ogni proprietà di un elemento non definita mantiene lo stile di default del browser

17 Fondamenti – concatenazione - precedenza La concatenazione definisce anche i diritti di precedenza alluso, nel caso lautore voglia utilizzare più fogli di stile (es. uno globale per il layout + alcuni di dettaglio a seconda delle sezioni del sito) Lordine è dato a seconda dellordine con il quale vengono richiamati dalla pagina (il primo dovrà essere quello globale e successivi quelli specifici)

18