Dott.Ing.Ivan Ferrazzi CSS. Introduzione ai Cascading Style Sheet. Dott. Ing. Ivan Ferrazzi V1.5 del 14/10/2013 1/45

Transcript

1 CSS Introduzione ai Cascading Style Sheet Dott. Ing. Ivan Ferrazzi V1.5 del 14/10/2013 1/45

2 Copyright 2013 Dott.Ing. Ivan Ferrazzi Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.2 or any later version published by the Free Software Foundation; with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. 2/45

3 Indice generale INTRODUZIONE...5 I METODI DEL CSS...6 CSS in linea...6 CSS a stile incorporato nella pagina...7 CSS in un foglio esterno...7 LE CLASSI...9 LAVORARE CON GLI ID...10 GLI STILI...11 I parametri di stile per il testo...11 I parametri di stile per i caratteri...13 I parametri di stile per i colori...14 I parametri di stile per definire le dimensioni...15 I parametri di stile per definire le posizioni...15 I parametri di stile per la visibilità...17 I parametri di stile per lo sfondo...18 I parametri di stile per gli elementi contenitori...19 I parametri di stile per le liste...21 I parametri di stile per le tabelle...22 RAGGRUPPAMENTO E NIDIFICAZIONE...24 Raggruppamento di stili...24 Elementi nidificati...24 Nidificazione padre/figlio...25 Stile per elemento a seguire...25 Stile per tutti gli elementi a seguire...26 PSEUDO-CLASSI ED ELEMENTI...27 Pseudo-classi per il tag a...27 Pseudo-classe per il primo figlio...28 Pseudo-classe per elementi con il focus...28 Pseudo-elementi su testi in elementi a blocco...28 Pseudo-elementi per l'aggiunta di contenuto...29 MEDIA QUERIES...30 Come integrare le media queries...30 Tipi di dispositivi...31 Caratteristiche di dispositivi...31 CSS Stili per i contenitori ed i loro contenuti...34 Importazione di font aggiuntivi...38 Stili per la trasformazione degli elementi...39 Effetti di transizione...40 Effetti di animazione...42 LE VARIE UNITA'...44 Le unità di misura per le dimensioni...44 I valori assoluti...44 I valori relativi...45 I valori assoluti...45 I valori di posizionamento /45

4 4/45

5 INTRODUZIONE I CSS nascono con lo scopo di facilitare la gestione della formattazione di pagine web, infatti questi possono definire ad esempio il colore di sfondo, il tipo e colore dei caratteri, l'impaginazione dei documenti ecc.ecc. Questa gestione della formattazione ci semplifica notevolmente il lavoro di manutenzione o di modifica di un sito, basti pensare a un sito web composto da centinaia di pagine, le quali fanno riferimento ad uno stile, la modifica di questo produrrebbe un cambiamento dello stile di tutte le pagine. I CSS si possono utilizzare in tre modi: in linea, cioè inseriti direttamente nel tag HTML, a stile incorporato, cioè inseriti ad inizio pagina nel HEAD, In un foglio di stile esterno, cioè un file con estensione.css che contiene tutti gli stili ai quali fa riferimento la pagina web. Gli stili devono rispettare delle regole di sintassi, gli attributi vanno racchiusi tra parentesi graffe {..., per simbolo di uguaglianza si utilizzano i due punti (:) e più attributi si separano con il punto e virgola (;). Per esempio: P {text align: justify; color:red; font size:32pt; 5/45

6 I METODI DEL CSS Vediamo ora i tre modi con i quali possiamo utilizzare le direttive CSS. CSS in linea La modalità in linea si adotta per assegnare uno stile ad una parte di codice, senza che questo vada a influire sul resto della pagina. Lo stile viene inserito direttamente nel tag HTML, utilizzando l'attributo STYLE. <span style= color: red; font-size: 12pt; >ciao</span> Questo stile non sarà esteso a tutti i SPAN ma si limiterà a modificare lo stile del colore e la grandezza del carattere di tutto ciò che è compreso solo tra l'apertura e la chiusura di questo SPAN. Per quanto riguarda la sintassi gli stili devono essere racchiusi tra virgolette o apici e separati da punto e virgola, preceduti dall'attributo STYLE=. L'attributo STYLE può essere associato a quasi tutti i tag HTML, ma sopratutto vengono utilizzati quei tag che fanno da contenitori, cioè se usati da soli non producono alcun effetto, ma utilizzati in combinazione con gli stili modificano tutto ciò che contengono. Questi contenitori sono <div> e <span>. DIV produce un ritorno a capo con la sua chiusura, mentre SPAN no e si può utilizzare anche all'interno di un DIV. <div style= color:red; > 6/45

