Cascading Style Sheets (CSS)

Presentazione sul tema: "Cascading Style Sheets (CSS)"— Transcript della presentazione:

1 Cascading Style Sheets (CSS)
Programmazione Web – Lezione 3 Cascading Style Sheets (CSS) Prof. Luca A. Ludovico IFTS Tecnico superiore per applicazioni multimediali avanzate | 2019

2 INTRODUZIONE AI CSS Parte 1
IFTS Tecnico superiore per applicazioni multimediali avanzate | 2019 Prof. Luca A. Ludovico

3 Cosa significa CSS CSS è l’acronimo di cascading style sheets (letteralmente fogli di stile a cascata). Si tratta di un formato testuale, integrato con HTML ma con una sintassi radicalmente differente, per descrivere come gli elementi HTML debbano essere mostrati. I CSS estendono notevolmente il controllo sull’aspetto degli elementi HTML (si pensi alle tabelle). I CSS permettono di risparmiare molto tempo e lavoro, perché possono essere applicati a interi siti. IFTS Tecnico superiore per applicazioni multimediali avanzate | 2019 Prof. Luca A. Ludovico

4 Esempio (tratto da w3schools.com)
All’indirizzo è possible vedere una pagina senza applicazione dei fogli di stile, simile a quanto mostrato nelle lezioni precedenti, e con l’applicazione di 4 diversi fogli di stile. Il codice HTML è sempre lo stesso, ma a seconda del caricamento di un particolare foglio di stile, l’aspetto cambia in modo profondo. IFTS Tecnico superiore per applicazioni multimediali avanzate | 2019 Prof. Luca A. Ludovico

5 Il problema risolto dai CSS
Non era l’intenzione originaria di HTML introdurre elementi per conferire un dato aspetto (formattare) una pagina Web: HTML mirava a descrivere il contenuto di una pagina Web. Questo è particolarmente evidente per i marcatori di tipo logico. Con la necessità di creare pagine più accattivanti, le nuove specifiche HTML hanno “sporcato” questo approccio, aggiungendo tag quali <font> o attributi quali color (HTML 3.2). CSS sopperisce a queste lacune e risolve in modo standard i problemi di aspetto della pagina. IFTS Tecnico superiore per applicazioni multimediali avanzate | 2019 Prof. Luca A. Ludovico

6 La sintassi delle regole CSS
La sintassi CSS è costituita da testo semplice. Una regola (o un insieme di regole) CSS ha la forma: Selettore Dichiarazione 1 Dichiarazione 2 … h1 {color:blue; font-size:12; …} Il selettore punta all’elemento HTML da formattare. Il blocco di dichiarazione, incluso tra parentesi graffe, contiene un insieme di dichiarazioni separate da ; Ogni dichiarazione include un nome di proprietà CSS e un valore, separati da : IFTS Tecnico superiore per applicazioni multimediali avanzate | 2019 Prof. Luca A. Ludovico

7 Alcuni semplici esempi
body {   background-color: lightblue; } h1 {   color: navy;   margin-left: 20px; } p {   color: yellow; /* questo è un commento... ...che finisce qui! */   text-align: center; } IFTS Tecnico superiore per applicazioni multimediali avanzate | 2019 Prof. Luca A. Ludovico

8 Selettori CSS Un selettore serve a trovare (selezionare) l’element, o gli elementi, HTML cui conferire uno stile. Esistono 5 categorie di selettori: Selettori semplici (basati su nome, id o classe) Selettori combinatori (basati sulla relazione tra più elementi) Selettori di pseudo-classe (basati su un determinato stato) Selettori di pseudo-elementi (che selezionano e formattano una parte di un elemento) Selettori di attributo (basati su un attributo o un suo valore) IFTS Tecnico superiore per applicazioni multimediali avanzate | 2019 Prof. Luca A. Ludovico

9 Selettori semplici: id
Il selettore CSS id seleziona un dato elemento sulla base del suo identificativo in HTML, univoco nell’intera pagina. In HTML l’identificativo per un dato elemento si fissa attraverso l’attributo id="nome". In CSS il selettore che si riferisce a tale id adotta la sintassi: #nome { … } IFTS Tecnico superiore per applicazioni multimediali avanzate | 2019 Prof. Luca A. Ludovico

