Introduzione ai CSS

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

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

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

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

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

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 )

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

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

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

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

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

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

Fondamenti – ereditarietà

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; }

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

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)