Scribd
Carica
258 visualizzazioni

Manuale Css

Caricato da

Santino D'Amico
Copyright
© Attribution Non-Commercial (BY-NC)
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
258 visualizzazioni

Manuale Css

Caricato da

Santino D'Amico
Copyright
© Attribution Non-Commercial (BY-NC)
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
Sei sulla pagina 1/ 6

WWW.ICTIME.

ORG

CSS
Manuale introduttivo al linguaggio CSS

Cimini Simonelli - Testa

v.1 12/01/2008

Sommario
Introduzione ...................................................................................................................................................... 3 Fogli di stile interni ............................................................................................................................................ 3 Fogli di stile esterni ............................................................................................................................................ 4 Classi .................................................................................................................................................................. 4 Applicare colori e gestire sfondi ........................................................................................................................ 5 Formattare i testi ............................................................................................................................................... 6 Formattare i link ................................................................................................................................................ 6

ICTime.org Manuale CSS - Questo manuale utilizza la Creative Commons License

Introduzione
Programmando in HTML siamo costretti a formattare ogni singolo elemento separatamente. Se, ad esempio, il nostro documento HTML contiene venti paragrafi (<p>) siamo costretti ad impostare la formattazione dei paragrafi singolarmente, uno alla volta. Grazie ai fogli di stile CSS possibile creare un file esterno che contiene la formattazione del paragrafo e poi collegarlo alla pagina HTML. Se abbiamo dieci pagine HTML che compongono il nostro sito web sufficiente collegarle al foglio di stile e tutte avranno lo stesso stile per i paragrafi. Un altro vantaggio legato alleventuale necessit di modificare la formattazione del paragrafo. Sar sufficiente modificare il foglio di stile CSS e tutte le pagine ad esso collegate si modificheranno automaticamente. Ovviamente i fogli di stile non si limitano alla formattazione dei paragrafi, nel corso della guida analizzeremo le funzionalit pi popolari.

Fogli di stile interni


Nellintroduzione abbiamo parlato dei fogli di stile esterni, ma esiste anche la possibilit di specificare una formattazione specifica allinizio della pagina HTML, formattazione che sar richiamata nel documento ogni qual volta ne avremo bisogno. Vediamo un esempio che imposta, per i paragrafi <p>, il colore del carattere a verde : <html> <head> <title>CSS ICTime.org</title> <style type=text/css> p { color:#006600; } </style> <body> <p>Testo del paragrafo di colore verde</p> </body> </html>

Tutti i paragrafi della pagina HTML avranno il testo di colore verde.

ICTime.org Manuale CSS - Questo manuale utilizza la Creative Commons License

Fogli di stile esterni


Per creare un foglio di stile esterno sar necessario creare un file con estensione .css Nellesempio che segue otterremo lo stesso risultato del precedente esempio, ma utilizzando un foglio di stile esterno. Contenuto del file stile.css p { color:#006600 } Contenuto del file prova.html <html> <head> <title>CSS ICTime.org</title> <link rel=stylesheet type=text/css href=stile.css> <body> <p>Testo del paragrafo di colore verde</p> </body> </html>

Classi
Negli esempi visti finora risulta evidente come le impostazioni di un elemento nel file css, si riflettono in tutti gli elementi del file HTML. Se ad esempio abbiamo impostato per lelemento <p> il colore del carattere a verde, tutti i paragrafi <p> dei file HTML collegati al css avranno il carattere di colore verde. E se volessimo creare un paragrafo con il testo di colore rosso ! Questo un limite che stato superato con le classi. Vediamo un esempio: Contenuto del file stile.css: p { color:#006600; } p.rosso { color:#FF0000; }

ICTime.org Manuale CSS - Questo manuale utilizza la Creative Commons License

Contenuto del file prova.html <html> <head> <title>CSS ICTime.org</title> <link rel=stylesheet type=text/css href=stile.css> <body> <p>Testo del paragrafo di colore verde</p> <p class=rosso>Testo del paragrafo di colore rosso</p> </body> </html> Nel primo paragrafo il testo sar di colore verde, mentre nel secondo il paragrafo <p> grazie alla classe p.rosso il carattere sar rosso. anche possibile creare classi generiche, cio non associate ad un elemento in particolare. Questo ci consente di applicare una classe a pi elementi. Per creare una classe generica sufficiente utilizzare il punto seguito dal nome della classe: Vediamo due esempi: Classe: p.rosso { color:#FF0000; } Classe generica: .rosso { color:#FF0000; }

Applicare colori e gestire sfondi


Negli esempi proposti finora abbiamo visto solo come modificare il colore del carattere nel paragrafo. Ora vediamo come modificare anche il colore di sfondo e come inserire unimmagina di sfondo. color: per impostare il colore del carattere (es. color: #006600; per impostare il colore verde) ; background: per impostare un colore di sfondo (es. background: #006600; per impostare il colore verde): background-image: per impostare unimmagine di sfondo (es. background-image: url(sfondo.jpg);) background-repeat: per ripetere unimmagine utilizzata come sfondo. Questo comando ammette tre valori: repeat-x per ripetere limmagine in orizzontale; repeat-y per ripetere limmagine in verticale; no-repeat per non ripetere limmagine (es. background-repeat: no-repeat;) 5 ICTime.org Manuale CSS - Questo manuale utilizza la Creative Commons License

background-position: per indicare la posizione dellimmagine nella pagina (es. background-position:20px 10px; in questo caso limmagine verr posizionata a 20 pixel dal margine superiore della pagina e a 10 pixel dal margine sinistro). Vediamo un esempio che racchiude tutti i comandi: body { color: #000000; background: #006600; background-image: url(sfondo.jpg); background-repeat: repeat-x; }

Formattare i testi
I comandi per formattare il testo sono i seguenti: font-size per impostare la dimensione del testo (es. font-size:10px;) font-family per impostare il tipo di font (es. font-family:verdana;) font-style per impostare lo stile del carattere. Ammette i seguenti valori, italic per corsivo, bold per grassetto e normal per impostare il testo con lo stile di default. (es. font-style:bold;) text-decoration per impostare una sottolineatura. Accetta i valori underline per la sottolineatura bassa e overline per la sottolineatura alta. (es. text-decoration:underline;) text-align per impostare lallineamento orizzontale. Ammette i valori left per sinistra, center per centro e right per destra (es. text-align:center;) vertical-align per impostare lallineamento verticale. Ammette i valori bottom per basso, middle per centro e top per alto. (es. vertical-align:top;) letter-spacing per impostare la spaziatura tra le lettere. (es. letter-spacing:10px:) word-spacing per impostare la spaziatura tra le parole. (es. word-spacing:10px;) line-height per impostare linterlinea (es. line-height: 10px;)

Formattare i link
Vediamo come modificare il formato dei link nei vari stati utilizzando il linguaggio css: a per modificare il formato iniziale del link, a:hover per modificare il formato del link al passaggio del mouse, a:active per modificare il formato del link al clic del mouse, a:visited per modificare il formato del link gi visitato. 6 ICTime.org Manuale CSS - Questo manuale utilizza la Creative Commons License

Potrebbero piacerti anche