10 Selettori semplici: class
Il selettore CSS class seleziona tutti gli elementi di un documento HTML appartenenti alla stessa classe. In HTML la classe per un dato elemento si fissa attraverso l’attributo class="nome". In CSS il selettore che si riferisce a tale classe adotta la sintassi: .nome { … } IFTS Tecnico superiore per applicazioni multimediali avanzate | 2019 Prof. Luca A. Ludovico

11 Osservazioni sulle classi
In HTML, un dato elemento può appartenere a più classi. In tal caso i nomi delle classi (valori dell’attributo class) saranno separati da spazi, come nell’esempio sottostante, ove le classi sono grande (che avrà i propri stili) e colorato (che avrà i propri stili). <p class="grande colorato">…</p> Poichè nei nomi delle classi non è possible inserire spazi, non potrà esistere un unico stile chiamato grande colorato. IFTS Tecnico superiore per applicazioni multimediali avanzate | 2019 Prof. Luca A. Ludovico

12 Osservazioni sulle classi
In CSS, è possibile applicare un dato stile solo a determinati tipi di elemento con una certa classe, e non ad altri tipi di elemento della stessa classe. Sintassi: p.colore {...} /* solo i paragrafi di classe colore */ Questo può essere utile perché: alcune proprietà hanno senso solo per alcuni elementi (ad es., perché fissare il colore del testo per un’imagine?) per differenziare il comportamento tra elementi diversi, pur appartenenti logicamente alla stessa classe (ad es., si vuole il bordo di una tabella di classe importante diverso dal bordo di un’imagine di classe importante) IFTS Tecnico superiore per applicazioni multimediali avanzate | 2019 Prof. Luca A. Ludovico

13 Il selettore CSS universale
Se si vuole applicare un dato stile a tutti gli elementi HTML nella pagina, si utilizza il selettore universale * * { text-align: right; color: blue; } L’esempio sopra significa che tutti gli elementi della pagina (recanti del testo) avranno allineamento del testo a destra e colore del testo blu. Questa impostazione non potrà essere localmente sovrascritta? Sarebbe un vincolo molto forte! IFTS Tecnico superiore per applicazioni multimediali avanzate | 2019 Prof. Luca A. Ludovico

14 Raggruppamento di selettori
Se più selettori (ma non tutti: si userebbe *) condividono degli stili, è possibile raggrupparli separandoli con virgole. h1, h2, p { text-align: center; color: red; } Per le restanti proprietà, dovranno essere identici tra loro? Ad esempio, per la dimensione del font? Sarebbe un vincolo molto forte! IFTS Tecnico superiore per applicazioni multimediali avanzate | 2019 Prof. Luca A. Ludovico

15 Parte 2 ESEMPI PRATICI IFTS Tecnico superiore per applicazioni multimediali avanzate | 2019 Prof. Luca A. Ludovico

16 Dove inserire la sintassi CSS
Esistono 3 punti in cui è possibile inserire un CSS: in linea, scrivendo l’intera sintassi all’interno di un attributo style per un dato elemento. In tal caso, va tralasciato il selettore e la coppia { } perché gli stili specificati si riferiscono a quell’unico elemento; come CSS interno, tra i tag <style> … </style> nella sezione <head> di una pagina HTML. In tal caso, tutto il documento HTML vedrà gli stili specificati; come CSS esterno, in un file di testo con estensione .css puntato potenzialmente da più pagine HTML tramite la sintassi posta nella sezione <head>: <link rel="stylesheet" type="text/css" href="miostile.css"> IFTS Tecnico superiore per applicazioni multimediali avanzate | 2019 Prof. Luca A. Ludovico

17 Ordine di cascata I CSS sono detti «cascading» perché, per determinare uno stile, applicano una logica a cascata. Se lo stile di un elemento è specificato più volte, la precedenza è dello stile inline, seguito dal CSS interno o esterno, seguito dal default. Ad esempio, se il font di <p> non viene specificato, questo sarà rappresentato in Times. Se viene impostato ad Arial nel CSS esterno, in un caso quale: <p style="font-family:Verdana">gatto</p> la scritta “gatto” sarà in Verdana, che prevale su Arial (CSS esterno) e su Times (default). IFTS Tecnico superiore per applicazioni multimediali avanzate | 2019 Prof. Luca A. Ludovico

