Politecnico di Milano Facoltà del Design Bovisa. Prof. Gianpaolo Cugola Dipartimento di Elettronica e Informazione

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Politecnico di Milano Facoltà del Design Bovisa. Prof. Gianpaolo Cugola Dipartimento di Elettronica e Informazione"

Graziano Gianmaria Vitali
5 anni fa
Visualizzazioni

1 CSS in pratica Politecnico Facoltà del Design Bovisa Prof. Gianpaolo Cugola Dipartimento di Elettronica e Informazione cugola@elet.polimi.it

2 CSS & HTML 1/4 Quattro modi per collegare un CSS con una pagina HTML: Il modo più semplice è inserire le direttive CSS direttamente nel tag che dev essere modificato (inline) <p style= color:red; > testo </p> Direttive CSS L attributo <style> è utilizzabile per tutti I tag definiti in HTML4 Elementi di Informatica e Reti di Calcolatori 2

3 CSS & HTML 2/4 Si può sfruttare il tag <style> di HTML4: <html> <head> <style type = text/css >p{color:red;}</style> </head> <body>... </body> </html> Direttive CSS In questi primi due metodi il codice del CSS è embedded nella pagina HTML Elementi di Informatica e Reti di Calcolatori 3

4 CSS & HTML 3/4 Se si vuole definire il CSS in un file diverso (consigliato!!) si può usare ancora il tag <style>: <html> <head> url(stile.css);</style> <body>... </body> </html> Il file stile.css deve trovarsi nella stessa directory in cui si trova la pagina HTML che lo usa Elementi di Informatica e Reti di Calcolatori 4

5 CSS & HTML 4/4 Si può collegare un file CSS esterno ad un pagina HTML anche tramite il tag <link>: <html> <head> <link rel = stylesheet type= text/css href = stile.css > </head> <body>... </body> </html> Elementi di Informatica e Reti di Calcolatori 5

6 Ereditarietà Le direttive CSS associate ad un tag HTML vengono ereditate sui tag contenuti <body style= color:red > <h1> titolo </h1> <p> paragrafo 1 </p> <p> paragrafo 2 </p> </body> </html> Di che colore saranno i paragrafi e il titolo? Rossi! La direttiva viene ereditata Elementi di Informatica e Reti di Calcolatori 6

7 Ereditarietà - Eccezioni Si può interrompere l ereditarietà: <body style= color:red > <h1> titolo </h1> <p style= color:black > paragrafo 1 </p> <p> paragrafo 2 </p> </body> </html> Il paragrafo sarà rosso o nero? Nero! Vale sempre la direttiva più specifica (vicina) Elementi di Informatica e Reti di Calcolatori 7

8 Cascading Si possono associare contemporaneamente diversi CSS ad una singola pagina HTML Esiste la possibilità che tra CSS diversi esistano direttive in conflitto tra di loro Il meccanisco di cascading fornisce delle regole per risolvere univocamente questi conflitti Elementi di Informatica e Reti di Calcolatori 8

9 Cascading - Esempio <html> <head> url(ext.css); </style> <link rel = "stylesheet" type = "text/css" href ="ext1.css"> </head> <body> <h1> titolo </h1> </body> </html> In ext.css appare: h1 {color:red;} In ext1.css appare: h1 {color:blue;} Il titolo sarà blue perché l inserimento di ext1.css è avvenuto dopo Se si scambiassero ext1 con ext si otterrebbe un titolo rosso Elementi di Informatica e Reti di Calcolatori 9

10 I selettori In un CSS lo sviluppatore deve potersi riferire agli elementi della pagina HTML da modificare Ogni direttiva CSS è composta da una parte sinistra (selettore) e da una parte destra (cambiamenti da applicare) Selettore banale h1,h2,h3 {color:red;} Tutti gli h1,h2,h3 diventano rossi Selettore universale h1,h2,h3 {color:red;} Tutti i tag HTML diventano rossi Elementi di Informatica e Reti di Calcolatori 10

11 I selettori Le classi 1/2 Raccoglie insieme delle proprietà che possono essere applicati a svariati elementi HTML.test{color:red; background:black;} Nell esempio la classe test che crea element con testo rosso e sfondo nero Per creare una tabella con testo rosso e sfondo nero si usa l attributo class definito per ogni tag in HTML4: <table class= test >... </table> Elementi di Informatica e Reti di Calcolatori 11

12 I selettori Le classi 2/2 Si può restringere l applicazione delle classi solo ad alcuni tag: h1.test{color:red; background:black;} In questo modo la classe test può essere associata solo a tag di tipo <h1> Serve per evitare di applicare delle classi a elementi HTML per cui non sono adatte La sintassi per le classi non ristrette può essere anche scritta come *.test Elementi di Informatica e Reti di Calcolatori 12

13 I selettori Le pseudo-classi Servono per specificare il comportamento di un tag non in assoluto ma solo in uno dei suoi possibili stati P. es. il tag <a> può avere quattro stati: a:link {...} Apparenza normale a:visited{...} Apparenza dopo che è stato visitato a:hover {...} Apparenza al passaggio del mouse a:active {...} Apparenza mentre si clicka sul link Elementi di Informatica e Reti di Calcolatori 13

14 I selettori Gli ID Come le classi ma applicabili ad un solo tag alla volta Usa l attributo id definito da HTML4 per ogni tag #test{color:red; background:black;} Per applicare l ID appena definito: <table id= test >... </table> Si può restringere il campo di applicabilità come per le classi ma non dovrebbe servire Elementi di Informatica e Reti di Calcolatori 14

15 Box Model Dal punto di vista di CSS una pagina HTML è composta da tante box Ogni tag è rappresentato da una box che ha una struttura fissa CSS, in generale, si occupa di definire come ognuna di queste box debba apparire e dove debbano essere posizionate Elementi di Informatica e Reti di Calcolatori 15

16 Box Model Elementi di Informatica e Reti di Calcolatori 16

Documenti analoghi

Sommario. HTML e CSS I fogli di stile. cosa sono principali proprietà

Sommario. HTML e CSS I fogli di stile. cosa sono principali proprietà HTML e CSS Sommario HTML e CSS I fogli di stile cosa sono principali proprietà CSS CSS La specifica HTML elenca le linee guida su come i browser dovrebbero visualizzare i diversi elementi del documento