SlideShare a Scribd company logo

Introduzione ai css

•Download as PPT, PDF•
•
G
gianlucatroiani

COSA SONO E COME FUNZIONANO I CSS Rielaborazione delle slide utilizzate nei miei vecchi seminari sui CSS. Licenza Creative Commons < http://creativecommons.org/licenses/by-nc-nd/3.0/ > Introduzione ai CSS by Gianluca Troiani is licensed under a Creative Commons Attribuzione - Non commerciale - Non opere derivate 3.0 Unported License. Based on a work at www.constile.org. Permissions beyond the scope of this license may be available at http://www.constile.org/res/introcss.html.

Education
1 of 231
INTRODUZIONE AI CSS COSA SONO E COME FUNZIONANO I CSS Licenza Creative Commons < http://creativecommons.org/licenses/by-nc-nd/3.0/ > Introduzione ai CSS by Gianluca Troiani is licensed under a Creative Commons Attribuzione - Non commerciale - Non opere derivate 3.0 Unported License. Based on a work at www.constile.org. Permissions beyond the scope of this license may be available at http://www.constile.org/res/introcss.html.
PRIMA PARTE INTRODUZIONE
INFORMAZIONE E PRESENTAZIONE ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: INTRODUZIONE
BROWSER E STILI ,[object Object],[object Object],PRIMA PARTE: INTRODUZIONE
I FOGLI DI STILE A CASCATA (CSS) ,[object Object],[object Object],[object Object],PRIMA PARTE: INTRODUZIONE
PRIMA PARTE XHTML
STRUTTURA E CONTENUTI: L’XHTML ,[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: XHTML
DALL’HTML ALL’XHTML ,[object Object],[object Object],[object Object],PRIMA PARTE: XHTML Errato: <p>Paragrafo<p>Paragrafo <hr> <br> <p><em>enfasi</p></em> Corretto: <p>Paragrafo</p><p>Paragrafo</p> <hr /> <br /> <p><em>Enfasi</em></p>
DALL’HTML ALL’XHTML ,[object Object],[object Object],PRIMA PARTE: XHTML Errato: <P LANG=&quot;en&quot;>Paragraph</P> <a href=http://w3.org/> Corretto: <p lang=&quot;en&quot;>Paragraph</p> <a href=&quot;http://w3.org/&quot;> oppure <a href='http://w3.org/'>
DALL’HTML ALL’XHTML ,[object Object],[object Object],[object Object],PRIMA PARTE: XHTML
UNA STRUTTURA PER I CONTENUTI ,[object Object],[object Object],[object Object],PRIMA PARTE: XHTML
UNA STRUTTURA PER I CONTENUTI ,[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: XHTML
UNA STRUTTURA PER I CONTENUTI ,[object Object],[object Object],PRIMA PARTE: XHTML
UN DIVERSO APPROCCIO ,[object Object],[object Object],[object Object],PRIMA PARTE: XHTML
PRIMA PARTE STRUTTURA DI UN FOGLIO DI STILE
STRUTTURA DI UN FOGLIO DI STILE ,[object Object],[object Object],PRIMA PARTE: STRUTTURA DI UN FOGLIO DI STILE h1 { font-size : 2em; font-weight : bold; } DICHIARAZIONE PROPRIETÀ SELETTORE VALORE REGOLA
LE REGOLE ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: STRUTTURA DI UN FOGLIO DI STILE
PRIMA PARTE I SELETTORI
I SELETTORI ,[object Object],[object Object],PRIMA PARTE: I SELETTORI h1, h2, p { ... } #identificatore { ... } .classe { ... } 1: TAG XHTML 3: IDENTIFICATORI 2: CLASSI
TIPI DI SELETTORI ,[object Object],PRIMA PARTE: I SELETTORI
LE CLASSI ,[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: I SELETTORI
IDENTIFICATORI ,[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: I SELETTORI
PSEUDO-CLASSI ,[object Object],PRIMA PARTE: I SELETTORI
PSEUDO-CLASSI ,[object Object],[object Object],PRIMA PARTE: I SELETTORI
PSEUDO-ELEMENTI ,[object Object],[object Object],PRIMA PARTE: I SELETTORI
DISCENDENZA ,[object Object],[object Object],PRIMA PARTE: I SELETTORI
DISCENDENZA ,[object Object],[object Object],PRIMA PARTE: I SELETTORI
SELETTORE FIGLIO ,[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: I SELETTORI
SELETTORE FRATELLO ,[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: I SELETTORI
SELETTORI DI ATTRIBUTO ,[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: I SELETTORI
SELETTORI DI ATTRIBUTO ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: I SELETTORI
SELETTORI DI ATTRIBUTO ,[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: I SELETTORI
RAGGRUPPAMENTO DI SELETTORI ,[object Object],[object Object],[object Object],PRIMA PARTE: I SELETTORI
SPECIFICITÀ DEI SELETTORI ,[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: I SELETTORI
SPECIFICITÀ DEI SELETTORI ,[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: I SELETTORI
SPECIFICITÀ DEI SELETTORI ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: I SELETTORI
PRIMA PARTE COLLEGARE I CSS A UN DOCUMENTO XHTML
COLLEGARE I CSS A UN DOCUMENTO XHTML ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: COLLEGARE I CSS A UN DOCUMENTO XHTML
FOGLI DI STILE INCORPORATI ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: COLLEGARE I CSS A UN DOCUMENTO XHTML
FOGLI DI STILE ESTERNI ,[object Object],[object Object],PRIMA PARTE: COLLEGARE I CSS A UN DOCUMENTO XHTML
FOGLI DI STILE IMPORTATI ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: COLLEGARE I CSS A UN DOCUMENTO XHTML
PRIMA PARTE I VALORI
PAROLE CHIAVE: INHERIT ,[object Object],[object Object],PRIMA PARTE: I VALORI
PAROLE CHIAVE: AUTO ,[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: I VALORI
PAROLE CHIAVE: DIMENSIONE CARATTERI ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: I VALORI
LUNGHEZZE ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: I VALORI
LE PERCENTUALI ,[object Object],[object Object],[object Object],PRIMA PARTE: I VALORI
RIFERIMENTI ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: I VALORI
COLORI ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: I VALORI
PRIMA PARTE IL BOX MODEL
IL BOX MODEL ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: IL BOX MODEL
IL BOX MODEL ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: IL BOX MODEL
IL BOX MODEL ,[object Object],[object Object],PRIMA PARTE: IL BOX MODEL
LARGHEZZA E ALTEZZA ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: IL BOX MODEL
LARGHEZZA E ALTEZZA ,[object Object],[object Object],[object Object],PRIMA PARTE: IL BOX MODEL
LARGHEZZA E ALTEZZA ,[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: IL BOX MODEL
I MARGINI ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: IL BOX MODEL
I MARGINI ,[object Object],[object Object],[object Object],PRIMA PARTE: IL BOX MODEL
I MARGINI ,[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: IL BOX MODEL
I MARGINI ,[object Object],[object Object],PRIMA PARTE: IL BOX MODEL
I MARGINI ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: IL BOX MODEL I margini di blocchi flottanti o dei blocchi posizionati in modo assoluto, non collassano in nessun caso.
IL PADDING ,[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: IL BOX MODEL
I BORDI ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: IL BOX MODEL
I BORDI ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: IL BOX MODEL
I BORDI ,[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: IL BOX MODEL
OVERFLOW ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: IL BOX MODEL
OVERFLOW: VISIBLE ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: IL BOX MODEL
OVERFLOW: HIDDEN ,[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: IL BOX MODEL
OVERFLOW: SCROLL E AUTO ,[object Object],[object Object],[object Object],PRIMA PARTE: IL BOX MODEL
PRIMA PARTE IL VISUAL FORMATTING MODEL
IL VISUAL FORMATTING MODEL ,[object Object],[object Object],[object Object],PRIMA PARTE: IL VISUAL FORMATTING MODEL
TIPI DI BOX ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: IL VISUAL FORMATTING MODEL
TIPI DI BOX ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX ANONIMI ,[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: IL VISUAL FORMATTING MODEL
IL FLUSSO ,[object Object],[object Object],[object Object],PRIMA PARTE: IL VISUAL FORMATTING MODEL p { border:1px solid #00C; } em{ margin:2em;border:1px solid #C00 } strong { border:1px solid #0C0; padding:0.7em; }
IL FLUSSO ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: IL VISUAL FORMATTING MODEL p#lh{ line-height:2em; } strong{ line-height:1em; vertical-align:top; } p#va { /* uso errato */ height:5em; vertical-align:bottom; }
POSIZIONAMENTO RELATIVO ,[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: IL VISUAL FORMATTING MODEL p#pr { position:relative; left:1em;top:1.5em; } p { padding:0.5em;margin:1em }
POSIZIONAMENTO ASSOLUTO ,[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: IL VISUAL FORMATTING MODEL
POSIZIONAMENTO ASSOLUTO ,[object Object],[object Object],<p>(1) …</p> <p id=&quot;pa&quot;>(2) …</p> <p>(3) …</p> p#pa { position:absolute; right:5px; bottom:5px; margin:0; } p { margin:1em 10px; } PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI ,[object Object],[object Object],PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI ,[object Object],[object Object],PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI ,[object Object],[object Object],PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI ,[object Object],[object Object],PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: IL VISUAL FORMATTING MODEL
IL VISUAL FORMATTING MODEL: BOX FLOTTANTI ,[object Object],[object Object],[object Object],PRIMA PARTE: IL VISUAL FORMATTING MODEL p#fl { float:left; width:200px; } div { padding: 1em }
BOX FLOTTANTI ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: IL VISUAL FORMATTING MODEL
IL VISUAL FORMATTING MODEL: BOX FLOTTANTI ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI ALTRI DIFETTI DI INTERNET EXPLORER PER WINDOWS ,[object Object],[object Object],[object Object],PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI ALTRI DIFETTI DI INTERNET EXPLORER PER WINDOWS ,[object Object],[object Object],[object Object],PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI ALTRI DIFETTI DI INTERNET EXPLORER PER WINDOWS ,[object Object],[object Object],[object Object],PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI ALTRI DIFETTI DI INTERNET EXPLORER PER WINDOWS ,[object Object],[object Object],PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI ALTRI DIFETTI DI INTERNET EXPLORER PER WINDOWS ,[object Object],[object Object],PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI ALTRI DIFETTI DI INTERNET EXPLORER PER WINDOWS ,[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI ALTRI DIFETTI DI INTERNET EXPLORER PER WINDOWS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI E LISTE ,[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI E LISTE ,[object Object],[object Object],[object Object],PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI E LISTE ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: IL VISUAL FORMATTING MODEL
VISIBILITY ,[object Object],[object Object],[object Object],[object Object],[object Object],Al paragrafo è stata assegnata la dichiarazione visibility:hidden PRIMA PARTE: IL VISUAL FORMATTING MODEL
PRIMA PARTE CONTENUTI GENERATI
CONTENUTI GENERATI ,[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: CONTENUTI GENERATI
CONTENUTI GENERATI ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: CONTENUTI GENERATI
CONTENUTI GENERATI ,[object Object],[object Object],[object Object],PRIMA PARTE: CONTENUTI GENERATI
PRIMA PARTE COLORI E SFONDI
COLORE IN PRIMO PIANO (TESTO E BORDI) ,[object Object],[object Object],[object Object],PRIMA PARTE: COLORI E SFONDI
SFONDI ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: COLORI E SFONDI
COLORE DELLO SFONDO ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: COLORI E SFONDI
COLORI DI TESTO E SFONDO DEFINITI SEPARATAMENTE ,[object Object],[object Object],PRIMA PARTE: COLORI E SFONDI
BACKGROUND-IMAGE ,[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: COLORI E SFONDI
BACKGROUND-REPEAT ,[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: COLORI E SFONDI
BACKGROUND-ATTACHEMENT ,[object Object],[object Object],[object Object],PRIMA PARTE: COLORI E SFONDI
BACKGROUND-POSITION ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: COLORI E SFONDI
BACKGROUND-POSITION ,[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: COLORI E SFONDI
BACKGROUND-POSITION PRIMA PARTE: COLORI E SFONDI background-position : 20% 25%;
BACKGROUND ,[object Object],[object Object],[object Object],PRIMA PARTE: COLORI E SFONDI
PRIMA PARTE CARATTERI E TESTO
CARATTERI E TESTO ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: CARATTERI E TESTO
FONT-FAMILY ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: CARATTERI E TESTO
FONT-SIZE ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: CARATTERI E TESTO
FONT-STILE, FONT-WEIGHT, FONT-VARIANT ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: CARATTERI E TESTO
FONT ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: CARATTERI E TESTO
ALLINEAMENTO DEL TESTO ,[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: CARATTERI E TESTO
DECORAZIONE DEL TESTO ,[object Object],[object Object],[object Object],PRIMA PARTE: CARATTERI E TESTO
SPAZIATURA FRA PAROLE E CARATTERI ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: CARATTERI E TESTO
CARATTERI BIANCHI E INTERRUZIONI DI LINEA ,[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: CARATTERI E TESTO
CARATTERI BIANCHI E INTERRUZIONI DI LINEA ,[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: CARATTERI E TESTO
TRASFORMAZIONI DEL CARATTERE ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: CARATTERI E TESTO
PRIMA PARTE FORMATTAZIONE DELLE TABELLE
FORMATTAZIONE DELLE TABELLE ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: FORMATTAZIONE DELLE TABELLE
BORDER-COLLAPSE ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: FORMATTAZIONE DELLE TABELLE
RIGHE E COLONNE ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: FORMATTAZIONE DELLE TABELLE
INTESTAZIONE E RIGHE ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: FORMATTAZIONE DELLE TABELLE <table summary=&quot;...&quot;> <thead><tr><th>…</th>…</tr></thead> <tbody> <tr class=&quot;d&quot;><td>…</td>…</tr> <tr class=&quot;p&quot;><td>…</td>…</tr> <tr class=&quot;d&quot;><td>…</td>…</tr> <tr class=&quot;p&quot;><td>…</td>…</tr> </tbody> </table>
SPAZIO FRA CELLE ,[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: FORMATTAZIONE DELLE TABELLE
PRIMA PARTE INTERFACCIA UTENTE
INTERFACCIA UTENTE ,[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: INTERFACCIA UTENTE
PUNTATORE ,[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: INTERFACCIA UTENTE
COLORI E SFONDI ,[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: INTERFACCIA UTENTE
CARATTERI ,[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: INTERFACCIA UTENTE
PRIMA PARTE MEDIA ALTERNATIVI
MEDIA ALTERNATIVI ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: MEDIA ALTERNATIVI
MEDIA ALTERNATIVI ,[object Object],[object Object],[object Object],[object Object],[object Object],PRIMA PARTE: MEDIA ALTERNATIVI
PRIMA PARTE FINE PRIMA PARTE
SECONDA PARTE CORREGGERE IL BOX MODEL DI INTERNET EXPLORER 5.x PER WINDOWS
IL PROBLEMA ,[object Object],[object Object],SECONDA PARTE: CORREGGERE IL BOX MODEL DI INTERNET EXPLORER 5.x PER WINDOWS
LE SOLUZIONI ,[object Object],[object Object],[object Object],SECONDA PARTE: CORREGGERE IL BOX MODEL DI INTERNET EXPLORER 5.x PER WINDOWS
SECONDA PARTE LAYOUT A LARGHEZZA FISSA A 3 COLONNE CON BOX FLOTTANTI
STRUTTURA DELLA PAGINA ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],SECONDA PARTE: LAYOUT A LARGHEZZA FISSA A 3 COLONNE CON BOX FLOTTANTI
LE TRE COLONNE ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],SECONDA PARTE: LAYOUT A LARGHEZZA FISSA A 3 COLONNE CON BOX FLOTTANTI width:100% corregge un baco di Internet Explorer
SFONDO DELLE COLONNE ,[object Object],[object Object],[object Object],[object Object],SECONDA PARTE: LAYOUT A LARGHEZZA FISSA A 3 COLONNE CON BOX FLOTTANTI
SFONDO DELLE COLONNE ,[object Object],SECONDA PARTE: LAYOUT A LARGHEZZA FISSA A 3 COLONNE CON BOX FLOTTANTI
SFONDO DELLE COLONNE ,[object Object],SECONDA PARTE: LAYOUT A LARGHEZZA FISSA A 3 COLONNE CON BOX FLOTTANTI
SPAZIO FRA LE COLONNE ,[object Object],[object Object],#c1 p, #c2 p, #c3 p, #piede p { margin:0; padding:0.5em 1em; } #c1, #c2, #c3, #piede { padding:0.5em 0; } h1 { font-size:1.2em; margin:0; padding:1em } SECONDA PARTE: LAYOUT A LARGHEZZA FISSA A 3 COLONNE CON BOX FLOTTANTI
POSIZIONE DELLE COLONNE ,[object Object],[object Object],SECONDA PARTE: LAYOUT A LARGHEZZA FISSA A 3 COLONNE CON BOX FLOTTANTI #c2 { position:relative; left:200px; } #c3 { position:relative; left:-300px; }
SECONDA PARTE LAYOUT LIQUIDO A 3 COLONNE CON BOX FLOTTANTI
STRUTTURA DELLA PAGINA ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],SECONDA PARTE: LAYOUT LIQUIDO A 3 COLONNE CON BOX FLOTTANTI
LE TRE COLONNE ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],SECONDA PARTE: LAYOUT LIQUIDO A 3 COLONNE CON BOX FLOTTANTI
LE TRE COLONNE ,[object Object],[object Object],SECONDA PARTE: LAYOUT LIQUIDO A 3 COLONNE CON BOX FLOTTANTI
LE TRE COLONNE ,[object Object],[object Object],[object Object],[object Object],SECONDA PARTE: LAYOUT LIQUIDO A 3 COLONNE CON BOX FLOTTANTI
LE TRE COLONNE ,[object Object],[object Object],SECONDA PARTE: LAYOUT LIQUIDO A 3 COLONNE CON BOX FLOTTANTI
SFONDO DELLE COLONNE ,[object Object],[object Object],SECONDA PARTE: LAYOUT LIQUIDO A 3 COLONNE CON BOX FLOTTANTI
SFONDO DELLE COLONNE ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],SECONDA PARTE: LAYOUT LIQUIDO A 3 COLONNE CON BOX FLOTTANTI
SFONDO DELLE COLONNE ,[object Object],[object Object],[object Object],[object Object],[object Object],SECONDA PARTE: LAYOUT LIQUIDO A 3 COLONNE CON BOX FLOTTANTI
SPAZIO FRA LE COLONNE ,[object Object],SECONDA PARTE: LAYOUT LIQUIDO A 3 COLONNE CON BOX FLOTTANTI #piede { background:#CCC; } #testa { background:#CCC; } h1 { font-size:1.2em; margin:0; padding:1em } #c1 p, #c2 p, #c3 p { margin:0; padding:0.5em 0; } #piede p { margin:0; padding:0.5em 1em; } #c1, #c2, #c3, #piede { padding:0.5em 0; }
SECONDA PARTE LAYOUT LIQUIDO A COLONNE CON BOX POSIZIONATI IN MODO ASSOLUTO
LAYOUT A COLONNE CON BOX POSIZIONATI IN MODO ASSOLUTO ,[object Object],[object Object],[object Object],SECONDA PARTE: LAYOUT LIQUIDO A COLONNE CON BOX POSIZIONATI IN MODO ASSOLUTO
LAYOUT A COLONNE CON BOX POSIZIONATI IN MODO ASSOLUTO ,[object Object],[object Object],[object Object],[object Object],SECONDA PARTE: LAYOUT LIQUIDO A COLONNE CON BOX POSIZIONATI IN MODO ASSOLUTO
LAYOUT A COLONNE CON BOX POSIZIONATI IN MODO ASSOLUTO ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],SECONDA PARTE: LAYOUT LIQUIDO A COLONNE CON BOX POSIZIONATI IN MODO ASSOLUTO
LE TRE COLONNE ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],SECONDA PARTE: LAYOUT LIQUIDO A COLONNE CON BOX POSIZIONATI IN MODO ASSOLUTO
LE TRE COLONNE ,[object Object],[object Object],[object Object],[object Object],SECONDA PARTE: LAYOUT LIQUIDO A COLONNE CON BOX POSIZIONATI IN MODO ASSOLUTO
LE TRE COLONNE ,[object Object],[object Object],SECONDA PARTE: LAYOUT LIQUIDO A COLONNE CON BOX POSIZIONATI IN MODO ASSOLUTO #c1{ border-right:1px dotted #900; } #c2{ border-right:1px dotted #900; }
SECONDA PARTE CENTRARE UN BOX NELLA PAGINA
CENTRARE UN BOX NELLA PAGINA ,[object Object],[object Object],[object Object],SECONDA PARTE: CENTRARE UN BOX NELLA PAGINA
CENTRARE UN BOX NELLA PAGINA ,[object Object],[object Object],[object Object],[object Object],SECONDA PARTE: CENTRARE UN BOX NELLA PAGINA
CENTRARE UN BOX NELLA PAGINA ,[object Object],[object Object],SECONDA PARTE: CENTRARE UN BOX NELLA PAGINA
SECONDA PARTE FORMATTARE LE LISTE DI LINK  MENU
FORMATTARE LE LISTE DI LINK  MENU ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU
FORMATTARE LE LISTE DI LINK  MENU ,[object Object],[object Object],[object Object],SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU
FORMATTARE LE LISTE DI LINK  MENU ,[object Object],[object Object],SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU
MENU VERTICALI ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU
MENU VERTICALI: ICONA AL PASSAGGIO DEL MOUSE ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU
MENU VERTICALI: ICONA AL PASSAGGIO DEL MOUSE ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU
MENU VERTICALI: EFFETTO PULSANTE ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU click*
MENU VERTICALI: EFFETTO PULSANTE ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU
MENU ORIZZONTALE ,[object Object],[object Object],[object Object],[object Object],[object Object],SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU
MENU ORIZZONTALE ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU
MENU ORIZZONTALE ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU
MENU ORIZZONTALE ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU
MENU ORIZZONTALE ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU class=&quot;on&quot;
MENU ORIZZONTALE ,[object Object]
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css

Recommended

CSS corso base (classi seconde, mod 1)
CSS corso base (classi seconde, mod 1)CSS corso base (classi seconde, mod 1)
CSS corso base (classi seconde, mod 1)
Matteo Ziviani
 
Corso di HTML5 e CSS
Corso di HTML5 e CSSCorso di HTML5 e CSS
Corso di HTML5 e CSS
Salvatore Cordiano
 
Guida introduttiva al css
Guida introduttiva al cssGuida introduttiva al css
Guida introduttiva al css
Enrico Mainero
 
HTML e CSS
HTML e CSSHTML e CSS
HTML e CSS
Manuel Scapolan
 
Introduzione al CSS
Introduzione al CSSIntroduzione al CSS
Introduzione al CSS
Paolo Quartarone
 
HTMLslide html
HTMLslide htmlHTMLslide html
HTMLslide html
ritalerede
 
Html
HtmlHtml
Html
Matteo Ceserani
 
Html e CSS ipertesti e siti web 4.5
Html e CSS ipertesti e siti web 4.5Html e CSS ipertesti e siti web 4.5
Html e CSS ipertesti e siti web 4.5
orestJump
 

Recommended

CSS corso base (classi seconde, mod 1)
CSS corso base (classi seconde, mod 1)CSS corso base (classi seconde, mod 1)
CSS corso base (classi seconde, mod 1)
Matteo Ziviani
 
Corso di HTML5 e CSS
Corso di HTML5 e CSSCorso di HTML5 e CSS
Corso di HTML5 e CSS
Salvatore Cordiano
 
Guida introduttiva al css
Guida introduttiva al cssGuida introduttiva al css
Guida introduttiva al css
Enrico Mainero
 
HTML e CSS
HTML e CSSHTML e CSS
HTML e CSS
Manuel Scapolan
 
Introduzione al CSS
Introduzione al CSSIntroduzione al CSS
Introduzione al CSS
Paolo Quartarone
 
HTMLslide html
HTMLslide htmlHTMLslide html
HTMLslide html
ritalerede
 
Html
HtmlHtml
Html
Matteo Ceserani
 
Html e CSS ipertesti e siti web 4.5
Html e CSS ipertesti e siti web 4.5Html e CSS ipertesti e siti web 4.5
Html e CSS ipertesti e siti web 4.5
orestJump
 
Struttura di una pagina html
Struttura di una pagina htmlStruttura di una pagina html
Struttura di una pagina html
Enrico Mainero
 
Html5 e css3 nuovi strumenti per un nuovo web
Html5 e css3 nuovi strumenti per un nuovo webHtml5 e css3 nuovi strumenti per un nuovo web
Html5 e css3 nuovi strumenti per un nuovo web
Massimo Bonanni
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
Roberto Dadda
 
Html5
Html5Html5
Html5
Salvatore Paone
 
Html Base
Html BaseHtml Base
Html Base
andreainfussi
 
Guida introduttiva al codice HTML
Guida introduttiva al codice HTMLGuida introduttiva al codice HTML
Guida introduttiva al codice HTML
Enrico Mainero
 
HTML5
HTML5HTML5
HTML5
Raffaele Fanizzi
 
Html 5: una breve guida!
Html 5: una breve guida!Html 5: una breve guida!
Html 5: una breve guida!
Enrico Mainero
 
HTML5 Italy: Mai più CSS, fogli di stile moderni con LESS - Salvatore Romeo
HTML5 Italy: Mai più CSS, fogli di stile moderni con LESS - Salvatore RomeoHTML5 Italy: Mai più CSS, fogli di stile moderni con LESS - Salvatore Romeo
HTML5 Italy: Mai più CSS, fogli di stile moderni con LESS - Salvatore Romeo
marcocasario
 
Lezione HTML
Lezione HTMLLezione HTML
Lezione HTML
Mariella Consoli
 
Fogli di stile CSS
Fogli di stile CSSFogli di stile CSS
Fogli di stile CSS
Daniele Moraschi
 
Html5 - classi prime - multimedia
Html5 - classi prime - multimediaHtml5 - classi prime - multimedia
Html5 - classi prime - multimedia
Matteo Ziviani
 
Html base - classi prime - multimedia
Html base - classi prime - multimediaHtml base - classi prime - multimedia
Html base - classi prime - multimedia
Matteo Ziviani
 
Corso HTML per l'editoria
Corso HTML per l'editoriaCorso HTML per l'editoria
Corso HTML per l'editoria
Diego La Monica
 
Presentazione Corso - Parte 1
Presentazione Corso - Parte 1Presentazione Corso - Parte 1
Presentazione Corso - Parte 1
Giorgio Carpoca
 
Open web programming
Open web programmingOpen web programming
Open web programming
nois3lab
 
Introduzione all'Html
Introduzione all'HtmlIntroduzione all'Html
Introduzione all'Html
Daniele Moraschi
 
Ancora anatomia, le pagine HTML(5)
Ancora anatomia, le pagine HTML(5)Ancora anatomia, le pagine HTML(5)
Ancora anatomia, le pagine HTML(5)
nois3lab
 
I Linguaggi Del Web (1° Giornata)
I Linguaggi Del Web (1° Giornata)I Linguaggi Del Web (1° Giornata)
I Linguaggi Del Web (1° Giornata)
Diego La Monica
 
Html TAGS 2
Html TAGS 2Html TAGS 2
Html TAGS 2
Scuola Media Galileo Galilei Mira
 
Art Weekly Report_2 dicembre 2013
Art Weekly Report_2 dicembre 2013Art Weekly Report_2 dicembre 2013
Art Weekly Report_2 dicembre 2013
Maurizio Nicosia
 
Archivio48
Archivio48Archivio48
Archivio48
Roberto Rapaccini
 

More Related Content

What's hot

HTML5 Italy: Mai più CSS, fogli di stile moderni con LESS - Salvatore Romeo
HTML5 Italy: Mai più CSS, fogli di stile moderni con LESS - Salvatore RomeoHTML5 Italy: Mai più CSS, fogli di stile moderni con LESS - Salvatore Romeo
HTML5 Italy: Mai più CSS, fogli di stile moderni con LESS - Salvatore Romeo
marcocasario
 

What's hot (20)

Struttura di una pagina html
Struttura di una pagina htmlStruttura di una pagina html
Struttura di una pagina html
 
Html5 e css3 nuovi strumenti per un nuovo web
Html5 e css3 nuovi strumenti per un nuovo webHtml5 e css3 nuovi strumenti per un nuovo web
Html5 e css3 nuovi strumenti per un nuovo web
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
Html5
Html5Html5
Html5
 
Html Base
Html BaseHtml Base
Html Base
 
Guida introduttiva al codice HTML
Guida introduttiva al codice HTMLGuida introduttiva al codice HTML
Guida introduttiva al codice HTML
 
HTML5
HTML5HTML5
HTML5
 
Html 5: una breve guida!
Html 5: una breve guida!Html 5: una breve guida!
Html 5: una breve guida!
 
HTML5 Italy: Mai più CSS, fogli di stile moderni con LESS - Salvatore Romeo
HTML5 Italy: Mai più CSS, fogli di stile moderni con LESS - Salvatore RomeoHTML5 Italy: Mai più CSS, fogli di stile moderni con LESS - Salvatore Romeo
HTML5 Italy: Mai più CSS, fogli di stile moderni con LESS - Salvatore Romeo
 
Lezione HTML
Lezione HTMLLezione HTML
Lezione HTML
 
Fogli di stile CSS
Fogli di stile CSSFogli di stile CSS
Fogli di stile CSS
 
Html5 - classi prime - multimedia
Html5 - classi prime - multimediaHtml5 - classi prime - multimedia
Html5 - classi prime - multimedia
 
Html base - classi prime - multimedia
Html base - classi prime - multimediaHtml base - classi prime - multimedia
Html base - classi prime - multimedia
 
Corso HTML per l'editoria
Corso HTML per l'editoriaCorso HTML per l'editoria
Corso HTML per l'editoria
 
Presentazione Corso - Parte 1
Presentazione Corso - Parte 1Presentazione Corso - Parte 1
Presentazione Corso - Parte 1
 
Open web programming
Open web programmingOpen web programming
Open web programming
 
Introduzione all'Html
Introduzione all'HtmlIntroduzione all'Html
Introduzione all'Html
 
Ancora anatomia, le pagine HTML(5)
Ancora anatomia, le pagine HTML(5)Ancora anatomia, le pagine HTML(5)
Ancora anatomia, le pagine HTML(5)
 
I Linguaggi Del Web (1° Giornata)
I Linguaggi Del Web (1° Giornata)I Linguaggi Del Web (1° Giornata)
I Linguaggi Del Web (1° Giornata)
 
Html TAGS 2
Html TAGS 2Html TAGS 2
Html TAGS 2
 

Viewers also liked

Art Weekly Report_2 dicembre 2013
Art Weekly Report_2 dicembre 2013Art Weekly Report_2 dicembre 2013
Art Weekly Report_2 dicembre 2013
Maurizio Nicosia
 
New living experience: nuove tendenze nell'abitare
New living experience: nuove tendenze nell'abitareNew living experience: nuove tendenze nell'abitare
New living experience: nuove tendenze nell'abitare
Valentina Durante
 
Prevision(17): codici culturali, neuromarketing e marketing religioso
Prevision(17): codici culturali, neuromarketing e marketing religiosoPrevision(17): codici culturali, neuromarketing e marketing religioso
Prevision(17): codici culturali, neuromarketing e marketing religioso
Valentina Durante
 
Brasile manuale operativo 2012
Brasile manuale operativo 2012Brasile manuale operativo 2012
Brasile manuale operativo 2012
stefano salardi
 
Florencia
Florencia Florencia
Florencia
F. Ovies
 
Wireframe e struttura del sito internet
Wireframe e struttura del sito internetWireframe e struttura del sito internet
Wireframe e struttura del sito internet
Daniele Moraschi
 
Concetti teorico-clinici: stadi evolutivi del disegno infantile
Concetti teorico-clinici: stadi evolutivi del disegno infantileConcetti teorico-clinici: stadi evolutivi del disegno infantile
Concetti teorico-clinici: stadi evolutivi del disegno infantile
Nunzia Tarantini
 
03 lezioni di-tecniche-dosservazione-del-comportamento-infan.2moduli
03 lezioni di-tecniche-dosservazione-del-comportamento-infan.2moduli03 lezioni di-tecniche-dosservazione-del-comportamento-infan.2moduli
03 lezioni di-tecniche-dosservazione-del-comportamento-infan.2moduli
iva martini
 

Viewers also liked (20)

Art Weekly Report_2 dicembre 2013
Art Weekly Report_2 dicembre 2013Art Weekly Report_2 dicembre 2013
Art Weekly Report_2 dicembre 2013
 
Archivio48
Archivio48Archivio48
Archivio48
 
Ebook crescita investimenti e territorio
Ebook crescita investimenti e territorioEbook crescita investimenti e territorio
Ebook crescita investimenti e territorio
 
Il suono nel maglio: racconti di un artigiano diventato imprenditore
Il suono nel maglio: racconti di un artigiano diventato imprenditoreIl suono nel maglio: racconti di un artigiano diventato imprenditore
Il suono nel maglio: racconti di un artigiano diventato imprenditore
 
New living experience: nuove tendenze nell'abitare
New living experience: nuove tendenze nell'abitareNew living experience: nuove tendenze nell'abitare
New living experience: nuove tendenze nell'abitare
 
Tendenze, moodboard, prodotti (e non possono mancare le storie) – Tema 2
Tendenze, moodboard, prodotti (e non possono mancare le storie) – Tema 2Tendenze, moodboard, prodotti (e non possono mancare le storie) – Tema 2
Tendenze, moodboard, prodotti (e non possono mancare le storie) – Tema 2
 
Tendenze, moodboard, prodotti (e non possono mancare le storie) – Introduzione
Tendenze, moodboard, prodotti (e non possono mancare le storie) – IntroduzioneTendenze, moodboard, prodotti (e non possono mancare le storie) – Introduzione
Tendenze, moodboard, prodotti (e non possono mancare le storie) – Introduzione
 
Tendenze, moodboard, prodotti (e non possono mancare le storie) – Tema 4
Tendenze, moodboard, prodotti (e non possono mancare le storie) – Tema 4Tendenze, moodboard, prodotti (e non possono mancare le storie) – Tema 4
Tendenze, moodboard, prodotti (e non possono mancare le storie) – Tema 4
 
Tendenze, moodboard, prodotti (e non possono mancare le storie) – Tema 3
Tendenze, moodboard, prodotti (e non possono mancare le storie) – Tema 3Tendenze, moodboard, prodotti (e non possono mancare le storie) – Tema 3
Tendenze, moodboard, prodotti (e non possono mancare le storie) – Tema 3
 
Prevision(17): codici culturali, neuromarketing e marketing religioso
Prevision(17): codici culturali, neuromarketing e marketing religiosoPrevision(17): codici culturali, neuromarketing e marketing religioso
Prevision(17): codici culturali, neuromarketing e marketing religioso
 
Brasile manuale operativo 2012
Brasile manuale operativo 2012Brasile manuale operativo 2012
Brasile manuale operativo 2012
 
Florencia
Florencia Florencia
Florencia
 
Pint esc xv_xvii
Pint esc xv_xviiPint esc xv_xvii
Pint esc xv_xvii
 
Opere
OpereOpere
Opere
 
Crea il tuo e-commerce internazionale: the Global Action Plan
Crea il tuo e-commerce internazionale: the Global Action PlanCrea il tuo e-commerce internazionale: the Global Action Plan
Crea il tuo e-commerce internazionale: the Global Action Plan
 
Html e Css - 3 | WebMaster & WebDesigner
Html e Css - 3 | WebMaster & WebDesignerHtml e Css - 3 | WebMaster & WebDesigner
Html e Css - 3 | WebMaster & WebDesigner
 
Wireframe e struttura del sito internet
Wireframe e struttura del sito internetWireframe e struttura del sito internet
Wireframe e struttura del sito internet
 
Xhtml
XhtmlXhtml
Xhtml
 
Concetti teorico-clinici: stadi evolutivi del disegno infantile
Concetti teorico-clinici: stadi evolutivi del disegno infantileConcetti teorico-clinici: stadi evolutivi del disegno infantile
Concetti teorico-clinici: stadi evolutivi del disegno infantile
 
03 lezioni di-tecniche-dosservazione-del-comportamento-infan.2moduli
03 lezioni di-tecniche-dosservazione-del-comportamento-infan.2moduli03 lezioni di-tecniche-dosservazione-del-comportamento-infan.2moduli
03 lezioni di-tecniche-dosservazione-del-comportamento-infan.2moduli
 

Similar to Introduzione ai css

•Blog: quali tecnologie per il futuro?
•Blog: quali tecnologie per il futuro?•Blog: quali tecnologie per il futuro?
•Blog: quali tecnologie per il futuro?
IWA
 
Presentazione Xml
Presentazione XmlPresentazione Xml
Presentazione Xml
tave10
 

Similar to Introduzione ai css (20)

Breve introduzione alle tecnologie HTML5 + (DOM) + CSS
Breve introduzione alle tecnologie HTML5 + (DOM) + CSS Breve introduzione alle tecnologie HTML5 + (DOM) + CSS
Breve introduzione alle tecnologie HTML5 + (DOM) + CSS
 
HTML (+ DOM) + CSS
HTML (+ DOM) + CSSHTML (+ DOM) + CSS
HTML (+ DOM) + CSS
 
Lezione HTML
Lezione HTMLLezione HTML
Lezione HTML
 
Web writing 2
Web writing 2Web writing 2
Web writing 2
 
Xml Xslt
Xml XsltXml Xslt
Xml Xslt
 
Html e Css - 2 | WebMaster & WebDesigner
Html e Css - 2 | WebMaster & WebDesigner Html e Css - 2 | WebMaster & WebDesigner
Html e Css - 2 | WebMaster & WebDesigner
 
Html e Css - 2 | WebMaster & WebDesigner
Html e Css - 2 | WebMaster & WebDesignerHtml e Css - 2 | WebMaster & WebDesigner
Html e Css - 2 | WebMaster & WebDesigner
 
CSS - Box Model
CSS - Box ModelCSS - Box Model
CSS - Box Model
 
Dal Click Al Web Server
Dal Click Al Web ServerDal Click Al Web Server
Dal Click Al Web Server
 
Html e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesigner Html e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesigner
 
Html e Css - 3 | WebMaster & WebDesigner
Html e Css - 3 | WebMaster & WebDesignerHtml e Css - 3 | WebMaster & WebDesigner
Html e Css - 3 | WebMaster & WebDesigner
 
Css1
Css1Css1
Css1
 
Html e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesignerHtml e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesigner
 
•Blog: quali tecnologie per il futuro?
•Blog: quali tecnologie per il futuro?•Blog: quali tecnologie per il futuro?
•Blog: quali tecnologie per il futuro?
 
HTMLslide
HTMLslide HTMLslide
HTMLslide
 
Web base-01-html
Web base-01-htmlWeb base-01-html
Web base-01-html
 
Presentazione wicket
Presentazione wicketPresentazione wicket
Presentazione wicket
 
Lezione 5 - L'HTML
Lezione 5 - L'HTMLLezione 5 - L'HTML
Lezione 5 - L'HTML
 
Presentazione Xml
Presentazione XmlPresentazione Xml
Presentazione Xml
 
HTML5 e Css3 - 1 | WebMaster & WebDesigner
HTML5 e Css3 - 1 | WebMaster & WebDesignerHTML5 e Css3 - 1 | WebMaster & WebDesigner
HTML5 e Css3 - 1 | WebMaster & WebDesigner
 

Recently uploaded

Presentazione tre geni della tecnologia informatica
Presentazione tre geni della tecnologia informaticaPresentazione tre geni della tecnologia informatica
Presentazione tre geni della tecnologia informatica
nico07fusco
 

Recently uploaded (20)

Palestini Aurora-Steve Jobs,Olivetti e Gates.pptx
Palestini Aurora-Steve Jobs,Olivetti e Gates.pptxPalestini Aurora-Steve Jobs,Olivetti e Gates.pptx
Palestini Aurora-Steve Jobs,Olivetti e Gates.pptx
 
a scuola di biblioVerifica: come utilizzare il test TRAAP
a scuola di biblioVerifica: come utilizzare il test TRAAPa scuola di biblioVerifica: come utilizzare il test TRAAP
a scuola di biblioVerifica: come utilizzare il test TRAAP
 
Piccole Personetestoitaliano-AuroraPalestini.docx
Piccole Personetestoitaliano-AuroraPalestini.docxPiccole Personetestoitaliano-AuroraPalestini.docx
Piccole Personetestoitaliano-AuroraPalestini.docx
 
TeccarelliLorenzo-Mitodella.cavernaa.pdf
TeccarelliLorenzo-Mitodella.cavernaa.pdfTeccarelliLorenzo-Mitodella.cavernaa.pdf
TeccarelliLorenzo-Mitodella.cavernaa.pdf
 
Le forme allotropiche del C-Palestini e Pancia.docx
Le forme allotropiche del C-Palestini e Pancia.docxLe forme allotropiche del C-Palestini e Pancia.docx
Le forme allotropiche del C-Palestini e Pancia.docx
 
Pancia Asia_relazione laboratorio(forza d'attrito).docx
Pancia Asia_relazione laboratorio(forza d'attrito).docxPancia Asia_relazione laboratorio(forza d'attrito).docx
Pancia Asia_relazione laboratorio(forza d'attrito).docx
 
Pancia Asia-Pelusi Sara-La pittura romana - Copia (1).pptx
Pancia Asia-Pelusi Sara-La pittura romana - Copia (1).pptxPancia Asia-Pelusi Sara-La pittura romana - Copia (1).pptx
Pancia Asia-Pelusi Sara-La pittura romana - Copia (1).pptx
 
TeccarelliLorenzo-i4stilidellapitturaromana.docx
TeccarelliLorenzo-i4stilidellapitturaromana.docxTeccarelliLorenzo-i4stilidellapitturaromana.docx
TeccarelliLorenzo-i4stilidellapitturaromana.docx
 
Pancia Asia-La vita di Steve Jobs-Adriano Olivetti-Bill Gates.pptx
Pancia Asia-La vita di Steve Jobs-Adriano Olivetti-Bill Gates.pptxPancia Asia-La vita di Steve Jobs-Adriano Olivetti-Bill Gates.pptx
Pancia Asia-La vita di Steve Jobs-Adriano Olivetti-Bill Gates.pptx
 
TeccarelliLorenzo-PrimadiSteveJobselasuaconcorrenza.pptx
TeccarelliLorenzo-PrimadiSteveJobselasuaconcorrenza.pptxTeccarelliLorenzo-PrimadiSteveJobselasuaconcorrenza.pptx
TeccarelliLorenzo-PrimadiSteveJobselasuaconcorrenza.pptx
 
Presentazione tre geni della tecnologia informatica
Presentazione tre geni della tecnologia informaticaPresentazione tre geni della tecnologia informatica
Presentazione tre geni della tecnologia informatica
 
Esame di Stato 2024 - Materiale conferenza online 09 aprile 2024
Esame di Stato 2024 - Materiale conferenza online 09 aprile 2024Esame di Stato 2024 - Materiale conferenza online 09 aprile 2024
Esame di Stato 2024 - Materiale conferenza online 09 aprile 2024
 
CHIẾN THẮNG KÌ THI TUYỂN SINH VÀO LỚP 10 THPT MÔN NGỮ VĂN - PHAN THẾ HOÀI (36...
CHIẾN THẮNG KÌ THI TUYỂN SINH VÀO LỚP 10 THPT MÔN NGỮ VĂN - PHAN THẾ HOÀI (36...CHIẾN THẮNG KÌ THI TUYỂN SINH VÀO LỚP 10 THPT MÔN NGỮ VĂN - PHAN THẾ HOÀI (36...
CHIẾN THẮNG KÌ THI TUYỂN SINH VÀO LỚP 10 THPT MÔN NGỮ VĂN - PHAN THẾ HOÀI (36...
 
Storia-CarloMagno-TeccarelliLorenzo.pptx
Storia-CarloMagno-TeccarelliLorenzo.pptxStoria-CarloMagno-TeccarelliLorenzo.pptx
Storia-CarloMagno-TeccarelliLorenzo.pptx
 
Educazione civica-Asia Pancia powerpoint
Educazione civica-Asia Pancia powerpointEducazione civica-Asia Pancia powerpoint
Educazione civica-Asia Pancia powerpoint
 
magia, stregoneria, inquisizione e medicina.pptx
magia, stregoneria, inquisizione e medicina.pptxmagia, stregoneria, inquisizione e medicina.pptx
magia, stregoneria, inquisizione e medicina.pptx
 
Le forme allotropiche del C-Palestini e Pancia.docx
Le forme allotropiche del C-Palestini e Pancia.docxLe forme allotropiche del C-Palestini e Pancia.docx
Le forme allotropiche del C-Palestini e Pancia.docx
 
magia, stregoneria, inquisizione e medicina.pptx
magia, stregoneria, inquisizione e medicina.pptxmagia, stregoneria, inquisizione e medicina.pptx
magia, stregoneria, inquisizione e medicina.pptx
 
Gli isotopi scienze naturale seconda pres
Gli isotopi scienze naturale seconda presGli isotopi scienze naturale seconda pres
Gli isotopi scienze naturale seconda pres
 
PalestiniAurora-la conoscenzatestoita.docx
PalestiniAurora-la conoscenzatestoita.docxPalestiniAurora-la conoscenzatestoita.docx
PalestiniAurora-la conoscenzatestoita.docx
 

Introduzione ai css

Editor's Notes

  1. Con programma utente si intende la traduzione, suggerita da Michele Diodati, dello USER AGENT.
  2. L’XHTML è anche il linguaggio che, per il W3C, ha sostituito l’HTML per cui è bene abbracciare totalmente gli standard e non solo in parte (CSS+HTML)
  3. La centratura ha significato solo se il box ha una larghezza specificata I margini superiore e inferiore dei paragrafi sono generalmente pari a 1em, i div hanno margine nullo
  4. Vedremo più avanti il significato di box flottante e box posizionato
  5. Vedremo più avanti il significato di box flottante e box posizionato
  6. Si consideri la sovrapposizione degli effetti per cui è possibile definire alcuni aspetti globalmente e altri in modo specifico