indice pag. sintassi e proprietà -...

CSS : Proprietà ed esempi

- 1 - In virtù delle leggi sul copyright e del diritto d’autore italiane ed internazionali, vi invitiamo a limitare l'utilizzo del materiale contenuto in questa dispensa ad un solo uso personale con scopi esclusivamente didattici e non commerciali. Le parti indicate con un link ad un sito si riferiscono a pagine di altri autori che, come tali, ne detengono i diritti.

Indice pag.

Sintassi e proprietà

Introduzione ai CSS 3

Struttura di un foglio di stile 4

I selettori 6

Classi e ID 14

Unità di misura 16

Il box model 17

Proprietà CSS per il testo 20

Proprietà CSS dei Font 22

Proprietà CSS per lo sfondo 24

Proprietà CSS per i bordi 27

Proprietà CSS Margin 31

Proprietà CSS di Padding 32

Proprietà CSS di Dimensione 33

Inserimento dei fogli di stile in un documento 34

Ordine di inserimento 41

Vari 18

Esempi di tabelle realizzate con i CSS 43

Link con i CSS 47

Esempi di link con i CSS 50

Menù rullover con CSS 55

Esempio di homepage con menù rullover 56

Il tag <SPAN> 59

Utilizzo del tag <SPAN> per impostare il layout di una pagina 60

Layout a due colonne con posizionamento assoluto (con <SPAN>)

62

Form

Esempi di form con i CSS 65



Esempio di form realizzato con i CSS 74

Form realizzato con CSS inline 75

Form realizzato con CSS interni 78

Form realizzato con CSS esterni 80

Riepilogo proprietà CSS 83



Introduzione ai CSS (dal sito www.risorse.net)

Il Web, ai tempi della sua nascita, doveva preoccuparsi maggiormente ai contenuti che

portava, piuttosto che allo stile con il quale esso veniva presentato. L'HTML vista la sua facilità, era, ed ancora è, un partner fondamentale per creare qualunque

Web site. E proprio la sua forza maggiore, è diventata, in questo ultimo periodo, il suo difetto più fastidioso.

Quando infatti, il grande pubblico ha cominciato ad accorgersi dell'esistenza della rete, le limitazioni di HTML sono diventate una sorta di frustazione per chi, soprattutto professionista del web publishing, si è dovuto trovare di fronte a limiti statici, aggirabili solamente con espedienti di natura tutt’altro che stilistica, come le tabelle per il layout, le immagini bianche per gli spazi vuoti, la conversione del testo in immagini e quant'altro.

