' Rapid-Q by William Yu (c)1999-2000 . ' ================================================================================ ' Upload_il_tuo_script_su_Rapidq.it ' Manuale_CSS HTML soffre di limiti propri di un sistema di contrassegno ideato per scopi molto lontani da quelli attualmente richiesti dal Web design. Se questi limiti appaiono marginali agli occhi dei neofiti, risultano fastidiosi, e molto spesso immobilizzanti, per i professionisti formatisi nella grafica tradizionale. Posizionare un'immagine, creare una banda laterale, giustificare del testo in HTML diventa un problema risolvibile esclusivamente con strumenti nati per tutt'altro scopo (le tabelle, per esempio, nel 90% dei casi vengono utilizzate per posizionare elementi nella pagina, invece che per ordinare dati). Il problema, in termini minimamente più tecnici, riguarda la classica separazione SGML tra stile, contenuti e struttura. HTML 'tradizionale' non soddisfa questa condizione, ma anzi, ne esaspera la confusione. Ma cosa significa separare lo stile dai contenuti? Consideriamo un sito Web mediamente complesso, con un numero di pagine HTML pari a 100. Poniamo che il testo adottato per l'esposizione degli argomenti sia un 'arial' corsivo. Con gli strumenti classici di HTML il codice per ottenere questo risultato e': Testo della pagina ripetuto in tutte le 100 pagine del sito, a chiusura e apertura del testo da formattare. Semplice, ovvio e per molti versi banale. Ma cosa succede nel momento in cui scegliamo di modificare il tipo di carattere a tutte le pagine? Non c'e' altra soluzione che aprire le 100 pagine e procedere ad altrettante modifiche, che sostituiscano il nome 'arial' con il nuovo font scelto. Un webmaster di medie capacita' puo' impiegare solo qualche decina di minuti, che diventano ore per siti di grandi dimensioni. Bene, questa perdita di tempo e' diretta conseguenza della promiscuita' tra stile e contenuto, laddove il primo (il tag FONT) non e' separato dal secondo (il testo della pagina). Viene da se' che la soluzione a questo problema e' nella separazione tra i due elementi sopracitati, che nella pratica si risolve adottando i Cascading Style Sheets. D'ora in poi ci serviremo dell'acronimo CSS per richiamare questi 'fogli di stile a cascata' che da tempo sono stati introdotti nel Web publishing, ma che solo negli ultimi mesi hanno conosciuto una grande diffusione. Il termine 'a cascata' (cascading) richiama una delle caratteristiche principali di questa tecnologia, per cui e' possibile incorporare nel documento differenti fogli di stile, ognuno dei quali, in base a regole gerarchiche, prevale sull'altro. I CSS sono stati introdotti da Microsoft dalla terza versione di Internet Explorer, e parzialmente supportati da Netscape soltanto dalla quarta versione dell'omonimo browser. Chi accede con un browser obsoleto ad un documento formattato con fogli CSS, si trovera' di fronte una pagina gestita dalle opzioni di default del browser (lo sfondo, per esempio, sarà grigio; il tipo di testo 'times new romans' ecc). I CSS sono stati ufficialmente riconosciuti e standardizzati dal W3C (consorzio internazionale per lo sviluppo del Web) nelle raccomandazioni 'CSS1' prima, e 'CSS2' poi. Si rimanda a questi documenti ufficiali per ulteriori approfondimenti. La presente guida non puo' prescindere da tematiche squisitamente 'filosofiche' sulle quali si basa l'intera struttura dei CSS, ma pone particolare attenzione all'uso pratico che di questi strumenti si fa nel Web publishing. In altre parole questo tutorial vuole fornire da subito gli strumenti per usare i CSS all'interno di Website, senza troppo dilungarsi su dissertazioni teoriche. Un'ultima nota in conclusione riguarda i dubbi sull'adozione di un sistema, i fogli di stile, riconosciuti solo dalle ultime versioni dei browser e che quindi rischiano di tagliare fuori parte dei visitatori. Non siamo d'accordo con quanti ritengono questo limite insormontabile e rifiutano l'adozione dei CSS. Riteniamo che allo sviluppo del Web debba coincidere un costante aggiornamento del software da parte dei navigatori, soprattutto oggi che i due maggiori browser sono gratuiti (addirittura di pubblico dominio il sorgente di Netscape). Rammentiamo, infine, che i fogli di stile sono compatibile con: MS Internet Explorer 3 (parzialmente) MS Internet Explorer 4 MS Internet Explorer 5 Netscape navigator 4 (parzialmente) I fogli di stile in linea sono concettualmente molto vicini alle regole dell'HTML classico, in quanto agiscono su singole istanze all'interno della pagina. Semplificando il concetto, i fogli di stile in linea agiscono su singole parti del documento, senza influenzare il resto della pagina. Se per esempio si vuole che una sola parte del testo di un documento abbia un certo carattere o una certa formattazione, si useranno campi standard di HTML, quali o , per assegnare quello stile. Eccone un esempio: Questo testo ha colore rosso In questo modo abbiamo impostato lo stile del solo testo compreso tra i tag e non per tutto il documento. In particolare abbiamo indicato come grandezza del carattere (font-size) 18 pixel; come tipo di carattere (font-family) il classico arial e come colore (color) il rosso. Il risultato che otteniamo e' il seguente: Questo testo ha colore rosso La marcatura usata per ottenere questo effetto e' o in alternativa . L'uso dell'una o dell'altra e' lasciato alla discrezionalita' del progettista, anche se la prima marcatura e' consigliata per lunghi blocchi di testo, mentre e' consigliata per brevi frasi, proprio come quella dell'esempio. Un siffatto sistema di stile e' certamente funzionante ma non rispondente alle peculiarita' tipiche dei CSS. Assegnare stili alle singole marcature, infatti, non risponde ai criteri di separazione tra stile e contenuti dei quali i CSS si fanno portatori. I fogli di stile in linea in un certo senso negano la vera natura di questi strumenti, nati per assegnare stili a intere pagine o addirittura a gruppi di documenti. Il nostro consiglio e' di servirsi dei fogli di stile in linea esclusivamente per piccoli e circoscritti ritocchi e non per la struttura generale di un Website. Prima di passare alla trattazione dei fogli di stile incorporati, ci preme sottolineare la diversa sintassi che regge questi attributi (e anche i successivi 'css_esterni') rispetto ad HTML classico: gli attributi sono inseriti tra parentesi graffe { } al posto del segno = vengono usati i due punti : gli argomenti consecutivi sono separati dal segno ; invece che dalla virgola , Gli attributi composti da piu' termini sono separati da un trattino - Quando un attributo e' considerato proprieta' di un oggetto i trattini si eliminano e le iniziali dei termini diventano maiuscole (per esempio: font-style diventa FontStyle) Premesso questo passiamo a trattare approfonditamente i fogli di stile incorporati. Banalizzando, si tratta di stili a meta' strada tra i gia' esaminati CSS in linea e i successivi CSS esterni. La peculiarita' fondamentale di questi attributi di stile e' di venire assegnati all'intero documento e non a singole istanze come l'HTML classico. Si tratta, dunque, di un insieme di definizioni di stile inserite tra marcature ****** Questo testo e' di colore verde, impostato su verdana di 17 pixel ****** ***** Questo testo e' di colore rosso, impostato su arial di 18 pixel ***** In questo esempio abbiamo impostato un foglio di stile incorporato tra i tag del documento, stabilendo due diversi tipi di carattere: verdana verde di 17 pixel per il primo identificato dal marcatore arial rosso di 18 pixel per il secondo, identificato dal marcatore I marcatori H1 e Hx in generale possono sostituirsi con altri marcatori di paragrafo quali. Impostato il CSS incorporato all'interno del documento gli stessi stili vengono assegnati raccogliendo porzioni di testo tra marcatori e . In questo modo cambiando i valori dei soli attributi impostati nel foglio di stile (aumentando la grandezza o modificando il colore, per esempio), il testo del documento marcato da eviene automaticamente aggiornato al nuovo stile. L'attributo TYPE del tag definisce il linguaggio in formato MIME del foglio di stile. In altre parole questo attributo indica al browser il tipo di foglio di stile supportato, altrimenti ignorato. Ms Internet Explorer supporta i CSS solo in formato MIME, ma esistono i CSS in formato text/jass, cioe' accessibili in javascript. Se l'attributo TYPE viene omesso, il browser lo identifica di default con text/css. Anche Netscape communicator supporta questo attributo. Rispetto ai fogli di stile in linea i CSS incorporati consentono il controllo di un intero documento, ma per interi siti non sono sufficienti a fornire il supporto tecnico necessario. Se per esempio per il testo del documento e' stato usato un certo font e improvvisamente si decide di modificarlo, sara' necessario agire su tutti i documenti del sito perche' le modifiche si estendano all'intero Website. I fogli di stile esterni (o collegati) sono quelli che meglio rispondono alle esigenze degli sviluppatori, e soprattutto quelli che meglio interpretano la filosofia dei fogli di stile. Per comprendere pienamente le peculiarita' dei CSS esterni si pensi ad un sito di grandi dimensioni con 1000 pagine HTML e un certo tipo di formattazione del testo. Improvvisamente esigenze estetiche impongono di modificare colore di sfondo, tipo di carattere e allineamento del testo. Sulla scorta di quanto finora esposto si presentano tre casi: il sito e' costruito in HTML classico, per cui sara' necessario agire su ogni singola marcatura di ognuna delle 1000 pagine; il sito e' costruito adottando fogli di stile in linea, per cui anche in questo caso sara' necessario agire su tutte le singole marcatura di ognuna delle 1000 pagine; il sito e' costruito con i fogli di stile incorporati, per cui si dovra' comunque modificare l'intestazione di stile di 1000 documenti, anche se non si dovra' agire sui singoli attributi della pagina che rimangono identici Seppure l'ultimo espediente limita notevolmente il lavoro di aggiornamento rispetto ai primi due punti, si tratta pur sempre di agire su un numero elevato di documenti. La soluzione a questo problema e' che gli stili dei singoli marcatori vengano raggruppati in un documento indipendente dal resto delle pagine, e da queste semplicemente richiamati con una semplice riga di codice. In questo modo una modifica sul file 'centralizzato' genera automaticamente la stessa modifica su tutti i documenti che lo richiamano. Sulla scorta di questa ovvia considerazione si basano i fogli di stile esterni esaminati in questa lezione. Creare un foglio di stile esterno e richiamarlo all'interno delle pagine HTML e' semplice e consta di 5 fasi: apri una pagina senza alcuna intestazione HTML con blocco notes di Win95-98 o il tuo editor HTML e inserisci al suo interno il seguente codice: H1 { font-size:17px; font-family:verdana; color:green } H2 { font-size:18px; font-family:arial; color:red } Se stai usando blocco notes di Win95-98 vai su FILE/SALVA CON NOME nella prima voce di menu in alto a sinistra. A questo punto si apre una finestra di salvataggio con due campi da riempire: nome file e salva come. Nel primo campo inserisci il nome style.css e nel secondo imposta come 'tutti i file' e finalmente premi il tasto 'salva'. Creato il file style.css (.css e' l'estensione assegnata ai file di stile esterni, mentre il nome 'style' puo' essere modificato a proprio piacimento) copialo nella cartella principale del tuo sito Web. Apri i documenti HTML del tuo sito e inserisci al loro interno, tra i tag il seguente codice: La marcatura link identifica un file esterno al documento HTML che comunque lo riguarda direttamente. L'attributo rel indica che il file collegato e' un foglio di stile (stylesheet). href richiama il percorso del file .css esterno (in questo caso il file si intende depositato nella stessa cartella in cui e' presente il documento HTML; se cosi' non fosse andrebbe inserito il percorso del file, per es.: href='css/style.css'). L'attributo type ha la funzione vista in precedenza per i fogli_di_stile_incorporati. All'interno del documento identifica gli stili da assegnare usando i marcatori e. Per esempio i titoli potrebbero essere stabiliti dae il testo delle pagine da, in questo modo: Titolo della pagina ***** Testo della pagina di prova, Testo della pagina di prova, Testo della pagina di prova, ***** Il risultato di questo esempio e' di stabilire per tutte le pagine del sito uno stile comune per i marcatorie, in modo tale che modificando il solo file esterno tutti i documenti HTML collegati saranno contestualmente aggiornati. Nell'esempio del sito di 1000 pagine, se l'esigenza fosse quella di modificare grandezza e stile dei titoli di pagina, sarebbe sufficiente agire sul marcatoredel file esterno style.css. In chiusura di questa disamina ci preme sottolineare la grandissima utilita' dei fogli di stile esterni che consigliamo di usare il piu' possibile. A fronte di una impostazione iniziale piu' complessa degli altri stili, nel lungo periodo e per siti di grandi dimensioni ripagano ampiamente gli sforzi, oltre a consentire un inedito controllo di pagina e di stile. Negli esempi a completamento di questo articolo, non a caso abbiamo usato l'attributo BODY. I fogli di stile, infatti, riconoscono questo attributo come valore di default di tutto il documento. Un po' come accade per il tagin HTML classico. Quindi, tutto cio' che viene inserito all'interno di BODY sara' assegnato all'intero documento. Per gli esempi abbiamo usatofogli_di_stile_incorporati, i quali possono tranquillamente raccogliersi in un file esterno secondo quanto visto nel capitolo 'css_esterni'. Attributo font-family Elenca la famiglia di font per lo stile di una pagina o di porzioni di essa. Si consideri, per esempio, di voler stabilire un font tipo 'arial' per tutto il documento. Quello che segue e' il modo corretto di impostare lo stile: BODY { font-family:arial } E' possibile stabilire diversi ordini di preferenza, per cui in mancanza del primo font il browser interpreta il successivo. Per fare questo i nomi delle famiglie di font devono essere separate da una virgola. Per nome di famiglia si intende uno dei caratteri quali Arial, courier new, times new roman, impact e innumerevoli altri (per i font si rimanda aFONT.it). I font con nomi composti da piu' termini vanno inseriti tra apici doppi: BODY { font-family:arial, 'courier new', impact } Un'ultima alternativa e' quella di servirsi di un nome generico di font. Si intendono con questo termine gruppi di font che seppur non identici, hanno delle peculiarita' che li accomunano. In questo modo il browser cerchera' il font disponibile sul computer del navigatore, in base all'indicazione del nome generico: BODY { font-family:serif } I fogli di stile riconoscono 5 categorie di font generici: * Serif Il termine si traduce in italiano 'grazie' ed e' consigliabile per lunghe sezioni di testo. Due casi tipici di font serif sono times new roman o garamond Sans Serif Senza grazie. Tipici gli arial e gli helvetica Cursive Font corsivi che imitano la calligrafica umana. Fantasy Caratteri decorativi come, per esempio, comic sans Monospace Questi font hanno la caratteristica di occupare uno spazio identico. Gli altri caratteri, infatti, occupano uno spazio per lettera proporzionale alla stessa. Un classico font monospace e' il courier. Attributo font-size Questo attributo stabilisce la dimensione del testo. Mentre HTML standard prevede soltanto 7 livelli predefiniti per la grandezza del testo (da font size=1 a font size=7), i fogli di stile peremettono un controllo molto piu' preciso ed elastico, che non soffre di nessuna limitazione. E' possibile impostare lo stile in base a cinque diverse unita' di misura: * Punti: questa unita' di misura viene abbreviata con la sigla pt. Ogni punto rappresenta 1/72 di pollice. I punti fanno riferimento esclusivamente allo spazio verticale occupato sullo schermo, mentre la larghezza aumenta proporzionalmente all'aumentare della misura verticale. Pixel: si tratta dei punti presenti su uno schermo, e variano a seconda della risoluzione consentita dal monitor ed impostata dall'utente. Ai pixel si fa riferimento in molti esempi Javascript e per tutte le risoluzioni video consigliate (solitamente 800x600) Pollici: classica unita' di misura anglosassone, i pollici sono espressi dall'abbreviazione in Centimetri:unita' di misura comune di molti paesi occidentali ma poco usata nell'ambito della Web grafica Percentuale:unita' di misura svincolata da valori predeterminati e variabili. Il valore percentuale si riferisce alla grandezza di default impostata nel browser. Per cui di fronte ad un browser che visualizza di default dei font a 14 pixel, un valore del 200% corrisponde a 28 pixel. Tale misura e' variabile da utente ad utente. La misurazione in percentuale fa parte di un sistema di dimensionamento relativo, cioe' dipendente dalla misura corrente del browser. Esistono altri valori in sostituzione della percentuale analizzata in precedenza. BODY { font-size:smaller } definisce il font immediatamente piu' piccolo rispetto a quello di default. BODY { font-size:larger } il contrario del precedente: definisce il font immediatamente piu' grande rispetto a quello impostato dal browser. BODY { font-size:2em } La misura di riferimento e' sempre quella di default, cio' che cambia e' il valore di riferimento stabilito in misura di 1:x. Attributo font-style Questo attributo indica lo stile per il font. E' possibile impostare l'attributo su diversi valori: BODY { font-style:normal } Normal non visualizza alcuno stile particolare e si rifa' a quello stabilito di default dal browser. E' possibile sostituire 'roman' a 'normal' BODY { font-style:italic } Il classico testo corsivo che ben conosciamo da HTML classico e da tutti gli editor di testo. BODY { font-size:oblique } Questo attributo funziona apparentemente come 'italic', ma se ne differenzia perche' rende obliquo verso destra il normale font, e non richiede il caricamento di un altro carattere come per italic. Attributo font-variant Questo attributo e' simile a font-size, ma se ne differenzia perche' assegna uno stile tutto maiuscolo. Se non e' disponibile sulla macchina client la versione a maiuscole grandi del font, lo stile usera' le maiuscole adattandone le misure. I valori da assegnare sono 'normal' e 'small-caps' BODY { font-variant: small-caps } Attributo font-weight L'attributo font-weight stabilisce lo spessore del font come BOLD per HTML classico. E' possibile assegnare a questo attributo 7 differenti valori: BODY { font-weight: extra-light } BODY { font-weight: demi-light } BODY { font-weight: light } BODY { font-weight: medium } BODY { font-weight: extra-bold } BODY { font-weight: demi-bold } BODY { font-weight: bold } Attributo text-decoration Questo attributo consente di abbellire il testo con sottolineature e altri effetti. Puo' assumere diversi valori: none, underline, italic e line-height: BODY { text-decoration: none } BODY { text-decoration: underline } BODY { text-decoration: italic } BODY { text-decoration: line-height } Un altro effetto molto in voga in questi ultimi tempi (lo si ritrova anche nelle pagine di HTML.it) e' quello che elimina le sottolineature dai link. Per fare questo e' necessario impostare per i font incorporati il seguente codice: A { text-decoration: none } e per i fogli di stile in linea il seguente codice: HTML.it Sulla falsariga di questo esempio sara' possibile impostare i fogli di stile incorporati in modo tale che la sottolineatura appaio solo quando il mouse sfiora i link: A:link, A:visited { text-decoration: none } A:hover { text-decoration: underline } In questo modo, quando il link e' inattivo non e' sottolineati, mentre quando il mouse sfiora il link viene attivata la sottolineatura. Questo esempio funziona perfettamente con Internet Explorer, mentre con Netscape rende privo di sottolineatura il testo ma non riconosce A:hover. Per ulteriori esempi e informazioni sull'argomento si rimanda alla sezioneeffetti_su testo_e_link I fogli di stile permettono di giustificare il testo senza l'uso improprio di tabelle o espedienti simili. I CSS creano degli elementi visualizzati all'interno di box. Ogni box ha delle proprieta' che si possono dividere in tre categorie: Le proprieta' dei margini che assegnano un bordo esterno al box; le proprieta' di riempimento che assegnano uno spazio interno al box che separa il contenuto dai margini; le proprieta' dei bordi che definiscono le linee grafiche intorno al box. I valori di questi attributi sono espressi in pollici (in), centimetri (cm), pixel (px), punti (pt) e unita' (em). Semplificando il concetto, i fogli di stile sono impostati come se si trattasse di finestre indipendenti all'interno della pagina. Hanno, quindi, una loro grandezza e valori di impostazione. Tra questi, oltre al testo visto in precedenza ed al background che si vedra' piu' oltre, sono presenti i valori relativi ai bordi di tali pseudo- finestre. Esistono vari attributi per i bordi e l'allineamento, vediamo quali. Attributi margin-left, margin-right, margin-top, margin-bottom Si tratta di quattro attributi che impostano la distanza tra il box contenente i CSS e gli elementi adiacenti, dai quattro margini: Attributo margin I quattro valori visti in precedenza possono essere definiti con il solo attributo margin. Quando viene impostato questo valore, il browser assume come ordine il primo margine in alto (margin-top), il destro (margin-right), l'inferiore (margin-bottom) e il sinistro (margin-left). Se ne vengono forniti solo due o tre, quelli mancanti vengono automaticamente assegnati in base al valore del lato regolarmente impostato: BODY { margin: 10px 10px 10px 10px } In questo primo esempio tutti gli elementi hanno uguale distanza rispetto agli elementi vicini, e ognuno di essi e' correttamente indicato. BODY { margin: 10px 10px } In questo secondo esempio sono impostati solo due valori (margin-top e margin-right). I mancati margini sinistro e inferiore vengono desunti rispettivamente dal valore del margine destro e superiore. Attributi padding-top, padding-bottom, padding-right, padding-left Tali attributi indicano la distanza tra i lati del box e gli elementi al suo interno. In altre parole hanno una funzione opposta a quella vista in precedenza per l'attributo margin. E' possibile usare le misure standard (pollici, centimentri, punti, pixel ecc.) o valori percentuali: BODY { padding-top: 10pt; padding-right; 10px; padding-bottom: 110%; padding-left: 2in } Attributo padding Come per l'attributo margin, anche i quattro valori visti in precedenza possono essere definiti con un solo attributo padding. Quando viene impostato questo valore, il browser assume come ordine il primo valore di riempimento in alto (padding-top), il destro (padding-right), l'inferiore (padding-bottom) e il sinistro (padding-left). Se ne vengono forniti solo due o tre, quelli mancanti vengono automaticamente assengati in base al valore del lato impostato: BODY { padding: 10pt 10px 110% 2in } In questo primo esempio tutti gli elementi hanno uguale distanza rispetto agli elementi vicini, e ognuno di essi e' correttamente indicato. BODY { padding: 10pt 10px } Attributi border-top, border-bottom, border-right, border-left Questi attributi definiscono lo stile e il colore di ogni elemento e vengono impostati con alcune parole chiave: none, dotted, dashed, solid, double, groove, ridge, inset e outset: BODY { border-top: dotten green; border-left: dashed black; border-right: solid blue; border-bottom: groove yellow } Attributi border-top-width, border-bottom-width, border-right-width, border-left-width La funzione di questi attributi e' di generare un effetto simile ai bordi delle table HTML. E' possibile stabilire misure percentuali o di riferimento (em), oltre a parole chiave quali thin, medium e thick: BODY { border-top-width: 5px; border-left-width: 4pt; border-right-width: thick; border- bottom-width: 2em } Attributo border-width Come per gli attributi margin e padding, anche i quattro valori visti in precedenza possono essere definiti con un solo attributo border-width: BODY { border-width: 10pt 10px 1em 2in } Attributo border-color Questo attributo definisce i colori dei quattro bordi del CSS nella loro globalita', cioe' senza possibilita' di stabilire colori diversi per ognuno di essi: BODY { border-color: green } Attributo border-style Questo attributo definisce lo stile dei quattro bordi del CSS nella loro globalita', cioe' senza possibilita' di stabilire stili diversi per ognuno di essi. I valori sono specificati da alcune parole chiave: none, dotted, dashed, solid, double, groove, ridge, inset, outset. Gli ultimi quattro valori sono tridimensionali, sempre che il browser li supporti: BODY { border-style: groove } Attributo border Si tratta di una sorta di attributo omnicomprensivo degli ultimi visti in questa pagina. Racchiude tutte le varianti relative ai bordi, agli stili, al colore e alla larghezza. Assegna gli stessi valori a tutti i lati, annullando gli effetti di altri attributi simili in precedenza inseriti: BODY { border: 12px groove green } Attributo width Si riferisce alla larghezza per orizzontale del box. Puo' essere espresso nelle unita' di misura finora analizzate. Il valore 'auto' permette al box di adattarsi al contenuto degli elementi: BODY { width: 300px } Attributo float Questo attributo ha una funzione simile ad ALIGN in HTML classico. I valori a disposizione sono left, right e none: BODY { float: right } Attributo clear Se vengono specificati i valori right o left, gli elementi si dispongono sotto float dal lato specificato. Usando none sono impostati su entrambi i lati: BODY { clear: left right } In HTML classico lo sfondo viene impostato all'interno della marcatura attraverso gli attributi bgcolor (per il colore univoco del fondo pagina) e background (per assegnare allo sfondo un'immagine gif o jpg). I limiti di questi strumenti sono evidenti soprattutto quando e' necessario inserire un'immagine di sfondo complessa. Esiste un attributo di HTML che permette, solo con MS Internet Explorer, di rendere fissa l'immagine di sfondo richiamata come background: Come detto e' una soluzione funzionante solo con il browser Microsoft. Gli utenti Netscape non incontreranno alcun messaggio di errore, ma soltanto una pagina con il classico sfondo che 'scrolla' insieme al resto del documento (esistono alcuni espendienti per rendere fissi elementi nella pagina nonostante lo scroller). Le specifiche dei CSS introducono, anche per i colori di sfondo, delle importanti novita', volte soprattutto a liberare gli sviluppatori da vincoli operativi. Esistono vari attributi per i colori e gli sfondi, ecco quali. Attributo color L'attributo color definisce il colore del testo del documento (non si confonda con il colore di background) sia con i nomi dei colori in inglese (black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal e aqua) sia con triplette esadecimali. Il formato RGB usa, per definire i colori, tre numeri interi compresi tra 0 e 255, mediante una scala di valori lineare. Il rosso, quindi, diventa 255,0,0 e le sfumature cromatiche si realizzano attraverso le combinazioni di valori. In HTML i valori numerici dei colori vengono definiti in base alla cosidetta 'tripletta esadecimale', ovvero un insieme di tre numeri e due cifre esadecimali. Visualizza_l'esempio_pratico Attributo background-color Questo attributo determina il colore di sfondo di un determinato stile. La sua funzione e' simile al classico BODY di HTML, ma puo' essere avvicinata al colore di sfondo delle tabelle. Viene usato soprattutto per evidenziare alcune parti del documento. Visualizza_l'esempio_pratico Attributo background-image Ha una funzione simile al background='image.gif' di HTML classico, richiamando un'immagine in formato GIF o JPG caricata sullo sfondo del css Visualizza_l'esempio_pratico Attributo background-repeat Questo attributo consente di ripetere l'immagine di sfondo cosi' come accade per il tag BODY di HTML. Puo' assumere diversi valori: repeat (l'immagine viene replicata per verticale e orizzontale), repeat-x (replica l'immagine solo per orizzontale), repeat-y (replica l'immagine solo per verticale): Visualizza_l'esempio_pratico Visualizza_l'esempio_pratico Attributo background-position I fogli di stile consentono di scegliere un punto di inizio per l'immagine di sfondo diverso dal classico angolo in alto a sinistra. HTML classico, infatti, e' impostato perche' lo sfondo venga visualizzato dal punto piu' estremo in alto a sinistra. Con i CSS e' possibile usare alcune parole chiave per il posizionamento in verticale (top, center e bottom) ed orizzontale (left, center e right). Se sono espresse due coordinate, la prima e' orizzontale e la seconda verticale: Visualizza_l'esempio_pratico Attributo background E' un attributo che consente di definire univocamente i diversi attributi dello sfondo finora esaminati. L'ordine da seguire e' il seguente: Il raggruppamento e' una tecnica aggiuntiva per rendere piu' funzionali i fogli di stile e consentire effetti altrimenti irrealizzabili. Il raggruppamento di stile riduce gli attributi e gli argomenti creando gruppi logici. Nel particolare tale funzione viene svolta in due modi: Raggruppare TAG * Per comprendere questo argomento si pensi ad una pagina Web impostata con diversi stili, ognuno dei quali identificato dai seguenti marcatori: H1 { font-family:arial; font-size:14px; color:blue; } H2 { font-family:arial; font-size:14px; color:blue; } H3 { font-family:arial; font-size:14px; color:blue; } Per raggruppare gli stili e' sufficiente sintetizzare il codice in questo modo: H1, H2, H3 { font-family:arial; font-size:14px; color:blue; } Un altro esempio nella sua forma non raggruppata e' il seguente: A:link { text-decoration: none } A:visited { text-decoration: none } Che, invece, seguendo le regole generali del raggruppamento di stili diventa: A:link, A:visited { text-decoration: none } Raggruppare gli attributi * E' possibile dividere gli stili in base alle informazioni specifiche sulle famiglie. Con questo tipo di raggruppamento il seguente stile di testo: BODY { font-family:verdana; font-size:15px; font-weight:bold; font-style:normal; color: red} si trasforma in: BODY { font: bold normal 15px verdana red} E' stato enunciato l'attributo font e successivamente gli argomenti che lo compongono. L'ordine di enunciazione non va lasciato al caso ma impostato in base a precise regole gerarchiche. Nell'esempio, il peso, il tipo di carattere e la grandezza vanno posti prima della dimensione. Gli attributi non sono separati da virgole ma da semplici spazi. Le stesse regole valgono per i margini. Rimandiamo alcapitolo_corrispondenteper ulteriori approfondimenti. L'assegnazione di classi consente di definire un alto livello di variazione di singoli tag HTML. Cio' avviene aggiungendo un'estensione class ai tradizionali tag dell'HTML, dopo aver impostato le classi all'interno del foglio di stile. Questo il codice da impostare nel CSS: Sussessivamente, all'interno del documento, va inserito il riferimento alla classe: Testo della pagina Altro concetto collegato e' quello delle pseudoclassi: elementi di un solo tipo che soddisfano un certo criterio contestuale. Un esempio molto chiaro di pseudoclassi è quello relativo agli elementi anchor, che quando visitati costituiscono una pseudoclasse visited, quando attivi active e quando non visitati link. Una pesudoclasse viene specificata all'interno dello stile seguita dai due punti: A:link { text-decoration: none } visited { text-decoration: none } La pseudoclasse visited non ha bisogno dell'elemento A, perche' solo gli ancoraggi possono avere una pseudoclasse link. Nella interminabile guerra dei browser, Netscape e Microsoft hanno seguito strade differenti, nella vana convinzione che tecnologie proprietarie imposte al mercato fossero la soluzione migliore al 'conflitto' in corso. Cosi' e' stato per molti standard (divenuti tali, ed accettati da entrambe le societa', solo dopo l'intervento del W3C) e cosi' e' anche per i fogli di stile. Le raccomandazioni CSS1 e CSS2 hanno ripreso il modello proposto da Microsoft e respinto quanto avanzato da Netscape. L'ennesimo insuccesso di Netscape porta il nome di Fogli di stile Javascript (JSSS). Si tratta di fogli di stile simili a quelli visti finora, ma con alcune non trascurabili differenze: e' riconosciuto soltanto da Netscape e non da Internet Explorer; gli attributi composti da piu' parole non sono separati da un trattino come per i CSS, ma dalla forma maiuscola delle prime lettere; quando si richiama un foglio di stile javascript la sintassi corretta e' la seguente: sono introdotti tre nuovi oggetti: * - Le marcature - Le classi - Gli identificatori Usando i tre metodi introdotti dai JSSS si definisce il valore di ogni attributo del documento. Non ci addentriamo oltre nell'esposizione di una tecnologia non standardizzata dal W3C e destinata ad essere abbandonata dalla stessa Netscape. Per chi volesse avere maggiori informazioni su JavaScript rimandiamo allaGuida Javascript. Molti degli esempi di questo tutorial sono compatibili esclusivamente con il browser Internet Explorer, a causa delle conseguenze negative della 'guerra dei browser'. La corsa alla 'tecnologia proprietaria' ha spinto Netscape e Microsoft verso soluzione incompatibili e spesso contrastanti (soprattutto per HTML dinamico non e' raro che demo per explorer creino errore negli script di Netscape e viceversa). I fogli di stile non sono stati risparmiati da questo duello, ma non mancano punti e tecnologie sulle quali e' stato raggiunto un accordo. Le specifiche sul posizionamento dinamico hanno visto l'accordo di Microsoft e Netscape, che attraverso i propri rappresentanti presso il W3C, hanno collaborato alla stesura di una bozza di lavoro chiamata CSS-P (CSS positioning). Grazie a questa collaborazione sia Netscape 4 che Explorer 4 e 5 riconoscono e interpretano correttamente il posizionamento dinamico all'interno della pagina. Ma cosa si intende per posizionamento dinamico?. I documenti HTML sono posizionati all'interno della pagina attraverso uno schema di flusso dei dati. Questo significa che si parte dal margine alto a sinistra del documento e ogni elemento si posiziona in base al precedente, senza possibilita' di sovrapporre oggetti. Le specifiche dei CSS-P consentono, invece, tre diversi tipi di posizionamento: statico: si tratta del posizionamento predefinito dal browser, cioe' quello tradizionale di HTML, per cui ogni elemento e' posizionato in base al flusso di dati del documento; assoluto: questo tipo di posizionamento consente di astrarre il CSS dal flusso dei dati, consentendo di posizionarlo in qualsiasi punto della pagina, in modo assolutamente indipendente dagli altri elementi, che anzi possono venire sovrapposti o sottoposti. relativo: tale posizionamento non esce dal flusso di dati, ne' produce alcuna modifica rispetto agli elementi posizionati in modo statico. Assume caratteristiche proprie del posizionamento dinamico quando vengono impostate le proprieta' left e right, che spostano l'elemento a sinistra e in alto di quello che lo precede. I posizionamenti assoluto e relativo consentono agli sviluppatori di sistemare con precisione elementi nel documento, di sovrapporli e attraverso degli script, di muoverli. In questo modo i webdesigner hanno un controllo sul documento simile a molti strumenti in possesso dei grafici tradizionali. La bozza di lavoro dei CSS-P definisce le proprieta' dei fogli di stile relative al posizionamento dinamico. Molte di queste proprieta' sono note gia' da HTML classico (le proprieta' width e height, per esempio), altre invece sono inedite. Per comprendere meglio di cosa stiamo parlando e' bene procedere con qualche esempio pratico e relativo codice. Premettiamo che in questa sede faremo uso difogli_di_stile_in_linea, perche' e' piu' agevole definire il posizionamento per ogni singolo elemento. Nulla vieta che per creare strutture di pagina complesse si possano usare i CSS incorporati o esterni. Ecco un esempio di posizionamento assoluto con uso delle proprieta' top e left: Le misure sono espresse in pixel (px), ma possono essere sostituite con altri valori: punti (pt), centimentri (cm), pollici (in) ecc. Tutte fanno riferimento al margine superiore sinistro. L'esempio considerato crea un foglio di stile con posizionamento assoluto (position: absolute) distanziato dal margine superiore e sinistro di 100 pixel. Tutto cio' che si trova all'interno del CSS (l'immagine elemento01.gif) sara' posizionato in questo modo. Visualizza_l'esempio_pratico Per comprendere la differenza pratica tra posizionamento assoluto (visto in precedenza) e relativo, procediamo con un altro esempio. Si tratta di un semplice testo privo di qualsiasi formattazione, che il documento interpreta come flusso di elementi. All'interno di questo testo impostiamo un foglio di stile con posizionamento relativo per le parole 'sito italiano', con una distanza dall'elemento piu' vicino alla sinistra e in alto di 10 pixel: HTML.it e' il sito italiano> piu' visitato e autorevole sul Web publishing. Decine di tutorial, centinaia di Javascript, di applet Java, di demo per Dynamic HTML. Abbiamo usato la marcatura SPAN al posto di DIV, perche' quest'ultima e' piu' adatta a quantita' corpose di testo, mentre la prima si adatta meglio a frasi brevi come questa. Altra considerazione riguarda il ritorno a capo che DIV impone agli elementi Nell'esempio pratico che segue abbiamo usato entrambe con risultati differenti. Visualizza_l'esempio_pratico Altri parametri impostabili sono width e height che stabiliscono rispettivamente la larghezza per orizzontale e l'altezza per verticale del foglio di stile. Anche in questo caso possono usarsi indifferentemente le misure consentite dai fogli di stile: Il testo viene racchiuso in un foglio di stile di dimensioni pari a 100px di altezza e altrettanti di larghezza. La distanza dal margine superiore sinistro e' quella espressa in precedenza. Visualizza_l'esempio_pratico La proprieta' visibility determina la visibilita' di un elemento. Puo' essere impostato su hidden o visible hidden rende invisibili gli elementi, mentre visibile li rende visibili: Visualizza_l'esempio_pratico Si e' detto in apertura che i CSS-P permettono di sovrapporre immagini, testo ed elementi gli uni agli altri. La gerarchia con la quale tali elementi vengono sovrapposti dipende, quando non stabilito diversamente, dalla posizione nel codice HTML. Un elemento posizionato dopo un altro sara' sovrapposto a questo. Come nell'esempio che segue: I> Visualizza_l'esempio_pratico E' possibile modificare l'impostazione di default per cui un elemento scritto successivamente nel codice e' sovrapposto agli elementi precedenti, attraverso la proprieta' z-index. Questa proprieta' definisce l'ordine grafico degli elementi attraverso valori numerici. L'elemento principale va impostato come valore positivo '1', mentre gli altri in posizione sottostante con valore negativo '-1'. Riprendendo l'esempio precedente e lasciando inalterato l'ordine gerarchico, e' possibile che il secondo elemento si sovrapponga al primo grazie alla proprieta' z-index: I> Visualizza_l'esempio_pratico La proprieta' overflow permette di gestire, attraverso l'uso di scroller, i contenuti degli elementi che eccedono l'area impostata con height e width. Perche' cio' accada e' necessario che la proprieta' overflow sia impostata su 'scroll' e non su 'hidden'. In questo secondo caso, infatti, gli elementi vengono visualizzati limitatamente alla grandezza dell'area di ritaglio ma senza lo scroller laterale: Visualizza_l'esempio_pratico Tutti gli elementi supportano il posizionamento statico e relativo, ma solo alcuni quello assoluto. Ecco quali: Applet IFrame Select Button IMG Span Div Input Table Fieldset Object Textarea Sfruttando quanto visto finora per il posizionamento dinamico, possiamo ora esporre un utilizzo pratico di tale tecnologia. Creare titoli con effetto ombreggiato e' possibile in HTML classico esclusivamente con il ricorso a immagini (create con appositi programmi di Webgrafica o fotoritocco). Nulla da eccepire su tale scelta, ma e' ovvio che la presenza di immagini appesantisce la pagina in termini di Kb. Con i CSS-P e' possibile ottenere lo stesso risultato senza usare immagini ma semplice testo. Non si tratta di una procedura molto complessa che anzi per molti versi appare banale. Si crea un testo assegnando uno stile, una grandezza e una certa posizione assoluta nella pagina: Per il testo si e' usato il font impact di grandezza pari a 100 pixel e colore nero, distanziato dal margine sinistro e superiore di 10 pixel. La proprieta' z-index e' impostata sul valore positivo 1. Fin qui nulla di particolare, visto che si tratta di un testo nero senza ombreggiatura. Per inserire l'ombra si deve aggiungere questo codice: HTML.it Il testo rimane di uguale grandezza e stile ma cambia il colore (dal black precedente al gray attuale). La distanza dello stile dal margine superiore e sinistro aumenta rispettivamente di 5 pixel e la proprieta' z-index e' impostata sul valore negativo -1. Tutto questo crea il primo testo sovrapposto al secondo, che essendo distanziato di 5 pixel ma di uguale dimensione crea un effetto ombreggiato. Ms Internet Explorer implementa dalla versione 4 la proprieta' CSS cursor per il controllo del puntatore del mouse, quando l'utente posiziona lo stesso su un determinato elemento. Esistono da anni puntatori dalle forme piu' svariate e fantasiose per Windows, ma non e' di questo che si tratta. La proprieta' CSS cursor, infatti, non permette di ottenere cursori di forme diverse da quelli impostati di default nel sistema, ma al contrario ne permette l'interscambio e il controllo. L'abitudine ci spinge a ritenere ovvio che quando il puntatore del mouse passa su un link, da freccia si trasforma in manina. Cosi' come quando una pagina Web e' in fase di caricamento e' normale che il puntatore si trasformi in clessidra. Bene, questo foglio di stile consente di controllare questi eventi, assegnando un puntatore a piacimento a tutti gli eventi della pagina. Segue un elenco degli effetti ottenibili con la proprieta' CSS cursor in MsIe. Auto Il cursore viene definito in base alle impostazioni automatiche di default del browser PASSA QUI IL MOUSE PER UNA PROVA Crosshair Il browser visualizza il cursore con la classica croce (che potrebbe sembrare anche un mirino) PASSA QUI IL MOUSE PER UNA PROVA Default Il browser visualizza il puntatore sempre nella sua forma standard (solitamente una freccia rivolta verso l'alto a sinistra) PASSA QUI IL MOUSE PER UNA PROVA Hand Il cursore assume per tutto il documento la forma della mano. PASSA QUI IL MOUSE PER UNA PROVA Move Il cursore assume la forma tipica degli elementi trascinati PASSA QUI IL MOUSE PER UNA PROVA e-resize Il cursore assume la forma di una freccia verso sinistra (tipicamente attivata quando si ridimensionano finestre o oggetti) PASSA QUI IL MOUSE PER UNA PROVA ne-resize Freccia di default rivolta in alto a destra PASSA QUI IL MOUSE PER UNA PROVA nw-resize Freccia rivolta verso l'alto a sinistra (questo stile si differenzia da 'default' visto in precedenza, perche' quest'ultimo assegna il cursore in base alle impostazione del browser, mentre quest'ultimo stabilisce tout court il cursore con freccia rivolta verso l'alto a sinistra, anche se le impostazione del browser sono differenti) PASSA QUI IL MOUSE PER UNA PROVA n-resize Freccia non-standard rivolta verso l'alto. PASSA QUI IL MOUSE PER UNA PROVA se-resize Freccia standard rivolta verso il basso a destra PASSA QUI IL MOUSE PER UNA PROVA sw-resize Freccia standard rivolta verso il basso a sinistra. PASSA QUI IL MOUSE PER UNA PROVA s-resize Freccia non-standard rivolta verso il basso. PASSA QUI IL MOUSE PER UNA PROVA w-resize Freccia non-standard rivolta verso sinistra PASSA QUI IL MOUSE PER UNA PROVA text Al cursore viene assegnata la tipica forma della barra verticale che i browser impostano quando incontrano testo senza link o immagini. PASSA QUI IL MOUSE PER UNA PROVA wait Il classico cursore a forma di clessidra od orologio. PASSA QUI IL MOUSE PER UNA PROVA help Il cursore a forma di punto interrogativo o fumetto, che solitamente indica la possibilita' di ottenere maggiori informazioni sull'oggetto. PASSA QUI IL MOUSE PER UNA PROVA Le transizioni di pagina consentono di visualizzare effetti simili ad alcuni cambi immagine televisivi. In altre parole la pagina richiamata non è immeditamente visualizzata, ma preceduta da effetti di vario tipo, quali dissolvenze e altre presentazioni. Le transizioni si attivano esclusivamente quando si accede alla pagina da un altro documento o in alternativa quando si esce dalla pagina per visualizzarne un'altra. Quindi premendo il tasto aggiorna del browser, questo non sortira' alcun effetto, ma sara' necessario tornare alla pagina precedente e cliccare nuovamente sul link. Gli effetti di transizioni possono essere in entrata (page-enter) o in uscita (page-exit) di pagina. Il codice va inserito tra i tag e consente 23 diversi effetti. Negli esempi che seguono e' stato impostato il valore 'Page enter' per cui gli effetti si producono all'entrata della pagina. Questi gli effetti disponibili: Box_in Box_out Circle_in Circle_out Wipe_up Wipe_down Wipe_right Wipe_left Vertical_blinds Horizontal_blinds Checkerboard_across Checkerboard_down Random_dissolve Split_vertical_in Split_vertical_out Split_horizontal_in Split_horizontal_out Strips_left_down Strips_left_up Strips_right_down Strips_right_up Random_bars_horizontal Random_bars_vertical Random Per ottenere degli effetti simili in uscita dalla pagina è sufficiente sostituire a 'page-enter' la dicitura 'page-exit'. Un'ultima avvertenza riguarda l'impossibilita' di usare le transizioni in pagine divise in frame, o per meglio dire all'interno dei singoli frameset. Se, infatti, il tag viene inserito nel file principale del frame (quello che costruisce e imposta i vari frameset) gli effetti si producono, mentre questo non accade nei singoli frameset. La spiegazione di questo, che a prima visto potrebbe apparire come un bug, e' nella constatazione che gli effetti di transizioni si producono sull'intera schermata del browser e non su una singola parte di essa. Infine va sottolineato che questi effetti si ottengono esclusivamente su Microsoft Internet Explorer. I fogli di stile consentono di evitare l'uso di GIF animate attraverso l'inserimento di semplice codice HTML. Gli effetti ottenibili grazie ai filtri sono sei e tutti si verificano quando il puntatore del mouse passa sull'immagine: Trasparency: rende opaca l'immagine finche' il mouse non la sfiora e assume la luminosita' originale; Blur: effetto sfuocato dell'immagine verso sinistra Light: effetto ombreggiato dell'immagine da destra verso sinistra Wave: effetto ondulato sull'immagine Flip horizontal: immagine invertita verso sinistra Flip vertical: immagine capovolta Per ottenere gli effetti dei filtri sull'immagine e' necessario agire su due punti del documento: all'interno del tag e nell'SRC dell'immagine. Gli esempi che seguono mostrano l'intero codice da impostare per tutti e sei gli effetti citati. )?> Visualizza_il_codice_HTML ========================================================================================= )?> Visualizza_il_codice_HTML ========================================================================================= )?> Visualizza_il_codice_HTML ========================================================================================= )?> Visualizza_il_codice_HTML ========================================================================================= )?> Visualizza_il_codice_HTML ========================================================================================= )?> Visualizza_il_codice_HTML All'immagine 'paesaggio.jpg' viene assegnato un nome 'immagine1' e un livello di opacità pari a 50. Per opacità si intende quanto visibile sia l'immagine all'atto del caricamente della pagina. A livelli più bassi corrisponde un'immagine più sfocata. Il gestore di eventi 'onmouseover' stabilisce che nel momento in cui il puntatore del mouse entra nell'area di immagine la stessa diviene nitida; mentre il gestore 'onmouseout' fa tornare l'immagine allo stato iniziale quando il puntatore si sposta. Quanto esposto nel presente capitolo non e' prettamente attinente ai fogli di stile, nel senso che non rientra in quanto espresso dalle raccomandazioni ufficiale del W3C in materia. Ma intendiamo trattarne ugualmente, seppur con la dovuta sintesi, perche' e' utile conoscere piccoli accorgimenti nella realizzazione di form HTML. Il nuovo standard di HTML 4 ha introdotto notevoli modifiche alla precedente versione 3.2 del linguaggio di Markup piu' diffuso del mondo. HTML 4.0 migliora la gestione dei moduli rendendoli interattivi, grazie ad eventi intrinseci, e aggiungendo supporti per i browser a sintesi vocale. Sono introdotti tre nuovi elmenti: LABEL fornisce ai browser a sintesi vocale la possibilita' di descrivere un elemento e rende interattivi i form. Le etichette utilizzate possono essere implicite o esplicite. BOTTON consente di creare altri bottoni oltre ai due standard (invio e reset) finora disponibili. FIEDLSET raggruppa campi relativi in modo da fornire ai browser a sintesi vocale la possibilita' di descrivere diversi gruppi e permettere all’utente di spostarsi da un gruppo ad un altro. In associazione all'elemento LEGEND, puo' essere usato per nominare il gruppo. Entrambi questi nuovi elementi, permettono una migliore interpretazione ed interazione. Una nuova serie di attributi onchange-INPUT, in associazione con il supporto per i linguaggi script, permette ai form dei providers di verificare i dati inseriti dall'utente. L'elemento INPUT ha un nuovo attributo ACCEPT, che permette agli autori di specificare una lista di media o tipi di struttura per l'input. L'attributo ACCESSKEY provvede a specificare un accesso diretto tramite tastiera ai campi del formulario. Continuiamo col vedere alla prova alcune nuove potenzialita' relative ai moduli HTML. Come premesso non si tratta di fogli di stile 'puri', ma di esempi che sfruttano congiuntamente Javascript e taluni aspetti di HTML dinamico. Ne trattiamo comunque in questo articolo per fornire strumenti di Web publishing avanzati. ========================================================================================= E' oggi possibile creare dei campi SELECT all'interno dei moduli HTML che compaiano con piu' scelte gia' predefinite. Quello che segue ne e' un esempio: [One or more of Prima selezione/Seconda selezione/Terza selezione/Quarta selezione/Quinta selezione/Sesta selezione] Visualizza_il_codice_di_questo_esempio ========================================================================================= HTML 4.0 supporta l'attributo TITLE, che consente di visualizzare una piccola finestra quando il puntatore del mouse clicca o viene posizionato sopra un elemento. Nei browser obsoleti l'attributo TITLE non crea problemi di visualizzazione, in quanto viene ignorato e visualizzato come seplice testo. Grazie alle potenzialita' di questo attributo e' possibile ottenere effetti simili al seguente: Clicca qui per una provanone?? : ?? ? none?)> [ ] Visualizza_il_codice_di_questo_esempio ========================================================================================= Questo esempio puo' essere utile per creare effetti grafici su form altrimenti piatti e noiosi. Come funziona e' presto detto: finche' non si scrive nulla all'interno dei campi del form, questi assumono un colore di default, che perderanno solo quando verra' inserito del testo o selezionate delle scelte. In questo modo il visitatore ha chiaro quali campi abbia compilato e quali lo debbano ancora essere. Prova a scrivere qualcosa nella stringa gialla che segue: [prova ] Visualizza_il_codice_di_questo_esempio ========================================================================================= E' possibile creare elementi OPTION di diverso colore con semplice codice HTML. E’ bene precisare, pero', che gli elementi OPTION rappresentano, per il modello di oggetti dell’HTML dinamico un’eccezione, in quanto non vengono esposti nell’insieme 'all' del documento. Cio' significa che l’elemento OPTION viene esposto soltanto mediante il corrispondente elemento select di livello superiore. A prescindere da questo discorso che riguarda piu' direttamente HTML dinamico, nella pratica con l'elemento OPTION e' possibile creare voci di scelta di diversi colori, come nell'esempio che segue: [One of: Ottima/Buona/Discreta/Sufficiente] Visualizza_il_codice_di_questo_esempio ========================================================================================= L’elemento LABEL descrive e incorpora gli eventi intrinseci del form quando la pagina viene visualizzata da un browser a sintesi vocale. Le etichette possono essere implicite o esplicite, e risultano utili con caselle di controllo e pulsanti di opzione. Un’etichetta associata a un pulsante consente di selezionare e deselezionare lo stesso. Seguendo questo principio si puo' creare un modulo all’interno del quale un elemento TEXT, se selezionato, deseleziona gli elementi RADIO presenti nel form stesso. Nell'esempio che segue e' necessario scegliere tra uno degli elementi da spuntare o la stringa bianca. Non e' possibile, almeno in questo caso, effettuare una scelta doppia. o Javascript o HTML dinamico o Xml o Applet Java [altro ] Visualizza_il_codice_di_questo_esempio ========================================================================================= HTML 4 ha introdotto i cosidetti 'controlli disattivati', che cioe' non possono essere attivati o per i quali non e' possibile modificare il contenuto. Vengono usati due attributi: DISABLED (impedisce che l'elemento riceva eventi) e READONLY (viene visualizzato quando il controllo e' conforme al contesto ma i contenuti non sono modificabili). essere> Prova a scrivere nella stringa che segue: > Visualizza_il_codice_di_questo_esempio Le proprieta' relative ai font non si riferiscono al tipo di carattere (gia' analizzato nella sezione 'Attributi_di_stile_per_il_testo') ma al loro aspetto e taluni punti relativi al posizionamento. Attributo letter-spacing Letter-spacing stabilisce la distanza tra le singole lettere all'interno di un documento. I valori sono espressi in misure em. Si tratta di un'unita' di misura pari alla grandezza della lettera m. Viene usata anche con decimali. HTML.it e' il sito italiano piu' visitato e autorevole sul Web publishing. Decine di tutorial, centinaia di Javascript, di applet Java, di demo per Dynamic HTML. Visualizza_l'esempio_pratico Attributo text-transform Questo attributo permette di manipolare le minuscole e le maiuscole del testo grazie a tre parole chiave: uppercase: rende maiuscole tutte le lettere dell'elemento: HTML.it e' il sito italiano piu' visitato e autorevole sul Web publishing. Decine di tutorial, centinaia di Javascript, di applet Java, di demo per Dynamic HTML. capitalize: rende maiuscola solo la prima lettera di ogni parola: HTML.it e' il sito italiano piu' visitato e autorevole sul Web publishing. Decine di tutorial, centinaia di Javascript, di applet Java, di demo per Dynamic HTML. lowercase: rende minuscole tutte le lettere dell'elemento: HTML.it e' il sito italiano piu' visitato e autorevole sul Web publishing. Decine di tutorial, centinaia di Javascript, di applet Java, di demo per Dynamic HTML. Visualizza_l'esempio_pratico Attributo text-align Questo attributo ha la funzione di visualizzare il testo in quattro posizioni: left (sinistra), center (centrato), right (destra) e justify (giustificato). HTML.it e' il sito italiano piu' visitato e autorevole sul Web publishing. Decine di tutorial, centinaia di Javascript, di applet Java, di demo per Dynamic HTML. Visualizza_l'esempio_pratico Attributo text-indent Questo attributo definisce la quantita' di spazio (espressa in valori assoluti em o in pollici) aggiunta immeditamente prima della prima parola. HTML.it e' il sito italiano piu' visitato e autorevole sul Web publishing. Decine di tutorial, centinaia di Javascript, di applet Java, di demo per Dynamic HTML. Visualizza_l'esempio_pratico Attributo line-height L'attributo line-height definisce la distanza verticale tra le varie linee di testo. I valori sono espressi in percentuali o in unita' assoluti em. Tali valori sono direttamente proporzionali alla grandezza del testo (font-size). Per cui, nell'esempio che segue, essendo il valore assoluto line-height impostato su 2 e il testo su 14px, la distanza sara 28px (14px * 2em). HTML.it e' il sito italiano piu' visitato e autorevole sul Web publishing. Decine di tutorial, centinaia di Javascript, di applet Java, di demo per Dynamic HTML. Visualizza_l'esempio_pratico Attributo list-style La proprieta' list-style consente di sostituire i punti elenco standard di HTML con immagini in formato GIF. E' possibile applicare tali punti a tutto l'elenco o soltanto ad una parte di questo. UL { list-style-image:URL(punto.gif) } Visualizza_l'esempio_pratico Link senza sottolineatura Da sempre i link testuali vengono visualizzati dai browser con una sottolineatura (underline) che ne ribadisce la funzione. Internet Explorer da' la possibilita' di eliminare tale sottolineatura agendo sulle proprieta' del browser. Con i fogli di stile gli svilupattori hanno la possibilita' di eliminare del tutto la sottolineatura attraverso un semplice codice da inserire tra i marcatori BODY del documento: A:link, A:visited { text-decoration: none } Visualizza_l'esempio_pratico Link sottolineato solo al passaggio del mouse L'esempio visto in precedenza puo' essere rielaborato per rendere le pagina piu' accattivante. Fermo restando che i link non abbiano sottolineatura, e' possibile che la ottengano solo quando il mouse vi passa sopra, grazie alle proprieta' A:hover. A:link, A:visited { text-decoration: none } A:hover { text-decoration: underline } Visualizza_l'esempio_pratico In riferimento all'ultimo esempio e' possibile impostare il CSS per l'effetto contrario: i link sono sottolineati di default ma perdono la sottolineatura quando il mouse vi passa sopra: A:link, A:visited { text-decoration: underline } A:hover { text-decoration: none } Visualizza_l'esempio_pratico Link cambiano colore al passaggio del mouse Sfruttando ulteriormente la proprieta' A:hover e' possibile creare un effetto mediante il quale i link hanno un colore di default, che cambia quando il mouse vi passa sopra. Il colore puo' essere impostato come parola chiave (red, green, blue ecc.) o come tripletta esadecimale. A:hover { color: red } Visualizza_l'esempio_pratico Link cambiano colore di sfondo al passaggio del mouse Ancora la proprieta' A:hover che di concerto con le proprieta' di definizione del background genera un effetto molto interessante: quando il puntatore del mouse passa sul link, lo stesso si attiva con un colore di testo e di sfondo impostati. A:hover { color: white; background:blue } Visualizza_l'esempio_pratico Link cambia dimensione al testo quando attivato dal mouse Ultimo esempio riguardante A:hover. Questa volta il testo viene ingrandito quando il mouse vi passa sopra. A:link { font-size: 15px } A:visited { font-size: 15px } A:hover { font-size: 16px } Visualizza_l'esempio_pratico I fogli di stile finora considerati sono incorporati, cioe' posti tra i campi HEAD del documento e riferiti alla totalita' degli elementi presenti nella pagina. Esigenze particolari possono richiedere che soltanto per taluni link vengano attivati tali effetti. Se per esempio i link si vogliono sottolineati, tranne un unico elemento della pagina, si usano i fogli di stile in linea in questo modo: VISITA HTML.it Una buona regola e' quella di rendere omogenei gli effetti sui link per tutti i documenti del sito, adottando un metodo che permette un automatismo in questo senso. La soluzione ideale sonoi_fogli_di_stile_esterni, all'interno dei quali vanno inseriti gli attributi di stile.Cascading_Style_Sheets,_level_1_(CSS1) La prima versione delle raccomandazioni ufficiali del World Wide Web Consortium sui fogli di stile, accettate da Microsoft e Netscape. Cascading_Style_Sheets,_level_2_(CSS2) L'evoluzione dei CSS1 che in questa seconda stesura presentano novita' di rilievo. CSS_secondo_HTML_4(italiano) HTML 4 ha introdotto corpose novita' anche per i fogli di stile, gia' standardizzati nella versione 3.2. Questo documento e' parte integrante di HTML 4 ed e' stato tradotto dall'inglese in seno al progetto di LiberLiber. W3C_e_CSS Ancora dal W3C, link e materiale informativo sui fogli di stile JavaScript-Based_Style_Sheets L'approccio (non standardizzato dal W3C) di Netscape ai fogli di stile Javascript esaminati nell'apposito_capitolodi questo tutorial. Webreview Tutorial in lingua inglese sui CSS Webdeveloper Tutorial in lingua inglese The_WDVL Tutorial in lingua inglese DOT_css Tutorial in lingua inglese ' =============================================================================== ' 2003 Holyguard.net - 2007_Abruzzoweb