CSS Politecnico di Milano Facoltà del Design – Bovisa Prof. Gianpaolo Cugola Dipartimento di Elettronica e Informazione [email protected] http://home.dei.polimi.it/cugola Politecnico di Milano I cascading style sheet I CSS permettono una agevole separazione tra forma e contenuto – Per ogni pagina html è possibile specificare le caratteristiche di formattazione di ogni tag • Ad esempio è possibile dire che il tag H1 deve apparire in bold, 20pt, blu – Tale specifica può essere inserita nello header della pagina… – … o può apparire in un file distinto • In tal modo è possibile centralizzare in un unico punto gli aspetti di formattazione relativi a tutte le pagine di un certo sito Il meccanismo del cascading permette di differenziare in maniera agevole tra caratteristiche generali e caratteristiche specifiche di una singola pagina E’ possibile associare “stili” diversi a diversi supporti (video, carta, ecc.) Elementi di Informatica e Reti di Calcolatori 2 Politecnico di Milano Vantaggi Facilita le modifiche alla presentazione di tutte le pagine Facilita le revisioni dei documenti Rende HTML estensibile in modo consistente Permette la produzione di documenti autodescrittivi Elementi di Informatica e Reti di Calcolatori 3 Politecnico di Milano CSS e HTML: Come Style sheet embedded <HTML> <HEAD> <TITLE>Bach's home page</TITLE> <STYLE type="text/css"> h1 { color: red } </STYLE> </HEAD> <BODY> <H1>Bach's home page</H1> <P>Johann Sebastian Bach was a prolific composer. </BODY> </HTML> Style sheet collegato <HTML> <HEAD> <TITLE>Bach's home page</TITLE> <LINK rel="stylesheet" href="bach.css" type="text/css“/> </HEAD> <BODY> <H1>Bach's home page</H1> <P>Johann Sebastian Bach was a prolific composer. </BODY> </HTML> File bach.css h1 { color: red } Elementi di Informatica e Reti di Calcolatori 4 Politecnico di Milano Il meccanismo del cascading Una stessa pagina html può fare riferimento a più CSS – Uno o più “collegati”, uno “incorporato” Se lo stesso elemento e la stessa proprietà sono definiti in più fogli stile fa fede l’ultimo ad essere stato definito – Nell’ordine stabilito dall’header della pagina Per ogni elemento, le propretà non definite in un foglio stile si cercano nei fogli stile “precedenti” In tal modo è possibile avere un foglio stile generale per un intero sito, più alcuni fogli stile per zone diverse del sito (che collegano anche il foglio stile generale ridefinendo solo gli elementi/proprietà utili), più degli stili embedded per la singola pagina Elementi di Informatica e Reti di Calcolatori 5 Politecnico di Milano Esempi di proprietà definibili Margini, rientri (esempio con tre regole) <style type="text/css"> body { margin-left: 10%; margin-right: 10%; } h1 { margin-left: -8%; } h2, h3, h4, h5, h6 { margin-left: -4%; } </style> Elementi di Informatica e Reti di Calcolatori 6 Politecnico di Milano CSS Sintassi valore h1 Selettore { color: blue; proprietà valore font-size: 2 px Times..; } proprietà dichiarazione Elementi di Informatica e Reti di Calcolatori 7 Politecnico di Milano 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> – L’attributo <style> è utilizzabile per tutti I tag definiti in HTML 4 e 5 Direttive CSS Elementi di Informatica e Reti di Calcolatori 8 Politecnico di Milano CSS & HTML 2/4 Si può sfruttare il tag <style> di HTML: Direttive CSS <html> <head> <style type = “text/css”>p{color:red;}</style> </head> <body> . . . </body> </html> In questi primi due metodi il codice del CSS è embedded nella pagina HTML Elementi di Informatica e Reti di Calcolatori 9 Politecnico di Milano CSS & HTML 3/4 Se si vuole definire il CSS in un file diverso (consigliato!!) si può usare ancora il tag <style>: <html> <head> <style> @import 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 10 Politecnico di Milano 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 11 Politecnico di Milano Esempio css not embedded File es1.css p { text-align: center; color: red; } Elementi di Informatica e Reti di Calcolatori File es1.html <html> <head> <title> Esempio utilizzo css</title> <link rel=“stylesheet” href=“es1.css” type=“text/css”/> </head> <body> <p>Ogni paragrafo apparirà centrato e rosso</p> </body> </html> 12 Politecnico di Milano Esempio css embedded File es2.html <html> <head> <title> Esempio utilizzo css</title> <style type=“text/css”> p { text-align: center; color: </style> </head> <body> <p>Ogni paragrafo apparirà centrato e rosso</p> </body> </html> Elementi di Informatica e Reti di Calcolatori red; } 13 Politecnico di Milano Esempio più pagine File es3-2.html <html> <head> <title> Esempio più pagine</title> <link rel=“stylesheet” href=“es3.css” type=“text/css”/> </head> <body> <h1>Pagina 2</h1> </body> </html> Elementi di Informatica e Reti di Calcolatori File es3-1.html <html> <head> <title> Esempio utilizzo css</title> <link rel=“stylesheet” href=“es3.css” type=“text/css”/> </head> <body> <h1>Pagina 1</h1> </body> </html> File es3.css body { background-color: yellow; } 14 Politecnico di Milano Elemento DIV Viene utilizzato per organizzare (raggruppare) il contenuto della pagina html Non hanno uno specifico significato <html> <head> <title> Esempio più pagine</title> </head> <body> <h1>Esempio div</h1> <div> <h5>Titolo paragrafo</h5> <p> paragrafo 1</p> </div> </body> </html> Elementi di Informatica e Reti di Calcolatori 15 Politecnico di Milano Uso dell’elemento DIV Si può scrivere una regola che si applica solo alle sezioni volute div { border: solid; border-width: thin; } Si applica ad esempio a: <div> testo da contornare con un bordo fine </div> testo da contornare con un bordo fine Elementi di Informatica e Reti di Calcolatori 16 Politecnico di Milano L’attributo class Esempio di testo HTML: <h2 class="subsection">Getting started</h2> Regola di stile applicata solo alle occorrenze di h2 con class=subsection: .subsection { margin-top: 8em; margin-bottom: 3em; } Elementi di Informatica e Reti di Calcolatori 17 Politecnico di Milano Uso dell’attributo class esempio File es6.css h2.sport { text-align: center; color: red; } Elementi di Informatica e Reti di Calcolatori File es6.html <html> <head> <title> Esempio utilizzo css</title> <link rel=“stylesheet” href=“es6.css” type=“text/css”/> </head> <body> <h2>Esempio h2</h2> <h2 class=“sport”>Esempio h2 sport</h2> </body> </html> 18 Politecnico di Milano Class e Div Incoraggiano la sostituzione degli elementi e degli attributi di presentazione con altri meccanismi. Attributo class: – Consente di classificare più finemente i tag HTML per applicare formati in modo selettivo Elemento <div> : – Il tag HTML <div> può essere usato per delimitare generiche sezioni di contenuto – La sezione può essere classificata con l’attributo class <div> + class: – Permette di definire delle marcature personalizzate per il contenuto Elementi di Informatica e Reti di Calcolatori 19 Politecnico di Milano Esempi <h2 class=“miotitolo">Getting started</h2> Definisce la classe “miotitolo” come un nuovo sottotipo dell’elemento <h2> <div class=“contornato"> testo da contornare con un bordo fine </div> Definisce un nuovo marcatore tramite la classe “contornato” Le proprietà stilistiche delle classi “miotitolo” e “contornato” devono essere definite a parte: Fogli di Stile (Style Sheets) Elementi di Informatica e Reti di Calcolatori 20 Politecnico di Milano 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 21 Politecnico di Milano 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 *{color:red;} – Tutti i tag HTML diventano rossi Elementi di Informatica e Reti di Calcolatori 22 Politecnico di Milano 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 23 Politecnico di Milano 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 24 Politecnico di Milano 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 {. a:visited{. a:hover {. a:active {. . . . . .} Apparenza normale .} Apparenza dopo che è stato visitato .} Apparenza al passaggio del mouse .} Apparenza mentre si clicca sul link Elementi di Informatica e Reti di Calcolatori 25 Politecnico di Milano 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 26 Politecnico di Milano 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 27 Politecnico di Milano 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 28 Politecnico di Milano Cascading - Esempio <html> <head> <style> @import 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 29
Scarica