Questi ingombranti aggiustamenti, sono sfociati nella nascita di estensioni di HTML, quali Javascript, Vb Script e infine i Cascade Style Sheets, che in italiano significa Fogli di stile a cascata. A cascata, perchè esistono delle regole gerarchiche tra i vari Css (l'acronimo usato per richiamarli) incorporati in un documento.

Con l'uso dei Css si è finalmente aumentato lo stile delle pagine Web. Un normale documento Html unisce insieme contenuti, struttura e stile.

Si provi, infatti, a richiamare una normale riga di testo con font verdana, grandezza 3 e colore blu.

<FONT FACE=VERDANA SIZE=3 COLOR=BLUE>Testo comune</FONT>

come si può vedere, il contenuto (Testo comune) e' accluso allo stile (font, size e color). Se, si

volesse modificare il font di un sito formato da 300 documenti, l'operazione, oltre che lunga,

potrebbe risultare estenuante.

I CSS pongono rimedio a questo problema perchè separano il contenuto dalla presentazione.

Il contenuto è nella pagina html, mentre la presentazione è riservata ai fogli di stile. Fin qui tutto bene, il problema e' dato dal fatto che solo l'ultima generazione dei browser è

compatibile con i Css, e questo potrebbe essere uno dei talloni di achille di questa nuova tecnologia.

Infatti, se si entrasse in una pagina scritta grazie al contributo dei fogli di stile, con un browser non compatibile (quale Navigator 3), si vedrebbero i contenuti mostrati con le impostazioni di default del browser: sfondo bianco o grigio, testo nero con font Times New Roman e grandezza pari a 3.

Su questo inconveniente conviene soprassedere per il semplice motivo che sia Explorer 4-

5, sia Netscape 4, sono gratuiti e quindi, sono le persone meno al passo con i tempi che si devono aggiornare.

Un'ultima considerazione la meritano i browser pienamente compatibili con i Css. Nonostante siano stati approvati da il W3C (il consorzio per il Web), solo Explorer 4 e superiori ne sfruttano al meglio le capacità. Navigator 4 e Explorer 3 invece ne interpretano solo una parte, mentre tutti gli altri, quali Navigator 3 e Opera 3.5, non ne apprezzano le potenzialità.



Struttura di un foglio di stile (dal sito www.html.it)

Un foglio di stile è un insieme di regole, accompagnate, volendo, da qualche nota di commento.

Com'è fatta una regola

L'illustrazione mostra la tipica struttura di una regola CSS. Essa è composta da due blocchi principali:

il selettore il blocco delle dichiarazioni

Il selettore serve a definire la parte del documento cui verrà applicata la regola. In questo caso, ad esempio, verranno formattati tutti gli elementi <H1>: lo sfondo sarà rosso, il colore del testo bianco.

Il blocco delle dichiarazioni è delimitato rispetto al selettore e alle altre regole da due parentesi graffe. Al suo interno possono trovare posto più dichiarazioni. Esse sono sempre composte da una coppia:

proprietà valore

La proprietà definisce un aspetto dell'elemento da modificare (margini, colore di sfondo, etc) secondo il valore espresso. Proprietà e valore devono essere separati dai due punti. Una limitazione fondamentale da rispettare è questa: per ogni dichiarazione non è possibile indicare più di una proprietà, mentre è spesso possibile specificare più valori. Questa regola è pertanto errata:

body {color background: black;} Mentre questa è perfettamente valida e plausibile: p {font: 12px Verdana, arial;} Se in un blocco si definiscono più dichiarazioni, come nell'esempio mostrato in figura, esse

vanno separate dal punto e virgola. Il linguaggio non impone che si metta il punto e virgola dopo l'ultima dichiarazione, ma alcuni browser più datati lo richiedono: è consigliabile aggiungerlo sempre per sicurezza e per una maggiore compatibilità.

Gli spazi bianchi lasciati all'interno di una regola non influiscono sul risultato. Il consiglio, anzi, è di lasciare sempre uno spazio tra le varie parti per una migliore leggibilità.



Commenti

Per inserire parti di commento in un CSS si deve racchiudere tra questi segni:

/* come segno di apertura */ come segno di chiusura

Proprietà singole e a sintassi abbreviata

Nelle definizione delle regole è possibile fare uso di proprietà singole e proprietà a

sintassi abbreviata (shorthand properties). Le proprietà singole sono la maggior parte: impostano per un dato elemento o selettore un

singolo aspetto. Con le proprietà a sintassi abbreviata è possibile invece definire con una sola dichiarazione un insieme di proprietà. Esempio :

Ogni elemento presenta sui suoi quattro lati un certo margine rispetto a quelli adiacenti. È possibile definire per ciascuno di essi un valore usando quattro proprietà singole separate:

margin-top margin-right margin-bottom margin-left

La regola sarebbe questa:

p { margin-top: 10px; margin-right: 5px; margin-bottom: 10px; margin-left: 5px; }

Lo stesso risultato si può ottenere usando la proprietà a sintassi abbreviata margin:

p {margin: 10px 5px 10px 5px;}

Il contenitore div

La sua definizione è generic block-level element ossia contenitore generico block level. Il fatto che sia un elemento block-level ci garantisce il fatto che possa contenere qualsiasi tipo di elemento html. Inoltre, la sua presentazione naturale (quindi senza fogli di stile) è totalmente neutra: infatti questo elemento si presenta di default senza margini, bordi o padding. È quindi il contenitore per eccellenza per realizzare layout senza l'uso di tabelle: ad ogni div portante verrà associata una sezione della pagina.



I selettori (dal sito www.html.it)

La parte preponderante della specifica CSS2 è dedicata all'analisi delle diverse proprietà in grado di definire l'aspetto visuale di elementi e sezioni di una pagina. Prima di tutto, però, è fondamentale capire come e a cosa queste proprietà possono essere assegnate.

Fondamentalmente una regola CSS viene applicata ad un selettore. La parola parla da sé: si tratta di una semplice dichiarazione che serve a selezionare la parte o le parti di un documento soggette ad una specifica regola. Quella che segue è una lista commentata dei vari tipi di selettore.

Selettore di elementi (type selector)

È il più semplice dei selettori. È costituito da uno qualunque degli elementi di HTML.

Sintassi

h1 {color: red;} p {background: white; font: 12px Verdana, arial, sans-serif;} table {width: 200px;}

Raggruppare

È possibile nei CSS raggruppare diversi elementi al fine di semplificare il codice. Gli elementi raggruppati vanno separati da una virgola.

Il raggruppamento è un'operazione molto conveniente. Si pensi a questo caso:

h1 {background: white;} h2 {background: white;} h3 {background: white;}

Tutti e tre gli elementi hanno uno sfondo bianco. Invece di scrivere tre regole separate si può scrivere nel seguente modo::

h1, h2, h3 {background: white;}

Selettore universale (universal selector)

Anche nei CSS abbiamo un jolly. Il selettore universale serve a selezionare tutti gli elementi

di un documento. Si esprime con il carattere * (asterisco).

Sintassi

*{ color: black; }



Selettore delle classi (class selectors) (da [email protected] - www.asbafo.net)

I selettori delle classi sono molto usati nei fogli di stile. Nel seguente esempio si può notare che è possibile assegnare, per esempio, colori differenti

a ciascun tipo di elemento e, quindi, assegnando il colore verde ai Titoli (tag <h1>, <h2>, <h3>) tutti i titoli assumeranno quella colorazione.

<html> <head> <title>CSS</title> <style type="text/css"> h1 {color:green;} h2 {color:blue;} h3 {color:red} </style </head> <body> <h1>Primo titolo H1 in verde</h1> <h2>Primo titolo H2 in blu</h2> <h3>Primo titolo H3 in rosso</h3> <h1>Secondo titolo H1 in verde</h1> <h2>Secondo titolo H2 in blu</h2> <h3>Secondo titolo H3 in rosso</h3> </body> </html>



Ma se rivolesse che intestazioni dello stesso livello, cioè sempre comprese tra i tag <h1>, avessero colori differenti tra loro si deve ricorrere alle classi.

Quando si definisce una classe si DEVE farne precedere il nome da un punto ( . ) : .nome_della_classe

Le classi, inserite all'interno di un tag HTML, modificano gli attributi del testo incluso in esso, indipendentemente dalle impostazioni generali del foglio di stile: in altre parole sono prioritarie.

Il nome della classe si può modificarlo come meglio si crede, non deve necessariamente coincidere con

il colore, come nell'esempio proposto. Le tre classi avrebbero potuto avere i seguenti nomi :

.coloreuno

.coloredue

.coloretre

ed il risultato sarebbe stato identico, ovviamente cambiando il nome di riferimento anche all'interno dei tag <h1>, <h2> ed <h3>.

<html> <head> <title>CSS</title> <style type="text/css"> .verde { color:green;} .blu { color:blue;} .rosso { color:red;} </style> </head> <body> <h1 class="verde">Il titolo è in verde</h1> <h1 class="blu">Il titolo è in blu</h1> <h1 class="rosso">Il titolo è in rosso</h1> </body> </html>



Una volta definita una classe, questa può essere impiegata in tag differenti di una pagina HTML, come si può verificare nel seguente esempio :

<html> <head> <title>CSS</title> <style type="text/css"> body { background:#FFFF99;} .verde { color:green; background:#FFFF99} .blu { color:blue; background:#FFFF99} .rosso { color:red; background:#FFFF99} </style> </head> <body> <h1 class="verde">Il titolo è in verde</h1> <h1 class="rosso">Il titolo è in rosso</h1> <h1 class="blu">Il titolo è in blu</h1> <em class="verde">La scritta in corsivo è in verde</em><br> <em class="rosso">La scritta in corsivo è in rosso</em><br> <em class="blu">La scritta in corsivo è in blu</em> <p class="verde">Il paragrafo normale è in verde</p> <p class="rosso">Il paragrafo normale è in rosso</p> <p class="blu">Il paragrafo normale è in blu</p> </body> </html>



Le classi possono anche essere assegnate ad un unico elemento di stile come nel seguente esempio:

Nota : il primo titolo è di colore nero perché, non essendo definito nessuno stile per i Titoli

in generale, prende il colore predefinito per il testo dal foglio di stile ovvero color:#000000 che equivale al nero.

<html> <head> <title>CSS</title> <style type="text/css"> body { background:#FFFF99; } h1.verde { color:green; background:#FFFF99 } </style> </head> <body> <h1>Questo titolo non è verde</h1> <h1 class="verde">Questo titolo è verde</h1> </body> </html>



Un selettore di classe definito con la sintassi di base :

.nome_della_classe

può, come già visto, essere applicato a tutti gli elementi di un documento (X)HTML. Esiste un secondo tipo di sintassi:

<elemento>.nome_della_classe

Esso è più restrittivo rispetto alla sintassi generica. Se infatti definiamo questa regola:

p.testorosso {color: red;}

lo stile verrà applicato solo ai paragrafi che presentino l'attributo class="testorosso". Anche qui è importante stabilire un minimo di strategia. Il secondo tipo di sintassi va usato solo se si pensa di applicare una classe ad uno specifico tipo di elemento (solo paragrafi o solo div, e così via). Se invece si ritiene di doverla applicare a tipi diversi conviene usare la sintassi generica.

<html> <head> <title>CSS</title> <style type="text/css"> p.testorosso {color: red;} </style> </head> <body> <p class="testorosso">Questo paragrafo ha il testo rosso</p> <p>Questo paragrafo non ha il testo rosso</p> </body> </html>



Una terza possibile modalità è quella che prevede la dichiarazione di classi multiple:

p.testorosso.grassetto {color:red; font-weight:bold;}

Questa regola applicherà gli stili impostati a tutti gli elementi in cui siano presenti (in qualunque ordine) i nomi delle classi definiti nel selettore. Avranno dunque il testo rosso e in grassetto questi paragrafi:

<p class="grassetto testorosso maiuscolo">..</p> <p class="testorosso grassetto">...</p>

ma non questo, perchè solo uno dei nomi è presente come valore di class:

<p class="testorosso">...</p>

<html> <head> <title>CSS</title> <style type="text/css"> p.testorosso.grassetto {color:red; font-weight:bold;} p.maiuscolo{font-variant: small-caps;} </style> </head> <body> <p class="grassetto testorosso maiuscolo">Testo in rosso, grassetto e maiuscolo</p> <p class="testorosso grassetto">Testo in rosso e grassetto</p> <p class="testorosso">Testo non formattato</p> </body> </html>



Selettore delle identità (ID selectors) (da [email protected] - www.asbafo.net)

Un altro selettore speciale, oltre alle classi, è il selettore delle identità (ID selectors). Le caratteristiche sono sempre le stesse e ciò che vale per le classi vale anche per i selettori. L'unica differenza sostanziale è nella sintassi del comando che, anziché avere un punto prima del nome della classe, ha una celletta # e nel fatto che un selettore di identità può essere inserito una volta sola in ogni documento (ovviamente si possono inserire selettori aventi nomi diversi).

Si consideri un esempio già visto precedentemente :

Lo stesso risultato si può ottenere con i selettori ID :

Attenzione a cambiare riferimento anche all'interno dei relativi tag HTML: non più class, ma id

<html> <head> <title>CSS</title> <style type="text/css"> #verde { color:green;} #blu { color:blue;} #rosso { color:red;} </style> </head> <body> <h1 id="verde">Il titolo è in verde</h1> <h1 id="blu">Il titolo è in blu</h1> <h1 id="rosso">Il titolo è in rosso</h1> </body> </html>



Classi e ID (dal sito www.html.it)

Si supponga di assegnare ad un paragrafo l’attributo class="formattatesto" :

Si ottiene un paragrafo formattato secondo le impostazioni definite nella classe : testo rosso, carattere verdana, in grassetto, corsivo, dimensione di 20px :

Lo stesso risultato si può ottenere, come già visto, con i selettori di tipo ID.

<html> <head> <title>CSS</title> <style type="text/css"> .formattatesto{ font: 20px verdana; font-weight:bold; font-style: italic; color:red;} </style> </head> <body> <p class="formattatesto">Formattazione paragrafo</p> </body> </html>

<html> <head> <title>CSS</title> <style type="text/css"> #formattatesto{ font: 20px verdana; font-weight:bold; font-style: italic; color:red;} </style> </head> <body> <p id="formattatesto">Formattazione paragrafo</p> </body> </html>



La fondamentale differenza fra classi ed ID riguarda l’uso che viene fatto dell’attributo id in

un documento (X)HTML. In un documento (X)HTML l'attributo id è usato per identificare in modo univoco un

elemento. In pratica, se si assegna ad un paragrafo l'id "formattatesto", non si può più usare questo valore nel resto della pagina. Di conseguenza, l'ID #formattatesto dichiarato nel CSS trasformerà solo quel paragrafo specifico. Una singola classe, al contrario, può essere assegnata a più elementi, anche dello stesso tipo.

In un documento si può avere senza problemi questa situazione:

<p class="testorosso">....</p> <div class="testorosso">....</div> <table class="testorosso">...</table> <p class="testorosso">....</p>

La classe .testorosso presente nel CSS formatterà allo stesso modo il testo dei paragrafo, del div e della tabella.

Ma non questa:

<p id="testorosso">....</p> <div id="testorosso">...</div>

Una classe consente di superare le limitazioni intrinseche nell'uso di un selettore di elementi. Se si impone questa regola:

p {color: red;}

tutti i paragrafi della pagina avranno il testo rosso. E se si volesse diversificare? Avere, ad esempio, anche paragrafi con il testo nero? Si sarebbe prigionieri della regola iniziale. Per risolvere l’inconveniente è sufficiente scrivere due classi, una per il rosso e una per il nero, e le si applicano di volta in volta secondo le necessità.

La strategia dovrà dunque essere questa : se uno stile va applicato ad un solo specifico elemento conviene usare un ID, se invece si prevede di usarlo più volte ovvero su più elementi conviene definire nel CSS una classe.



Unità di misura (dal sito www.risorse.net)

A differenza di HTML, che usa 3 soli sistemi di attribuzione delle grandezze (per il size di un

font usa una unità di misura che va da 1 a 7, per le tabelle invece o i pixel o le percentuali

mentre per le immagini i pixel), i CSS possono utilizzare varie grandezze, tutte definibili su

qualsiasi elemento.

E’ necessario distinguere categoricamente, i due grandi tipi di lunghezze: relative e assolute.

Al primo gruppo, appartengono:

px (pixel - relativo alla risoluzione dello schermo)

ex (rappresenta la grandezza della lettera x)

em (rappresenta la grandezza della lettera m)

percentuale (viene rappresentato da un numero seguito senza spazi dal segno "%". Si riferisce di solito ad altri valori ad es. la risoluzione video).

Al secondo gruppo invece appartengono:

cm (centimetri)

in (inches - 2,54 centimetri)

pt (rappresenta un punto, che equivale a 1/72 in)

mm (millimetri)

pc (picas - equivale a 12 pt)

La seguente tabella converte il normale size Html in punti CSS.

size font-size

1 8pt

2 10pt

3 12pt

4 14pt

5 18pt

6 24pt

7 36pt



Il box model (dal sito www.html.it)

Se si vuole usare i CSS per scopi che vadano oltre la semplice gestione di sfondo e testo si deve avere ben chiaro il meccanismo che governa la presentazione dei vari elementi di una pagina. Una pagina (X)HTML non è altro che un insieme di box rettangolari, che si tratti di elementi blocco o di elementi inline non fa differenza. Tutto l'insieme di regole che gestisce l'aspetto visuale degli elementi blocco viene in genere riferito al cosiddetto box model.

Ogni box comprende un certo numero di componenti di base, ciascuno modificabile con proprietà dei CSS. La figura qui sotto mostra visivamente tali componenti:

Partendo dall'interno si ha:

l'area del contenuto. E' la zona in cui trova spazio il contenuto vero e proprio, testo, immagini, animazioni Flash. Le dimensioni orizzontali dell'area possono essere modificate con la proprietà width. Quelle verticali con height.

il padding. E' uno spazio vuoto che può essere creato tra l'area del contenuto e il bordo dell'elemento. Come si vede dalla figura, se si imposta un colore di sfondo per un elemento questo si estende dall'area del contenuto alla zona di padding.

il bordo. E' una linea di dimensione, stile e colore variabile che circonda la zona del padding e l'area del contenuto.

il margine. E' uno spazio di dimensioni variabili che separa un dato elemento da quelli adiacenti.

Queste cose non sono state introdotte con i CSS, ma fanno parte del normale meccanismo di rendering di un documento. Quando si realizza una pagina (X)HTML senza fogli di stile è il browser ad applicare per alcune di queste proprietà le sue impostazioni predefinite. Per esempio, introdurrà un certo margine tra un titolo e un paragrafo o tra due paragrafi. La novità è che con i CSS possiamo controllare con precisione al pixel tutti questi aspetti.

Il box model è governato da una serie di regole di base concernenti la definizione di un box e il suo rapporto con gli altri elementi.



1. Larghezza del box

Bisogna distinguere tra la larghezza dell'area del contenuto e la larghezza effettiva di un box . La prima è data dal valore della proprietà width. La seconda è data da questa somma:

margine sinistro + bordo sinistro + padding sinistro + area del contenuto + padding destro + bordo destro + margine destro

Come si vede infatti nella figura margini, padding e bordi devono considerarsi a tutti gli

effetti parte dell'area complessiva dell'elemento. Dall’esempio dovrebbe emergere bene il concetto fondamentale riguardante la larghezza. La

larghezza complessiva dell'elemento, ovvero l'area che occupa sullo schermo, è di 320px. Si calcola così:

margine sin. + padding sin. + bordo sin. + width + padding destro + bordo destro + margine destro

Dunque: 40 + 10 + 10 + 200 + 10 + 10 + 40 = 320

Lo spazio occupato dal box va considerato, in questo caso, dal bordo della finestra fino all''estremo del margine destro.

<html> <head>

<title>CSS</title> <style>

#box1{ background: Silver; border : 10px solid #CC0033; height : 100px; margin : 40px; padding : 10px; width : 200px;}

</style> </head> <body> <div id="box1">Area del contenuto definita da #box1</div> </body>

</html>



2. Larghezza ed elemento contenitore

Se non si imposta alcun valore per la proprietà width o se il valore usato è auto la larghezza di un box è uguale a quella dell'area del contenuto dell'elemento contenitore. Quest'ultimo è l'elemento che racchiude il box. Esempio :

Questo esempio chiarisce bene cosa si intenda per elemento contenitore e come il concetto di larghezza vada sempre rapportato ad esso.

L’estensione del box2, contenuto nel box1, non indicando un valore esplicito per width, sarà uguale automaticamente a quella del box contenitore.

3. Uso del valore auto

Solo per tre proprietà è possibile impostare il valore auto: margini, altezza e larghezza (width). L'effetto è quello di lasciar calcolare al browser l'ammontare di ciascuna di esse in base alla risoluzione dello schermo e alle dimensioni della finestra.

<html> <head> <title>CSS</title> <style>

#box1{ background: Silver; border : 10px solid #CC0033; height : 100px; margin : 10px; width : 200px;} #box2{ background: white; border: 5px solid black;}

</style> </head> <body>

<div id="box1">Area del contenuto di box1 <div id="box2">Area del contenuto di box2

</div> </div> </body> </html>



Proprietà CSS per il testo Con le seguenti proprietà è possibile controllare l’aspetto dei testi di una pagina :

Proprietà Descrizione Valori possibili

color Colore del testo un colore

letter-spacing Lo spazio tra le lettere di ciascuna parola

normal lunghezza (px, em, pt)

text-align Definisce l'allineamento del testo

left right center justify

text-decoration La decorazione del testo none (testo normale) underline (testo sottolineato) overline (testo con una riga sopra) line-through (testo barrato)

text-indent Indenta la prima riga di un paragrafo

lunghezza (definisce una indentazione fissa in pixel) percentuale (in percentuale rispetto all’elemento contenitore)

text-transform Applica delle trasformazioni alle lettere

none (testo normale) capitalize (tutte le parole iniziano con una maiuscola) uppercase (tutto maiuscolo) lowercase (tutto minuscolo)

Esempio :

oppure :

<html> <head> <title></title> <style type="text/css"> p{color:darkred; text-align:center; text-decoration :underline; text-transform:capitalize;text-indent:10px} </style> </head> <body> <p>prova propriet&agrave CSS per il testo</p> </body> </html>



<html> <head> <title></title> </head> <body> <p style="color:darkred; text-align:center; text-decoration :underline; text-transform:capitalize;text-indent:10px"> prova propriet&agrave CSS per il testo </p> </body> </html>



Proprietà CSS dei Font Definiscono il carattere nel testo consentendo di cambiare la famiglia di caratteri, la dimensione ed altro.


font Consente di impostare tutte le proprietà del carattere in una sola dichiarazione, è comodo ma poco leggibile.

font-family Per specificare uno o più font per l'elemento che si vuole caratterizzare.

Nome del font

font-size Imposta la dimensione del carattere in lunghezza o percentuale.

lunghezza percentuale

font-style Imposta lo stile (corsivo, normale) normal italic (testo in corsivo)

font-variant Mostra il carattere normale o maiuscoletto normal small-caps

font-weight Grassetto. Si possono dare dei valori per gradazione di grassetto utilizzando un intervallo da 100 a 900 (con incrementi di 100)

normal lighter bold bolder 100-900

Esempio :

<html> <head> <title></title> <style type="text/css"> p{font-family: verdana; font-size:20px; font-style:italic; font-variant: small-caps; font-weight:bold} </style> </head> <body> <p>prova propriet&agrave CSS per il Font </p> </body> </html>



oppure :

<html> <head> <title></title> </head> <body> <p style="font-family: verdana; font-size:20px; font-style:italic; font-variant: small-caps; font-weight:bold"> prova propriet&agrave CSS per il Font </p> </body> </html>



Proprietà CSS per lo sfondo Tramite la proprietà Background dei CSS, è possibile controllare lo sfondo degli elementi, sia per quanto riguarda i colori sia per quanto riguarda le immagini.

Proprietà Descrizione Valori

background Per impostare tutte le proprietà dello sfondo

background-color Colore di sfondo di un elemento

colore transparent (se lo sfondo è trasparente)

background-image Imposta un’immagine come sfondo

url none (se non si vuole un’immagine di sfondo)

background-position

La posizione dell’immagine top left top center top right center left center center center right bottom left bottom center bottom right

background-repeat

Se un’immagine deve essere ripetuta oppure no

repeat (immagine ripetuta orizzontalmente e verticalmente) repeat-x (immagine ripetuta orizzontalmente) repeat-y (immagine ripetuta verticalmente) no-repeat (l’immagine di sfondo viene visualizzata una sola volta)

Esempio 1:

<html> <head> <title></title> </head> <body style="background-color:red; background-image: url(../media/immagini/space14.jpg); background-position: top left; background-repeat: no-repeat"> </body> </html>



oppure :

Esempio 2:

<html> <head> <title></title> <style type="text/css"> body{background-color:red; background-image: url(../media/immagini/space14.jpg); background-position: top left; background-repeat: no-repeat} </style> </head> <body> </body> </html>

<html> <head> <title></title> <style type="text/css"> body{background-color:red; background-image: url(../media/immagini/space14.jpg); background-position: top left; background-repeat: repeat-x} </style> </head> <body> </body> </html>



con solo codice HTML si ottiene : <body background="../media/immagini/space14.jpg" >



Proprietà CSS per i bordi Le proprietà del bordo consentono di specificare lo stile, il colore e la larghezza di un elemento.


border Per impostare tutte le proprietà

border-width Permette di impostare tutti e quattro i valori di spessore per il bordo

thin (bordo sottile) medium (bordo medio) thick (bordo a strati spesso) spessore del bordo definito in px

border-style Lo stile di tutti i lati del bordo none (nessun bordo) hidden (bordo nascosto) dotted (bordo puntato) dashed (bordo tratteggiato) solid (bordo solido) double (definisce due bordi) inset (incassato) outset (in rilievo) groove (scanalato in basso) ridge (scanalato in alto)

border-color Imposta il colore del bordo per tutti i lati Color



Nota : i bordi di un elemento di possono definire anche separatamente l’uno dall’altro con border-left, border-right, border-bottom e border-top:

<html> <head> <title></title> </head> <body> <p align="center" style="border-style: solid; border-width:5px; border-color: blue red; width:300px; height:30px"> CSS : testo con bordo solido </p> <p align="center" style="border-style: dashed solid; border-width:5px; border-color: blue red; width:300px; height:30px"> CSS : testo con bordi solidi e tratteggiati </p> <p align="center" style="border-style: double; border-width:5px; border-color: red blue yellow green; width:300px; height:30px"> CSS: testo con due bordi e colori diversi </p> <p align="center" style="border-style: inset; border-width:10px; width:300px; height:30px"> CSS : testo con bordo incassato</p> <p align="center" style="border-style: outset; border-width:10px; width:300px; height:30px"> CSS : testo con bordo in rilievo </p> <p align="center" style="border-style: groove; border-width:10px; width:300px; height:30px"> CSS : testo con bordo scanalato in basso</p> <p align="center" style="border-style: ridge; border-width:10px; width:300px; height:30px"> CSS : testo con bordo scanalato in alto</p> </body> </html>

<p align=center style="height: 100px; width:300px; border-left: red double 20px; border-right: yellow solid 10px; border-bottom: green dotted 5px; border-top: magenta inset 10px;"> Esempio di definizione distinta dei bordi</p>



Esempio con tabelle :

<html> <head> <title></title> </head> <body> <table width = "30%" style="border-style: solid; border-width:5px; border-color: blue red;"> <tr><td> testo con bordo solido in CSS </td></tr> </table> <br><br> <table width = "30%" style="border-style: dashed solid; border-width:5px; border-color:red;"> <tr><td> testo con bordi solidi e tratteggiati in CSS </td></tr> </table> <br><br> <table width = "30%" style="border-style: double; border-width:5px; border-color: red blue yellow green;"> <tr><td> testo con due bordi e colori diversi in CSS </td></tr> </table> </body> </html>



Esempio con caselle di testo (text)

<html> <head> <title></title> </head> <body>

<input type=text style="border-style: solid; border-width:5px; border-color: blue red;" size=30> textbox con bordo solido in CSS <br><br> <input type=text style="border-style: dashed solid; border-width:5px; border-color: blue red" size=30> textbox con bordi solidi e tratteggiati in CSS <br><br> <input type=text style="border-style: double; border-width:5px; border-color: red blue yellow green;" size=30> textbox con due bordi e colori diversi in CSS </body> </html>



Proprietà CSS Margin Definiscono lo spazio attorno agli elementi.


margin Per impostare tutti i valori in una volta margin-top margin-right margin-bottom margin-left

margin-top Per impostare il margine in alto auto lunghezza percentuale

margin-right Per impostare il margine a destra auto lunghezza percentuale

margin-bottom Per impostare il margine in basso auto lunghezza percentuale

margin-left Per impostare il margine a sinistra auto lunghezza percentuale

Esempio :

<input type="submit" value="margin-top:100px ; margin-left:50px" style=" margin-top:100px ; margin-left:50px">



Proprietà CSS di Padding Definiscono lo spazio tra il bordo ed il contenuto dell’elemento.


padding Per impostare le quattro proprietà in una sola dichiarazione

padding-top padding-right padding-bottom padding-left

padding-bottom Imposta il padding in basso lunghezza percentuale

padding-left Imposta il padding a sinistra lunghezza percentuale

padding-right Imposta il padding a destra lunghezza percentuale

padding-top Imposta il padding in alto lunghezza percentuale

Esempio :

<input type="submit" value="padding:10px" style="padding:10px;">



Proprietà CSS di Dimensione Consentono di controllare la dimensione degli elementi.

Proprieta Descrizione Valori

height Altezza di un elemento auto lunghezza percentuale

line-height Distanza tra due righe (interlinea)

normal numero lunghezza percentuale

width Larghezza di un elemento auto lunghezza percentuale

<textarea style="height:100px; width: 300px; line-height:2"> </textarea>



Inserimento dei fogli di stile in un documento (dal sito www.risorse.net)

I fogli di stile in un documento si possono inserire in tre modi diversi :

fogli di stile esterni

Questo tipo di fogli di stile, rispecchia pienamente la caratteristica dei Css di divedere lo stile dai contenuti. Essi infatti, sono depositati in un solo file con estensione .css e richiamati con una semplice riga di codice da tutti i documenti HTML a cui fanno riferimento.

Inutile quindi sottolineare il vantaggio che se ne trae dal massiccio uso che se ne può fare. Con un'unica modifica, si potrebbe riflettere su tutto il sito il risultato di tale accorgimento.

Un foglio di stile esterno si può creare semplicemente con il Blocco Note di Win9x/Nt o 2000 o con qualunque editor di testi. Una volta inserito il codice Css occorre salvare il file con estensione .css (per esempio : imposta_form.css)

Una volta eseguite queste operazioni, è necessario richiamare il file contenente il foglio di stile nelle pagine HTML inserrendo tra i tag <HEAD> e </HEAD> la riga:

<LINK REL="stylesheet" TYPE="text/css" HREF="file.css" media=”screen”>

La sintassi di questa riga è la seguente:

Link: indica che c'e' un collegamento Rel: identifica con che tipo di file esiste il collegamento Type: il tipo di formato Href: il percorso del file media (opzionale) : indica il supporto (schermo,stampa,ecc.) cui applicare il foglio di stile

fogli di stile in linea

I fogli di stile in linea, rappresentano una soluzione ottimale per chi volesse attribuire dello stile a uno solo o comunque pochi tags HTML. Il codice CSS è applicato direttamente ai singoli tag html.

Non rappresentano, infatti, la tanto desiderata divisione tra stile e contenuti. Nell'esempio seguente viene mostrato un tipico foglio di stile in linea:

<FONT STYLE="font-family:tahoma; font-size:10pt; color:green">Testo scritto grazie ai Css </FONT> Come si può vedere, l'eloquente promiscuità tra stile e contenuti e fin troppo visibile. Utilizzare normale sintassi Html, in questo caso sarebbe stato uguale, se non considerando il vantaggio della compatibilità con i browser meno recenti. Ecco comunque lo stesso risultato ottenuto con comuni tag Html. <FONT FACE=TAHOMA SIZE=2 COLOR=GREEN>Testo scritto grazie a Html</FONT>



Ecco i risultati dei due codici a confronto :

fogli di stile incorporati o interni

Il foglio di stile è inserito direttamente nella pagina HTML in cui viene utilizzato. I fogli di stile incorporati rappresentano una via di mezzo tra i Css in linea e i Css esterni.

I Cascade Style Sheets incorporati infatti, separano lo stile dai contenuti, ma, essendo acclusi ai tag <HEAD> e </HEAD>, non possono influenzare un intero sito web o anche solo più documenti.

Questi fogli di stile incorporati, come quelli esterni e a differenza di quelli in linea,

racchiudono peculiarità sintattiche che lo distinguono dal comune Html: l'insieme degli attributi e' racchiuso tra "{ }" (si ottegono su Windows premendo Alt+123 e Alt+125), per separare ogni attributo dal suo corrispettivo valore, è usato il segno ":", in caso di più attributi, vengono separati da ";", gli attributi con più termini (come font-size) sono sperati da un "-".

Qui di seguito è riportato un esempio di foglio di stile incorporato:

<HTML> <HEAD> <STYLE TYPE=text/css> P { font-size:15px; font-family:verdana; color:green } FONT { font-size:20px; font-family:arial; color:black } </STYLE> </HEAD> <BODY> <FONT>Esempio scritto con i Css incorporati (di 20px, arial e nero)</FONT> <BR><BR> <P>pagina realizzata con i fogli di stile incorporati (di 15px, verdana e verde) </BODY> </HTML>



la pagina ottenuta è la seguente :

Come si può vedere, i Css incorporati influiscono sui tag a cui fanno riferimento... in questo caso <P> e <FONT>. Naturalmente nessuno ci vieta di assegnare altri fogli di stile a diversi tag, come <Hx>, <TD> o qualsiasi altro. Se si volessero assegnare più valori a più proprietà, basterà indicare nel Css: P, TD { font-face: arial; font-size: 10pt } In pratica, se volessimo unire tag che abbiano gli stessi valori, basterà indicarli nello stesso foglio di stile, sperati da una virgola. Gli stessi valori invece, vengono separati da un punto e virgola. Questo, vale anche per i Css esterni. In conclusione: l'attributo text/css del tag <STYLE> puo' essere omesso e riguarda il formato (MIME) del foglio di stile appena specificato. Sia Explorer che Netscape sono compatibili con questo formato. Un altro formato, è text/jass e riguarda i Css in Javascript.



Esempio 1

Il form in figura, contenente un solo elemento, può essere realizzato nei tre modi indicati precedentemente :

inline : il codice CSS è applicato direttamente al singolo tag html.

interni : il foglio di stile è inserito direttamente nella pagina HTML in cui viene utilizzato.

<html> <head>

<title>CSS</title> </head> <body> <form> <input type="submit" name="cmdInvia" value="Invia"

style="color:black; text-align:center; font-family: Verdana; font-size:15px; font-weight:bold;

background-color:lime; border: 5px solid; border-color: purple orange orange purple; margin: 10px;padding:5px; width:100px; height:40px; "> </form>

</body> </html>

<html> <head> <title>CSS</title> <style type="text/css">

input{ color:black; text-align:center; font-family: Verdana; font-size:15px; font-weight:bold;

background-color:lime; border: 5px solid; border-color: purple orange orange purple; margin: 10px;padding:5px; width:100px; height:40px;} </style> </head> <body> <form <input type="submit" name="cmdInvia" value="Invia"> </form> </body> </html>



esterni : il codice CSS è inserito in un file esterno alla pagina e referenziato con il tag <link>

il file esterno impostazioni_form.css contiene il seguente codice CSS :

Esempio 2

<html> <head> <title>CSS</title> <link rel="stylesheet" type="text/css" href="scriptesterni/impostazioni_form.css" media="screen"/> </head> <body> <form> <input type="submit" name="cmdInvia" value="Invia"> </form> </body> </html>

/* CSS Document */ input{ color:black; text-align:center;

font-family: Verdana; font-size:15px; font-weight:bold; background-color:lime;

border: 5px solid; border-color: purple orange orange purple; margin: 10px;padding:5px;

width:100px; height:40px;}



con fogli di stile inline

con fogli di stile interni

con fogli di stile esterni il file esterno file.css contiene il seguente codice CSS :

<html> <head> <title>CSS</title> </head> <body> <h1 style="color: green;font-family: Verdana;"> Il titolo è verde, verdana</h1> <p style="color: red;font-family: comic sans ms;font-style:italic; font-size:15px;"> Il testo normale è rosso, comic sans ms, corsivo, 15px</p> </body> </html>

<html> <head> <title>CSS</title> <style type="text/css"> h1{color: green;font-family: Verdana;} p{color: red;font-family: comic sans ms;font-style:italic; font-size:15px;} </style </head> <body> <h1>Il titolo è verde, verdana</h1> <p>Il testo normale è rosso, comic sans ms, corsivo, 15px</p> </body> </html>

<html> <head> <title>CSS</title> <link rel="stylesheet" type="text/css" href="scriptesterni/file.css" media="screen"/> </head> <body> <h1>Il titolo è verde, verdana</h1> <p>Il testo normale è rosso, comic sans ms, corsivo, 15px</p> </body> </html>

/* CSS Document */ h1{color: green;font-family: Verdana;} p{color: red;font-family: comic sans ms;font-style:italic; font-size:15px;}



Esempio 3

Il seguente esempio mostra come sia possibile raggruppare anche elementi di stile comuni tra di loro. Se si volesse, ad esempio, tutti i titoli in giallo e tutte le scritte in corsivo in blu, si potrebbero raggruppare i vari elementi nel modo che segue :

Da notare che gli argomenti raggruppati sono separati tra di loro da una virgola. Nota : il corsivo in HTML è indicato con il tag <em> Il risultato ottenuto viene mostrato nella figura successiva :

<html> <head> <title>CSS</title> <style type="text/css"> body {background:salmon; color:white} h1, h2, h3, h4 { background:salmon; color:yellow} em {background:salmon; color:darkblue; font-weight:bold; font-size:20px} </style> </head> <body> <h1>Titolo 1</h1> <h2>Titolo 2</h2> <h3>Titolo 3</h3> <h4>Titolo 4</h4> <em>Testo in corsivo</em> </body> </html>



Ordine di inserimento

Quando per uno stesso elemento HTML si è in presenza, nella stessa pagina, di più di uno stile valgono le seguenti regole di priorità :

1. stile inline : interno all’elemento HTML; 2. stile interno : definito nel tag <HEAD>; 3. stile esterno : file .css; 4. default del browser.

In questo modo, uno stile definito inline ha la priorità massima, ovvero prevale su ogni altro

stile definito all’interno dell’<HEAD> e quest’ultimo prevale sugli stili definiti in una pagina esterna; infine, lo stile di default del browser viene applicato solo in mancanza di indicazioni. Esempio :

il file esterno impostazioni_esempi.css contiene il seguente codice CSS :

<html> <head> <title>CSS</title> <style type="text/css"> .rosso{color:red;} </style> <link rel="stylesheet" type="text/css" href="scriptesterni/impostazioni_esempi.css" media="screen"/> </head> <body> <form> <input class="rosso" type="submit" name="cmdInvia" value="Invia" style="font-family: comic sans ms; width:200px; height:100px;"> </form> </body> </html>

/* CSS Document */ input{ color:black; text-align:center; font-family: Verdana; font-size:15px; font-weight:bold; background-color:lime; border: 5px solid; border-color: purple orange orange purple; margin: 10px;padding:5px; width:100px; height:40px ;}



Riferendosi all’Esempio 1 del paragrafo precedente si può notare come l’elemento utilizzato nel form è stato definito nei tre modi possibili : inline, interno ed esterno. In questo caso prevalgono prima le proprietà definite nello stile inline (font-family: comic sans ms; width:200px; height:100px), poi quella definita nello stile interno mediante una classe (.rosso{color:red;}) ed infine, tutte le altre proprietà sono applicate mediante la classe definita nel foglio di stile esterno. Il risultato ottenuto è il seguente :

Scelta dei tipo di inserimento del foglio di stile

(da [email protected] - www.asbafo.net)

La scelta dipende dal tipo di sito, da quante pagine è formato, se le pagine devono avere tutte o gran parte di esse lo stesso stile.

i fogli di stile "in linea" non sono molto pratici in quanto per ogni paragrafo interessato

occorre inserirli manualmente, operazione che su pagine complesse può diventare molto lunga e ripetitiva;

i fogli di stile "interni" sono adatti a siti formati da poche pagine oppure a siti che, pur

avendo un certo numero di pagine, necessitano di stili differenti per ciascuna pagina o gruppo di pagine;

i fogli di stile "esterni" sono adatti a siti di dimensioni medio grandi o grandi e che

hanno l'esigenza che tutte le pagine abbiano, in termini di stile, le medesime caratteristiche. Con un foglio di stile "esterno" è infatti estremamente facile cambiare le caratteristiche di tutte le pagine: se si ha un sito scritto tutto in "Arial 12" e si vuole sostituire il carattere con un "Verdana 10" basterà cambiare il riferimento al font nel foglio di stile e, in un colpo solo, si saranno modificate tutte le pagine !



Esempi di tabelle realizzate con i CSS Tabella 1

Tabella 2



Il codice (si utilizza un foglio si stile interno) per la Tabella 1 è il seguente :

<html> <head> <title>Tabelle con i CSS</title> <style type="text/css">

body{font:12px verdana} table{table-layout:fixed; border:5px solid DodgerBlue; width:800px;} td, th{border: 2px solid DarkOrchid;padding:5px 10px} td{text-align:right} th{text-align:left} tr.dispari td{background: lime} tr.dispari th{background: yellow; width:250px} tr.pari td{background: darkorange} tr.pari th{background: yellow; width:250px} caption{font:20px comic sans ms; font-weight:bold;color: Firebrick; padding:20px;}

</style> </head> <body>

<table> <caption>Esempio di tabella realizzata con i CSS</caption> <tbody> <tr class="dispari"> <th>Prima riga</th> <td>cella 1 1</td> <td>cella 1 2</td> <td>cella 1 3</td> <td>cella 1 4</td> </tr> <tr class="pari"> <th>Seconda riga</th> <td>cella 2 1</td> <td>cella 2 2</td> <td>cella 2 3</td> <td>cella 2 4</td> </tr> <tr class="dispari"> <th>Terza riga</th> <td>cella 3 1</td> <td>cella 3 2</td> <td>cella 3 3</td> <td>cella 3 4</td> </tr> <tr class="pari"> <th>Quarta riga</th> <td>cella 4 1</td> <td>cella 4 2</td> <td>cella 4 3</td> <td>cella 4 4</td> </tr> </tbody>

</table> </body> </html>

Il codice (si utilizza un foglio di stile esterno) per la Tabella 2 è il seguente :

<html> <head> <link rel="stylesheet" href="scriptesterni/imposta_tabella.css" type="text/css" media="screen"> <title>Esempio tabella con CSS</title> </head> <body scroll="auto">  <table align="left" border="2" width="50%" cellpadding="8" cellspacing="0"> <caption>VOTI 1^ QUADRIMESTRE<br> (rosso=insufficiente; verde=sufficiente; blu=buono/ottimo)</caption> <tr> <th colspan=2 width="50%">Rossi Giovanni</th> <th colspan=2 width="50%">Bianchi Maurizio</th> </tr> <tr> <td class="materia" width="40%">Matematica</td> <td class="verde" width="10%">6</td> <td class="materia" width="40%">Matematica</td> <td class="blue" width="10%">9</td> </tr> <tr> <td class="materia" width="40%">Italiano</td> <td class="verde" width="10%">6</td> <td class="materia" width="40%">Italiano</td> <td class="rosso" width="10%">4</td> </tr> <tr> <td class="materia" width="40%">Informatica</td> <td class="blue" width="10%">7</td> <td class="materia" width="40%">Informatica</td> <td class="rosso" width="10%">3</td> </tr> <tr> <td class="materia" width="40%">Sistemi </td> <td class="rosso" width="10%">3</td> <td class="materia" width="40%">Sistemi</td> <td class="rosso" width="10%">4</td> </tr> <tr> <td class="materia" width="40%">Inglese</td> <td class="rosso" width="10%">3</td> <td class="materia" width="40%">Inglese</td> <td class="blue" width="10%">8</td> </tr> </table> </body> </html>



di seguito viene riportato il foglio di stile esterno richiamato dal documento precedente : imposta_tabella.css

/* CSS Document */ TABLE {background-color: white; color: green; border : medium solid Red; font-family : comic sans ms; font-size : 16px; font : bold;} CAPTION {background-color: royalblue; color:orangered; text-align: center; font-weight:bold; padding-bottom:10px; } th {border-bottom: 2px solid; text-align:center; font-style:italic; font-weight:bold; font-size:25px; padding:5px;} td {font-family : verdana; color:yellow;} td.materia{text-align: left; background-color: Gray; border: 10px inset darksalmon;} td.verde {text-align: center; background-color: green; border: 10px inset limegreen;} td.rosso {text-align: center; background-color: red; border: 10px inset orange;} td.blue {text-align: center; background-color: blue; border: 10px inset lightblue;}



Link con i CSS (dal sito www.4yougratis.it) La potenza dei CSS permette di gestire in maniera ottimale lo stile dei link di una pagina, ottenendo anche una serie di effetti particolarmente gradevoli. Con il normale codice Html possiamo agire sul colore dei link semplicemente implementando nel body il seguente codice:

<body link="#0000FF" alink="#FF0000" vlink="#CECECE">

impostando in questo modo il colore del link da visitare in blu (#0000FF), il colore del link attivo il rosso (#FF0000) ed il colore dei link visitati in grigio (#CECECE). Con i CSS si può agire analogamente sulle stesse tre proprietà e non solo, si può utilizzare una quarta proprietà che consente di scatenare un effetto al passaggio del mouse su di un link :

a:link { color: #0000FF; } /* link da visitare */

a:active { color: #FF0000; } /* link attivo */

a:visited { color: #CECECE; } /* link visitato */

a:hover { color: #FF0000; } /* link al passaggio del mouse */

impostando, ad esempio, anche il colore del link al passaggio del mouse in rosso. Specificate le quattro proprietà, vediamo come si può agire in maniera più snella e veloce,

impostando il colore del link da visitare, attivo e visitato di una sola tonalità e con un solo passaggio, si hanno due modi per fare questo :

a:link, a:active, a:visited { color: #0000FF; } /* primo metodo */

a { color: #0000FF; } /* secondo metodo */

Altro vantaggio offerto dai CSS è quello di eliminare la sottolineatura dei link e di reimpostarla ad esempio al passaggio del mouse, come nel seguente esempio:

<html> <head> <title>Titolo del documento</title> <style type="text/css">

a {color: #0000FF; text-decoration: None; } /* il link in partenza non è sottolineato */ a:hover { color: #FF0000; text-decoration: Underline; } /* il link diventa sottolineato al passaggio del mouse */

</style> </head> <body> <a href="http://www.google.it">LINK SOTTOLINEATO AL PASSAGGIO DEL MOUSE</a></p> </body> </html>



in questo modo, invece, otteniamo l'effetto di "sopralineatura" :

<html> <head> <title>CSS</title> <style type="text/css"> a {color: #0000FF; text-decoration: None; } /* il link in partenza non è sopralineato */ a:hover { color: #FF0000; text-decoration: Overline; } /* il link diventa sopralineato al passaggio del mouse */ </style> </head> <body> <a href="http://www.google.it">LINK SOPRALINEATO AL PASSAGGIO DEL MOUSE</a></p> </body> </html>



Si possono anche combinare i due effetti:

Gli effetti che si possono ottenere sono svariati, si può ad esempio scegliere di impostare un link che al passaggio del mouse aumenta le proprie dimensioni o viene evidenziato in grassetto o in corsivo, basta provare e riprovare finchè l'effetto desiderato non salta fuori!

<html> <head> <title>CSS</title> <style type="text/css"> a {color: #0000FF; text-decoration: None; } a:hover { color: #FF0000; text-decoration: Underline Overline; } </style> </head> <body> <a href="http://www.google.it">LINK SOTTOLINEATO e SOPRALINEATO AL PASSAGGIO DEL MOUSE</a></p> </body> </html>



Esempi di link con i CSS

Esempio 1 : il font del link si trasforma in corsivo al passaggio del mouse:

<html> <head> <title>Titolo del documento</title> <style type="text/css">

A:link { color: Green;text-decoration : none} A:visited {color: Green;text-decoration :none} A:hover {color: Red;text-decoration : none; font-style : italic} A:active {color: lime;text-decoration : none}

</style> </head> <body> <p>Link che, al passaggio del mouse,trasforma il proprio font in corsivo</p> <p><a href="http://www.google.it">LINK</a></p> </body> </html>



Esempio 2 : il link si evidenzia con un colore al passaggio del mouse:

<html> <head> <title>Link con CSS</title> <style type="text/css"> A:link { color: Green; text-decoration : Underline;} A:visited { color: Green; text-decoration : Underline;} A:hover { color: Red; text-decoration : Underline; background-color : cyan;} A:active { color: lime; text-decoration : Underline;} </style> </head> <body scroll="auto">

<p>Link che, al passaggio del mouse, si evidenzia con un colore:</p> <p><a href="http://www.google.it">LINK</a></p>

</body> </html>



Esempio 3 : link con attributi multipli al passaggio del mouse:

<html> <head> <title>Link con CSS</title> <style type="text/css">

A:link {color: Red; text-decoration: none;} A:visited {color: red; text-decoration : none; letter-spacing: 10px;} A:hover {color: Green; text-decoration : underline; font-weight : bolder;

font-style : italic; letter-spacing: 20px; font-size : 30px;} A:active {color: Blue; text-decoration : underline; letter-spacing: 10px; background-color : Aqua; </style> </head> <body scroll="auto">

<p>Link con attributi multipli al passaggio del mouse :</p> link diventa sottolineato, in grassetto, in corsivo,<br> aumento del font, aumento spaziatura fra caratteri</body>

</html>



Esempio 4 : link gestiti con attributi diversi

<html> <head> <title>Link con CSS</title> <style type="text/css">

A.primo:link { color: red;} A.primo:visited { color: red; } A.primo:hover { color: maroon; } A.primo:active { color: lime; } A.secondo:link { color: blue; } A.secondo:visited { color: blue; } A.secondo:hover { color: cyan; } A.secondo:active { color: green; }

</style> </head> <body scroll="auto">

<p>Link diversi</p> <p><a class="primo" href="http://www.google.it">LINK 1</a></p> <p><a class="secondo" href="http://www.html.it">LINK 2</a></p>

</body> </html>



Esempio5 : link che da minuscolo si trasforma in maiuscolo al passaggio del mouse

<html> <head> <title>Link con CSS</title> <style type="text/css"> A:link {color: Green; text-decoration : none;} A:visited {color: Green;text-decoration : none;} A:hover {color: Red;text-decoration: none; text-transform : uppercase;} A:active {color: lime;text-decoration : none;} </style> </head> <body scroll="auto">

<p>Questo <a href="http://www.google.it"> link in minuscolo </a> si trasforma,al passaggio del mouse, in maiuscolo.</p> </body> </html>



Menù rullover con CSS

<html> <head> <title>MENU con CSS</title> <style type="text/css"> table {width : 150px; border: red solid 3px; } td{border-style : thin; border-color:red; text-align : center; font-family : 'comic sans ms' Verdana, sans-serif; font-weight : bold; font-size : 15px; background-color: yellow; background-position : 100%;} td A:LINK {text-decoration: none; color: black} td A:VISITED {text-decoration: none; color: black} td A:HOVER {text-decoration: none; font-weight : bold; color: aqua; background-color : blue} td A:ACTIVE {text-decoration: none; color: red; background-color: Yellow} </style> </head> <body> <table border=1 cellpadding="5" cellspacing="0"> <tr><td><a href="http://www.google.it">Link 1</a></td></tr> <tr><td><a href="http://www.google.it">Link 2</a></td></tr> <tr><td><a href="http://www.google.it">Link 3</a></td></tr> <tr><td><a href="http://www.google.it">Link 4</a></td></tr> <tr><td><a href="http://www.google.it">Link 5</a></td></tr> <tr><td><a href="http://www.google.it">Link 6</a></td></tr> </table> </body> </html>



Esempio di homepage con menù rullover

Cliccando su una voce del menù viene visualizzata la pagina corrispondente :

<html> <head> <title>Pagina index con menu rullover in CSS</title> <style type="text/css"> .table {width : 150px; height:150px; border: red solid 3px; } .td{border-style : thin; border-color:red; text-align : center; font-family : 'comic sans ms' Verdana, sans-serif; font-weight : bold; font-size : 15px; background-color: yellow; background-position : 100%;} .td A:LINK {text-decoration: none; color: black} .td A:VISITED {text-decoration: none; color: black} .td A:HOVER {text-decoration: none; font-weight : bold; color: aqua; background-color : blue} .td A:ACTIVE {text-decoration: none; color: red; background-color: Yellow} </style> </head> <body> <font face="comic sans ms"> <table width="60%" border=2 align="center"> <tbody align="center"> <tr height=50> <td bgcolor="red" colspan="2"> <font size ="4"><b>Esempio di homepage con Men&ugrave rullover</b></font> </td> </tr> <tr> <td bgcolor="cyan" width="20%">  <table class="table" border=1 cellpadding="5" cellspacing="0"> <tr><td class="td"><a href="pagine/pag1.html" target="centro">Link 1</a></td></tr> <tr><td class="td"><a href="pagine/pag2.html" target="centro">Link 2</a></td></tr> <tr><td class="td"><a href="pagine/pag3.html" target="centro">Link 3</a></td></tr> <tr><td class="td"><a href="pagine/pag4.html" target="centro">Link 4</a></td></tr> <tr><td class="td"><a href="pagine/pag5.html" target="centro">Link 5</a></td></tr> <tr><td class="td"><a href="pagine/pag6.html" target="centro">Link 6</a></td></tr> </table>  </td> <td width="80%"> <IFRAME name="centro" src="pagine/pagina_centro.htm" frameBorder=0 scrolling="no" width="100%" height="400" marginwidth="20" marginheight="20" align="center"> </IFRAME> </td> <tr> <tr height=40> <td bgcolor="lightgreen" colspan="2"></td> </tr> </tbody> </table> </font> </body> </html>



Il tag <SPAN> (dal sito www.Cirocom.it)

Il tag <SPAN>, permette di suddividere lo schermo in diverse parti, ognuna indipendente dalle altre. Quindi una volta diviso lo schermo, si può lavorare in ognuna delle sue parti. Sintassi : <SPAN name="nome_span" STYLE="opzioni"> </SPAN>

opzioni Descrizione Valori possibili

name nome dell’area un colore

position posizione dell’area Relative (relativa) ; Absolute (assoluta)

left punto più a sinistra dell’area misura in px

top punto più in alto dell’area misura in px

width larghezza dell’area misura in px

height altezza dell’area misura in px

background-color colore di sfondo un colore

border impostazioni del bordo vedere le proprietà CSS per i bordi

Esempio :



<html> <head> <title>Esempio tag &ltSPAN&gt</title> </head> <body> <SPAN name="riga_superiore" style="Position : Absolute ; Border: 3px solid green; Left : 100px ; Top : 50px ; Width : 600px ; Height : 250px ; Background-Color : yellow"> <p align ="center" style="font-family:'comic sans ms'; color:blue; font-weight: bold; font-size: 16px; padding-top:20px;"> Esempio di utilizzo del tag &ltSPAN&gt per la definizione di un'area <br> mediante le seguenti opzioni: <br> </p> <p align="left" style="font-family:verdana; color:darkred; font-weight: bold; font-size: 14px; margin-left:50px;padding-top: 20px;"> &ltSPAN name="riga_superiore" <br> style="Position : Absolute ; <br> Border: 3px solid green; Left : 100px ; Top : 50px ;<br> Width : 600px ; Height : 250px ; <br> Background-Color : yellow"&gt </p> </SPAN> </body> </html>



Utilizzo del tag <SPAN> per impostare il layout di una pagina



<html> <head> <title>Utilizzo del tag &ltSPAN&gt per impostare il layout di una pagina</title> </head> <body> <SPAN name "riga_superiore" style="position: absolute; left: 100px; width:800px; top: 50px; height: 100px; background-color: yellow ; border: 2px solid green;"> <center>RIGA SUPERIORE</center> </SPAN> <SPAN name "colonna_sinistra" style="position: absolute; left: 100px; width: 150px; top: 150px; height: 500px; background-color: lightblue ; border-left: 2px solid green; border-right: 2px solid green;"> <center>COLONNA SINISTRA</center> </SPAN> <SPAN name="colonna centrale" style="position: absolute; left: 250px; width: 500px; top: 150px; height: 500px; background-color: white;"> <center>COLONNA CENTRALE <br><br><br><br><br><br><br><br> Utilizzo del tag &ltSPAN&gt per impostare il layout di una pagina</center> </SPAN> <SPAN name "colonna_destra" style="position: absolute; left: 750px; width: 150px; top: 150px; height: 500px; background-color: lightblue ; border-left: 2px solid green; border-right: 2px solid green;"> <center>COLONNA DESTRA</center> </SPAN> <SPAN name "riga_inferiore" style="position: absolute; left: 100px; width: 800px; top: 650px; height: 50px; background-color: yellow ; border: 2px solid green;"> <center>RIGA INFERIORE</center> </body> </html>



Layout a due colonne con posizionamento assoluto (con <SPAN>)

Il layout a due colonne con posizionamenti assoluti presenta dei significativi vantaggi esterni quali l’accessibilità e migliori chance di indicizzazione e posizionamento sui motori di ricerca. Ha però uno svantaggio : non consente di avere la colonna di navigazione più lunga della colonna dei contenuti se si vuole avere un piè di pagina a larghezza piena.

Come si può notare dall’esempio, la pagina richiamata è più ampia dello spazio assoluto messo a disposizione dalla colonna a destra, ovvero dalla colonna in cui vengono visualizzate le varie pagine. In questo caso occorre attivare le barre di scorrimento orizzontale e verticale per poter navigare completamente nella pagina visualizzata.

<html> <head> <title>Layout a due colonne con posizionamento assoluto (con &ltSPAN&gt)</title> </head> <style type="text/css"> body{background-image: url(media/immagini/sfondo.gif);} .table {width : 100px; height:150px; border: red solid 3px; } .td{border-style : thin; border-color:red; text-align : center; font-family : 'comic sans ms' Verdana, sans-serif; font-weight : bold; font-size : 15px; background-color: yellow; background-position : 100%;} .td A:LINK {text-decoration: none; color: black} .td A:VISITED {text-decoration: none; color: black} .td A:HOVER {text-decoration: none; font-weight: bold; color: aqua; background-color: blue} .td A:ACTIVE {text-decoration: none; color: red; background-color: Yellow} </style> <body> <SPAN name "riga_superiore" style="position: absolute; left: 100px; width:1000px; top: 20px; height: 80px; background-color: red; border-right: 5px outset yellow; border-left: 5px inset yellow; border-bottom: 5px outset yellow; border-top: 5px inset yellow;"> <p align="center" style="font-family:'comic sans ms'; font-size:20px; font-weight:bold; padding-top:15px;"> Esempio di layout a due colonne con posizionamento assoluto utilizzando il tag &ltSPAN&gt </SPAN> <SPAN name "colonna_sinistra" style="position: absolute; left: 100px; width: 200px; top: 100px; height: 700px; background-color: cyan; border-left: 5px inset yellow; "> <span style="height=50px"></span>   <table class="table" align="center" border=1 cellpadding="5" cellspacing="0"> <tr> <td class="td"><a href="pagine/tabellaASCII_base.htm" target="centro">Link 1</a> </td> </tr> <tr> <td class="td"><a href="pagine/pagina2.html" target="centro">Link 2</a> </td> </tr> <tr> <td class="td"><a href="pagine/pagina3.html" target="centro">Link 3</a> </td> </tr> <tr> <td class="td"><a href="pagine/pagina4.html" target="centro">Link 4</a> </td> </tr> <tr> <td class="td"><a href="pagine/pagina5.html" target="centro">Link 5</a> </td> </tr> <tr> <td class="td"><a href="pagine/pagina6.html" target="centro">Link 6</a> </td> </tr> </SPAN>



<SPAN name="colonna centrale" style="position: absolute; left: 300px; width: 800px; top: 100px; height: 700px; background-color: white; border-left: 5px inset yellow; border-right: 5px outset yellow;"> <IFRAME name="centro" src="pagine/pagina_centro.htm" frameBorder=0 scrolling="yes" width="98%" height="700" marginwidth="10" marginheight="10" align="left"> </IFRAME> </SPAN> <SPAN name "riga_inferiore" style="position: absolute; left: 100px; width: 1000px; top: 800px; height: 40px; background-color: lightgreen ; border-right: 5px outset yellow; border-left: 5px inset yellow; border-bottom: 5px outset yellow; border-top: 5px inset yellow;"> <p align="justify" style="font-family: Tahoma; font-size:10px;"> In virt&uacute delle leggi sul copyright e del diritto d’autore italiane ed internazionali, vi invitiamo a limitare l'utilizzo degli esempi proposti ad un solo uso personale con scopi esclusivamente didattici e non commerciali. E' proibita, inoltre, la riproduzione totale o parziale in qualsiasi forma e con qualsiasi mezzo. </p> </SPAN> </body> </html>



Esempi di form con i CSS

Esempio 1



con CSS inline

<html> <head> <title></title> </head> <body> <form> <p style="color:blue; font-family: Arial; font-size:30px; font-weight:lighter; margin:30px;">Esempio form con CSS </p> <p style="color:darkblue; font-family: Verdana; font-weight:bold;font-style:italic; margin:10px;">Cognome </p> <input type="text" style="color:red; text-align:left; text-transform:uppercase; font-family:comic sans ms; font-size:20px; font-weight:bold; background-color:yellow; border-width: medium; border-color: green; border-style: double; margin-left:10px; padding:10px; width:300px; height:40px;" maxlength=20 value=""> <p style="color:darkblue; font-family: Verdana; font-weight:bold;font-style:italic; margin:10px;">Nome </p> <input type="text" style="color:red; text-align:left; text-transform:uppercase; font-family:comic sans ms; font-size:20px; font-weight:bold; background-color:yellow; border-width: medium; border-color: green; border-style: double; margin-left:10px; padding:10px; width:300px; height:40px;" maxlength=20 value=""> <br> <input type="submit" value="Invia" style="text-align:center; font-family: Verdana; font-size:15px; font-weight:bold; background-color:lime; border: 5px solid; border-color: purple orange orange purple; margin:30px 10px 10px 30px;padding:5px; width:100px; height:40px;"> <input type="reset" value="Annulla" style="text-align:center; font-family: Verdana; font-size:15px; font-weight:bold; background-color:red; border: 5px solid; border-color: purple orange orange purple; margin:30px 10px 10px 30px; padding:5px; width:100px; height:40px;"> </form> </body> </html>



con CSS interni

<html> <head> <title></title> <style type="text/css"> span {color:blue; font-family:Arial;font-size:30px; font-weight:lighter; margin:30px; } p{color:darkblue; font-family: Verdana; font-weight:bold;font-style:italic; margin:10px;} .casellatesto{ color:red; text-align:left; text-transform:uppercase; font-family:comic sans ms; font-size:20px; font-weight:bold; background-color:yellow; border-width: medium; border-color: green; border-style: double; margin-left:10px; padding:10px; width:300px; height:40px;} .pulsante{text-align:center; font-family: Verdana; font-size:15px; font-weight:bold; background-color:lime; border: 5px solid; border-color: purple orange orange purple; margin:30px 10px 10px 30px;padding:5px; width:100px; height:40px;} </style> </head> <body> <form> <span>Esempio form con CSS</span> <p>Cognome</p> <input class="casellatesto" type="text" maxlength=20 value=""> <p>Nome</p> <input class="casellatesto" type="text" maxlength=20 value=""> <br> <input class="pulsante" type="submit" value="Invia"> <input class="pulsante" type="reset" value="Annulla" style="background-color:red;"> </form> </body> </html>



con CSS esterni Il file esterno form_vari.css contiene il seguente codice CSS utilizzato dalla pagina

corrispondente al form realizzato :

<html> <head> <title></title> <link rel="stylesheet" type="text/css" href="scriptesterni/form_vari.css" media="screen"/> </head> <body> <form> <span>Esempio form con CSS</span> <p>Cognome</p> <input class="casellatesto" type="text" maxlength=20 value=""> <p>Nome</p> <input class="casellatesto" type="text" maxlength=20 value=""> <br> <input class="pulsante" type="submit" value="Invia"> <input class="pulsante" type="reset" value="Annulla" style="background-color:red;"> </form> </body> </html>

/* CSS Document */ span {color:blue; font-family:Arial;font-size:30px; font-weight:lighter; margin:30px; } p{color:darkblue; font-family: Verdana; font-weight:bold;font-style:italic; margin:10px;} .casellatesto{ color:red; text-align:ledt; text-transform:uppercase; font-family:comic sans ms; font-size:20px; font-weight:bold; background-color:yellow; border-width: medium; border-color: green; border-style: double; margin-left:10px; padding:10px; width:300px; height:40px;} .pulsante{text-align:center; font-family: Verdana; font-size:15px; font-weight:bold; background-color:lime; border: 5px solid; border-color: purple orange orange purple; margin:30px 10px 10px 30px;padding:5px; width:100px; height:40px;}



Esempio 2



con CSS interni

<html> <head> <title>Esempio Form con CSS</title> <style type="text/css">

body{background-image: url(../media/immagini/sfondo.gif);} p{font: 18px 'comic sans ms'; color:blue;} #form{background-image:url(../media/immagini/carta.gif);

padding: 10px; width: 500px; border: 8px inset red; color: #000000;}

.select{color: black; background-color: cyan; font-family: Verdana, Serif; font-weight: bold; font-size: 14px;} .label{background: yellow; color: blue; font-family: 'comic sans ms'; font-size: 15px; font-weight : bold; text-decoration:none; text-align:left; padding-left:5px; padding-top:10px; margin-bottom:10px; margin-top:20px; width:320px; height:30px;} .text{color: black; background-color:cyan; font-family: Verdana, Serif; font-weight: bold; font-size: 20px; height:30px; weight: 25px;} .textarea{color: black; background-color: cyan; font-family: Verdana, Serif; font-weight: bold; font-size: 14px;} </style> </head> <body>

<form id="form"> <p align="center">Esempio form con CSS</p> <div class="label">Scegli dall'elenco sottostante</div> <select class="select" name="selBrowser" size="1"> <option>---- Il tuo browser ---- </option> <option>Internet Explorer</option> <option>Netscape</option> <option>Opera</option> <option>altro</option> </select><br> <div class="label">Indica i motivi della preferenza</div> <textarea class="textarea" name ="txtaNote" rows="8" cols="35"></textarea><br> <div class="label">Indica il tuo indirizzo di posta elettronica</div> <input class="text" type="text" name="txtEmail" maxlength="20"><br> <p align="center"> <input type="submit" name="cmdInvia" value="Invia"> <input type="reset" name="cmdAnnulla" value="Annulla"></p> </form>

</body> </html>



Esempio 3



con CSS esterni

<html> <head> <title>Esempio Form con CCS</title> <link rel="stylesheet" type="text/css" href="scriptesterni/esempio3_form.css" media="screen"/>

</head> <body> <form id="form"> <p align="center">Esempio form con CSS</p> <table width="90%"> <tr> <td width="50%" valign="top" height="300px"> <label>Cognome e Nome</label> <input class="text" type="text" maxlength=20 value=""> </td> <td width="50%" valign="top" height="300px"> <label>Provincia di residenza</label> <select id="selProvincia" name="selProvincia" size=1> <OPTION id="selezionato" value="" selected>Scegli la provincia</OPTION>

<OPTGROUP class=opt1 label=Puglia> <OPTION value=BA>Bari</OPTION> <OPTION value=TA>Taranto</OPTION> <OPTION value=LE>Lecce</OPTION> </OPTGROUP> <OPTGROUP class=opt2 label=Toscana> <OPTION value=FI>Firenze</OPTION> <OPTION value=LI>Livorno</OPTION> <OPTION value=PI>Pisa</OPTION> </OPTGROUP> <OPTGROUP class=opt3 label=Sicilia> <OPTION value=PA>Palermo</OPTION> <OPTION value=ME>Messina</OPTION> <OPTION value=CT>Catania</OPTION> </OPTGROUP> </select>

</td> </tr> <tr> <td align="center"> <input class="pulsante" type="submit" value="Invia"> </td> <td align="center"> <input class="pulsante" type="reset" value="Annulla" style="background-color:red;"> </td> </tr> </table> </form> </body> </html>



Il file esterno esempio3_form.css contiene il seguente codice CSS :

/* CSS Document */ body{background-image: url(../../media/immagini/sfondo.gif);} p{font: 18px 'comic sans ms'; color:blue;} #form{background-image:url(../../media/immagini/carta.gif); font: 12px Verdana, Arial, Helvetica, sans-serif; padding: 10px; border: 8px groove red yellow; width: 500px; height:400px;} label{font: 12px verdana;} input.text{font: bold 12px Arial, Helvetica, sans-serif; border: 1px solid; padding-right: 5px; padding-left: 5px; width: 180px; text-transform: uppercase;} input.pulsante {font: bold 14px Arial, Helvetica, sans-serif; background: lightgreen; text-align: center; padding: 5px; width: 140px; border: 1px solid; margin-top: 10px;} .opt1 {background: yellow;} .opt2 {background: cyan;} .opt3 {background: salmon;}



Esempio di form realizzato con i CSS

Form realizzato con CSS inline

<html> <head> <title>Inserimento dati personali con CSS inline</title> </head> <body style="background-image: url(../media/immagini/sfondo.gif);"> <form NAME="frmInserimento" ACTION="../index.htm" METHOD="POST"> <table width = "65%" cellspacing="0" cellpadding="10" style="border-style: solid; border-width:5px; border-color:red; background-color:cyan"> <caption> <font face = "comic sans ms" color="darkblue" size="5"> <div align="center"><b>Inserimento dati personali</b></div></font> </caption> <tr> <td> <label for="txtCognome" style="font-family: Verdana; color:darkblue; font-weight:bold;font-style:italic">Cognome</label><br> <input type=text name="txtCognome" id ="txtCognome" style="background-color:yellow; color:red; font-family:comic sans ms; text-transform:uppercase; font-size:20px; font-weight:bold; text-align:left; border-color:blue" size=30 maxlength=20 value=""> </td> <td> <label for="txtNome" style="font-family: Verdana; color:darkblue; font-weight:bold;font-style:italic">Nome</label><br> <input type=text name="txtNome" id="txtNome" style="background-color:yellow; color:red; font-family:comic sans ms; text-transform:capitalize; font-size:20px; font-weight:bold; text-align:left; border-color:blue" size=30 maxlength=20 value=""> </td> </tr>  <tr> <td> <label for="selStudio" style="font-family: Verdana; color:darkblue; font-weight:bold;font-style:italic">Titolo di studio</label><br> <select name="selStudio" id="selStudio" style="background-color:yellow; color:red; font-family:comic sans ms; text-transform:none; font-size:16px; font-weight:bold; text-align:left; border-color:blue"> <option>Seleziona il titolo di studio</option> <option value="1">Licenza elementare</option> <option value="2">Licenza media</option> <option value="3">Diploma</option> <option value="4">Laurea</option> </select> </td>

<td> <label for="radSesso" style="font-family: Verdana; color:darkblue; font-weight:bold;font-style:italic">Sesso</label><br> <input type="radio" name="radSesso" id="uomo" value="uomo" style="background-color:yellow;"/> <label for="uomo" style="font-family: comic sans ms; color:red; font-weight:bold; font-style:normal; text-transform:capitalize;">uomo</label> &nbsp&nbsp&nbsp <input type="radio" name="radSesso" id="donna" value="donna" style="background-color:yellow;"/> <label for="donna" style="font-family: comic sans ms; color:red; font-weight:bold; font-style:normal; text-transform:capitalize;">donna</label> </td> </tr>  <tr> <td>&nbsp</td> <td>&nbsp</td> </tr>  <tr> <td> <label for="chkLingue" style="font-family: Verdana; color:darkblue; font-weight:bold;font-style:italic">Lingue conosciute</label><br> <input type="checkbox" name="chkLingue" id="ing" value="ing" style="background-color:yellow;"/> <label for="inglese" style="font-family: comic sans ms; color:red; font-weight:bold; font-style:normal; text-transform:capitalize;">Inglese</label> <input type="checkbox" name="chkLingue" id="fra" value="fra" style="background-color:yellow;"/> <label for="francese" style="font-family: comic sans ms; color:red; font-weight:bold; font-style:normal; text-transform:capitalize;">Francese</label> <input type="checkbox" name="chkLingue" id="ted" value="ted" style="background-color:yellow;"/> <label for="tedesco" style="font-family: comic sans ms; color:red; font-weight:bold; font-style:normal; text-transform:capitalize;">Tedesco</label> <input type="checkbox" name="chkLingue" id="spa" value="spa" style="background-color:yellow;"/> <label for="spagnolo" style="font-family: comic sans ms; color:red; font-weight:bold; font-style:normal; text-transform:capitalize;">Spagnolo</label> </td> <td> <label for="txtaNote" style="font-family: Verdana; color:darkblue; font-weight:bold;font-style:italic">Note</label><br> <textarea name="txtaNote" id="txtaNote" cols="50" rows="5" style="background-color:yellow; color:red; font-family:comic sans ms; font-size:16px; text-align:justify; border-color:blue; line-height: 1,5; background-image: url(../media/immagini/carta.gif);"> </textarea> </td> </tr> </table>

Form realizzato con CSS interni

<html> <head> <title>Inserimento dati personali con CSS interni</title> <style type="text/css"> body{background-image: url(../media/immagini/sfondo.gif);} label { font-family: Verdana; font-weight:bold; font-size:15px; font-style:italic; color:darkblue; text-transform: capitalize;} .etichetta{font-family: comic sans ms; font-weight:bold; font-size:15px; font-style:normal; color:red; text-transform: capitalize;} input, textarea {background-color: yellow; color: red; font-family: "comic sans ms"; font-size:20px; font-weight:bold; text-align:left; border-color:blue; text-transform:uppercase; margin-top: 10px; margin-left=10px;} select {background-color: yellow; color: red; font-family: "comic sans ms";font-size:16px;font-weight:bold; text-align:left; border-color:blue; text-transform:none; margin: 10px 0px 10px 0px;} .pulsante{background-color:lime; border: 5px solid; color:black; text-align:center; font-weight:bold; text-transform:none;

border-color: purple orange orange purple; font-family: Verdana; font-size:15px; padding:5px; margin:10px;} .tabella{border-style: solid; border-width:5px; border-color:red; background-color:cyan;} </style> </head>  <body> <form NAME="frmInserimento" ACTION="../index.htm" METHOD="POST"> <table class="tabella" width = "75%" cellspacing="0" cellpadding="10"> <caption> <font face = "comic sans ms" color="darkblue" size="5"> <div align="center"><b>Inserimento dati personali</b></div></font> </caption> <tr> <td> <label for="txtCognome">Cognome</label><br> <input type=text name="txtCognome" id ="txtCognome" size=30 maxlength=20 value=""> </td> <td> <label for="txtNome">Nome</label><br> <input type=text name="txtNome" id="txtNome" style="text-transform:capitalize;" size=30 maxlength=20 value=""> </td> </tr>

<tr> <td> <label for="selStudio" style="text-transform:none;">Titolo di studio</label><br> <select name="selStudio" id="selStudio"> <option>Seleziona il titolo di studio</option> <option value="1">Licenza elementare</option> <option value="2">Licenza media</option> <option value="3">Diploma</option> <option value="4">Laurea</option> </select> </td> <td> <label for="radSesso">Sesso</label><br> <div class="etichetta"> <input type="radio" name="radSesso" id="uomo" value="uomo">&nbspuomo &nbsp&nbsp <input type="radio" name="radSesso" id="donna" value="donna">&nbsp donna </div> </td> </tr>  <tr> <td>&nbsp</td> <td>&nbsp</td> </tr>  <tr> <td> <label for="chkLingue">Lingue conosciute</label><br> <div class="etichetta"> <input type="checkbox" name="chkLingue" id="ing" value="ing"> Inglese &nbsp <input type="checkbox" name="chkLingue" id="fra" value="fra"/> Francese &nbsp <input type="checkbox" name="chkLingue" id="ted" value="ted"/> Tedesco &nbsp <input type="checkbox" name="chkLingue" id="spa" value="spa"/> Spagnolo &nbsp </div> </td> <td> <label for="txtaNote">Note</label><br> <textarea name="txtaNote" id="txtaNote" cols="50" rows="5" style="font-size:16px; text-align:justify; line-height: 1,5; text-transform:none; background-image: url(../media/immagini/carta.gif);"> </textarea> </td> </tr> </table>  <br> <input class="pulsante" type="submit" name="cmdInvia" value="Invia"> <input class="pulsante" type="reset" value="Annulla" style="background-color:red;" > </form> </body></html>

Form realizzato con CSS esterni

<html> <head> <title>Inserimento dati personali con CSS esterni</title> <link rel="stylesheet" type="text/css" href="scriptesterni/impostazioni_form.css" media="screen"/> </head>  <body> <form NAME="frmInserimento" ACTION="../index.htm" METHOD="POST"> <table class="tabella" width="75%" cellspacing="0" cellpadding="10"> <caption> <font face = "comic sans ms" color="darkblue" size="5"> <div align="center"><b>Inserimento dati personali</b></div></font> </caption> <tr> <td> <label for="txtCognome">Cognome</label><br> <input type=text name="txtCognome" id ="txtCognome" size=30 maxlength=20 value=""> </td> <td> <label for="txtNome">Nome</label><br> <input type=text name="txtNome" id="txtNome" style="text-transform:capitalize;" size=30 maxlength=20 value=""> </td> </tr>  <tr> <td> <label for="selStudio" style="text-transform:none;">Titolo di studio</label><br> <select name="selStudio" id="selStudio"> <option>Seleziona il titolo di studio</option> <option value="1">Licenza elementare</option> <option value="2">Licenza media</option> <option value="3">Diploma</option> <option value="4">Laurea</option> </select> </td> <td> <label for="radSesso">Sesso</label><br> <div class="etichetta"> <input type="radio" name="radSesso" id="uomo" value="uomo">&nbspuomo &nbsp&nbsp <input type="radio" name="radSesso" id="donna" value="donna">&nbsp donna </div> </td> </tr>

Il file esterno impostazioni_form.css contiene il seguente codice CSS utilizzato dalla pagina

corrispondente al form realizzato :

<tr> <td>&nbsp</td> <td>&nbsp</td> </tr>  <tr> <td> <label for="chkLingue">Lingue conosciute</label><br> <div class="etichetta"> <input type="checkbox" name="chkLingue" id="ing" value="ing">Inglese &nbsp <input type="checkbox" name="chkLingue" id="fra" value="fra"/> Francese &nbsp <input type="checkbox" name="chkLingue" id="ted" value="ted"/>Tedesco &nbsp <input type="checkbox" name="chkLingue" id="spa" value="spa"/>Spagnolo &nbsp </div> </td> <td> <label for="txtaNote">Note</label><br> <textarea name="txtaNote" id="txtaNote" cols="50" rows="5" style="font-size:16px; text-align:justify; line-height: 1,5; text-transform:none; background-image: url(../media/immagini/carta.gif);"> </textarea> </td> </tr>  </table>  <br> <input class="pulsante" type="submit" name="cmdInvia" value="Invia"> <input class="pulsante" type="reset" value="Annulla" style="background-color:red;"> </form> </body> </html>



/* CSS Document */ body{background-image: url(../../media/immagini/sfondo.gif);} label { font-family: Verdana; font-weight:bold; font-size:15px; font-style:italic; color:darkblue; text-transform: capitalize;} .etichetta{font-family: comic sans ms; font-weight:bold; font-size:15px; font-style:normal; color:red; text-transform: capitalize;} input, textarea {background-color: yellow; color: red; font-family: "comic sans ms"; font-size:20px; font-weight:bold; text-align:left; border-color:blue; text-transform:uppercase; margin-top: 10px; margin-left=10px;} select {background-color: yellow; color: red; font-family: "comic sans ms"; font-size:16px; font-weight:bold; text-align:left; border-color:blue; text-transform:none; margin: 10px 0px 10px 0px;} .pulsante{background-color:lime; border: 5px solid; color:black; text-align:center; font-weight:bold; text-transform:none; border-color: purple orange orange purple; font-family: Verdana; font-size:15px; padding:5px; margin:10px;} .tabella{border-style: solid;

border-width:5px; border-color:red; background-color:cyan;}



Proprietà CSS per il testo


color Colore del testo un colore

direction Direzione del testo ltr rtl

letter-spacing Lo spazio tra le lettere di ciascuna parola normal lunghezza (px, em, pt)

text-align Definisce l'allineamento del testo left right center justify

text-decoration La decorazione del testo (sottolineato, barrato etc...)

none underline overline line-through blink

text-indent Indenta la prima riga di un paragrafo lunghezza percentuale

text-shadow Per definire l ’ombra del testo none colore lunghezza

text-transform Applica delle trasformazioni alle lettere none capitalize uppercase lowercase

white-space Definisce come vengono gestiti gli spazi bianchi normal pre nowrap

word-spacing Per impostare lo spazio tra due parole diverse normal lunghezza



Proprietà CSS dei font


font Consente di impostare tutte le proprietà del carattere in una sola dichiarazione, è comodo ma poco leggibile.

font-family Per specificare uno o più font per l'elemento che si vuole caratterizzare.

Nome del font

font-size Imposta la dimensione del carattere. E' possibile specificare una lunghezza oppure una classe di dimensione.

smaller xx-small x-small small medium large x-large xx-largelarger lunghezza percentuale

font-size-adjust

Preserva l’altezza del carattere. none numero

font-stretch Condensa o espande un font. normal narrower wider expanded semi-expanded extra-expanded condensed ultra-expanded semi-condensed ultra-condensed extra-condensed

font-style Imposta lo stile (corsivo, obliquo oppure normale) normal italic oblique

font-variant Mostra il carattere normale o maiuscoletto normal small-caps

font-weight Grassetto. Possiamo dare dei valori per gradazione di grassetto utilizzando un intervallo da 100 a 900 (con incrementi di 100)

normal lighter bold bolder 100-900



Proprietà CSS dello sfondo


background Per impostare tutte le proprietà dello sfondo background-color background-image background-repeat background-attachment background-position

background-attachment

Dice se l’immagine di sfondo è fissa o scrolla con la pagina

scroll fixed

background-color Colore di sfondo di un elemento colore transparent

background-image Imposta un’immagine come sfondo url none

background-position La posizione dell’immagine top left top center top right center left center center center right bottom left bottom center bottom right x-perc y-perc x-pos y-pos

background-repeat Se un’immagine deve essere ripetuta oppure no

repeat repeat-x repeat-y no-repeat



Proprietà CSS Border


border Per impostare tutte le proprietà border-width border-style border-color

border-width La larghezza di tutti i lati del bordo thin medium thick length

border-style Lo stile di tutti i lati del bordo none hidden dotted dashed solid double groove ridge inset outset

border-color Imposta il colore del bordo per tutti i lati color

border-top Per impostare tutte le proprietà del bordo in alto border-top-width border-style border-color

border-top-width Larghezza del bordo in alto thin medium thick length

border-top-style Stile del bordo in alto border-style

border-top-color Colore del bordo in alto border-color

border-right Per impostare tutte le proprietà del bordo destro border-right-width border-style border-color

border-right-width Larghezza del bordo a destra thin medium thick length

border-right-style Stile del bordo a destra border-style

border-right-color Colore del bordo a destra border-color



border-bottom Per impostare tutte le proprietà del bordo in basso

border-bottom-width border-style border-color

border-bottom-width

Larghezza del bordo in basso thin medium thick length

border-bottom-style Stile del bordo in basso border-style border-style

border-bottom-color Colore del bordo in basso border-color

border-left Per impostare tutte le proprietà del bordo sinistro

border-left-width border-style border-color

border-left-width Larghezza del bordo a sinistra thin medium thick length

border-left-style Stile del bordo a sinistra border-style

border-left-color Colore del bordo a sinistra border-color



Proprietà CSS Margin Definiscono lo spazio attorno agli elementi.


margin Per impostare tutti i valori in una volta margin-top margin-right margin-bottom margin-left

margin-top Per impostare il margine in alto auto lunghezza percentuale

margin-right Per impostare il margine a destra auto lunghezza percentuale

margin-bottom Per impostare il margine in basso auto lunghezza percentuale

margin-left Per impostare il margine a sinistra auto lunghezza percentuale



Proprietà CSS di Padding Definiscono lo spazio tra il bordo ed il contenuto dell’elemento.


padding Per impostare le quattro proprietà in una sola dichiarazione

padding-top padding-right padding-bottom padding-left

padding-bottom Imposta il padding in basso lunghezza percentuale

padding-left Imposta il padding a sinistra lunghezza percentuale

padding-right Imposta il padding a destra lunghezza percentuale

padding-top Imposta il padding in alto lunghezza percentuale



Proprietà CSS delle List Consentono di modificare l'aspetto delle liste.


list-style Per impostare tutte le proprietà in una sola dichiarazione

list-style-type list-style-position list-style-image

list-style-image Imposta l’immagine none url

list-style-position Posiziona il marker inside outside

list-style-type Imposta il tipo di marker none circle disc square armenian cjk-ideographic decimal decimal-leading-zero georgian hebrew hiragana hiragana-iroha katakana katakana-iroha lower-roman lower-alpha lower-greek lower-latin upper-roman upper-alpha upper-latin

indice pag. sintassi e proprietà -...

Documents