18 Ordine di cascata E’ anche possibile (e piuttosto comune) specificare il collegamento a più fogli di stile esterni. In tal caso, l’ordine di priorità prevede che l’ultima dichiarazione incontrata sovrascriva quelle precedenti. Nell’esempio tratto da una sola sezione <head>: <link rel="stylesheet" type="text/css" href="stile1.css"> <link rel="stylesheet" type="text/css" href="stile2.css"> se stile2.css ridefinisce alcuni degli stili specificati in stile1.css, saranno questi ad avere la priorità. IFTS Tecnico superiore per applicazioni multimediali avanzate | 2019 Prof. Luca A. Ludovico

19 Osservazione Esiste un altro caso ambiguo, che si può verificare anche utilizzando un unico foglio di stile. Cosa succede quando si sovrappongono più stili per la stessa proprietà dello stesso elemento? Vince la definizione più specifica. [Esercizio] Nel foglio di stile si fissano: il colore di <h1> a red il colore della classe miotitolo a yellow il colore per l’id titolo1 a green, Si dica qual è il colore risultante dalla riga: <h1 class="miotitolo" id="titolo1">Capitolo 1</h1> IFTS Tecnico superiore per applicazioni multimediali avanzate | 2019 Prof. Luca A. Ludovico

20 Esercitazione guidata Esempi semplici di stili inline
Esempi semplici di stili specificati in un CSS interno, con i concetti di tipo di elemento (anche multiplo), id e classe Esempi di sovrascritture «locali» di tali stili attraverso l’attributo style Utilizzo di uno o più CSS esterni Esempi di «conflitto» nelle definizioni degli stili, tra selettore di elemento, di classe e di id (anche scambiando l’ordine delle righe) IFTS Tecnico superiore per applicazioni multimediali avanzate | 2019 Prof. Luca A. Ludovico

21 COLORI E IMMAGINI Parte 3
IFTS Tecnico superiore per applicazioni multimediali avanzate | 2019 Prof. Luca A. Ludovico

22 CSS e colori La sintassi CSS consente diversi modi per specificare i colori: RGB, HEX, HSL, RGBA, HSLA (le varianti A presentano un valore alpha, di trasparenza, tra 0 e 1). L’elenco dei nomi supportati si trova all’indirizzo: Gli altri modi per esprimere colori (in questo caso Tomato) sono: rgb(255, 99, 71) #ff6347 hsl(9, 100%, 64%) IFTS Tecnico superiore per applicazioni multimediali avanzate | 2019 Prof. Luca A. Ludovico

23 A quali proprietà si conferisce un colore
color > testo in primo piano background-color > colore di sfondo border-color > colore dei bordi, non solo per le tabelle ma anche per le immagini, i titoli, ecc. Però, affinché i bordi siano visibili, vanno fissate anche le proprietà border-style e border-width Sintassi compatta: border:2px solid Violet; Si può anche operare un controllo fine sui bordi sinistro, destro, superiore e inferiore. Non per tutti gli elementi HTML impostare le proprietà dà un risultato. IFTS Tecnico superiore per applicazioni multimediali avanzate | 2019 Prof. Luca A. Ludovico

24 Sfondi Attraverso CSS è possibile impostare gli effetti di sfondo per ciascun elemento HTML. Le proprietà principali sono: background-color background-image background-repeat background-attachment background-position IFTS Tecnico superiore per applicazioni multimediali avanzate | 2019 Prof. Luca A. Ludovico

25 Immagini di sfondo La sintassi per caricare un’immagine di sfondo è:
background-image: url("bgdesert.jpg"); Attenzione alla leggibilità degli eventuali testi in primo piano. Un modo «attuale» per caricare le immagini nelle pagine Web è usare anziché <img> un <div> opportunamente dimensionato (width e height) con un’immagine come sfondo. IFTS Tecnico superiore per applicazioni multimediali avanzate | 2019 Prof. Luca A. Ludovico

26 Immagini di sfondo: ripetizione e scorrimento
Il caricamento di una background-image solitamente implica una ripetizione in orizzontale e in verticale dell’immagine, con effetto «wallpaper» (sempre che l’elemento non sia perfettamente dimensionato). Esistono le seamless textures adeguate allo scopo. Questo effetto può essere governato attraverso la proprietà background-repeat, che supporta i valori repeat-x, repeat-y e no-repeat. La proprietà background-attachment specifica se l’immagine di sfondo debba muoversi con la pagina (valore scroll) o meno (valore fixed). IFTS Tecnico superiore per applicazioni multimediali avanzate | 2019 Prof. Luca A. Ludovico