7 ciao mi chiamo <span style= font-size:45pt; >mirko</span> </div> CSS a stile incorporato nella pagina Lo stile incorporato è un modo per definire uno stile che dovrà assumere un tag, il quale sarà adottato da tutta quella tipologia di tag presenti nella pagina. Questo fa si che non bisogna definire ogni volta all'interno di un tag lo stile, ma lo si può definire una volta sola all'interno di HEAD. Questo metodo non impedisce di utilizzare lo stile in linea, che ha prevalenza su quello incorporato. La sintassi per lo stile incorporato, prevede che lo stile sia inserito nel HEAD e che che sia compreso dall'apertura e chiusura del tag STYLE con dichiarazione dell'attributo TYPE es: <head> <style type= text/css > span { color: red; font-size: 12pt; font-family: Arial,Verdana; </style> </head> Così facendo si stabilisce lo stile che dovranno adottare tutti i SPAN della pagina. Se si avesse bisogno di commentare uno stile, questo deve essere racchiuso tra /* e */. <style type= text/css > span { color: red; /* colore rosso*/ font-size: 54pt; /* grandezza carattere */ </style> CSS in un foglio esterno Gli stili oltre alla modalità in linea e alla modalità integrata ad inizio pagina, possono essere inseriti tramite un foglio esterno, separato dalla pagina, la quale ne fa solo un richiamo. Questo non preclude l'utilizzo della modalità in linea o di quella integrata ad inizio pagina, che avrebbero priorità sul foglio esterno. Il foglio esterno non è altro che un file di testo dove andremo a scrivere semplicemente tutti gli stili che vogliamo, ma dovrà essere salvato con estensione.css. Dal punto di vista sintattico, basta scrivere le dichiarazioni di stile come quelle integrate ad inizio pagina, ad esempio: 7/45

8 span { color: Red; font-size: 67pt; p { color: Yellow; font-family:arial, MS Sans Serif ; Un parametro dello stile composto da più parole, come potrebbe essere un tipo di scrittura, bisogna racchiuderlo tra virgolette (vedi esempio precedente). Ora basta salvare il file con estensione.css per far si che si possa richiamare dalla pagina. Il richiamo avviene mediante il comando: <link rel= stylesheet type= text/css href= nome_file.css > compreso tra <head></head> oppure url(nome_file.css); compreso tra i tag <style type= text/css ></style> I CSS a stile incorporato oppure quelli esterni possono assegnare uno stile anche a determinati elementi di un tag. Possiamo ad esempio attivarlo uno stile per il tag <input> ma solo per gli elementi di tipo text come segue: input[type= text ] {background-color:blue 8/45

9 LE CLASSI Un modo molto pratico ed utilizzato per definire gli stili sono le classi, un sistema mediante il quale si creano degli stili, battezzandoli con un nome, il quale verrà richiamato dal tag. É possibile così creare quanti stili vogliamo, attribuendogli nomi diversi richiamandoli ogni volta ce ne sia di bisogno. Per definire una classe basta digitare un nome preceduto da un punto (.) al posto del nome del tag nella dichiarazione di stile..mio_stile{ color: red; font-size: 56pt; font-style: italic; La scelta del nome non ha importanza, ma sarebbe meglio sceglierlo attinente allo stile, così che quando lo si utilizzerà verrà ricordato più facilmente. Ora basta solo richiamare la classe dal tag HTML <span class= mio_stile [altro_stile] >...</span> Nel richiamo allo stile non si inserisce il punto davanti al nome. Le classi sono supportate da tutti i tag HTML. Si possono utilizzare anche più stili combinati inserendo i nomi divisi da spazi vuoti. 9/45

10 LAVORARE CON GLI ID I CSS ci danno la possibilità di utilizzare gli ID, cioè degli identificatori attribuibili a qualsiasi tag, ma usati più che altro con i contenitori come il DIV. Lo scopo degli identificatori è quello di posizionare gli oggetti in una pagina web. Il funzionamento è semplice, in quanto sono molto simili ai class, basta definire un ID nello STYLE interno o esterno che sia, dargli un nome preceduto dal cancelletto (#). #nome { position: absolute; top: 40px; left: 32px; z-index: 1; 10/45

11 GLI STILI I parametri di stile per il testo text-align: left right center justify; Questo stile permette di modificare l'allineamento del testo. left right center justify allineamento a sinistra allineamento a destra centrato giustificato Esempi: P {text-align: left; P {text-align: right; DIV {text-align: center; DIV {text-align: justify; text-decoration: overline underline line-through blink none; Questo stile permette di modificare la decorazione del testo. overline underline line-through blink none sopralineato sottolineato sbarrato lampeggiante senza Esempi: 11/45

12 H1 {text-decoration: overline; P {text-decoration: underline; DIV {text-decoration: overline underline; P {text-decoration: line-through; P {text-decoration: blink; P {text-decoration: none; font-style: normal italic oblique; Questo stile permette di modificare la proprietà stile del testo. normal italic oblique stile di default stile corsivo sitle obliquo text-indent: {rientro di pixel {rientro in percentuale; Questo stile permette di modificare l'indentazione del testo. Esempi: P {text-indent: 12px; DIV {text-indent: 20%; text-transform: capitalize uppercase lowercase; Questa direttiva di stile permette di effettuare delle trasformazioni del testo. capitalize uppercase lowercase trasforma in maiuscola la prima lettera di ogni parola trasforma tutto in maiuscolo trasforma tutto in minuscolo Esempi: P {text-transform: capitalize; P {text-transform: uppercase; P {text-transform: lowercase; line-height: normal {numero {percentuale; Questo parametro di stile permette di definire lo spazio di interlinea, quindi lo spazio tra le singole righe. normal {numero {percentuale interlinea normale interlinea espressa in em interlinea espressi in percentuale Esempi: P {line-height: 3em; DIV {line-height: 50%; 12/45

13 letter-spacing: numero; Questo parametro di stile permette di definire lo spazio tra le lettere espresso dal valore di numero. Esempi: P {letter-spacing: 1em; DIV {letter-spacing: 2px; direction: rtl ltr; Con questo attributo possiamo definire la direzione del testo. rtl ltr il testo va da destra verso sinistra il testo va da sinistra verso destra Esempi: DIV {direction: rtl I parametri di stile per i caratteri font-family: tipo_carattere1,tipo_carattere2,...; Questo parametro di stile permette di definire il tipo di carattere da utilizzare per il testo desiderato. I vari font devono essere separati da virgola. Specificando più font si ha la possibilità di definire un font alternativo in caso in cui il primo non sia presente sulla macchina del visitatore. Esempi: P {font-family: verdana, arial, sans-serif; DIV {font-family: "MS Sans Serif", verdana, sans-serif; font-size: valore; Questo attributo permette di definire la dimensione del testo espresso in punti (pt), pixel (px), in percentuale oppure usando la proprietà del testo come ad esempio larger. Esempi: P {font-size: 9pt; I {font-size: larger; B {font-size: 18px; H1 {font-size: 150%; font-style: normal italic oblique; Questo attributo permette di definire lo stile da utilizzare per il blocco desiderato. Esempi: H1 {font-style: normal; 13/45

14 P B {font-style: italic; {font-style: oblique; font-variant: normal small-caps; Questo parametro permette di definire delle varianti allo stile da apportare al testo desiderato. Esempi: P {font-variant: small-caps; B {font-variant: normal; font-weight: bold normal {valore; Con questo attributo possiamo definire lo spessore da utilizzare per la visualizzazione del testo. bold grassetto normal spessore normale valore valore numerico compreso tra 100 (normale) a 700 (grassetto) Esempi: P {font-weight: bold; H1 {font-weight: 700; I parametri di stile per i colori color: valore; Questo parametro permette di definire il colore da utilizzare espresso in valore esadecimale, come colore in lingua inglese, oppure con l'utilizzo di rgb(r,g,b). Esempi: P {color: red; DIV {color: #990099; H1 {color: rgb(255,0,0); background-color: valore; Questo parametro permette di definire il colore di sfondo espresso in valore esadecimale, come colore in lingua inglese, oppure con l'utilizzo di rgb(r,g,b). Esempi: P {background-color: yellow DIV {background-color: #33ccff H1 {background-color: rgb(255,255,0) 14/45

15 I parametri di stile per definire le dimensioni width: {valore in pixel {valore percentuale auto Questo parametro permette di definire la larghezza del contenitore. #css {position: absolute; width: 300px; left: 100px; top: 50px; height: {valore in pixel {valore percentuale auto Questo parametro permette di definire l'altezza del contenitore. #css {position: absolute; height: 400px;... I parametri di stile per definire le posizioni position: absolute fixed relative static Questo parametro permette di definire la posizione del contenitore di appartenenza. absolute fixed relative static definisce una posizione assoluta; come riferimento viene preso il primo contenitore padre con posizionamento non statico; se non ne trova usa come riferimento l'elemento body stacca l'elemento dalla struttura statica e utilizza come riferimento di posizionamento la finestra del browser all'interno della quale viene inserito; l'elemento rimane fisso anche se la pagina viene scrollata stacca l'elemento dalla struttura statica, ma utilizza come riferimento il proprio posizionamento all'interno della stessa struttura si ottiene un posizionamento naturale anche se le coordinate sono uguali per oggetti diversi questi non si sovrappongono #css {position: absolute;; left: 100px; top: 50px; top: {valore in pixel {valore percentuale auto Questo parametro permette di definire il margine superiore. #css {position: absolute; top: 50px; left: 100px; 15/45

16 left: {valore in pixel {valore percentuale auto Questo parametro permette di definire il margine sinistro. #css {position: absolute; top: 50px; left: 100px; display: block inline none Questo parametro permette di definire lo spazio utilizzato per l'oggetto in questione. block inline none l'oggetto viene inserito utilizzando un'interruzione prima e dopo l'oggetto stesso; inserimento avviene in modalità verticale l'oggetto viene inserito in sequenza, quindi orizzontalmente l'oggetto viene reso invisibile e tolto dall'attuale struttura visualizzata (a differenza del hidden con visibility dove lo spazio occupato rimane visibile) #css {display: none;... z-index: valore Questo parametro permette di definire la profondità dell'oggetto. In alcuni casi non funzione se non viene definita anche la proprietà top. Se non dovesse servire va comunque settata con valore 0px. #css {position: absolute; z-index: 10; top: 0px; height: 400px;... float: left right none; Questo parametro permette di definire il flusso degli elementi inserito all'interno del componente stesso. left right tutti gli elementi con questa proprietà vengono messi in pila, uno dopo l'altro da sinistra verso destra (fino a quando non viene utilizzata la proprietà clear) tutti gli elementi con questa proprietà vengono messi in pila, uno dopo l'altro da destra verso sinistra (fino a quando non viene utilizzata la proprietà clear) clear: left right both; Questo parametro permette di annullare la proprietà di flusso e di iniziare su una nuova riga. 16/45

17 I parametri di stile per la visibilità Per ogni elemento inserito all'interno della nostra struttura è possibile definire il comportamento di visibilità necessario. Possiamo decidere di mostrare o meno un contenuto o addirittura definirne il grado di trasparenza. overflow: visible hidden scroll auto Questo parametro permette di definire il comportamento di visualizzazione del contenuto di un contenitore (come ad esempio un div ). visible hidden scroll auto nel caso in cui il contenuto fosse più ampio della dimensione del contenitore questo verrebbe visualizzato al di fuori del contenitore stesso nel caso in cui il contenuto fosse più ampio della dimensione del contenitore questo verrebbe nascosto in questo caso vengono aggiunte le scrollbars per visualizzare l'intero contenuto le scrollbars vengono aggiunto solamente nel caso in cui verrebbe sforato lo spazio messo a dispozione #css {width: 200px; height: 200px; overflow: auto;... visibility: hidden visible Questo parametro permette di definire la visibilità dell'oggetto. hidden visible l'elemento viene nascosto, ma rimane lo spazio utilizzato dall'elemento quando è visibile l'elemento viene visualizzato #css {position: absolute; visibility: hidden; height: 400px;... opacity: { ; (Firefox) filter: alpha(opacity={1-100); (IE) Questo parametro permette di definire l'opacità dell'oggetto. #css {opacity:0.4; filter: alpha(opacity=40); 17/45

18 I parametri di stile per lo sfondo Vediamo ora i parametri di stile che possiamo utilizzare per modificare le proprietà dello sfondo. Vediamo come poter inserire un'immagine nello sfondo e come andare a modificare le proprietà di posizionamento all'interno di esso. background-image: url('[percorso/]file_immagine'); Questo parametro permette di definire l'immagine da utilizzare come immagine di sfondo. Esempi: P {background-image: url('percorso/immagine.gif'); DIV {background-image: url('logo.gif'); background-repeat: repeat repeat-x repeat-y no-repeat inherit; Questo parametro permette di definire le proprietà di ripetizione dell'immagine da utilizzare come sfondo. Un'immagine inserita come sfondo viene normalmente ripetuta sia orizzontalmente che verticalmente. repeat repeat-x repeat-y no-repeat inherit ripetizione sia orizzontale che verticale ripetizione orizzontale ripetizione verticale senza ripetizione eredita le proprietà dall'impostazione del padre Esempi: DIV {background-image: url('logo.gif'); background-repeat: repeat-x DIV {background-image: url('logo.gif'); background-repeat: no-repeat background-attachment: scroll fixed inherit; Questo parametro permette di definire le proprietà dell'immagine da utilizzare come sfondo. scroll fixed inherit per far scorrere lo sfondo insieme al testo per fissare lo sfondo e far scorrere solo il testo eredita la proprietà dall'impostazione del padre Esempi: {background-image: url('logo.gif'); background-attachment: scroll; {background-image: url('logo.gif'); background-attachment: fixed; 18/45

19 background-position: {vpos hpos x% y% xpos ypos inherit; Questo parametro permette di definire il punto di partenza dell'immagine da inserire come sfondo. Come posizione possiamo inserire top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, x%, y%, xpos, ypos, oppure inherit vpos può essere top, center, oppure bottom hpos può essere left, center, oppure right x% y% sono le coordinate x e y in percentuale xpos ypos sono le coordinate x e y inherit eredita la proprietà dall'impostazione del padre Esempi: DIV {background-image: url('logo.gif'); background-repeat: no-repeat; background-position: right top I parametri di stile per gli elementi contenitori Intorno ai vari contenuti HTML sono presenti degli spazi ben definiti che permettono di modificare le proprietà di layout dell'elemento stesso. L'elemento base è l'area all'interno della quale viene mostrato il contenuto dell'elemento. Intorno a questa troviamo il bordo (border), mentre tra questi due si trova un'area che ci permette di staccare il contenuto dal bordo (padding). Intorno al bordo troviamo un'ulteriore area (outline) che possiamo formattare così come formattiamo lo stile del bordo. L'ultimo spazio utilizzabile è il margine (margin) che ci permette di staccare l'elemento visualizzato dagli altri elementi presenti all'interno della pagina. Come proprietà per il bordo troviamo: border-style, border-width e border-color. border-style: valore [valore [valore valore]]; Questo parametro permette di definire lo stile del bordo utilizzato. none dotted dashed solid double groove ridge inset outset non viene utilizzato bordo bordo punteggiato bordo tratteggiato bordo solido bordo doppio bordo 3D incavo bordo 3D concavo bordo 3D abbassato bordo 3D inalzato border-width: valore; Questo parametro permette di definire lo spessore del bordo. 19/45

20 border-color: valore; Questo parametro permette di definire il colore del bordo, per i valori vedere color. Come proprietà per l'area intorno al bordo troviamo: outline-style, outlinewidth e outline-color. outline-style: valore [valore [valore valore]]; Questo parametro permette di definire lo stile dell'area intorno al bordo utilizzato. none dotted dashed solid double groove ridge inset outset non viene utilizzato bordo bordo punteggiato bordo tratteggiato bordo solido bordo doppio bordo 3D incavo bordo 3D concavo bordo 3D abbassato bordo 3D inalzato outline-width: valore; Questo parametro permette di definire lo spessore dell'area intorno al bordo. outline-color: valore; Questo parametro permette di definire il colore dell'area intorno al bordo, per i valori vedere color. Come proprietà per il margine possiamo usare: margin, margin-top, margin-left, margin-right e margin-bottom. margin: valore [valore [valore valore]]; Questo parametro permette di definire il margine di un componente definendo ogni margine, il margine alto-basso e sinistro-destro, oppure i quattro valori separati. Il valore viene assegnato come valore fisso o percentuale. margin-top: valore; Questo parametro permette di definire il margine superiore di un componente. Il valore viene assegnato come valore fisso o percentuale. margin-left: valore; 20/45

21 Questo parametro permette di definire il margine sinistro di un componente. Il valore viene assegnato come valore fisso o percentuale. margin-right: valore; Questo parametro permette di definire il margine destro di un componente. Il valore viene assegnato come valore fisso o percentuale. margin-bottom: valore; Questo parametro permette di definire il margine inferiore di un componente. Il valore viene assegnato come valore fisso o percentuale. Come proprietà per lo spazio tra il contenuto ed il bordo usiamo: padding, padding-top, padding-left, padding-right e padding-bottom. padding: valore [valore [valore valore]]; Questo parametro permette di definire lo spazio definendo ogni spazio, lo spazio alto-basso e sinistro-destro, oppure i quattro valori separati. Il valore viene assegnato come valore fisso o percentuale. padding-top: valore; Questo parametro permette di definire lo spazio superiore di un componente. Il valore viene assegnato come valore fisso o percentuale. padding-left: valore; Questo parametro permette di definire lo spazio sinistro di un componente. Il valore viene assegnato come valore fisso o percentuale. padding-right: valore; Questo parametro permette di definire lo spazio destro di un componente. Il valore viene assegnato come valore fisso o percentuale. padding-bottom: valore; Questo parametro permette di definire lo spazio inferiore di un componente. Il valore viene assegnato come valore fisso o percentuale. I parametri di stile per le liste Le liste vengono principalmente suddivise in due gruppi: gli elenchi puntati e gli elenchi numerati. Per gli elenchi puntati possiamo avere i seguenti stili: list-style-type: valori; Questo stile permette di definire il tipo di puntatore da utilizzare. Per questo parametro possiamo utilizzare i seguenti valori: none non utilizza puntatore 21/45

22 disc circle square valore di default; visualizza un punto visualizza un cerchio vuoto visualizza un quadrato list-style-position: inside outside; Questo stile permette di definire la posizione della lista. list-style-image: url('[percorso/]file_immagine'); Questo parametro permette di definire l'immagine da utilizzare come puntatore. Esempi: UL {list-style-image: url('percorso/immagine.gif'); UL {list-style-image: url('logo.gif'); Per gli elenchi numerati possiamo avere i seguenti stili: list-style-type: valori; Questo stile permette di definire il tipo di puntatore da utilizzare. Per questo parametro possiamo utilizzare i seguenti valori: none armenian decimal decimal-leading-zero georgian lower-alpha lower-greek lower-latin lower-roman upper-alpha upper-latin upper-roman non utilizza puntatore visualizza la numerazione Armenian visualizza la numerazione con numero visualizza la numerazione con 0 e numero visualizza la numerazione Georgian visualizza la numerazione a, b, c, ecc. visualizza la numerazione alpha, beta, ecc. visualizza la numerazione Latin visualizza la numerazione i, ii, iii, ecc. visualizza la numerazione A, B, C, ecc. visualizza la numerazione A, B, C, ecc. visualizza la numerazione I, II, III, ecc. list-style-position: inside outside; Questo stile permette di definire la posizione della lista. I parametri di stile per le tabelle border-collapse: collapse separate; Questo stile permette di definire la disposizione delle celle all'interno della tabella: collapse le celle vengono unite l'una all'altra 22/45

23 separate le celle vengono separate border-spacing: value [value]; Questo stile permette di definire lo spazio tra le celle. Con l'assegnazione di un valore assegnamo sia lo spazio orizzontale che verticale. Con due valori definiamo quello orizzontale con il primo valore, quello verticale con il secondo. caption-side: top bottom; Questo parametro permette di posizionare l'etichetta della tabella al di sopra o al di sotto della tabella stessa. empty-cells: show hide; Questo parametro permette di definire se mostrare o meno il bordo di celle vuote. table-layout: auto fixed; Questo parametro permette di definire il tipo di layout con il quale creare la tabella. 23/45

24 RAGGRUPPAMENTO E NIDIFICAZIONE Vediamo nel seguente capitolo come creare delle classi di stile che vengono utilizzate da gruppi di elementi o elementi nidificati. Raggruppamento di stili Quando dobbiamo creare delle classi di stile uguali per più selettori possiamo raggruppare i selettori separandoli da una virgola: h1, p, a { color: red; Nell'esempio creiamo una classe che utilizziamo per i tag h1, p e a. Elementi nidificati Se volessimo specificare invece una classe di stile da utilizzare per tutti gli elementi presenti all'interno di un determinato elemento (quindi nidificati) potremmo utilizzare lo spazio come segue: div h1 { color: red; 24/45

25 In questo caso definiamo la classe di stile per tutti gli elementi h1 (indipendentemente dalla profondità dell'elemento in questione!) che si trovano all'interno di un qualsiasi elemento div. Nel prossimo codice il contenuto dei tag scritti in grassetto verranno scritti in rosso: <div> <h1>questo è il titolo</h1> <p> <h1>secondo titolo</h1> </p> <h1>altro titolo</h1> <p> <h1>nuovamente un titolo</h1> </p> </div> Nidificazione padre/figlio Per limitare l'utilizzo della classe di stile solamente al primo livello di appartenenza possiamo scrivere: div>h1 { color: red; In questo caso intendiamo solamente gli elementi h1 che si trovano all'interno del primo livello di un qualsiasi tag div. Nel prossimo codice solamente il contenuto dei tag scritti in grassetto verranno scritti in rosso: <div> <h1>questo è il titolo</h1> <p> <h1>secondo titolo</h1> </p> <h1>altro titolo</h1> <p> <h1>nuovamente un titolo</h1> </p> </div> Stile per elemento a seguire Inoltre abbiamo anche la possibilità di creare degli stili validi solamente per tag che si trovano dopo determinati elementi. Il controllo avviene su elementi fratelli della struttura: div + p { color: red; 25/45

26 In questo caso la classe di stile verrà presa in considerazione da tutti gli elementi p che seguono (sullo stesso livello) un elemento div. Nel prossimo codice solamente il contenuto dei tag scritti in grassetto verranno scritti in rosso: <div> <p>testo</p> <div>altro testo</div> <p>nuovamente testo</p> <h1>prova</h1> <p>questo no</p> </div> Stile per tutti gli elementi a seguire Se non volessimo limitare l'utilizzo della classe di stile solo all'elemento che si trova direttamente dopo quello in questione, ma bensì a tutti quelli che seguono potremmo scrivere come segue: div ~ p { color: red; Nel prossimo codice solamente il contenuto dei tag scritti in grassetto verranno scritti in rosso: <div> <p>testo</p> <div>altro testo</div> <p>nuovamente testo</p> <h1>prova</h1> <p>questo no</p> </div> 26/45

27 PSEUDO-CLASSI ED ELEMENTI Le pseudo-classi, oppure i pseudo-elementi, permettono di aggiungere specifici effetti ai vari selettori in questione. Le sintassi che possiamo utilizzare sono: selettore:pseudo-classe selettore.classe:pseudo-classe selettore:pseudo-elemento selettore.classe:pseudo-elemento Vediamo alcune delle pseudo-classi o dei pseudo-elementi più comuni. Pseudo-classi per il tag a a:link {... Questa pseudo-classe permette di definire lo stile del link non ancora visitato. a:visited { Questa pseudo-classe permette di definire lo stile del link visitato. a:hover { Permette di definire lo stile per il link quando il puntatore del mouse ci passa sopra. a:active { 27/45

28 Permette di definire lo stile da utilizzare per il link che viene selezionato. Pseudo-classe per il primo figlio selettore:first-child {... Questa pseudo-classe identifica il primo tag indicato dal selettore presente all'interno di un qualsiasi altro tag. Nel seguente esempio: p:first-child { color: red; il testo di ogni primo tag p presente all'interno di un qualsiasi altro tag verrà scritto in rosso. Nel prossimo codice le righe in grassetto sono quelle che verranno scritte in rosso: <body> <p>primo elemento</p> <p>secondo elemento</p> <div> <p>primo elemento</p> <p>secondo elemento</p> </div> </body> Per indicare solamente il primo tag p all'interno di ogni div scriviamo come segue: div > p:first-child { color: red; Pseudo-classe per elementi con il focus selettore:focus {... Questa pseudo-classe identifica lo stile da utilizzare nel caso in cui si passi il focus ad un determinato elemento. input:focus { background-color: yellow; In questo esempio a tutti gli elementi input che prenderanno il focus verrà cambiato il colore di sfondo in giallo. Pseudo-elementi su testi in elementi a blocco selettore:first-line {... 28/45

29 Questo pseudo-elemento viene usato per modificare lo stile della prima riga dell'elemento in questione. Questo pseudo-elemento può essere utilizzato solamente su elementi di blocco. selettore:first-letter {... Questo pseudo-elemento viene usato per modificare lo stile della prima lettera dell'elemento in questione. Anche questo pseudo-elemento può essere utilizzato solamente su elementi di blocco. Pseudo-elementi per l'aggiunta di contenuto selettore:before {... Questo pseudo-elemento viene usato per aggiungere del contenuto prima del contenuto dell'elemento stesso. Il seguente esempio aggiunge un'immagine prima del titolo: h1:before { content: url(dot.png); selettore:after {... Questo pseudo-elemento viene usato per aggiungere del contenuto dopo il contenuto dell'elemento stesso. Il seguente esempio aggiunge un'immagine dopo il testo presente come titolo: h1:after { content: url(dot.png); 29/45

30 MEDIA QUERIES Oggi giorno esistono vari dispositivi con caratteristiche di visualizzazione diverse l'uno dall'altro. I media queries sono dei filtri che permetto di riconoscere le caratteristiche del dispositivo di visualizzazione con lo scopo di utilizzare un foglio di stile adeguato all'esigenza. Come integrare le media queries Possiamo integrare le media queries importando un foglio di stile esterno, oppure direttamente all'interno del blocco style della nostra pagina. Per importare fogli di stile esterni possiamo utilizzare l'attributo media del tag link come segue: <link rel= stylesheet type= text/css media= screen href= global.css /> se vogliamo invece integrare le media queries direttamente all'interno del blocco style scriviamo: screen { </style> 30/45

31 Tipi di dispositivi Il primo elemento all'interno delle media query identifica il dispositivo, oppure i dispositivi se separati da virgola, per i quali vale la rispettiva regola. I dispositivi che si possono usare sono: all aural braille embossed handheld print projection screen speech tty tv identifica tutti i dispositivi per sintetizzatori e dispositivi voce per dispositivi tattili braille per stampanti braille per dispositivi piccoli e/o portatili per stampanti per presentazione su proiettori per schermi di computer per dispositivi vocali per dispositivi a dimensione di caratteri fissa (terminal) per dispositivi come televisori screen,print { </style> Caratteristiche di dispositivi Oltre ad identificare il dispositivo possiamo aggiungere delle regole che ne determinano le specifiche caratteristiche. Più regole possono essere combinate in maniera logica utilizzano and, or oppure not. Nel caso in cui ci fossero all'interno della media query più dispositivi le caratteristiche verrebbero specificate per ognuno di essi. screen and (orientation:landscape), handheld and (orientation:landscape) Vediamo ora le caratteristiche più utilizzate: width, min-width, max-width Questa caratteristica identifica la larghezza di visualizzazione del dispositivo (nel browser il ViewPort). width identifica la larghezza precisa, min-width identifica il valore uguale o maggiore, mentre max-width identifica il valore uguale o minore. all and (min-width:400px) and (max-width:800px) { 31/45

32 </style> Questo codice identifica tutti gli schermi che hanno una visualizzazione tra 400px e 800px. height, min-height, max-height Questa caratteristica identifica l'altezza di visualizzazione del dispositivo (nel browser il ViewPort). height identifica l'altezza precisa, min-height identifica il valore uguale o maggiore, mentre max-height identifica il valore uguale o minore. device-width, min-device-width, max-device-width La caratteristica device-width identifica la larghezza effettiva dello schermo del dispositivo e non solo la parte utilizzata per la visualizzazione del documento. I prefissi min e max vengono utilizzati esattamente come nella caratteristica width. device-height, min-device-height, max-device-height In questo caso definiamo l'altezza effettiva dello schermo del dispositivo. Anche qui i prefissi min e max vengono utilizzati come nella caratteristica height. orientation Questa caratteristica permette di utilizzare il valore landscape oppure portrait. In questo caso il valore si riferisce alle proporzioni tra width e height. Se width è maggiore di height ci troviamo in visualizzazione landscape. Nel momento in cui height supera il valore di width l'orientamento sarà portrait. handheld and (orientation:portrait) { </style> aspect-ratio Questa caratteristica permette di definire una proporzione più precisa tra width e height utilizzando come valore due numeri interi separati dal simbolo / (es. 4/3, 16/9, ecc.). Anche questa caratteristica permette l'utilizzo dei prefissi min e max. device-aspect-ratio Questa caratteristica è identica a aspect-ratio solo che mette a confronto le proporzioni di device-width e device-height. Anche qui si possono 32/45

33 utilizzare i prefissi min e max. color Questa caratteristica permette di specificare il numero dei bit utilizzati per rappresentare un color all'interno del dispositivo in questione. Utilizzando il semplice nome della caratteristica, quindi senza aggiungere un valore, permette di indicare tutti i dispositivi che mettono a disposizione una visualizzazione a colori. all and (color) { </style> color-index Questa caratteristica permette di specificare il numero di colori supportati all'interno della tavolozza colori del dispositivo. Anche qui possiamo utilizzare i prefissi min e max come già visto precedentemente. screen and (min-color-index:16) { </style> 33/45

34 CSS3 Questa sezione è stata creata per dare una panoramica iniziale a quelle che possono essere le potenzialità introdotte dalle direttive CSS3. Per garantire una compatibilità attraverso i diversi browser diventa indispensabile l'utilizzo di determinati prefisse preimpostate per i vari browser in questione. I prefissi che utilizziamo sono: -moz- (per Mozilla Firefox), -ms- (per Internet Explorer), -webkit- (per Safari e Chrome) e -o- (per Opera). Per evitare di ripetere continuamente il codice all'interno di vari esempi ci baseremo solamento sulle proprietà base e quelle definite per l'utilizzo all'interno dei Mozilla Firefox. Per una compatibilità maggiore vanno ripetute le varie proprietà modificando semplicemente i prefissi. Stili per i contenitori ed i loro contenuti border-radius: h_pixel [/ v_pixel]; Questo stile permette di definire gli angoli arrotondati degli elementi: h_pixel v_pixel questa proprietà ci permette di impostare le dimensioni degli angoli in pixel. Possiamo inserire un valore (per modificare tutti gli angoli), due valori (altosinistra/basso-destra e alto-destra/basso-sinistra), tre valori (alto-sinistra alto-destra/basso-sinistra bassodestra), oppure quattro valori (alto-sinistra alto-destra basso-destra basso-sinistra). questa proprietà, se presente, definisce l'altezza dell'rettangolo nell'angolo che andrà a definire l'arrotondamento desiderato. h_pixel in questo caso ne 34/45

35 andrà a definire la larghezza. div { border-radius: 40px / 20px; -moz-border-radius: 40px / 20px; box-shadow: h_pos v_pos [blur] [spread] [color] [inset]; Questo stile permette di definire l'ombra del relativo oggetto in questione. h_pos v_pos blur spread color inset questo valore ci da la possibilità di definire lo spostamento orizzontale dell'ombra. Questo valore è obbligatorio. questo valore ci da la possibilità di definire lo spostamento verticale dell'ombra. Anche questo valore è obbligatorio. questo valore identifica la larghezza della sfumatura che vogliamo dare all'ombra. Questo valore è facoltativo. questo valore identifica il quanto si deve allargare l'ombra che stiamo creando. L'effetto è quello che si ottiene allontanando o avvicinando la fonte di luce che genera l'ombra in questione. questo valore ci da la possibilità di definire il colore dell'ombra. questo parola viene aggiunta come valore per creare un'ombra generata verso l'interno dell'oggetto in questione. div { box-shadow: 10px 10px 5px black; -moz-box-shadow: 10px 10px 5px black; background-size: width height; Questo stile permette di definire la grandezza dell'immagine che inseriamo come immagine di sfondo. width questo valore ci da la possibilità di definire la larghezza dell'immagine in questione. Possiamo utilizzare anche valori percentuali se vogliamo adattare la larghezza alla dimensione del suo contenitore. 35/45

36 height questo valore ci da la possibilità di definire l'altezza dell'immagine in questione. Possiamo utilizzare anche valori percentuali se vogliamo adattare l'altezza alla dimensione del suo contenitore. div { width: 200px; height: 200px; background-image: url(back.jpg); background-repeat: no-repeat; background-size: 100px 100px; -moz-background-size: 100px 100px; background-origin: box_model; Questa proprietà ci permette di definire la parte del contenitore di riferimento per il posizionamento dell'immagine di sfondo. box_model questo valore definisce la parte del contenitore di riferimento. I valori possibili sono: border-box, paddingbox, oppure content-box. div { width: 200px; height: 200px; padding: 20px; border: 5px solid black; background-image: url(back.jpg); background-repeat: no-repeat; background-size: 100% 100%; -moz-background-size: 100% 100%; background-origin: content-box; -moz-background-origin: content-box; text-shadow: h_pos v_pos [blur] [color]; Questo stile permette di definire l'ombra di parti testuali. h_pos v_pos blur questo valore ci da la possibilità di definire lo spostamento orizzontale dell'ombra. Questo valore è obbligatorio. questo valore ci da la possibilità di definire lo spostamento verticale dell'ombra. Anche questo valore è obbligatorio. questo valore identifica la larghezza della sfumatura che vogliamo dare all'ombra. Questo valore è 36/45

37 color facoltativo. questo valore ci da la possibilità di definire il colore dell'ombra. div { text-shadow: 2px 2px 1px black; -moz-text-shadow: 2px 2px 1px black; column-count: nr_colonne; Questo stile permette di definire il numero delle colonne da utilizzare all'interno di un contenitore. Attualmente è possibile definire il numero delle colonne, ma non la larghezza delle singole. div { column-count: 3; -moz-column-count: 3; column-gap: valore; Questo stile permette di definire lo spazio tra una colonna e l'altra. div { column-count: 3; -moz-column-count: 3; column-gap: 30px; -moz-column-gap: 30px; column-rule: spessore stile colore; Questa proprietà ci permette di definire la linea separatrice tra le varie colonne che abbiamo definito. spessore stile colore questo valore definisce lo spessore che vogliamo dare alla linea questo valore definisce lo stile che possiamo dare alla linea (vedi gli stili che abbiamo utilizzato per i bordi) questo valore permette di definire il colore della linea da utilizzare 37/45

38 div { column-count: 3; -moz-column-count: 3; column-gap: 30px; -moz-column-gap: 30px; column-rule: 1px solid black; -moz-column-rule: 1px solid black; Importazione di font aggiuntivi La gestione di font aggiuntivi all'interno dei nostri siti internet fino ad ora non era possibile. Per garantire una giusta visualizzazione del nostro sito era indispensabile limitarsi ai font standard compatibili sui vari browser in questione. CSS3 mette a disposizione la possibilità di caricare la configurazione di font aggiuntivi che possiamo depositare direttamente sul server web. L'unica cosa che dobbiamo fare è definire un font definendo il nome che vogliamo dare al font, la posizione del file che ci interessa, l'eventuale formato del file e le eventuali proprietà di riferimento. Per quanto riguada i vari formati di font dobbiamo sapere che Internet Explorer supporta i font.eot (Embedded Open Type), mentre Firefox, Chrome, Safari e Opera supportano i font di formato.ttf (True Type Font) e.otf (Open Type Fonts). Il nome del font da importare lo definiamo con font-family, la posizione del file con src. Vediamo un piccolo { font-family: myfont; src: url('segoesc.ttf'), url('segoesc.eot') format('opentype'); /*IE*/ div { font-family: myfont; Notiamo quindi all'interno la possibilità di aggiungere i vari formati separati da una virgola dove la funzione format ci permette di definire il formato del file che andiamo ad aggiungere. Il nuovo font viene poi utilizzato riprendendo il nome del font all'interno dell'elemento che ci interessa. Nell'esempio precedente abbiamo definito un font di tipo normale. La formattazione in grassetto dello stesso font si trova però in file diverso. Ecco che dobbiamo quindi aggiungere un per definire anche le proprietà relative al nuovo stile di carattere che possiamo utilizzare. In questo caso aggiungiamo all'esempio precedente anche il seguente blocco: 38/45

39 @font-face { font-family: myfont; src: url('segoescb.ttf'), url('segoescb.eot') format('opentype'); font-weight: bold; Qui notiamo l'utilizzo dello stesso nome, cambia però il file che importiamo ed in più si aggiunge la proprietà di stile ne identifica le proprietà. L'interprete HTML, avendo lo stesso nome che identifica il font con proprietà diverse, utilizzerà proprio l'aggiunta delle proprietà in questione (nel nostro caso il font-weight: bold) per identificare il file da utilizzare per la visualizzazione del testo in questione. Stili per la trasformazione degli elementi CSS3 mette a disposizione la proprietà transform che utilizza una serie di funzioni in grado di trasformare l'aspetto degli elementi HTML. Per trasformare un elemento possiamo utilizzare una serie di funzioni separate da uno spazio. transform: translate(x_pos,y_pos); Questa funzione permette di spostare l'elemento in questione senza dover utilizzare la proprietà position: x_pos v_pos questo valore sposta l'elemento orizzontalmente dalla sua posizione di origine. questo valore sposta l'elemento verticalmente dalla sua posizione di origine. div { transform: translate(100px,50px); -moz-transform: translate(100px,50px); transform: rotate(deg); Questa funzione permette rotare l'elemento in questione: deg questo valore definisce il grado di rotazione dell'elemento. L'unità di misura da utilizzare è deg. div { transform: rotate(45deg); 39/45

40 -moz-transform: rotate(45deg); transform: scale(x_prop,y_prop); Questa funzione scalare l'elemento in questione: x_prop y_prop questo valore definisce la larghezza di destinazione in base a quella attuale. Il valore della larghezza attuale è pari a 1. 2 aumenta la larghezza del doppio, mentre 0.5 la dimezza. questo valore definisce l'altezza di destinazione in base a quella attuale. Il valore dell'altezza attuale è pari a 1. 2 aumenta l'altezza del doppio, mentre 0.5 la dimezza. div { transform: scale(2,2); -moz-transform: scale(2,2); transform: skew(x_deg,y_deg); Questa funzione permette di roteare intorno all'asse x ed intorno all'asse y: x_deg y_deg questo valore definisce i gradi di rotazione intorno all'asse x. L'unità di misura da utilizzare è deg. questo valore definisce i gradi di rotazione intorno all'asse y. L'unità di misura da utilizzare è deg. div { transform: skew(10deg,20deg); -moz-transform: skew(10deg,20deg); Effetti di transizione CSS3 mette a disposizione una serie di animazioni tra le quali troviamo appunto l'effetto di transizione. L'effetto di transizione viene attivato su una o più proprietà dell'elemento stesso. Nel momento in qui una delle proprietà indicate subisce una variazione, questa non sarà istantanea, ma si passerà in maniera graduale da quella che è la situazione attuale a quella nuova definita. L'effetto di transizione va sempre definito indicando la proprietà da monitorare ed il tempo di durata della transizione. L'unità di misura da 40/45

41 utilizzare è s (seconds). Le coppie di valori che definiscono le varie proprietà di transizione vengono elencate separate da una virgola (,). Vediamo ora un piccolo esempio: div { width: 200px; height: 200px; transition: width 2s, height 2s; -moz-transition: width 2s, height 2s; div:hover { width: 300px; height: 300px; In questo caso attiviamo l'effetto di transizione sulla larghezza e sull'altezza dell'elemento in questione. Quando ci passiamo sopra con il mouse facciamo partire l'effetto di transizione che durerà 2 secondi per passare dagli attuali 200 pixel ai 300 pixel di destinazione. Le proprietà che possiamo aggiungere all'effetto di transizione sono: transition-timing-function: linear ease ease-in ease-out ease-in-out cubic-bezier(n,n,n,n); Questa funzione permette di definire la funzione da utilizzare per l'effetto di transizione. transition-delay: seconds; Questa funzione permette di definire in secondi il tempo di attesa da quando è avvenuta la modifica della proprietà a quando deve partire l'effetto di transizione. div { width: 200px; height: 200px; transition: width 2s, height 2s; -moz-transition: width 2s, height 2s; transition-timing-function: linear; -moz-transition-timing-function: linear; transition-delay: 2s; -moz-transition-delay: 2s; div:hover { width: 300px; height: 300px; 41/45

42 Effetti di animazione CSS3 mette a disposizione dei che permettono di definire una sorta di timeline dell'animazione realizzare. La timeline presente all'interno del blocco citato viene suddiviso in percentuali, dove l'inizio della timeline è definita dal valore 0% (oppure la parola chiave from), mentre la fine è definita dal valore 100% (oppure la parola chiave to). Ad ogni punto presente all'interno della timeline viene definita una classe di stile dove possiamo definire tutte le proprietà dell'oggetto in esattamente quel momento. Vediamo un semplice myanim { from {background-color: red; to {background-color: myanim { from {background-color: red; to {background-color: yellow; div { width: 200px; height: 200px; background-color: yellow; div:hover { animation: myanim 2s; -moz-animation: myanim 2s; In questo modo definiamo un'animazione al quale diamo il nome myanim che parte dallo sfondo rosso per arrivare in maniera graduale allo sfondo giallo. L'animazione viene fatta partire quando il mouse entra all'interno dell'elemento in questione e terminerà dopo 2 secondi. Al termine dell'animazione l'elemento ritornerà alle sue proprietà di origine. L'animazione può però anche essere fatta partire subito senza l'utilizzo di un particolare evento. Vediamo l'esempio myanim { 0% {background-color: red; 50% {background-color: yellow; 100% {background-color: myanim { 0% {background-color: red; 50% {background-color: yellow; 100% {background-color: red; 42/45

43 div { width: 200px; height: 200px; background-color: yellow; animation: myanim 2s linear infinite; -moz-animation: myanim 2s linear infinite; Come possiamo notare dall'esempio abbiamo aggiunto due nuovi falori il linear definisce l'effetto animazione da un passaggio all'altro (vedi effetti di transizione), mentre infinite ci permette di attivare l'animazione in loop. 43/45

44 LE VARIE UNITA' Le unità di misura per le dimensioni Unità Descrizione Esempi cm centimetri 10cm mm millimetri 10mm in pollici 0,25in pc pica(=12punti) 2pc px pixel 25px em lun. lettera 2,5em ex alt. carattere 3ex I valori assoluti Valore xx-small x-small small medium large x-large xx-large Sintassi/Descrizione font-size: xx-small font-size: x-small font-size: small font-size:medium font-size:large font-size:x-large font-size:xx-large 44/45

45 I valori relativi Valore smaller larger Sintassi/Descrizione font-size:smaller font-size:larger I valori assoluti Valore nome esadecimale rgb perc.rgb Sintassi/Descrizione color: red color: #00FF00 color: rgb(0,255,0) color: rgb(0%,100%,0%) I valori di posizionamento Attributo Parametro Descrizione Il modo in cui può essere position absolute - static - relative posizionato un box contenitore. left top height width overflow visibility Z-index cm - mm - in - pt - pc - px - ex - em cm - mm - in - pt - pc - px - ex - em cm - mm - in - pt - pc - px - ex - em cm - mm - in - pt - pc - px - ex - em visible - hidden - scroll visible - hidden xx numeri positivi la distanza del contenitore dal margine sinistro della finestra del browser. la distanza del contenitore dal margine superiore della finestra del browser. Altezza del contenitore se posizionato in modo absolute. Larghezza del contenitore se posizionato in modo absolute. Contenuto che supera Larghezza Altezza del box contenitore. Visibilità o meno di un box contenitore. L'ordine di priorità di visualizzazione di un box contenitore. 45/45