SlideShare una empresa de Scribd logo

Introduzione ai css

•Descargar como 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.

Educación
1 de 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

Recomendados

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
 

Recomendados

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
 

Más contenido relacionado

La actualidad más candente

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
 

La actualidad más candente (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
 

Destacado

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
 

Destacado (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 a 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 a 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
 

Último

case passive_GiorgiaDeAscaniis.pptx.....
case passive_GiorgiaDeAscaniis.pptx.....case passive_GiorgiaDeAscaniis.pptx.....
case passive_GiorgiaDeAscaniis.pptx.....
giorgiadeascaniis59
 
Nicola pisano aaaaaaaaaaaaaaaaaa(1).pptx
Nicola pisano aaaaaaaaaaaaaaaaaa(1).pptxNicola pisano aaaaaaaaaaaaaaaaaa(1).pptx
Nicola pisano aaaaaaaaaaaaaaaaaa(1).pptx
lorenzodemidio01
 
Scienza Potere Puntoaaaaaaaaaaaaaaa.pptx
Scienza Potere Puntoaaaaaaaaaaaaaaa.pptxScienza Potere Puntoaaaaaaaaaaaaaaa.pptx
Scienza Potere Puntoaaaaaaaaaaaaaaa.pptx
lorenzodemidio01
 

Último (16)

case passive_GiorgiaDeAscaniis.pptx.....
case passive_GiorgiaDeAscaniis.pptx.....case passive_GiorgiaDeAscaniis.pptx.....
case passive_GiorgiaDeAscaniis.pptx.....
 
Presentazioni Efficaci e lezioni di Educazione Civica
Presentazioni Efficaci e lezioni di Educazione CivicaPresentazioni Efficaci e lezioni di Educazione Civica
Presentazioni Efficaci e lezioni di Educazione Civica
 
Oppressi_oppressori.pptx................
Oppressi_oppressori.pptx................Oppressi_oppressori.pptx................
Oppressi_oppressori.pptx................
 
Scrittura seo e scrittura accessibile
Scrittura seo e scrittura accessibileScrittura seo e scrittura accessibile
Scrittura seo e scrittura accessibile
 
Nicola pisano aaaaaaaaaaaaaaaaaa(1).pptx
Nicola pisano aaaaaaaaaaaaaaaaaa(1).pptxNicola pisano aaaaaaaaaaaaaaaaaa(1).pptx
Nicola pisano aaaaaaaaaaaaaaaaaa(1).pptx
 
descrizioni della antica civiltà dei sumeri.pptx
descrizioni della antica civiltà dei sumeri.pptxdescrizioni della antica civiltà dei sumeri.pptx
descrizioni della antica civiltà dei sumeri.pptx
 
LE ALGHE.pptx ..........................
LE ALGHE.pptx ..........................LE ALGHE.pptx ..........................
LE ALGHE.pptx ..........................
 
Una breve introduzione ad Elsa Morante, vita e opere
Una breve introduzione ad Elsa Morante, vita e opereUna breve introduzione ad Elsa Morante, vita e opere
Una breve introduzione ad Elsa Morante, vita e opere
 
Scienza Potere Puntoaaaaaaaaaaaaaaa.pptx
Scienza Potere Puntoaaaaaaaaaaaaaaa.pptxScienza Potere Puntoaaaaaaaaaaaaaaa.pptx
Scienza Potere Puntoaaaaaaaaaaaaaaa.pptx
 
Tosone Christian_Steve Jobsaaaaaaaa.pptx
Tosone Christian_Steve Jobsaaaaaaaa.pptxTosone Christian_Steve Jobsaaaaaaaa.pptx
Tosone Christian_Steve Jobsaaaaaaaa.pptx
 
Vuoi girare il mondo? educazione civica.
Vuoi girare il mondo? educazione civica.Vuoi girare il mondo? educazione civica.
Vuoi girare il mondo? educazione civica.
 
discorso generale sulla fisica e le discipline.pptx
discorso generale sulla fisica e le discipline.pptxdiscorso generale sulla fisica e le discipline.pptx
discorso generale sulla fisica e le discipline.pptx
 
Quadrilateri e isometrie studente di liceo
Quadrilateri e isometrie studente di liceoQuadrilateri e isometrie studente di liceo
Quadrilateri e isometrie studente di liceo
 
Aristotele, vita e opere e fisica...pptx
Aristotele, vita e opere e fisica...pptxAristotele, vita e opere e fisica...pptx
Aristotele, vita e opere e fisica...pptx
 
Descrizione Piccolo teorema di Talete.pptx
Descrizione Piccolo teorema di Talete.pptxDescrizione Piccolo teorema di Talete.pptx
Descrizione Piccolo teorema di Talete.pptx
 
ProgettoDiEducazioneCivicaDefinitivo_Christian Tosone.pptx
ProgettoDiEducazioneCivicaDefinitivo_Christian Tosone.pptxProgettoDiEducazioneCivicaDefinitivo_Christian Tosone.pptx
ProgettoDiEducazioneCivicaDefinitivo_Christian Tosone.pptx
 

Introduzione ai css

Notas del editor

  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