27 Immagini di sfondo: dimensione
La proprietà background-size permette di controllare la dimensione dello sfondo, normalmente quella originale. Attenzione: non è quella dell’elemento HTML! Oltre a poter specificare le due dimensioni in pixel background-size: 50px 100px; o in percentuale rispetto alla dimensione dell’elemento background-size: 100% 70%; sono ammessi i valori cover (estendi l’immagine per coprire completamente lo spazio dell’elemento) e contain (estendi al massimo per mostrare l’intera immagine ma mantenendone le proporzioni) IFTS Tecnico superiore per applicazioni multimediali avanzate | 2019 Prof. Luca A. Ludovico

28 Esercitazione individuale
Si scelga da Google immagini una «seamless texture», la si carichi come sfondo della pagina, e si imposti quindi lo sfondo e il colore di primo piano degli elementi di testo usati (<h1>, <p>, ecc.) al fine di rendere i contenuti leggibili. Infine, si inserisca un’immagine a propria scelta come sfondo di un elemento <div> opportunamente dimensionato, mostrandone anche i bordi di un colore a piacimento. IFTS Tecnico superiore per applicazioni multimediali avanzate | 2019 Prof. Luca A. Ludovico

29 DIMENSIONE E SPAZIATURA degli elementi
Parte 4 DIMENSIONE E SPAZIATURA degli elementi IFTS Tecnico superiore per applicazioni multimediali avanzate | 2019 Prof. Luca A. Ludovico

30 Le unità di misura supportate da CSS
Quando si fissano dimensioni (ad esempio larghezza e altezza di un’immagine o un div, spessore dei bordi, ecc.) è possibile usare varie unità di misura: pixel – width: 50px; (si noti che px è scritto unito a 50); unità assolute, tra cui cm, mm, in (pollici), pt (punti) e pc (pica), che hanno senso per la stampa su carta ma non a video. La relazione tra esse è 1in = 2.54cm = 25.4mm = 72pt = 6pc; em e rem - particolarmente utili per i font, perché si riferiscono alla dimensione di default della visualizzazione da parte del dispositivo (em = 1) e permettono di agire in modo relativo; unità relative alla finestra - vw è 1/100 della larghezza della finestra, vh è 1/100 della sua altezza. IFTS Tecnico superiore per applicazioni multimediali avanzate | 2019 Prof. Luca A. Ludovico

31 Altezza e larghezza L’altezza e la larghezza di molti elementi HTML può essere fissata attraverso gli attributi width e height. In questo caso, oltre alle unità di misura sopra illustrate, è possibile adottare anche valori percentuali, che fanno riferimento all’elemento contenitore. Esempio: <p style="background-color:red; width:50%; height:450px">Testo del paragrafo.</p> Provare anche con width:150%; e height:10px; Un valore nullo di solito è adimensionale: width:0; IFTS Tecnico superiore per applicazioni multimediali avanzate | 2019 Prof. Luca A. Ludovico

32 Margini e spazi interni
Per molti elementi è possibile determinare quanto questi debbano distare dagli altri elementi (proprietà margin) e quanto il loro contenuto debba distare dal proprio bordo esterno (proprietà padding). E’ possibile operare un controllo fine sulle 4 direzioni, con margin-top, margin-bottom, margin-left e margin-right (e altrettanto per padding). Attenzione all’effetto di collassamento dei bordi! IFTS Tecnico superiore per applicazioni multimediali avanzate | 2019 Prof. Luca A. Ludovico

33 Bordi Oltre a fissare il colore dei bordi è anche possibile stabilire:
lo spessore con border-width lo stile con border-style, che ammette i valori solid, dashed, dotted, double, groove, ridge, ecc.; un eventuale arrotondamento con border-radius border-radius: 5px; IFTS Tecnico superiore per applicazioni multimediali avanzate | 2019 Prof. Luca A. Ludovico

34 Osservazione su altezza e larghezza
Questi valori non tengono conto di margini, bordi e padding: <p style="background-color:white; margin:20px; border:10px solid black; padding:30px; width:500px; height:300px"> This is a paragragh. This is a …</p> Perché tutto questo spazio azzurro? Box model IFTS Tecnico superiore per applicazioni multimediali avanzate | 2019 Prof. Luca A. Ludovico

35 Esercitazione guidata
Dimostrazione pratica dell’effetto delle proprietà margin e padding sugli elementi HTML, tra cui <h1>, <p> e <div>. Utilizzo «creativo» di colori e bordi per determinare l’aspetto di un elemento <mark>. IFTS Tecnico superiore per applicazioni multimediali avanzate | 2019 Prof. Luca A. Ludovico

