Prof. F. Esposito
Lezione 1: Introduzione al CSS Lezione 2: La sintassi base e i 3 modi di usare CSS Lezione 3: Colori e sfondo Come applicare colori e colori di sfondo al tuo sito web e come usare immagini di sfondo. color background-color background-image background-repeat background-attachment background-position Lezione 4: I Font Conoscere i font e come applicarli usando i CSS. font-family font-style font-variant font-weight font-size font Lezione 5: Il Testo Le opportunità offerte dai CSS text-indent text-align text-decoration letter-spacing text-transform Prof. F. Esposito
La pseudoclasse a:link La pseudoclasse a:visited Lezione 6: Link Come puoi aggiungere effetti utili ai link e lavorare con le pseudo-classi Link Pseudoclasse La pseudoclasse a:link La pseudoclasse a:visited La pseudoclasse a:active La pseudoclasse a:hover Lezione 7: Identificazione e gruppi di elementi (class e id) Uno sguardo ravvicinato a come puoi utilizzare class e id per specificare le proprietà per gli elementi selezionati. Introduzione Raggruppare gli elementi con class Identificativo dell’elemento con id Lezione 8: Gruppi di elementi (span e div) Uno sguardo ravvicinato all'uso di span e div (come elementi HTML sono fondamentali in relazione ai CSS). - Introduzione - Span - Div Lezione 9: Il modello a scatola Il box model nei CSS descrive le scatole che vengono generate per gli elementi HTML. Prof. F. Esposito
Lezione 14: Posizionamento degli elementi Con il posizionamento dei CSS puoi posizionare un elemento esattamente dove lvuoi all'interno della pagina. - Il principio del posizionamento nei CSS - Posizionamento assoluto - Posizionamento relativo Prof. F. Esposito
SEPARARE IL CONTENUTO DALLA FORMA CSS = FOGLI DI STILE A CASCATA Cascading Style Sheet SEPARARE IL CONTENUTO DALLA FORMA ADATTARE UN CONTENUTO A MEZZI E PIATTAFORME DIVERSE Descrizione della struttura e del contenuto Formattazione CSS XHTML Prof. F. Esposito
<body bgcolor="#FF0000"> La sintassi di base dei CSS Diciamo che vogliamo un bel colore rosso come sfondo della pagina web: Usando solo l' HTML avremmo fatto in questo modo: <body bgcolor="#FF0000"> Lo stesso risultato con i CSS si ottiene così: body {background-color: #FF0000;} Come potrai notare, i codici dell'HTML e del CSS sono più o meno identici. L'esempio sopra ti mostra anche il modello fondamentale dei CSS:
CSS 3 MODI DI USARE CSS CSS IN LINEA CSS INCORPORATI CSS ESTERNI Prof. F. Esposito
SITUAZIONE SIMILE ALL’USO DI XHTML CSS IN LINEA SITUAZIONE SIMILE ALL’USO DI XHTML Agiscono sulle singole parti della pagina senza influenzare il resto <h1 style='font-size:18px; font-family:arial; color:red; background:black;'>PROVA</h1> formatta un titolo h1 in modo che abbia il testo di colore rosso e lo sfondo nero Il font arial dimensione 18 Prof. F. Esposito
CSS IN LINEA Altro esempio <html> <head> <title>Esempio</title> </head> <body style="background-color: #FF0000;"> <p>Questa è una pagina rossa</p> </body> </html> Prof. F. Esposito
Sono assegnati all’interno del documento e non a singoli elementi CSS INCORPORATI A META’ STRADA Sono assegnati all’interno del documento e non a singoli elementi <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>PROVA</title> <style type="text/css"> p { text-align: justify; /* commento per allineamento giustificato */ color: #ff0000; /* commento per colore rosso */ } </style> </head> <body> <p>PROVA</p> <h2> titolo senza stile </h2> </body> </html> Prof. F. Esposito
CSS INCORPORATI Altro esempio <html> <head> <title>Esempio</title> <style type="text/css"> body {background-color: #FF0000;} </style> </head> <body> <p>Questa è una pagina rossa</p> </body> </html> Prof. F. Esposito
E’ la soluzione che meglio interpreta la filosofia dei fogli di stile. CSS ESTERNI E’ la soluzione che meglio interpreta la filosofia dei fogli di stile. Uso di un file esterno (di estensione .css) contenente solo codice CSS, a cui le pagine web possono fare riferimento In questo modo una modifica al file del foglio di stile coinvolge un intero sito. Prof. F. Esposito
CSS ESTERNI ll trucco è creare un link al foglio di stile (style.css) dal documento HTML (default.htm). Questo link potrebbe essere creato con una linea di codice HTML: <link rel="stylesheet" type="text/css" href="style/style.css" /> <html> <head> <title>Il mio documento</title> <link rel="stylesheet" type="text/css" href="style/style.css" /> </head> <body> ...
CSS ESTERNI Questa tecnica ti permette di guadagnare un sacco di lavoro. Se per esempio vuoi cambiare il colore di sfondo di un sito web di 100 pagine, un foglio di stile ti può salvare dal farlo manualmente per tutti i 100 documenti HTML. Usando i CSS il cambiamento può essere fatto in pochi secondi solo cambiando un codice nel foglio di stile.
<title>Il mio documento</title> default.htm <html> <head> <title>Il mio documento</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Il mio primo foglio di stile</h1> </body> </html> Style.css body { background-color: #FF0000; } Prof. F. Esposito
Colore di primo piano: la proprietà 'color‘. 3. Colori e sfondi Colore di primo piano: la proprietà 'color‘. La proprietà color descrive il colore di primo piano di un elemento. Per esempio, immagina di volere tutti i titoli del documento di colore rosso scuro. I titoli sono tutti marcati con l'elemento HTML <h1>. Il codice sotto definisce il colore rosso dell'elemento <h1>. h1 { color: #ff0000; } I colori possono essere inseriti in valore esadecimale come nell'esempio sopra, o puoi usare il nome del colore in inglese ("red") o il suo valore in rgb (rgb(255,0,0)). Prof. F. Esposito
La proprietà 'background-color' Colori e sfondi La proprietà 'background-color' La proprietà background-color descrive il colore di sfondo degli elementi. L'elemento <body> contiene tutto il contenuto di un documento HTML. Per questo motivo, per cambiare il colore di sfondo di tutta la pagina, dovremmo applicare la proprietà background-color all'elemento <body>. Il colore di sfondo può essere applicato anche ad altri elementi compresi i titoli e il testo. Nell'esempio sotto sono stati applicati diversi colori di sfondo agli elementi <body> e <h1>. body { background-color: #FFCC66; } h1 { color: #990000; background-color: #FC9804; Prof. F. Esposito
Immagini di sfondo [background-image] Colori e sfondi Immagini di sfondo [background-image] La proprietà CSS background-image viene usata per inserire una immagine di sfondo. Per inserire l'immagine della farfalla come immagine di sfondo di una pagina web applica semplicemente la proprietà background-image al <body> e specifica la posizione dell'immagine. body { background-color: #FFCC66; background-image: url("butterfly.gif"); } h1 { color: #990000; background-color: #FC9804; Prof. F. Esposito
Immagini di sfondo ripetute [background-repeat] Colori e sfondi Immagini di sfondo ripetute [background-repeat] Nell'esempio hai notato che per default la farfalla viene ripetuta sia orizzontalmente che verticalmente in modo da coprire tutto lo schermo? La proprietà background-repeat controlla questo comportamento. Per esempio, per evitare ripetizione di un'immagine di sfondo il codice dovrebbe apparire come questo: body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; } h1 { color: #990000; background-color: #FC9804; Prof. F. Esposito
Immagini di sfondo ripetute [background-repeat] Colori e sfondi Immagini di sfondo ripetute [background-repeat] Valore Descrizione Background-repeat: repeat-x L'immagine viene ripetuta orizzontalmente background-repeat: repeat-y L'immagine viene ripetuta verticalmente background-repeat: repeat L'imagine viene ripetuta sia orizzontalmente che verticalmente background-repeat: no-repeat L'immagine non viene ripetuta Prof. F. Esposito
Immagini di sfondo bloccate [background-attachment] Colori e sfondi Immagini di sfondo bloccate [background-attachment] La proprietà background-attachment specifica se una figura di sfondo è fissa o si muove insieme all'elemento che la contiene. Una immagine di sfondo fissa non si muoverà con il testo quando il lettore scorrerà la pagina, mentre una immagine di sfondo non bloccata si muoverà insieme al testo della pagina web. La tabella sotto sottolinea i due valori che può avere background-attachment. Valore Descrizione Background-attachment: scroll L'immagine si muove con la pagina - non bloccata Background-attachment: fixed L'immagine è bloccata Prof. F. Esposito
Immagini di sfondo bloccate [background-attachment] Colori e sfondi Immagini di sfondo bloccate [background-attachment] Valore Descrizione Background-attachment: scroll L'immagine si muove con la pagina - non bloccata Background-attachment: fixed L'immagine è bloccata body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; } h1 { color: #990000; background-color: #FC9804; Prof. F. Esposito
Immagini di sfondo posizionate [background-position] Colori e sfondi Immagini di sfondo posizionate [background-position] Per default una immagine di sfondo verrà posizionata nell'angolo in alto a sinistra dello schermo. La proprietà background-position ti permette di cambiare il default e posizionare l'immagine di sfondo in qualsiasi altro posto dello schermo che preferisci. Ci sono molti modi per stabilire i valori di background-position. Tutti comunque stabiliscono un insieme di coordinate. Per esempio, il valore '100px 200px' posiziona l'immagine a 100px dal lato sinistro e a 200px dal bordo superiore della finestra del browser. Le coordinate possono essere indicate come percentuale delle dimensioni dello schermo, unità fisse (pixel, centimetri, ecc.) o puoi usare le parole inglesi top, bottom, center, left e right. Prof. F. Esposito
Immagini di sfondo posizionate [background-position] Colori e sfondi Immagini di sfondo posizionate [background-position] Prof. F. Esposito
Immagini di sfondo posizionate [background-position] Colori e sfondi Immagini di sfondo posizionate [background-position] Valore Descrizione background-position: 2cm 2cm L'immagine è posizionata a 2 cm dalla sinistra e a 2 cm dal basso della pagina background-position: 50% 25% L'immagine è centrata ad un quarto della pagina dal basso background-position: top right L'immagine è posizionata nell'angolo in alto a destra della pagina Prof. F. Esposito
Immagini di sfondo posizionate [background-position] Colori e sfondi Immagini di sfondo posizionate [background-position] body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; } h1 { color: #990000; background-color: #FC9804; Prof. F. Esposito
La famiglia dei caratteri [font-family] La proprietà font-family viene usata per definire le priorità per la lista dei caratteri da usare per visualizzare un elemento o una pagina web. Se il primo font della lista non è stato installato sul computer che accede al sito, allora verrà provato il secondo font della lista e così via finché non verrà trovato un fonte disponibile. Ci sono due tipi di nomi per catalogare i font: i nomi della famiglia e le famiglie generiche. I due termini vengono spiegati sotto. Nome della famiglia. Esempi di nomi della famiglia (conosciuto spesso con il termine "font") possono essere per esempio "Arial", "Times New Roman" o"Tahoma". Famiglia generica. Le famiglie generiche possono essere descritte meglio come gruppi di nomi di famiglie con caratteristiche uniformi. Un esempio è il sans-serif (in italiano, senza grazie), che è la collezione dei font senza le cosiddette grazie, o "piedi". Prof. F. Esposito
La famiglia dei caratteri [font-family] Prof. F. Esposito
La famiglia dei caratteri [font-family] Quando fai la lista dei font per il tuo sito web, inizia con i font più usati e segui con alcuni font alternativi. E' raccomandabile terminare la lista con il nome di una famiglia generica di font. In questo modo la pagina potrà essere visualizzata con un font della stessa famiglia generica, nel caso in cui tutti i font listati non fossero disponibili. h1 { font-family: arial, verdana, sans-serif; } h2 { font-family: "Times New Roman", serif; I titoli marcati con <h1> verranno visualizzati con il font "Arial". Se questo font non è stato istallato sul computer dell'utente, allora verrà utilizzato al suo posto il font "Verdana". Se entrambi questi font non sono disponibili, i titoli verranno visualizzati utilizzando un font della famiglia sans-serif Prof. F. Esposito
Stile del font [font-style] La proprietà font-style definisce lo stile normale, italico o obliquo del font scelto. Nell'esempio sotto tutti i titoli marcati con <h2> verranno visualizzati in italico. h1 { font-family: arial, verdana, sans-serif; } h2 { font-family: "Times New Roman", serif; font-style: italic; Prof. F. Esposito
Variante del font [font-variant] La proprietà font-variant viene usata per scegliere tra le varianti normal o small-caps di un font. Un font small-caps è un font che usa tutte lettere maiuscole di dimensioni leggermente più piccole, al posto delle lettere minuscole. Se viene assegnato a font-variant il valore small-caps e non è disponibile nessun font small-caps il browser molto probabilmente mostrerà il testo tutto maiuscolo. h1 { font-variant: small-caps; } h2 { font-variant: normal; Prof. F. Esposito
Peso del font [font-weight] La proprietà font-weight descrive il grado di neretto, o "di pesantezza", che dovrebbe avere il font. Un font può essere sia normal che bold. Alcuni browser supportano anche l'uso di una serie di numeri tra 100 e 900 (in centinaia) per descrivere la pesantezza di un font p { font-family: arial, verdana, sans-serif; } td { font-weight: bold; Prof. F. Esposito
Dimensione del font [font-size] La dimensione di un font viene definita con la proprietà font-size. Per descrivere le dimensioni di un font si può scegliere tra diverse unità di misura (per esempio, pixel e percentuali). In questo tutorial ci focalizzeremo sulle unità più utilizzate comunemente e più appropriate, mostrate negli esempi: h1 { font-size: 30px; } h2 { font-size: 12pt; h3 { font-size: 120%; p { font-size: 1em; // 1em corrisponde a 16px Prof. F. Esposito
Dimensione del font [font-size] C'è una sola differenza chiave tra le quattro unità elencate sopra. Le unità 'px' e 'pt' indicano dimensioni assolute per il font, mentre '%' e 'em' permettono all'utente di ridimensionare il font come preferiscono. Molti utenti sono diversamente abili, anziani o semplicemente vedono poco o hanno un monitor di qualità scadente. Per far si che il web sia accessibile a tutti, dovresti usare le unità ridimensionabili come '%' o 'em'. Ogni browser consente di ridimensionare la dimensione del font. Prof. F. Esposito
Raggruppamento [font] Usando la proprietà font è possibile raggruppare tutte le diverse proprietà dei font in una sola. Per esempio immagina queste quattro linee di codice usate per descrivere le proprietà del font per il tag <p>: p { font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; } p { font: italic bold 30px arial, sans-serif; } L'ordine dei valori per font è: font-style | font-variant | font-weight | font-size | font-family Prof. F. Esposito
Indentazione del testo [text-indent] La proprietà text-indent ti permette di aggiungere un tocco elegante ai paragrafi di testo, applicando una indentazione alla prima linea del paragrafo. Nell'esempio sotto abbiamo applicato una indentazione di 30px a tutti i paragrafi marcati con il tag <p>: p { text-indent: 30px; } Prof. F. Esposito
Allineamento del testo [text-align] La proprietà text-align corrisponde all'attributo align usato nelle precedenti versioni di HTML. Il testo può essere allineato a sinistra, a destra o centrato. Oltre a questo il valore justify permetterà di allineare ogni linea del testo sia a destra che a sinistra. Nell'esempio sotto il testo nel titolo della tabella <th> verrà allineato a destra mentre i dati nella tabella <td> saranno centrati. Inoltre i normali paragrafi di testo saranno giustificati: th { text-align: right; } td { text-align: center; p { text-align: justify; Prof. F. Esposito
Decorazione del testo [text-decoration] La proprietà text-decoration permette di aggiungere al testo diverse "decorazioni" o "effetti". Per esempio puoi sottolineare il testo, inserire una linea sul testo o sopra il testo, ecc. Provare l’esempio seguente… h1 { text-decoration: underline; } h2 { text-decoration: overline; h3 { text-decoration: line-through; Prof. F. Esposito
Spazio fra i caratteri [letter-spacing] TESTO Spazio fra i caratteri [letter-spacing] Lo spazio tra i caratteri del testo può essere specificato usando la proprietà letter-spacing. Il valore della proprietà è semplicemente la distanza desiderata. Per esempio, se vuoi uno spazio tra i caratteri del testo di un paragrafo <p> di 3px e una distanza tra i caratteri del titolo <h1> di 6px, il codice che dovresti usare sarà: h1 { letter-spacing: 6px; } p { letter-spacing: 3px; Prof. F. Esposito
Trasformazione del testo [text-transform] La proprietà text-transform controlla l'uso delle maiuscole in un testo. Puoi scegliere capitalize, usare uppercase o lowercase a seconda di come appare il testo nel codice HTML. Un esempio potrebbe essere la parola "headline" che può essere mostrata all'utente come "HEADLINE" o "Headline". Esistono quattro possibili valori per la proprietà text-transform: capitalize Usa la maiuscola per il primo carattere di ogni parola. uppercase Converte tutti i caratteri in maiuscole. lowercase Converte tutte i caratteri in minuscole. none Nessuna trasformazione Prof. F. Esposito
Trasformazione del testo [text-transform] Come esempio useremo una lista di nomi. I nomi sono tutti marcati con <li> (list-item). Diciamo che vogliamo i nomi in lettere maiuscole e i titoli in minuscolo. Cerca di guardare il codice HTML di questo esempio e vedrai che in effetti il testo è in lettere minuscole. h1 { text-transform: uppercase; } li { text-transform: capitalize; Prof. F. Esposito
6. LINK IN HTML: <a href="http://www.sito.com">vai al sito</a> Puoi applicare tutto quello che hai imparato nelle lezioni precedenti anche ai link (cioè, cambiare il colore, i font, la sottolineatura, ecc.). La cosa nuova è che i CSS ti permettono di definire queste proprietà in modo diverso a seconda se il link è stato visitato o no, è attivo o se il cursore è proprio sopra il link. In questo modo è possibile aggiungere un po' di fantasia ed utili effetti al tuo sito web. Per controllare questi effetti devi usare quella che viene chiamata una pseudo-classe (pseudo-classes). Prof. F. Esposito
Cosa è una pseudo-classe? LINK Cosa è una pseudo-classe? Una pseudo-classe ti permette di tenere in considerazione condizioni o eventi diversi quando definisci una proprietà per una tag HTML. Guardiamo un esempio. Possiamo quindi usare a come selettore nei CSS: a { color: blue; } Prof. F. Esposito
Cosa è una pseudo-classe? LINK Cosa è una pseudo-classe? Un link può assumere diversi stati. Per esempio, può essere già stato visitato o no. Puoi usare una pseudo classe per assegnare uno stile diverso ai link visitati e ai link non ancora visitati. a:link { color: blue; } a:visited { color: red; Prof. F. Esposito
LINK Pseudo-classe a:link a:link { color: #6699CC; } La pseudo-classe :link viene usata per i link che non sono stati ancora visitati dall'utente. Nel codice di esempio riportato sotto i link non visitati appariranno di colore blu chiaro. a:link { color: #6699CC; } Prof. F. Esposito
Pseudo-classe a:visited LINK Pseudo-classe a:visited La pseudo-classe :visited viene usata per i link che sono già stati visitati dall'utente. Per esempio, nel codice sotto faremo tutti i link visitati con un colore viola scuro: a:visited { color: #660099; } Prof. F. Esposito
Pseudo-classe a:active LINK Pseudo-classe a:active La pseudo-classe :active viene usata per i link attivi. Nell'esempio inseriamo un colore di sfondo giallo per i link attivi: a:active { background-color: #FFFF00; } Prof. F. Esposito
Pseudo-classe a:hover LINK Pseudo-classe a:hover La pseudo-classe :hover viene usata quando il cursore del mouse passa sopra ad un link. Questa proprietà può essere usata per creare un effetto interessante. Per esempio, se vogliamo tutti i link arancioni e in italico quando ci passiamo sopra con il mouse, allora il nostro CSS dovrebbe essere: a:hover { color: orange; font-style: italic; } Prof. F. Esposito
Quando il cursore è sopra un link DUE ESEMPI a:hover { letter-spacing: 10px; font-weight:bold; color:red; } a:hover { text-transform: uppercase; font-weight:bold; color:blue; background-color:yellow; } Prof. F. Esposito
Elimina la sottolineatura dai link Consideriamo attentamente se è necessario eliminare la sottolineatura dei link poiché questo potrebbe diminuire significativamente l'usabilità del sito web. a { text-decoration: none; } a:link { color: blue; text-decoration:none; } a:visited { color: purple; a:active { background-color: yellow; a:hover { color:red; Prof. F. Esposito
7. Identificazione e gruppi di elementi (class e id) Qualche volta potresti voler applicare uno stile speciale ad un particolare elemento o ad un gruppo particolare di elementi. In questa lezione vedremo in dettaglio come puoi usare class e id per specificare le proprietà a degli elementi selezionati. Come fai per colorare un titolo particolare in modo diverso rispetto a tutti i titoli del tuo sito web? Come fai per raggruppare i tuoi link in diverse categorie e dare ad ogni categoria uno stile speciale? Questi sono solo alcuni esempi di domande a cui rispondere in questa lezione. Prof. F. Esposito
7. Identificazione e gruppi di elementi (class e id) Raggruppare gli elementi con class Supponiamo di avere due liste di link di diversi grappoli di uva usati per il vino bianco e per il vino rosso: <p>Uva per il vino bianco:</p> <ul> <li><a href="ri.htm">Riesling</a></li> <li><a href="ch.htm">Chardonnay</a></li> <li><a href="pb.htm">Pinot Blanc</a></li> </ul> <p>uva per il vino rosso:</p> <li><a href="cs.htm">Cabernet Sauvignon</a></li> <li><a href="me.htm">Merlot</a></li> <li><a href="pn.htm">Pinot Noir</a></li> Prof. F. Esposito
7. Identificazione e gruppi di elementi (class e id) Raggruppare gli elementi con class Ora vogliamo che i link al vino bianco siano gialli e i link al vino rosso siano rossi mentre i restanti link della pagina rimarranno blu. Per ottenere questo dividiamo i link in due categorie assegnando una classe a ciascun link usando l'attributo class. <p>Uva per il vino bianco:</p> <ul> <li><a href="ri.htm" class="vinobianco">Riesling</a></li> <li><a href="ch.htm" class="vinobianco">Chardonnay</a></li> <li><a href="pb.htm" class="vinobianco">Pinot Blanc</a></li> </ul> <p>uva per il vino rosso:</p> <li><a href="cs.htm" class="vinorosso">Cabernet Sauvignon</a></li> <li><a href="me.htm" class="vinorosso">Merlot</a></li> <li><a href="pn.htm" class="vinorosso">Pinot Noir</a></li> Prof. F. Esposito
7. Identificazione e gruppi di elementi (class e id) Raggruppare gli elementi con class E quindi definiamo le seguenti proprietà: a { color: blue; } a.vinobianco { color: #FFBB00; a.vinorosso{ color: #800000; Come mostrato nell'esempio puoi definire le proprietà per tutti gli elementi che appartengono a certe classi usando .nomedellaclasse nel foglio di stile del documento. Prof. F. Esposito
7. Identificazione e gruppi di elementi (class e id) Identificativo dell'elemento con id Oltre a raggruppare gli elementi potresti aver bisogno di identificare un unico elemento. Questo viene fatto usando l'attributo id. La cosa speciale con l'attributo id è che non ci possono essere due elementi con lo stesso id nello stesso documento. Ogni id deve essere unico, altrimenti dovresti usare l'attributo class. Adesso vediamo un esempio sui possibili utilizzi di id: <h1>Capitolo 1</h1> ... <h2>Capitolo 1.1</h2> ... <h2>Capitolo 1.2</h2> ... <h1>Capitolo 2</h1> ... <h2>Capitolo 2.1</h2> ... <h3>Capitolo 2.1.2</h3> ... Prof. F. Esposito
7. Identificazione e gruppi di elementi (class e id) Identificativo dell'elemento con id <h1 id="c1">Capitolo 1</h1> ... <h2 id="c1-1">paragrafo 1.1</h2> ... <h2 id="c1-2">paragrafo 1.2</h2> ... <h1 id="c2">Capitolo 2</h1> ... <h2 id="c2-1">paragrafo 2.1</h2> ... <h3 id="c2-1-2">sottoparagrafo 2.1.2</h3> ... Diciamo che il titolo per il capitolo 1.2 deve essere in rosso. Questo può essere fatto con i CSS: #c1-2 { color: red; } Come mostrato nell'esempio sopra puoi definire le proprietà di uno specifico elemento usando #id nel foglio di stile del documento. Prof. F. Esposito
RIPASSO DI HTML: IL TAG SPAN 8. Gruppi di elementi (uso di span e div) Gli elementi HTML <span> e <div> vengono usati per raggruppare e strutturare un documento e vengono utilizzati spesso insieme agli attributi class e id. RIPASSO DI HTML: IL TAG SPAN Il tag <span> è utilizzato per raggruppare gli elementi di una linea in un documento. Il tag <span> di per sè non produce cambiamenti. Il tag <span> fornisce un modo per aggiungere un aggancio ad una parte di un testo o di un documento. ESEMPIO (coloro solo una parte del testo): <p>Mia madre ha gli occhi <span style="color:blue">blu</span></p> Prof. F. Esposito
Raggruppare con <span> UNA FRASE DI BENJAMIN FRANKLIN 8. Gruppi di elementi (uso di span e div) Raggruppare con <span> UNA FRASE DI BENJAMIN FRANKLIN Early to bed and early to rise makes a man healthy, wealthy and wise. <p>Early to bed and early to rise makes a man <span class="benefit">healthy</span>, <span class="benefit">wealthy</span> and <span class="benefit">wise</span>.</p> DOCUMENTO HTML span.benefit { color:red; } DOCUMENTO CSS * Naturalmente puoi anche usare id per aggiungere lo stile agli elementi <span>. Proprio come ricorderai dovrai applicare un unico id per ciascuno dei tre elementi <span>, come abbiamo visto nella lezione precedente. Prof. F. Esposito
#paolo{ } Tr{ ………. } <tr> ……………… </tr> Tr.grigio{ } <tr class=«grigio»>….</tr> #paolo{ } <h3 id=«paolo»>….</h3> Span.parola1{ } <span class=«parola1»>….</span> Prof. F. Esposito
RIPASSO DI HTML: IL TAG DIV 8. Gruppi di elementi (uso di span e div) Gli elementi HTML <span> e <div> vengono usati per raggruppare e strutturare un documento e vengono utilizzati spesso insieme agli attributi class e id. RIPASSO DI HTML: IL TAG DIV Il tag <div> definisce una “divisione” o meglio sezione in un documento HTML. Il tag <div> è usato per raggruppare elementi in blocchi per formattarli in CSS Un sezione di un documento in blu: <div style="color:#0000FF"> <h3>Questa è una intestazione h3</h3> <p>Questo è un paragrafo</p> </div> Prof. F. Esposito
Raggruppare con <div> 8. Gruppi di elementi (uso di span e div) Raggruppare con <div> Esempio: due liste di presidenti degli USA divisi per partiti politici: <div id="democrats"> <ul> <li>Franklin D. Roosevelt</li><li>Harry S. Truman</li> <li>John F. Kennedy</li><li>Lyndon B. Johnson</li> <li>Jimmy Carter</li> <li>Bill Clinton</li> </ul> </div> <div id="republicans"> <ul> <li>Dwight D. Eisenhower</li> <li>Richard Nixon</li> <li>Gerald Ford</li> <li>Ronald Reagan</li> <li>George Bush</li> <li>George W. Bush</li> </ul> HTML #democrats { background:blue; } #republicans { background:red; Prof. F. Esposito
9. Il modello box (o a scatola) Nei CSS il modello box (o contenitore) descrive tutti i contenitori che sono stati generati dagli elementi HTML. Il modello box contiene anche le opzioni dettagliate riguardanti margini, bordi, riempimenti e contenuto per ciascun elemento. Il diagramma ti mostra come viene costruito il modello box: Prof. F. Esposito
9. Il modello box (o a scatola) Un esempio <h1>Article 1:</h1> <p>All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood</p> HTML Prof. F. Esposito
Definire i margini in un elemento 10. Margini e riempimenti Definire i margini in un elemento Un elemento ha quattro lati: destro, sinistro, alto e basso. margin indica la distanza di ciascuno dei lati dall'elemento vicino (o dai bordi del documento). body { margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px; } p { margin: 5px 50px 5px 50px; } body { margin: 100px 40px 10px 70px; } Prof. F. Esposito
Definire il padding in un elemento 10. Margini e riempimenti Definire il padding in un elemento Padding può essere inteso anche come "riempimento". Questo ti fa capire meglio che il padding non influisce sulla distanza dell'elemento dagli altri elementi, ma definisce soltanto la distanza interna tra il bordo e il contenuto dell'elemento. L'uso di padding può essere illustrato guardando un semplice esempio dove tutti i titoli hanno un colore di sfondo: h1 { background: yellow; padding: 20px 20px 20px 80px; } h2 { background: orange; padding-left: 120px; Prof. F. Esposito
Spessore dei bordi [border-width] Lo spessore dei bordi viene definito con la proprietà border-width, che può avere valore thin (sottile), medium (medio), e thick (spesso), o un valore numerico indicato in pixel. La figura sotto illustra come: Prof. F. Esposito
Colore dei bordi [border-color] e Tipi di bordi [border-style] La proprietà border-color definisce il colore del bordo. I valori sono i normali valori per i colori, come per esempio "#123456", "rgb(123,123,123)" o "yellow". E' possibile scegliere fra diversi tipi di bordi. Sotto sono mostrati 8 diversi tipi di bordi così come vengono interpretati da Internet Explorer 5.5. Tutti gli esempi sono mostrati con colore "gold" e spessore "thick", ma possono essere chiaramente mostrati con altri colori e altri spessori. Quando non vuoi nessun bordo puoi usare i valori none o hidden. Prof. F. Esposito
11. Bordi Esempio 1 h1 { border-width: thick; border-style: dotted; border-color: gold; } h2 { border-width: 20px; border-style: outset; border-color: red; p { border-width: 1px; border-style: dashed; border-color: blue; ul { border-width: thin; border-style: solid; border-color: orange; Prof. F. Esposito
11. Bordi Esempio 2 h1 { border-top-width: thick; border-top-style: solid; border-top-color: red; border-bottom-width: thick; border-bottom-style: solid; border-bottom-color: blue; border-right-width: thick; border-right-style: solid; border-right-color: green; border-left-width: thick; border-left-style: solid; border-left-color: orange; } Prof. F. Esposito
Raggruppamento [border] 11. Bordi Raggruppamento [border] p { border-width: 1px; border-style: solid; border-color: blue; } Può essere raggruppato in: border: 1px solid blue; Prof. F. Esposito
Definire la larghezza [width] 12. Height e width Definire la larghezza [width] Con la proprietà width puoi definire la larghezza di un elemento. L'esempio semplice riportato sotto ci fornisce un contenitore all'interno del quale è possibile digitare del testo: div.box { width: 200px; border: 1px solid black; background: orange; } <body> <h1>200px di larghezza per il <div> con testo</h1> <div class="box">volgus rectum videt, est ubi peccat. Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. Si quaedam nimis antique, si peraque dure dicere credit eos, ignave multa fatetur, et sapit et mecum facit et Iova iudicat aequo.Non equidem insector delendave carmina Livi esse reor, memini quae plagosum mihi parvo Orbilium </div> </body> Prof. F. Esposito
Definire l'altezza [height] 12. Height e width Definire l'altezza [height] Nota come nell'esempio sopra l'altezza del contenitore viene definita dallo stesso contenuto. Con la proprietà height puoi definire tu stesso l'altezza del contenitore. Come esempio proviamo a fare un contenitore alto 500px: div.box { height: 500px; width: 200px; border: 1px solid black; background: orange; } <h1>200px di larghezza e 500px di altezza per il il <div> con testo</h1> <div class="box">volgus rectum videt, est ubi peccat. Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. Si quaedam nimis antique, si peraque dure dicere credit eos, ignave multa fatetur, et sapit et mecum facit et Iova iudicat aequo.Non equidem insector delendave carmina Livi esse reor, memini quae plagosum mihi parvo Orbilium </div> </body> Prof. F. Esposito
13. Elementi flottanti Un elemento può flottare a destra o a sinistra usando la proprietà float. Questo vuol dire che il box e il suo contenuto flottano entrambi a destra o a sinistra del documento (o del box che li contiene). La figura che segue illustra il principio: Prof. F. Esposito
13. Elementi flottanti Se per esempio vogliamo avere un testo che si adagia intorno all'immagine, il risultato dovrebbe essere come quello che segue: Come si fa? Prof. F. Esposito
13. Elementi flottanti Se per esempio vogliamo avere un testo che si adagia intorno all'immagine, il risultato dovrebbe essere come quello che segue: <div id="picture"> <img src="bill.jpg" alt="Bill Gates"> </div> <p>causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p> Per avere una immagine flottante a sinistra e il testo che la circonda, devi solo definire l'ampiezza (width) del box che circonda l'immagine e quindi fissare a left la proprietà float: #picture { float:left; width: 100px; } Prof. F. Esposito
Un altro esempio : colonne 13. Elementi flottanti Un altro esempio : colonne La proprietà float può essere usata anche per le colonne di un documento. Per creare le colonne devi semplicemente strutturare le stesse colonne nel codice HTML con l'elemento <div>, come mostrato di seguito… <div id="column1"> <p>Haec disserens qua de re agatur et in quo causa consistat non videt...</p> </div> <div id="column2"> <p>causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p> <div id="column3"> <p>nam nihil esset in nostra potestate si res ita se haberet...</p> Prof. F. Esposito
Un altro esempio : colonne 13. Elementi flottanti Un altro esempio : colonne Ora si definisce la larghezza desiderata delle colonne per esempio al 33%, dopo di chè, si fissa semplicemente la proprietà float per ogni colonna a left: #column1 { float:left; width: 33%; } #column2 { #column3 { float può assumere i seguenti valori left, right o none. Prof. F. Esposito
13. Elementi flottanti La proprietà clear La proprietà clear viene usata per controllare come si dovrebbero comportare gli elementi che seguono elementi flottanti. Per default gli elementi successivi si muovono in modo da riempire lo spazio disponibile lasciato libero quando un box viene flottato da un lato. Guarda l'esempio sotto dove il testo si muove automaticamente accanto all'immagine di Bill Gates. La proprietà clear può assumere i valori left, right, both o none. Il principio è che, se per esempio clear è fissato a both per un box, il bordo superiore del box starà sempre sotto il bordo inferiore del possibile box flottante che viene sopra. Prof. F. Esposito
13. Elementi flottanti La proprietà clear <div id="picture"> <img src="bill.jpg" alt="Bill Gates"> </div> <h1>Bill Gates</h1> <p class="floatstop">causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p> Per evitare che il testo flotti vicino alla figura possiamo aggiungere: #picture { float:left; width: 100px; } .floatstop { clear:both; Prof. F. Esposito
14. Posizionamento degli elementi Il principio del posizionamento nei CSS Il principio alla base del posizionamento è che puoi posizionare ciascun box in qualsiasi posto del sistema di coordinate. Prof. F. Esposito
14. Posizionamento degli elementi Il principio del posizionamento nei CSS h1 { position: absolute; top: 100px; left: 200px; } Come puoi vedere il posizionamento dei CSS è una tecnica molto precisa per sistemare gli elementi. E' molto più facile che cercare di usare tabelle, immagini trasparenti o altre cose Prof. F. Esposito
Posizionamento assoluto 14. Posizionamento degli elementi Posizionamento assoluto Per posizionare un elemento in maniera assoluta la proprietà position deve avere valore absolute. In seguito puoi usare proprietà left,right, top, e bottom per sistemare i box. Come esempio di posizionamento assoluto abbiamo scelto di sistemare 4 box in ciascun angolo del documento: #box1 { position:absolute; top: 50px; left: 50px; } #box2 { right: 50px; #box3 { bottom: 50px; right: 50px; } #box4 { Prof. F. Esposito
Posizionamento relativo 14. Posizionamento degli elementi Posizionamento relativo Per posizionare un elemento in maniera relativa la proprietà position deve avere valore relative. La differenza tra il posizionamento assoluto e quello relativo è su come viene calcolata la posizione. La posizione di un elemento posizionato in maniera relativa viene calcolato dalla sua posizione originale nel documento. Questo significa che sposti l'elemento a destra, a sinistra, in alto o in basso. In questo un elemento avrà sempre uno spazio nel documento dopo il suo posizionamento. Come esempio di posizionamento relativo cerchiamo di posizionare tre immagini in relazione alla loro posizione originaria nella pagina. Nota come le immagini lasciano dello spazio vuoto nella loro posizione originaria all'interno del documento: #dog1 { position:relative; left: 350px; bottom: 150px; } #dog2 { left: 150px; bottom: 500px; #dog3 { position:relative; left: 50px; bottom: 700px; Prof. F. Esposito
15. Layer su layer con lo z-index (Layer) I CSS lavorano su tre dimensioni - altezza, larghezza e profondità. Abbiamo già visto le prime due dimensioni nella precedente lezione. In questa lezione impareremo come fare in modo che diversi elementi diventino un layer. In breve questo fornisce l'ordine con cui gli elementi si sovrappongono uno sull'altro. A questo proposito assegna ad ogni elemento un numero (z-index). Il sistema è che un elemento con il numero più alto si sovrappone all'elemento con numero inferiore. Diciamo che stiamo giocando a poker e che abbiamo una scala reale. La nostra mano può essere presentata in modo che ogni carta riceva uno z-index: #ten_of_diamonds { position: absolute; left: 100px; top: 100px; z-index: 1; } #jack_of_diamonds { position: absolute; left: 115px; top: 115px; z-index: 2; } #queen_of_diamonds { position: absolute; left: 130px; top: 130px; z-index: 3; } #king_of_diamonds { position: absolute; left: 145px; top: 145px; z-index: 4; } #ace_of_diamonds { position: absolute; left: 160px; top: 160px; z-index: 5; } I layer possono essere usati in molte situazioni. Per esempio cerca di usare z-index per creare effetti nei titoli invece di fare delle immagini. Da una parte è più veloce caricare del testo e dall'altra fornisce una più alta potenzialità di essere considerato da un motore di ricerca. Prof. F. Esposito
16. Standard web e validazione W3C sta per World Wide Web Consortium, che è una organizzazione indipendente che gestisce gli standard su web (cioè HTML, CSS, XML e molti altri). Microsoft, The Mozilla Foundation e molte altre organizzazioni fanno parte del W3C e concordano sugli sviluppi futuri degli standard. Se hai già lavorato un po' come web designer, probabilmente sai quanto possono essere grandi le differenze di presentazione di una pagina tra un browser e l'altro. Creare pagine web che possono essere visualizzate in Mozilla, Internet Explorer, Opera e il resto dei browser esistenti, può essere molto frustrante e far perdere un sacco di tempo. L'idea di avere degli standard è quella di accettare un denominatore comune su come utilizzare le tecnologie web. Questo significa che osservando gli standard uno sviluppatore web ha la certezza che quello che sta facendo funzionerà in modo più appropriato nella maggior parte delle diverse piattaforme. Pertanto noi ti raccomandiamo di appoggiarti al lavoro svolto dal W3C e di validare i tuoi CSS in modo da osservare sempre gli standard. Il validatore per i CSS Per facilitare l'osservanza degli standard per i CSS, il W3C ha creato un validatore che legge il tuo foglio di stile e ti ritorna una lista di errori o avvertimenti, nel caso in cui il tuo CSS non sia stato validato. Per facilitare la validazione del tuo foglio di stile puoi direttamente collegarti da questa pagina web. Nello spazio sotto sostituisci semplicemente la URL con la URL del tuo foglio di stile e clicca il pulsante per validare. Sarai quindi informato dal sito del W3C se sono stati trovati errori. Se il validatore non trova nessun errore, ti verrà mostrata la figura riportata di seguito, che puoi inserire sul tuo sito web come testimonianza del fatto che stai usando un codice validato. Prof. F. Esposito