- 18 Giugno 2010
- 21
- 0
- Miglior risposta
- 0
INIZIO - PRIMI COMANDI
Il CSS (Cascading Style Sheets) è un linguaggio che permette di gestire la grafica e posizione degli ogetti relativi ad una pagina web. Si inserisce nell' head di un foglio html, ovvero tra i tag <head> e </head> in questo modo:
Al posto di "nomecss.css" dovrete mettere il nome e la posizione del vostro file css, esempio se si chiama ciao sarà
e se si troverà in una cartella chiamata ad esempio
sarà:
Il css è strutturato così:
Esaminiamo nei dettagli cosa abbiamo scritto precendetemente.
.nomeclasse è il nome della classe css che andrete a creare, ricordate di mettere sempre il puntino " . " prima del nome, tranne che per la classe "body" dove non ci sarà nulla davanti.
{ contenuto; } è il contenuto della classe,ovvero i "comandi" che diamo, che andremo a scoprire piu' avanti. Alla fine di ogni comando o stringa va sempre messo il punto e virgola " ; " altrimenti non verrà considerata valida.
Passiamo a scoprire quali sono le funzioni css. Prima di tutto partiamo dalla parte body {} .
Questo selettore serve per stabilire un' immagine o colore di sfondo. Per scegliere un'immagine si usa il comando: background-image: url() dove all' interno delle parentesi tonde accanto ad url andremo ad inserire la posizione dell' immagine, esempio:
Ricordate sempre il punto e virgola. In questo caso se l' immagine è di dimensioni pari o superiori a quelle di una pagina web (1024 x 768) l' immagine resterà così come è, se invece è piu' piccola verrà ripetita secondo dove richiesto, ovvero orizzontale o verticale. L' unica eccezione per far in modo che l' immagine sia ripetuta o non ripetuta quanto vogliamo è stabilirne l' altezza (height) e larghezza (width), questo però lo vedremo dopo.
Se vogliamo che la nostra immagine sia ripetuta solo per orizzontale aggiungeremo sotto a background-image: url(images.png); la stringa background-repeat: repeat-x , quindi sarà:
oppure in modo piu' semplice possiamo scrivere:
(abbiamo abolito la parte "-image" e "background-repeat").
Se vogliamo che l' immagine sia ripetuta invece solo per verticale scriveremo:
o
A questo punto vi domanderete: Ma se voglio che l' immagine non si ripeta? Bhè, semplice, scriveremo in questo modo:
o nell' altro modo semplificando:
Se vogliamo invece scegliere un colore come sfondo scriveremo:
background-color: codice esadecimale del colore;
I codici esadecimali dei colori in HTML li potete trovare cliccando
Passiamo ora a vedere altre funzioni per le classi che stabiliremo noi, ovvero quelle spiegate prima come .ciao { } .
Come per il selettore body , possiamo scegliere un' immagine o colore di sfondo, come descritto prima, ovvero con background-image: url() o background-color: . Ci sono inoltre altri comdandi relativi al tag "background" come background-attachment: che si distingue in
background-attachment: fixed; che serve a far in modo che quello specifico elemento resti fisso e non si sposti mentre la pagina scorre dietro (si può scrivere anche: position: fixed; );
background-attachment: scroll; (se volete che sia scroll potete anche non scriverlo) che serve per lasciare l' elemento scorrevole con la pagina.
HEIGHT E WIDTH
Come spiegato prima, per far in modo che un' immagine sia come vogliamo noi, dobbiamo stabilirne le dimensioni, ovvero altezza e larghezza che in inglese sono tradotte height e width. Se scrivete queste parole in italiano nel selettore non verranno considerate, pertanto dovremo scrivere:
Naturalmente la parte "dimensione" andrà cambiata con la cifra relativa a tale dimensione mentre la parte px (pixel) dovrete lasciarla così.. Esistono varie unità di misura ma la piu' semplice da apprendere è questa. Esempio: un' immagine chiamata "prova.jpg" viene segnata come 150x34 , quindi andremo a scrivere nella classe:
(Il primo valore nelle dimensioni date è sempre la larghezza)
Se l' immagine si trova in una cartella (esempio ciao) nella folder (cartella) dove c'è il file css scriveremo:
se invece abbiamo per esempio 3 cartelle: quella principale, una chiamata Boh dove si trovano le immagini e una chiamata Ciao dove si trova il file css. Se scrivessimo background-image: url(Boh/prova.jpg) l' immagine non verrebbe trovata, ma dovremo scrivere background-image: url(../Boh/prova.jpg) dove " ../ " sta ad indicare che la cartella "Boh" si trova nella folder principale. Fate molta attenzione alle maiuscole, i codici sono Case Sensitive, ovvero si fanno distinzioni tra maiuscole e minuscole.
Possiamo anche far in modo che un' immagine o div sia alta quanto serve usando "auto;" accanto ad height o width.
MARGINI
Per stabilire la posizione di un selettore esistono i margini, ovvero: margin-left (margine a sinistra), margin-right (margine a destra), margin-top (margine sopra) e margin-bottom (margine sotto). I comandi margin-left e margin-top sono quelli che servono a stabilirne la posizione, mentre margin-bottom e margin-right servono a stabilire la distanza da un oggetto successiva. Esempio: se vogliamo che una classe disti 500px da destra, non scriveremo margin-right: 500px; ma bensì margin-left: 500px . Se avessimo scritto margin-right: 500px; il selettore sarebbe rimasto tutto a sinistra, con l' unica differenza che se ne avessimo messo uno successivo sarebbe stato distante dal precedente di 500px . La stessa cosa funziona con margin-top e margin-bottom .
Esempio pratico:
per accentrare ad esempio un' immagine, possiamo scrivere:
e se lo vogliamo accentrato nella pagina, sia in altezza che in larghezza scriveremo:
GESTIONE DEL TESTO
La gestione del testo è semplice.. Questi sono i comandi principali:
color: serve per gestire il colore del testo, accanto a questa funzione dobbiamo usare i codici esadecimali spiegati all' inizio;
font-size: serve per gestire la grandezza del testo, va espressa in questo modo: dimensionepx;
align: serve per allineare il testo, può essere di tre tipi:
align: left per allineare il testo a sinistra ;
align: center per allineare il testo al centro;
align: right per allineare il testo a destra;
font-weight: serve per scegliere la "pesantezza" visiva del colore. Questo comando si distingue in:
font-weight: bold per rendere il testo grassetto;
font-weight: numero da 100 a 900 per rendere il testo da normale (100) a molto pesante visivamente (900);
font-family: serve per scegliere il font da usare (guarda immagine sotto)
font: per raggruppare tutti i "font" insieme in una riga sola, l' ordine è:
Esempio pratico:
ALTRE INFO
Altri comandi utili sono:
float: left; per far in modo che la classe successiva non vada a capo come succede sempre ma stia sulla stessa linea (quindi accanto) alla precedente;
overflow: auto; (bisogna prima stabilire altezza e larghezza) serve per far in modo che se per esempio abbiamo un' immagine dove andrà del testo, l' immagine non diventerà alta quanto richiesta ma apparirà la scrollbar (barra di scorrimento) a destra per far in modo che bisogna scendere in quell' immagine per leggere il resto del testo.
padding-top: serve per posizionare correttamente il testo (in quanto ad altezza) ad esempio in un' immagine. Solitamente bisogna associare questa funzione con un' altra, ovvero: background: transparent . (Sconsigliata se si mette un' immagine come sfondo, dato che diventerà invisibile)
Esempio pratico:
HOVER
Esistono funzioni chiamate hover che indicano il passaggio del mouse su quella classe. Si possono usare per esempio per cambiare colore del testo, cambiare immagini ecc. Basterà aggiungere :hover accanto al nome del selettore.
Esempio pratico:
In questo modo la classe normalmente ha il testo di colore nero, quando ci passiamo sopra il mouse diventerà rosso.
GUIDA CREATA TOTALMENTE DA ARMADILLO. VIETATA COPIA NON AUTORIZZATA.
Il CSS (Cascading Style Sheets) è un linguaggio che permette di gestire la grafica e posizione degli ogetti relativi ad una pagina web. Si inserisce nell' head di un foglio html, ovvero tra i tag <head> e </head> in questo modo:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Al posto di "nomecss.css" dovrete mettere il nome e la posizione del vostro file css, esempio se si chiama ciao sarà
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
e se si troverà in una cartella chiamata ad esempio
sarà:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Il css è strutturato così:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Esaminiamo nei dettagli cosa abbiamo scritto precendetemente.
.nomeclasse è il nome della classe css che andrete a creare, ricordate di mettere sempre il puntino " . " prima del nome, tranne che per la classe "body" dove non ci sarà nulla davanti.
{ contenuto; } è il contenuto della classe,ovvero i "comandi" che diamo, che andremo a scoprire piu' avanti. Alla fine di ogni comando o stringa va sempre messo il punto e virgola " ; " altrimenti non verrà considerata valida.
Passiamo a scoprire quali sono le funzioni css. Prima di tutto partiamo dalla parte body {} .
Questo selettore serve per stabilire un' immagine o colore di sfondo. Per scegliere un'immagine si usa il comando: background-image: url() dove all' interno delle parentesi tonde accanto ad url andremo ad inserire la posizione dell' immagine, esempio:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Ricordate sempre il punto e virgola. In questo caso se l' immagine è di dimensioni pari o superiori a quelle di una pagina web (1024 x 768) l' immagine resterà così come è, se invece è piu' piccola verrà ripetita secondo dove richiesto, ovvero orizzontale o verticale. L' unica eccezione per far in modo che l' immagine sia ripetuta o non ripetuta quanto vogliamo è stabilirne l' altezza (height) e larghezza (width), questo però lo vedremo dopo.
Se vogliamo che la nostra immagine sia ripetuta solo per orizzontale aggiungeremo sotto a background-image: url(images.png); la stringa background-repeat: repeat-x , quindi sarà:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
oppure in modo piu' semplice possiamo scrivere:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
(abbiamo abolito la parte "-image" e "background-repeat").
Se vogliamo che l' immagine sia ripetuta invece solo per verticale scriveremo:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
o
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
A questo punto vi domanderete: Ma se voglio che l' immagine non si ripeta? Bhè, semplice, scriveremo in questo modo:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
o nell' altro modo semplificando:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Se vogliamo invece scegliere un colore come sfondo scriveremo:
background-color: codice esadecimale del colore;
I codici esadecimali dei colori in HTML li potete trovare cliccando
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
. Sono da prendere in considerazione i codici tra le apici ( " " ), esempio: #FFFFFF che corrisponde al bianco, #FF0000 che corrisponde al rosso, #000000 che corrisponde al nero.Passiamo ora a vedere altre funzioni per le classi che stabiliremo noi, ovvero quelle spiegate prima come .ciao { } .
Come per il selettore body , possiamo scegliere un' immagine o colore di sfondo, come descritto prima, ovvero con background-image: url() o background-color: . Ci sono inoltre altri comdandi relativi al tag "background" come background-attachment: che si distingue in
background-attachment: fixed; che serve a far in modo che quello specifico elemento resti fisso e non si sposti mentre la pagina scorre dietro (si può scrivere anche: position: fixed; );
background-attachment: scroll; (se volete che sia scroll potete anche non scriverlo) che serve per lasciare l' elemento scorrevole con la pagina.
HEIGHT E WIDTH
Come spiegato prima, per far in modo che un' immagine sia come vogliamo noi, dobbiamo stabilirne le dimensioni, ovvero altezza e larghezza che in inglese sono tradotte height e width. Se scrivete queste parole in italiano nel selettore non verranno considerate, pertanto dovremo scrivere:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Naturalmente la parte "dimensione" andrà cambiata con la cifra relativa a tale dimensione mentre la parte px (pixel) dovrete lasciarla così.. Esistono varie unità di misura ma la piu' semplice da apprendere è questa. Esempio: un' immagine chiamata "prova.jpg" viene segnata come 150x34 , quindi andremo a scrivere nella classe:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
(Il primo valore nelle dimensioni date è sempre la larghezza)
Se l' immagine si trova in una cartella (esempio ciao) nella folder (cartella) dove c'è il file css scriveremo:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
se invece abbiamo per esempio 3 cartelle: quella principale, una chiamata Boh dove si trovano le immagini e una chiamata Ciao dove si trova il file css. Se scrivessimo background-image: url(Boh/prova.jpg) l' immagine non verrebbe trovata, ma dovremo scrivere background-image: url(../Boh/prova.jpg) dove " ../ " sta ad indicare che la cartella "Boh" si trova nella folder principale. Fate molta attenzione alle maiuscole, i codici sono Case Sensitive, ovvero si fanno distinzioni tra maiuscole e minuscole.
Possiamo anche far in modo che un' immagine o div sia alta quanto serve usando "auto;" accanto ad height o width.
MARGINI
Per stabilire la posizione di un selettore esistono i margini, ovvero: margin-left (margine a sinistra), margin-right (margine a destra), margin-top (margine sopra) e margin-bottom (margine sotto). I comandi margin-left e margin-top sono quelli che servono a stabilirne la posizione, mentre margin-bottom e margin-right servono a stabilire la distanza da un oggetto successiva. Esempio: se vogliamo che una classe disti 500px da destra, non scriveremo margin-right: 500px; ma bensì margin-left: 500px . Se avessimo scritto margin-right: 500px; il selettore sarebbe rimasto tutto a sinistra, con l' unica differenza che se ne avessimo messo uno successivo sarebbe stato distante dal precedente di 500px . La stessa cosa funziona con margin-top e margin-bottom .
Esempio pratico:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
per accentrare ad esempio un' immagine, possiamo scrivere:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
e se lo vogliamo accentrato nella pagina, sia in altezza che in larghezza scriveremo:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
GESTIONE DEL TESTO
La gestione del testo è semplice.. Questi sono i comandi principali:
color: serve per gestire il colore del testo, accanto a questa funzione dobbiamo usare i codici esadecimali spiegati all' inizio;
font-size: serve per gestire la grandezza del testo, va espressa in questo modo: dimensionepx;
align: serve per allineare il testo, può essere di tre tipi:
align: left per allineare il testo a sinistra ;
align: center per allineare il testo al centro;
align: right per allineare il testo a destra;
font-weight: serve per scegliere la "pesantezza" visiva del colore. Questo comando si distingue in:
font-weight: bold per rendere il testo grassetto;
font-weight: numero da 100 a 900 per rendere il testo da normale (100) a molto pesante visivamente (900);
font-family: serve per scegliere il font da usare (guarda immagine sotto)
font: per raggruppare tutti i "font" insieme in una riga sola, l' ordine è:
Esempio pratico:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
ALTRE INFO
Altri comandi utili sono:
float: left; per far in modo che la classe successiva non vada a capo come succede sempre ma stia sulla stessa linea (quindi accanto) alla precedente;
overflow: auto; (bisogna prima stabilire altezza e larghezza) serve per far in modo che se per esempio abbiamo un' immagine dove andrà del testo, l' immagine non diventerà alta quanto richiesta ma apparirà la scrollbar (barra di scorrimento) a destra per far in modo che bisogna scendere in quell' immagine per leggere il resto del testo.
padding-top: serve per posizionare correttamente il testo (in quanto ad altezza) ad esempio in un' immagine. Solitamente bisogna associare questa funzione con un' altra, ovvero: background: transparent . (Sconsigliata se si mette un' immagine come sfondo, dato che diventerà invisibile)
Esempio pratico:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
HOVER
Esistono funzioni chiamate hover che indicano il passaggio del mouse su quella classe. Si possono usare per esempio per cambiare colore del testo, cambiare immagini ecc. Basterà aggiungere :hover accanto al nome del selettore.
Esempio pratico:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
GUIDA CREATA TOTALMENTE DA ARMADILLO. VIETATA COPIA NON AUTORIZZATA.