36 STILI del Testo e dei LINK
Parte 5 STILI del Testo e dei LINK IFTS Tecnico superiore per applicazioni multimediali avanzate | 2019 Prof. Luca A. Ludovico

37 Alcune proprietà per il testo
Oltre al colore con color, sul testo è possibile fissare: allineamento con text-align (valori possibili: left, center, right, justify); decorazioni con text-decoration (default none, overline, line-through, underline); maiuscoli/minuscoli con text-transform (default none, uppercase, lowercase, capitalize); indentazione con text-indent; spazio tra lettere con letter-spacing (anche < 0); spazio tra parole con word-spacing; altezza della riga con line-height (default 1). IFTS Tecnico superiore per applicazioni multimediali avanzate | 2019 Prof. Luca A. Ludovico

38 Font I tipi di carattere, o font, supportati in HTML appartengono a 3 famiglie base: Generic family Font family Descrizione Serif Times New Roman Georgia Serif si traduce come “con grazie”, ossia con piccole linee alle estremità dei caratteri Sans-serif Arial Verdana “Sans” significa senza grazie Monospace Courier New Lucida Console Caratteri monospaziati IFTS Tecnico superiore per applicazioni multimediali avanzate | 2019 Prof. Luca A. Ludovico

39 La proprietà font-family
La proprietà font-family serve a impostare il carattere, e può (dovrebbe) ospitare più nomi separati da virgole, dal più specifico al più generico, come sistema di fallback: se il browser non supporta il primo carattere, prova quello successivo e così via. Nota: se il nome di una famiglia di caratteri è più di una parola, deve essere racchiuso tra virgolette, come "Times New Roman". p {    font-family: "Times New Roman", Times, serif; } IFTS Tecnico superiore per applicazioni multimediali avanzate | 2019 Prof. Luca A. Ludovico

40 Altre proprietà per i font
font-size: corpo (dimensione) del carattere, in pixel, em, ecc. font-style: lo stile (normal, italic, oblique, …) font-weight: il peso (normal, bold, …) font-variant: il maiuscoletto (normal, small-caps) E’ possibile impostare tutte le proprietà dei caratteri in una sola riga di CSS attraverso la proprietà font: p.grassetto {   font: italic bold 30px Georgia, serif; } IFTS Tecnico superiore per applicazioni multimediali avanzate | 2019 Prof. Luca A. Ludovico

41 Font I formati supportati per i caratteri nel web sono:
quindi TTF/OTF e WOFF sono i formati più compatibili. Affinché un utente veda lo specifico font in una pagina, questo deve essere installato sul suo dispositivo (ma non è sicuro), oppure condiviso da parte del sito o caricato da un repository raggiungibile via web. IFTS Tecnico superiore per applicazioni multimediali avanzate | 2019 Prof. Luca A. Ludovico

42 Font custom e Google Fonts
Volendo utilizzare un font atipico o poco comune, va caricato nel sito in un formato compatibile e collegato al CSS tramite la regola @font-face {   font-family: mioFont;   src: url(fonts/montserrat.woff); } Da qui in avanti, ci si può riferire nel CSS a mioFont, avendo cura di aggiungere delle alternative più generiche: p.grassetto {   font-family: mioFont, Helvetica, Arial, sans-serif; } In alternativa, ci si può rifare a Google Fonts (o servizi simili): IFTS Tecnico superiore per applicazioni multimediali avanzate | 2019 Prof. Luca A. Ludovico

43 Pseudo-classi Una pseudo-classe viene utilizzata per definire un particolare stato di un elemento. Ad esempio lo stile quando il mouse passa sopra lo stile per i link visitati e non ancora visitati lo stile quando un elemento riceve il focus (selezione) IFTS Tecnico superiore per applicazioni multimediali avanzate | 2019 Prof. Luca A. Ludovico

44 Pseudo-classi: lo stile dei collegamenti
/* unvisited link */ a:link {   color: #FF0000; text-decoration: none; } /* visited link */ a:visited {   color: #00FF00; } /* mouse over link */ a:hover {   color: #FF00FF; text-decoration: overline underline; } /* selected link */ a:active {   color: #0000FF; } IFTS Tecnico superiore per applicazioni multimediali avanzate | 2019 Prof. Luca A. Ludovico