SlideShare a Scribd company logo
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

More Related Content

What's hot

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
 
Guida introduttiva al codice HTML
Guida introduttiva al codice HTMLGuida introduttiva al codice HTML
Guida introduttiva al codice HTML
Enrico Mainero
 
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
 
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
 

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 2013Maurizio Nicosia
 
Archivio48
Archivio48Archivio48
Archivio48
Roberto Rapaccini
 
Ebook crescita investimenti e territorio
Ebook   crescita investimenti e territorioEbook   crescita investimenti e territorio
Ebook crescita investimenti e territorio
Riccardo Cappellin
 
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
Valentina Durante
 
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
 
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
Valentina Durante
 
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
Valentina Durante
 
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
Valentina Durante
 
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
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 2012stefano salardi
 
Florencia
Florencia Florencia
Florencia F. Ovies
 
Pint esc xv_xvii
Pint esc xv_xviiPint esc xv_xvii
Pint esc xv_xvii
felipperez
 
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
Andrea Vit
 
Html e Css - 3 | WebMaster & WebDesigner
Html e Css - 3 | WebMaster & WebDesignerHtml e Css - 3 | WebMaster & WebDesigner
Html e Css - 3 | WebMaster & WebDesigner
Matteo Magni
 
Wireframe e struttura del sito internet
Wireframe e struttura del sito internetWireframe e struttura del sito internet
Wireframe e struttura del sito internetDaniele Moraschi
 
Xhtml
XhtmlXhtml
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 infantileNunzia 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.2moduliiva 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

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
Giuseppe Vizzari
 
HTML (+ DOM) + CSS
HTML (+ DOM) + CSSHTML (+ DOM) + CSS
HTML (+ DOM) + CSS
Giuseppe Vizzari
 
Web writing 2
Web writing 2Web writing 2
Web writing 2
icferrucci
 
Xml Xslt
Xml  XsltXml  Xslt
Html e Css - 2 | WebMaster & WebDesigner
Html e Css - 2 | WebMaster & WebDesignerHtml e Css - 2 | WebMaster & WebDesigner
Html e Css - 2 | WebMaster & WebDesigner
Matteo Magni
 
Html e Css - 2 | WebMaster & WebDesigner
 Html e Css - 2 | WebMaster & WebDesigner Html e Css - 2 | WebMaster & WebDesigner
Html e Css - 2 | WebMaster & WebDesigner
Matteo Magni
 
CSS - Box Model
CSS - Box ModelCSS - Box Model
CSS - Box Model
Giovanni Buffa
 
Html e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesigner Html e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesigner
Matteo Magni
 
Html e Css - 3 | WebMaster & WebDesigner
Html e Css - 3 | WebMaster & WebDesignerHtml e Css - 3 | WebMaster & WebDesigner
Html e Css - 3 | WebMaster & WebDesigner
Matteo Magni
 
Css1
Css1Css1
Html e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesignerHtml e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesigner
Matteo Magni
 
•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
 
HTMLslide
HTMLslide HTMLslide
HTMLslide
ritalerede
 
Web base-01-html
Web base-01-htmlWeb base-01-html
Web base-01-html
Studiabo
 
Presentazione wicket
Presentazione wicketPresentazione wicket
Presentazione wicket
Andrea Del Bene
 
Lezione 5 - L'HTML
Lezione 5 - L'HTMLLezione 5 - L'HTML
Lezione 5 - L'HTML
Giuseppe Cramarossa
 
Presentazione Xml
Presentazione XmlPresentazione Xml
Presentazione Xmltave10
 
HTML5 e Css3 - 1 | WebMaster & WebDesigner
HTML5 e Css3 - 1 | WebMaster & WebDesignerHTML5 e Css3 - 1 | WebMaster & WebDesigner
HTML5 e Css3 - 1 | WebMaster & WebDesigner
Matteo Magni
 

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 & WebDesignerHtml 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 & 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
 

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