QUI SPIEGHERò UN PO IL CSS
I Cascading Style Sheets (CSS) sono un fantastico strumento per aggiungere layout al tuo sito web. Possono farti risparmiare un sacco di tempo e ti permettono di progettare i tuoi siti web in un modo completamente nuovo. I CSS sono un obbligo per tutti quelli che vogliono lavorare con i siti web.
Questo tutorial ti introdurrà i CSS in sole poche ore. E' semplice da capire e ti insegnerà tutte le tecniche sofisticate.
Imparare i CSS è divertente. Mentre andrai avanti con il tutorial, ricordati di lasciarti tempo sufficiente per poter sperimentare da solo quello che imparerai in ogni lezione.
Per usare i CSS necessiti di una base di HTML. Se non sei familiare con l'HTML, per favore prima di andare avanti con i CSS, segui il nostro tutorial sull'HTML.
Quale software mi serve?
Per favore evita di usare software come FrontPage, DreamWeaver o Word con questo tutorial. Software più sofisticati non ti aiuteranno ad imaprare i CSS. Piuttosto ti limiteranno e faranno scendere significativamente la tua curva di apprendimento.
Tutto quello di cui hai bisogno è un editor di testo semplice e gratutito.
Per esempio, con Microsoft Windows viene installato anche un programma chiamato Notepad. Normalmente è posizionato sotto Accessori nel menu Programmi di Avvio. Alternativamente puoi usare un editor simile come Pico per Linux o Simple Text per Macintosh.
Un semplice editor di testo è l'ideale per imparare l'HTML e i CSS perchè non compromette o cambia il codice che stai scrivendo. In questo modo i tuoi successi e i tuoi errori possono essere attributi solo a te stesso - non al software.
Puoi usare qualsiasi browser per questo tutorial. Ti consigliamo di aggiornare il tuo browser in modo da poter usare sempre l'ultima veersione.
Tutto quello che ti serve è un browser e un editor di testo.
Iniziamo!
--------------------------------------------------------------------------
LEZIONE 1 - COSA SONO I CSS ?
Forse hai già sentito parlare dei CSS senxa realmente sapere cosa fossero. In questa lezione imparerai qualcosa sui CSS e su cosa farci.
CSS è l'acronimo di Cascading Style Sheets (in italiano Fogli di stile).
Cosa posso fare con i CSS?
I CSS formano un linguaggio per la definizione del layout dei documenti HTML. Per esempio, i CSS si occupano dei font, dei colori, dei margini, delle linee, delle altezze, delle larghezze, delle immagini di sfondo, del posizionamento e di molte altre cose. Aspetta e vedrai!
L'HTML può essere stra-usato per aggiugnere layout ai siti web. Ma i CSS offrono molte più opzioni, accurate e sofisticate. Oggi i CSS sono supportati da tutti i browser.
Dopo sole poche lesioni di questo tutorial sarai capace di fare il tuo foglio di stile usando i CSS in modo da dare al tuo sito web un nuovo e grandioso aspetto.
Che differenza c'è tra i CSS e l'HTML?
L'HTML viene usato per strutturare il contenuto. I CSS vengono usati per formattare la struttura del contenuto.
Va bene, sembra un po' troppo tecnico e confuso, ma per favore continua a leggere. Molto presto ne capirai il senso.
Indietro nel tempo, quando Madonna era una vergine e un tipo di nome Tim Berners Lee aveva inventato il World Wide Web, solo il linguaggio HTML veniva usato per aggiungere struttura al testo. Un autore poteva marcare il suo testo con la scritta "questo è un titolo" o"questo è un paragrafo" usando tag HTML del tipo di <h1> e <p>.
Quando il web ha cominciato a diventare popolare, i designer hanno iniziato a cercare alternative per aggiungere layout ad un documento online. Per far fronte alla domanda, i produttori di browser (a quel tempo Netscape e Microsoft) inventarono nuovi tag HTML come per esempio <font>, diverso dai tag HTML originali inq uanto definisce il layout e non la struttura.
Questo portò a situazioni in cui tag originari di struttura come <table> veniva abbondantemente usati per fare il layout delle pagine invece che per aggiungere struttura al testo. Molti altri tipi di nuovi tag, come <blink> venivano supportati solo da alcuni tipi di browser. "Per vedere queste pagine hai bisogno del browser X" era diventato uno slogan comune sui siti web.
I CSS sono stati inventati per rimediare a questa situazione, fornendo ai web designer opportunità sofisticate per la progettazione del layout che fossero supportate da tutti i browser. Allo stesso tempo la separazione dello stile di presentazione di un documento dal contenuto del documento, facilita molto il mantenimento dei siti web.
Quali benefici avrò con i CSS?
I CSS sono stati una rivoluzione nel mondo del web design. I benefici concreti dei CSS comprendono:
il controllo del layout di molti documenti contemporaneamente attraverso un unico foglio di stile;
un controllo più preciso del layout;
l'applicazione di un layout diverso per ogni tipo di media (schermo, stampa, ecc.);
un grand numero di tecniche avanzate e sofisticate.
Nella prossima lezione ci avvicineremo di più al funzionamento dei CSS e a come puoi iniziare ad utilizzarli
--------------------------------------------------------------------------
LEZIONE 2 - COME FUNZIONANO I CSS
In questa lezione imparerai a fare il tuo primo foglio di stile. Imparerai le basi del modello CSS e il codice che ci serve per usare i CSS in un documento HTML.
Molte proprietà usate nei Cascading Style Sheets (CSS) sono simili a quelle dell'HTML. Quindi, se hai usato l'HTML per il layout, molto probabilmente riconoscerai facilmente la maggior parte del codice. Vediamo un esempio concreto.
La sintassi di base dei CSS
Diciamo che vogliamo un bel colore rosso come sfondo della pagina web:
Usando solo l' HTML avremmo fatto in questo modo:
Lo stesso risultato con i CSS si ottiene così:
Come potrai notare, i codici dell'HTML e del CSS sono più o meno identici. L'esempio sopra ti mostra anche il modello fondamentale dei CSS:
Ma dove metti il codice CSS? Questo è quello che vedremo esattamente fra un attimo.
Applicare i CSS ad un documento HTML
Ci sono tre modi con cui puoi applicare i CSS ad un documento HTML, e sono tutti illustrati di seguito. Ti raccomandiamo di focalizzarti sul terzo metodo, cioè l'esterno.
Method 1: In-line (l'attributo style)
Un modo per applicare i CSS all'HTML è quello di usare l'attributo style dell'HTML. Rimanendo sull'esempio riportato sopra con lo sfondo rosso, possiamo scrivere come segue:
Method 2: Interno (il tag style)
Un altro modo per includere il codice CSS è quello di usare il tag HTML <style>. Per esempio in questo modo:
Method 3: Esterno (link ad un foglio di stile)
Il metodo raccomandato è quello di fare un link a quello che viene chiamato un foglio di stile esterno. In tutto questo tutorial useremo questo metodo per i nostri esempi.
Un foglio di stile esterno è semplicemente un file di testo con estensione .css. Come con tutti gli altri file, puoi mettere il tuo foglio di stile sul server web o sul disco fisso.
Per esempio, supponiamo che il tuo foglio di stile si chiami style.css ed è stato salvato in una cartella chiamata style. La situazione potrebbe essere illustrata come segue:
Il trucco è creare un link al foglio di stile (style.css) dal documento HTML (default.htm). Questo link potrebbe essere creato con una linea di codice HTML:
Nota come il percorso per arrivare al tuo foglio di stile viene indicato usando l'attributo href.
La linea di codice deve essere inserita nella sezione header del codice HTML, cioè tra i tag <head> e </head>, in questo modo:
Questo link dice al browser che per visualizzare il file HTML, dovrebbe usare il layout come descritto nel file CSS.
La cosa realmente intelligente è che più documenti HTML possono essere linkati allo stesso foglio di stile. In altre parole, un file CSS può essere usato per controllare il layout di più documenti HTML contemporaneamente.
Questa tecnica ti permette di guadagnare un sacco di lavoro. Se per esempio vuoi cambiare il colore di sfondo di un sito web di 100 pagine, un foglio di stile ti può salvare dal farlo manualmente per tutti i 100 documenti HTML. Usando i CSS il cambiamento può essere fatto in pochi secondi solo cambiando un codice nel foglio di stile.
Prova da solo
Apri Notepad (o qualsiasi altro editor di testo) e crea due file - un file HTML e un file CSS - con questi contenuti:
default.htm
style.css
Adesso metti i due file nella stessa cartella. Ricordati di salvare i file con la giusta estensione (rispettivamente ".htm" e ".css")
Dal tuo browser apri default.htm e osserva la tua pagina con lo sfondo rosso.
--------------------------------------------------------------------------
LEZIONE 3 - COLORI E SFONDI
In questa lezione imparerai come applicare i colori e gli sfondi al tuo sito web. Vedremo anche alcuni metodi avanzati per posizionare e controllare le immagini di sfondo. Spiegheremo quindi le seguenti proprietà CSS:
-color
-background-color
-background-image
-background-repeat
-background-attachment
-background-position
-background
Colore di primo piano: la proprietà 'color'
La proprietà color descrive il colore di primo piano di un elemento.
Per esempio, immagina di volere tutti i titoli del documento di colore rosso scuro. I titoli sono tutti marcati con l'elemtno HTML <h1>. Il codice sotto definisce il colore rosso dell'elemento <h1>.
Immagini di sfondo [background-image]
La proprietà CSS background-image viene usata per inserire una immagine di sfondo.
Come esempio di immagine di sfondo abbiamo usato la farfalla sotto. Puoi scaricare questa immagine in modo da poterla usare sul tuo computer (fai click con il taasto destro del mouse sull'immagine e scegli "salva immagine come"), o puoi usare un'altra immagine che ti piace inserire.
Per inserire l'immagine come immagine di sfondo di una pagina web applica semplicemente la proprietà background-image al <body> e specifica la posizione dell'immagine.
P.S.=RICORDATE QNDO METTETE L'IMAGINE SPECIFICATE IL SITO PER ESEMPIO
Immagini di sfondo ripetute [background-repeat]
Nell'esempio sopra hai notato che per default la farfalla viene ripetuta sia orizzontalmente che verticalmente in modo da coprire tutto lo schermo? La proprietà background-repeat controlla questo comportamento.
QSTI SON I VALORI :
-Background-repeat: repeat-x (L'immagine viene ripetuta orizzontalmente)
-background-repeat: repeat-y (L'immagine viene ripetuta verticalmente )
-background-repeat: repeat (L'imagine viene ripetuta sia orizzontalmente che verticalmente)
-background-repeat: no-repeat (L'immagine non viene ripetuta)
E QUI FINISCE LA MIA GUIDA SPERO SIA DA RILIEVO
FONTE : Html.Net
I Cascading Style Sheets (CSS) sono un fantastico strumento per aggiungere layout al tuo sito web. Possono farti risparmiare un sacco di tempo e ti permettono di progettare i tuoi siti web in un modo completamente nuovo. I CSS sono un obbligo per tutti quelli che vogliono lavorare con i siti web.
Questo tutorial ti introdurrà i CSS in sole poche ore. E' semplice da capire e ti insegnerà tutte le tecniche sofisticate.
Imparare i CSS è divertente. Mentre andrai avanti con il tutorial, ricordati di lasciarti tempo sufficiente per poter sperimentare da solo quello che imparerai in ogni lezione.
Per usare i CSS necessiti di una base di HTML. Se non sei familiare con l'HTML, per favore prima di andare avanti con i CSS, segui il nostro tutorial sull'HTML.
Quale software mi serve?
Per favore evita di usare software come FrontPage, DreamWeaver o Word con questo tutorial. Software più sofisticati non ti aiuteranno ad imaprare i CSS. Piuttosto ti limiteranno e faranno scendere significativamente la tua curva di apprendimento.
Tutto quello di cui hai bisogno è un editor di testo semplice e gratutito.
Per esempio, con Microsoft Windows viene installato anche un programma chiamato Notepad. Normalmente è posizionato sotto Accessori nel menu Programmi di Avvio. Alternativamente puoi usare un editor simile come Pico per Linux o Simple Text per Macintosh.
Un semplice editor di testo è l'ideale per imparare l'HTML e i CSS perchè non compromette o cambia il codice che stai scrivendo. In questo modo i tuoi successi e i tuoi errori possono essere attributi solo a te stesso - non al software.
Puoi usare qualsiasi browser per questo tutorial. Ti consigliamo di aggiornare il tuo browser in modo da poter usare sempre l'ultima veersione.
Tutto quello che ti serve è un browser e un editor di testo.
Iniziamo!
--------------------------------------------------------------------------
LEZIONE 1 - COSA SONO I CSS ?
Forse hai già sentito parlare dei CSS senxa realmente sapere cosa fossero. In questa lezione imparerai qualcosa sui CSS e su cosa farci.
CSS è l'acronimo di Cascading Style Sheets (in italiano Fogli di stile).
Cosa posso fare con i CSS?
I CSS formano un linguaggio per la definizione del layout dei documenti HTML. Per esempio, i CSS si occupano dei font, dei colori, dei margini, delle linee, delle altezze, delle larghezze, delle immagini di sfondo, del posizionamento e di molte altre cose. Aspetta e vedrai!
L'HTML può essere stra-usato per aggiugnere layout ai siti web. Ma i CSS offrono molte più opzioni, accurate e sofisticate. Oggi i CSS sono supportati da tutti i browser.
Dopo sole poche lesioni di questo tutorial sarai capace di fare il tuo foglio di stile usando i CSS in modo da dare al tuo sito web un nuovo e grandioso aspetto.
Che differenza c'è tra i CSS e l'HTML?
L'HTML viene usato per strutturare il contenuto. I CSS vengono usati per formattare la struttura del contenuto.
Va bene, sembra un po' troppo tecnico e confuso, ma per favore continua a leggere. Molto presto ne capirai il senso.
Indietro nel tempo, quando Madonna era una vergine e un tipo di nome Tim Berners Lee aveva inventato il World Wide Web, solo il linguaggio HTML veniva usato per aggiungere struttura al testo. Un autore poteva marcare il suo testo con la scritta "questo è un titolo" o"questo è un paragrafo" usando tag HTML del tipo di <h1> e <p>.
Quando il web ha cominciato a diventare popolare, i designer hanno iniziato a cercare alternative per aggiungere layout ad un documento online. Per far fronte alla domanda, i produttori di browser (a quel tempo Netscape e Microsoft) inventarono nuovi tag HTML come per esempio <font>, diverso dai tag HTML originali inq uanto definisce il layout e non la struttura.
Questo portò a situazioni in cui tag originari di struttura come <table> veniva abbondantemente usati per fare il layout delle pagine invece che per aggiungere struttura al testo. Molti altri tipi di nuovi tag, come <blink> venivano supportati solo da alcuni tipi di browser. "Per vedere queste pagine hai bisogno del browser X" era diventato uno slogan comune sui siti web.
I CSS sono stati inventati per rimediare a questa situazione, fornendo ai web designer opportunità sofisticate per la progettazione del layout che fossero supportate da tutti i browser. Allo stesso tempo la separazione dello stile di presentazione di un documento dal contenuto del documento, facilita molto il mantenimento dei siti web.
Quali benefici avrò con i CSS?
I CSS sono stati una rivoluzione nel mondo del web design. I benefici concreti dei CSS comprendono:
il controllo del layout di molti documenti contemporaneamente attraverso un unico foglio di stile;
un controllo più preciso del layout;
l'applicazione di un layout diverso per ogni tipo di media (schermo, stampa, ecc.);
un grand numero di tecniche avanzate e sofisticate.
Nella prossima lezione ci avvicineremo di più al funzionamento dei CSS e a come puoi iniziare ad utilizzarli
--------------------------------------------------------------------------
LEZIONE 2 - COME FUNZIONANO I CSS
In questa lezione imparerai a fare il tuo primo foglio di stile. Imparerai le basi del modello CSS e il codice che ci serve per usare i CSS in un documento HTML.
Molte proprietà usate nei Cascading Style Sheets (CSS) sono simili a quelle dell'HTML. Quindi, se hai usato l'HTML per il layout, molto probabilmente riconoscerai facilmente la maggior parte del codice. Vediamo un esempio concreto.
La sintassi di base dei CSS
Diciamo che vogliamo un bel colore rosso come sfondo della pagina web:
Usando solo l' HTML avremmo fatto in questo modo:
Lo stesso risultato con i CSS si ottiene così:
Come potrai notare, i codici dell'HTML e del CSS sono più o meno identici. L'esempio sopra ti mostra anche il modello fondamentale dei CSS:
Ma dove metti il codice CSS? Questo è quello che vedremo esattamente fra un attimo.
Applicare i CSS ad un documento HTML
Ci sono tre modi con cui puoi applicare i CSS ad un documento HTML, e sono tutti illustrati di seguito. Ti raccomandiamo di focalizzarti sul terzo metodo, cioè l'esterno.
Method 1: In-line (l'attributo style)
Un modo per applicare i CSS all'HTML è quello di usare l'attributo style dell'HTML. Rimanendo sull'esempio riportato sopra con lo sfondo rosso, possiamo scrivere come segue:
Method 2: Interno (il tag style)
Un altro modo per includere il codice CSS è quello di usare il tag HTML <style>. Per esempio in questo modo:
Method 3: Esterno (link ad un foglio di stile)
Il metodo raccomandato è quello di fare un link a quello che viene chiamato un foglio di stile esterno. In tutto questo tutorial useremo questo metodo per i nostri esempi.
Un foglio di stile esterno è semplicemente un file di testo con estensione .css. Come con tutti gli altri file, puoi mettere il tuo foglio di stile sul server web o sul disco fisso.
Per esempio, supponiamo che il tuo foglio di stile si chiami style.css ed è stato salvato in una cartella chiamata style. La situazione potrebbe essere illustrata come segue:
Il trucco è creare un link al foglio di stile (style.css) dal documento HTML (default.htm). Questo link potrebbe essere creato con una linea di codice HTML:
Nota come il percorso per arrivare al tuo foglio di stile viene indicato usando l'attributo href.
La linea di codice deve essere inserita nella sezione header del codice HTML, cioè tra i tag <head> e </head>, in questo modo:
Questo link dice al browser che per visualizzare il file HTML, dovrebbe usare il layout come descritto nel file CSS.
La cosa realmente intelligente è che più documenti HTML possono essere linkati allo stesso foglio di stile. In altre parole, un file CSS può essere usato per controllare il layout di più documenti HTML contemporaneamente.
Questa tecnica ti permette di guadagnare un sacco di lavoro. Se per esempio vuoi cambiare il colore di sfondo di un sito web di 100 pagine, un foglio di stile ti può salvare dal farlo manualmente per tutti i 100 documenti HTML. Usando i CSS il cambiamento può essere fatto in pochi secondi solo cambiando un codice nel foglio di stile.
Prova da solo
Apri Notepad (o qualsiasi altro editor di testo) e crea due file - un file HTML e un file CSS - con questi contenuti:
default.htm
style.css
Adesso metti i due file nella stessa cartella. Ricordati di salvare i file con la giusta estensione (rispettivamente ".htm" e ".css")
Dal tuo browser apri default.htm e osserva la tua pagina con lo sfondo rosso.
--------------------------------------------------------------------------
LEZIONE 3 - COLORI E SFONDI
In questa lezione imparerai come applicare i colori e gli sfondi al tuo sito web. Vedremo anche alcuni metodi avanzati per posizionare e controllare le immagini di sfondo. Spiegheremo quindi le seguenti proprietà CSS:
-color
-background-color
-background-image
-background-repeat
-background-attachment
-background-position
-background
Colore di primo piano: la proprietà 'color'
La proprietà color descrive il colore di primo piano di un elemento.
Per esempio, immagina di volere tutti i titoli del documento di colore rosso scuro. I titoli sono tutti marcati con l'elemtno HTML <h1>. Il codice sotto definisce il colore rosso dell'elemento <h1>.
Immagini di sfondo [background-image]
La proprietà CSS background-image viene usata per inserire una immagine di sfondo.
Come esempio di immagine di sfondo abbiamo usato la farfalla sotto. Puoi scaricare questa immagine in modo da poterla usare sul tuo computer (fai click con il taasto destro del mouse sull'immagine e scegli "salva immagine come"), o puoi usare un'altra immagine che ti piace inserire.
Per inserire l'immagine come immagine di sfondo di una pagina web applica semplicemente la proprietà background-image al <body> e specifica la posizione dell'immagine.
P.S.=RICORDATE QNDO METTETE L'IMAGINE SPECIFICATE IL SITO PER ESEMPIO
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
Immagini di sfondo ripetute [background-repeat]
Nell'esempio sopra hai notato che per default la farfalla viene ripetuta sia orizzontalmente che verticalmente in modo da coprire tutto lo schermo? La proprietà background-repeat controlla questo comportamento.
QSTI SON I VALORI :
-Background-repeat: repeat-x (L'immagine viene ripetuta orizzontalmente)
-background-repeat: repeat-y (L'immagine viene ripetuta verticalmente )
-background-repeat: repeat (L'imagine viene ripetuta sia orizzontalmente che verticalmente)
-background-repeat: no-repeat (L'immagine non viene ripetuta)
E QUI FINISCE LA MIA GUIDA SPERO SIA DA RILIEVO
FONTE : Html.Net
Ultima modifica da un moderatore:
