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-1 -
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-2 -
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à. - 3 -
Struttura di un foglio di stile (dal sito www.html.it) Un foglio di stile è commento. un insieme di regole, accompagnate, volendo, da qualche nota di 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à. - 4 -
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. - 5 -
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; } - 6 -
Selettore delle classi (class selectors) (da seatiger@asbafo.net - 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. <title>css</title> <style type="text/css"> h1 {color:green;} h2 {color:blue;} h3 {color:red} </style <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> - 7 -
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. <title>css</title> <style type="text/css">.verde { color:green;}.blu { color:blue;}.rosso { color:red;} </style> <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> 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>. - 8 -
Una volta definita una classe, questa può essere impiegata in tag differenti di una pagina HTML, come si può verificare nel seguente esempio : <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> <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> - 9 -
Le classi possono anche essere assegnate ad un unico elemento di stile come nel seguente esempio: <title>css</title> <style type="text/css"> body { background:#ffff99; } h1.verde { color:green; background:#ffff99 } </style> <body> <h1>questo titolo non è verde</h1> <h1 class="verde">questo titolo è verde</h1> 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. - 10 -
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. <title>css</title> <style type="text/css"> p.testorosso {color: red;} </style> <body> <p class="testorosso">questo paragrafo ha il testo rosso</p> <p>questo paragrafo non ha il testo rosso</p> - 11 -
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> <title>css</title> <style type="text/css"> p.testorosso.grassetto {color:red; font-weight:bold;} p.maiuscolo{font-variant: small-caps;} </style> <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> - 12 -
Selettore delle identità (ID selectors) (da seatiger@asbafo.net - 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 : <title>css</title> <style type="text/css"> #verde { color:green;} #blu { color:blue;} #rosso { color:red;} </style> <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> Attenzione a cambiare riferimento anche all'interno dei relativi tag HTML: non più class, ma id - 13 -
Classi e ID (dal sito www.html.it) Si supponga di assegnare ad un paragrafo l attributo class="formattatesto" : <title>css</title> <style type="text/css">.formattatesto{ font: 20px verdana; font-weight:bold; font-style: italic; color:red;} </style> <body> <p class="formattatesto">formattazione paragrafo</p> 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. <title>css</title> <style type="text/css"> #formattatesto{ font: 20px verdana; font-weight:bold; font-style: italic; color:red;} </style> <body> <p id="formattatesto">formattazione paragrafo</p> - 14 -
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. - 15 -
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 - 16 -
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. - 17 -
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 <title>css</title> <style> #box1{ background: Silver; border : 10px solid #CC0033; height : 100px; margin : 40px; padding : 10px; width : 200px;} </style> <body> <div id="box1">area del contenuto definita da #box1</div> 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. - 18 -
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 : <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> <body> <div id="box1">area del contenuto di box1 <div id="box2">area del contenuto di box2 </div> </div> 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. - 19 -
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 text-align Lo spazio tra le lettere di ciascuna parola Definisce l'allineamento del testo normal lunghezza (px, em, pt) 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 text-transform Indenta la prima riga di un paragrafo Applica delle trasformazioni alle lettere lunghezza (definisce una indentazione fissa in pixel) percentuale (in percentuale rispetto all elemento contenitore) none (testo normale) capitalize (tutte le parole iniziano con una maiuscola) uppercase (tutto maiuscolo) lowercase (tutto minuscolo) Esempio : <title></title> <style type="text/css"> p{color:darkred; text-align:center; text-decoration :underline; text-transform:capitalize;text-indent:10px} </style> <body> <p>prova proprietà CSS per il testo</p> oppure : - 20 -
<title></title> <body> <p style="color:darkred; text-align:center; text-decoration :underline; text-transform:capitalize;text-indent:10px"> prova proprietà CSS per il testo </p> - 21 -
Proprietà CSS dei Font Definiscono il carattere nel testo consentendo di cambiare la famiglia di caratteri, la dimensione ed altro. Proprietà Descrizione Valori possibili font Consente di impostare tutte le proprietà del carattere in una sola dichiarazione, è comodo ma poco leggibile. font-family font-size Per specificare uno o più font per l'elemento che si vuole caratterizzare. Imposta la dimensione del carattere in lunghezza o percentuale. Nome del font 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 : <title></title> <style type="text/css"> p{font-family: verdana; font-size:20px; font-style:italic; font-variant: small-caps; font-weight:bold} </style> <body> <p>prova proprietà CSS per il Font </p> - 22 -
oppure : <title></title> <body> <p style="font-family: verdana; font-size:20px; font-style:italic; font-variant: small-caps; font-weight:bold"> prova proprietà CSS per il Font </p> - 23 -
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 background-color background-image Per impostare tutte le proprietà dello sfondo Colore di sfondo di un elemento Imposta un immagine come sfondo colore transparent (se lo sfondo è trasparente) url none (se non si vuole un immagine di sfondo) La posizione dell immagine top left top center top right center left center center center right bottom left bottom center bottom right backgroundposition backgroundrepeat 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: <title></title> <body style="background-color:red; background-image: url(../media/immagini/space14.jpg); background-position: top left; background-repeat: no-repeat"> - 24 -
oppure : <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> <body> Esempio 2: <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> <body> - 25 -
con solo codice HTML si ottiene : <body background="../media/immagini/space14.jpg" > - 26 -
Proprietà CSS per i bordi Le proprietà del bordo consentono di specificare lo stile, il colore e la larghezza di un elemento. Proprietà Descrizione Valori border border-width Per impostare tutte le proprietà 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 - 27 -
<title></title> <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> 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: <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> - 28 -
Esempio con tabelle : <title></title> <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> - 29 -
Esempio con caselle di testo (text) <title></title> <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 - 30 -
Proprietà CSS Margin Definiscono lo spazio attorno agli elementi. Proprietà Descrizione Valori 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"> - 31 -
Proprietà CSS di Padding Definiscono lo spazio tra il bordo ed il contenuto dell elemento. Proprietà Descrizione Valori 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;"> - 32 -
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> - 33 -
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> - 34 -
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> - 35 -
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. - 36 -
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. <title>css</title> <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> interni : il foglio di stile è inserito direttamente nella pagina HTML in cui viene utilizzato. <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> <body> <form <input type="submit" name="cmdinvia" value="invia"> </form> - 37 -
esterni : il codice CSS è inserito in un file esterno alla pagina e referenziato con il tag <link> <title>css</title> <link rel="stylesheet" type="text/css" href="scriptesterni/impostazioni_form.css" media="screen"/> <body> <form> <input type="submit" name="cmdinvia" value="invia"> </form> il file esterno impostazioni_form.css contiene il seguente codice CSS : /* 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;} Esempio 2-38 -
con fogli di stile inline <title>css</title> <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> con fogli di stile interni <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 <body> <h1>il titolo è verde, verdana</h1> <p>il testo normale è rosso, comic sans ms, corsivo, 15px</p> con fogli di stile esterni <title>css</title> <link rel="stylesheet" type="text/css" href="scriptesterni/file.css" media="screen"/> <body> <h1>il titolo è verde, verdana</h1> <p>il testo normale è rosso, comic sans ms, corsivo, 15px</p> il file esterno file.css contiene il seguente codice CSS : /* CSS Document */ h1{color: green;font-family: Verdana;} p{color: red;font-family: comic sans ms;font-style:italic; font-size:15px;} - 39 -
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 : <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> <body> <h1>titolo 1</h1> <h2>titolo 2</h2> <h3>titolo 3</h3> <h4>titolo 4</h4> <em>testo in corsivo</em> 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 : - 40 -
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 : <title>css</title> <style type="text/css">.rosso{color:red;} </style> <link rel="stylesheet" type="text/css" href="scriptesterni/impostazioni_esempi.css" media="screen"/> <body> <form> <input class="rosso" type="submit" name="cmdinvia" value="invia" style="font-family: comic sans ms; width:200px; height:100px;"> </form> il file esterno impostazioni_esempi.css contiene il seguente codice CSS : /* 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 ;} - 41 -
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 seatiger@asbafo.net - 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! - 42 -
Esempi di tabelle realizzate con i CSS Tabella 1 Tabella 2-43 -
Il codice (si utilizza un foglio si stile interno) per la Tabella 1 è il seguente : <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> <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> - 44 -
Il codice (si utilizza un foglio di stile esterno) per la Tabella 2 è il seguente : <link rel="stylesheet" href="scriptesterni/imposta_tabella.css" type="text/css" media="screen"> <title>esempio tabella con CSS</title> <body scroll="auto"> <!--scroll=auto per non visualizzare le barre di scorrimento--> <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> - 45 -
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;} - 46 -
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: <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> <body> <a href="http://www.google.it">link SOTTOLINEATO AL PASSAGGIO DEL MOUSE</a></p> - 47 -
in questo modo, invece, otteniamo l'effetto di "sopralineatura" : <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> <body> <a href="http://www.google.it">link SOPRALINEATO AL PASSAGGIO DEL MOUSE</a></p> - 48 -
Si possono anche combinare i due effetti: <title>css</title> <style type="text/css"> a {color: #0000FF; text-decoration: None; } a:hover { color: #FF0000; text-decoration: Underline Overline; } </style> <body> <a href="http://www.google.it">link SOTTOLINEATO e SOPRALINEATO AL PASSAGGIO DEL MOUSE</a></p> 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! - 49 -
Esempi di link con i CSS Esempio 1 : il font del link si trasforma in corsivo al passaggio del mouse: <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> <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> - 50 -
Esempio 2 : il link si evidenzia con un colore al passaggio del mouse: <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> <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> - 51 -
Esempio 3 : link con attributi multipli al passaggio del mouse: <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> <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 - 52 -
Esempio 4 : link gestiti con attributi diversi <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> <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> - 53 -
Esempio5 : link che da minuscolo si trasforma in maiuscolo al passaggio del mouse <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> <body scroll="auto"> <p>questo <a href="http://www.google.it"> link in minuscolo </a> si trasforma,al passaggio del mouse, in maiuscolo.</p> - 54 -
Menù rullover con CSS <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> <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> - 55 -
Esempio di homepage con menù rullover - 56 -
Cliccando su una voce del menù viene visualizzata la pagina corrispondente : <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> <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ù rullover</b></font> </td> </tr> <tr> <td bgcolor="cyan" width="20%"> <!-- tabella interna contenente il menù rullover--> <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> - 57 -
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 : - 58 -
<title>esempio tag <span></title> <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 <span> 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;"> <span 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"> </p> </SPAN> - 59 -
Utilizzo del tag <SPAN> per impostare il layout di una pagina - 60 -
<title>utilizzo del tag <span> per impostare il layout di una pagina</title> <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 <span> 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> - 61 -
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. - 62 -
<title>layout a due colonne con posizionamento assoluto (con <span>)</title> <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 <span> </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> <!-- per lasciare spazio --> <!-- tabella interna contenente il menù rullover--> <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> - 63 -
<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ú 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> - 64 -
Esempi di form con i CSS Esempio 1-65 -
con CSS inline <title></title> <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> - 66 -
con CSS interni <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> <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> - 67 -
con CSS esterni <title></title> <link rel="stylesheet" type="text/css" href="scriptesterni/form_vari.css" media="screen"/> <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> Il file esterno form_vari.css contiene il seguente codice CSS utilizzato dalla pagina corrispondente al form realizzato : /* 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;} - 68 -
Esempio 2-69 -
con CSS interni <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> <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> - 70 -
Esempio 3-71 -
con CSS esterni <title>esempio Form con CCS</title> <link rel="stylesheet" type="text/css" href="scriptesterni/esempio3_form.css" media="screen"/> <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> - 72 -
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;} - 73 -
Esempio di form realizzato con i CSS - 74 -