Fogli di Stile

PROF. GIUSEPPE ANGELINO

I Fogli di Stile

2012

ITIS L. TRAFELLI

DI

NETTUNO (RM)

MAPPA CONCETTUALE Introduzione ai Css

Css in linea Css incorporati Css esterni CSS Regole e commenti Attributi di stile per il testo Attributi margini e allineamento Background e colori di sfondo Raggruppare stili

Assegnare classi

L’unità didattica è indirizzata a una classe di venti alunni organizzati per gruppi di due. Le lezioni saranno svolte mediante il supporto di un proiettore e di diapositive fatte in Power Point Definizione di fogli di stile in linea, codice ed esempi Definizione di fogli di stile incorporati, codice ed esempi Definizione di fogli di stile incorporati, codice ed esempi Insieme delle regole e dei commenti che compongono la struttura dei CSS Tutti gli attributi di stile per formattare il testo, con esempi e codice appropriato Per allineare e giustificare il testo i Css creano degli elementi visualizzati all’interno di box, codice ed esempi Il colore per il testo, collegamenti ed immagini, attribuzione del colore di sfondo Il raggruppamento rende più funzionali i fogli di stile, riduce lavoro e il codice è più chiaro.

Aggiungere un’estensione class ai tag dell’HTML consente di definire un alto livello di variazione ai singoli tag

2

DESCRIZIONE GENERALE DEL MODULO PREREQUISITI 1.

2.

3.

4.

5.

Conoscenze generali sulle funzioni di un server web; utilizzo di un browser; formato degli oggetti utilizzati nel Web; i tag fondamentali del linguaggio HTML; le tabelle;

- UNITA’ DIDATTICA DEL MODULO • FOGLI DI STILE(Cascading Style Sheet) Introduzione 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 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': <FONT FACE="ARIAL"><I>Testo della pagina</I></FONT> 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.

3

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.

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 sono d'accordo con quanti ritengono questo limite insormontabile e rifiutano l'adozione dei CSS.

Ritengo 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.

Rammento, 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)

4

Dove scrivo i CSS 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 <SPAN> o <DIV>, per assegnare quello stile. Eccone un esempio: <DIV STYLE="font-size:18px; font-family:arial; color:red"> Questo testo ha colore rosso </DIV> In questo modo abbiamo impostato lo stile del solo testo compreso tra i tag <DIV> 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' <DIV> o in alternativa <SPAN>. L'uso dell'una o dell'altra e' lasciato alla discrezionalità' del progettista, anche se la prima marcatura e' consigliata per lunghi blocchi di testo, mentre <SPAN> e' consigliata per brevi frasi, proprio come quella dell'esempio.

Un siffatto sistema di stile e' certamente funzionante ma non rispondente alle peculiarità' 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 line esclusivamente per piccoli e circoscritti ritocchi e non per la struttura generale di un Website.

Css incorporati 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 <STYLE> e posizionate tra i tag <HEAD> del documento e il <BODY> dello stesso.

Un esempio di foglio di stile incorporato e' il seguente: <HTML> <HEAD> <style type="text/css"> 5

H1 { font-size:17px; font-family:verdana; color:green } H2 { font-size:18px; font-family:arial; color:red } </style> </HEAD> <BODY> <H1>Questo testo e' di colore verde, impostato su verdana di 17 pixel</H1> <H2>Questo testo e' di colore rosso, impostato su arial di 18 pixel</H2> </BODY> </HTML> In questo esempio abbiamo impostato un foglio di stile incorporato tra i tag <HEAD> del documento, stabilendo due diversi tipi di carattere: • verdana verde di 17 pixel per il primo identificato dal marcatore <H1> • arial rosso di 18 pixel per il secondo, identificato dal marcatore <H2> I marcatori H1 e H2 in generale possono sostituirsi con altri marcatori di paragrafo quali <P>.

Impostato il CSS incorporato all'interno del documento gli stessi stili vengono assegnati raccogliendo porzioni di testo tra marcatori <H1></H1> e <H2></H2>.

In questo modo cambiando i valori dei soli attributi impostati nel fogli di stile (aumentando la grandezza o modificando il colore, per esempio), il testo del documento marcato da <H1> e <H2> viene automaticamente aggiornato al nuovo stile.

L'attributo TYPE del tag <STYLE> 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 dei 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.

Css esterni 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 dovrà comunque modificare l'intestazione di stile di 1000 documenti, anche se non si dovrà 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 richiamato con una semplice riga di codice. In questo modo una modifica sul file "centralizzato" genera 6

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 pagina.

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 <HEAD> il seguente codice: <link rel=stylesheet href="style.css" type="text/css">

•

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 <H1> e <H2>.

Per esempio i titoli potrebbero essere stabiliti da <H1> e il testo delle pagine da <H2>, in questo modo:

<H1>Titolo della pagina</H1> <H2>Testo della pagina di prova, Testo della pagina di prova, Testo della pagina di prova, </H2> Il risultato di questo esempio e' di stabilire per tutte le pagine del sito uno stile comune per i marcatori <H1> e <H2>, 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 marcatore <H1> del 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 ripaga ampiamente gli sforzi, oltre a consentire un eccezionale controllo di pagina e di stile.

7

Come è fatto un CSS:regole e commenti Un foglio di stile è un insieme di regole , accompagnate, volendo, da qualche nota di commento.

La struttura di una regola CSS è così composta: selettore

h1

{

blocco della dichiarazione

Color : white; background : red;

}

proprietà valore Da questo schema si evince che ci sono 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 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 .

Per ogni dichiarazione non è possibile indicare più di una proprietà, mentre è spesso possibile specificare più valori: ad esempio body {color background: black} regola errata p{font:12px Verdana, arial;} regola esatta Infine, se in un blocco si definiscono più dichiarazioni, esse vanno separate dal punto e virgola.

Commenti Per inserire parti di commento in un CSS bisogna racchiuderli in 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. Con questa espressione traduciamo il termine inglese shorthand properties reso spesso, alla lettera, con il termine scorciatoie.

Le proprietà singole sono la maggior parte: impostano per un dato elemento o selettore un singolo aspetto. Con le shorthand properties, è possibile invece definire con una sola dichiarazione un insieme di proprietà. Chiariamo con un 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: 8

div { 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: div {margin: 10px 5px 10px 5px;}

I Selettori 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.

Selettore di elementi (type selector) È il più semplice dei selettori. È costituito da uno qualunque degli elementi di (X)HTML. Sintassi h1 {color: #000000;} 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. Pensate a questo scenario: 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ò fare così: h1, h2, h3 {background: white;}

Id e classi: due selettori speciali I CSS non sarebbero uno strumento così potente senza questi tipi di selettori. Classi e ID sono davvero una delle chiavi per sfruttare al meglio questo linguaggio.

In (X)HTML esistono due attributi fondamentali applicabili a tutti gli elementi: sono class e id.

Dichiarare questi attributi a prescindere dai CSS non ha alcun senso e non modifica in alcun modo la presentazione della pagina. Ecco un esempio.

9

In questa pagina ho assegnato al paragrafo un attributo class="testorosso": <p class="testorosso">....</p> Come si vede non succede nulla. Il problema è che il valore dell'attributo class deve trovare una corrispondenza in un foglio di stile. In questa seconda pagina, ho definito un CSS incorporato creando un selettore di tipo classe e assegnando ad esso il nome testorosso: <style type="text/css"> .testorosso { font: 12px arial, Helvetica, sans-serif; color: #FF0000; } </style>

10

Il testo del nostro paragrafo è ora formattato secondo i nostri desideri: testo rosso, carattere arial. dimensione di 12px.

Lo stesso meccanismo è valido per i selettori di tipo ID. Ma con una sola fondamentale differenza: è ad essa che dovete fare riferimento per scegliere se usare una classe o un ID. In un documento (X)HTML l'attributo id è usato per identificare in modo univoco un elemento. In pratica, se assegno ad un paragrafo l'id "testorosso", non potrò più usare questo valore nel resto della pagina.

Di conseguenza, l'ID #testorosso 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 potrò 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> 11

Concludendo: una classe consente di superare le limitazioni intrinseche nell'uso di un selettore di elementi. Se imposto questa regola: p {color: red;} tutti i paragrafi della mia pagina avranno il testo rosso. E se volessi diversificare? Avere, ad esempio, anche paragrafi con il testo nero? Sarei prigioniero della regola iniziale. Scrivo due classi, una per il rosso e una per il nero, le applico di volta in volta secondo le mie necessità e il gioco è fatto.

La strategia dovrà dunque essere questa. Se uno stile va applicato ad un solo specifico elemento si usa un ID. Se invece prevedo di usarlo più volte ovvero su più elementi definisco nel CSS una classe.

Usi e sintassi Classe Per definire una classe si usa far precedere il nome da un semplice punto: .nome_della_classe Questa è la sintassi di base. Un selettore classe così definito può 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".

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="grassetto">...</p>

12

ID La sintassi di un selettore ID è semplicissima. Basta far precedere il nome dal simbolo di cancelletto #: #nome_id Con questa regola: #titolo {color: blue;} assegno il colore blue all'elemento che presenti questa definizione: <h1 id="titolo">...</h1> Come per le classi è possibile usare una sintassi con elemento: p#nome_id In realtà questa modalità è assolutamente superflua. Se l'id è univoco non abbiamo alcun bisogno di distinguere l'elemento cui verrà applicata.

Attributi di stile per il testo Negli esempi a completamento di questa tesina, non a caso ho 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 tag <BODY> in HTML classico. Quindi, tutto cio' che viene inserito all'interno di BODY sara' assegnato all'intero documento.

Per gli esempi ho usato fogli di stile incorporati, i quali possono tranquillamente raccogliersi in un file esterno secondo quanto visto nel capitolo "css esterni".

(Vedi Allegato 2)

Attributi margini e allineamento 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.

(Vedi Allegato 3) 13

Background e colori di sfondo In HTML classico lo sfondo viene impostato all'interno della marcatura <BODY> 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 con background: <BODY background="sfondo.gif" bgproperties="fixed"> 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 espendiente per rendere fissi degli elementi nella pagina nonostante lo scroller, clicca qui per vedere quali).

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.

(Vedi Allegato 4)

Raggruppare stili 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: <STYLE> 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; } </STYLE> Per raggruppare gli stili e' sufficiente sintetizzare il codice in questa direzione: <STYLE> H1, H2, H3 { font-family:arial; font-size:14px; color:blue; } </STYLE> Un altro esempio nella sua forma non raggruppata e' il seguente: <STYLE> A:link { text-decoration: none } A:visited { text-decoration: none } </STYLE> Che, invece, seguendo le regole generali del raggruppamento di stili diventa: <STYLE> A:link, A:visited { text-decoration: none } </STYLE> 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: 14

<STYLE> BODY { font-family:verdana; font-size:15px; font-weight:bold; font-style:normal; color:red} </STYLE> si trasforma in: <STYLE> BODY { font: bold normal 15px verdana red} </STYLE> 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.

Assegnare classi L'assegnamento di classi consente di definire un alto livello di variazione a 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: <STYLE> H2.top {font-family:verdana; font-size:15px; font-weight:bold; font-style:normal} H4.bottom {font-family:arial; font-size:10px; font-weight:bold; font-style:italic} </STYLE> Sussessivamente, all'interno del documento, va inserito il riferimento alla classe: <H4 class=bottom> Testo della pagina </H4> Altro concetto collegato e' quello delle pseudoclassi: elementi di un solo tipo che soddisfano un certo criterio contestuale. Un esempio molto chiaro di pseudoclassi sono quelle relative 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: <STYLE> A:link { text-decoration: none } visited { text-decoration: none } </STYLE> La pseudoclasse visited non ha bisogno dell'elemento A, perche' solo gli ancoraggi possono avere una pseudoclasse link.

15

Prova di verifica per lâ&#x20AC;&#x2122;UnitĂ didattica svolta Fase 1 Analisi di una pagina tipo

Fase 2 Impaginazione Intestazioni pagina Intestazioni pagina Contenuto paragrafo Intestazioni tabella Dettaglio tabella Dettaglio tabella

Intestazioni tabella Dettaglio tabella Dettaglio tabella

Intestazioni tabella Dettaglio tabella Dettaglio tabella

Fase 3 Regole Font: Arial, Helvetica, Sans serif Dimensioni carattere intestazione: 170%, 180%, margini: 20px 20px; 20px;20px; Colore carattere intestazioni pagina: blu, margini per <h1>: 30px 30px; 30px;30px; margini per <h2>: 40px 40px; 40px;40px; Link: carattere blu a sfondo giallo di dimensione 140% Sfondo della tabella:colore blu Intestazione tabella: carattere giallo di dimensione 120% Celle tabella: carattere giallo di dimensione 120%

16

Fase 4 Definizione standards Utilizzando un Word Processor definire l’impaginazione e le regole che devono essere seguite nella costruzione della pagina web Fase 5 Stesura del codice HTML Seguendo l’impaginazione e le regole precedentemente definite codificare la pagina HTML richiesta Fase 6 Visualizzazione della pagina HTML Utilizzando un browser visualizzare la pagina precedentemente codificata

ALLEGATO 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HEAD><TITLE>Primi Linguaggi</TITLE> <META content="GIUSEPPE ANGELINO" name=AUTHOR> <META content="PAGINA PRINCIPALE" name=DESCRIPTION> <META content="MSHTML 5.50.4134.100" name=GENERATOR> <META http-equiv=Content-Type content="text/html; charset=windows-1252"> <STYLE type=text/css> BODY { FONT-SIZE: 80%; FONT-FAMILY: Arial,Helvetica,sans-serif; margin: 20px 20px; }

H1 { FONT-SIZE: 170%; COLOR: #003399; FONT-FAMILY: Arial,Helvetica,sans-serif; margin: 30px 30px; } H2 { FONT-SIZE: 150%; COLOR: #003399; FONT-FAMILY: Arial,Helvetica,sans-serif; margin: 40px 40px; } Table {background-color:blue; } A.speciale { FONT-SIZE: 140%; FONT-FAMILY: Arial,Helvetica,sans-serif; BACKGROUNDCOLOR: #ffff66 } TH { FONT-SIZE: 120%;color:yellow; } TD { FONT-SIZE: 120%;color:yellow; } TD.logo { TEXT-ALIGN: center } TD.nome_distribuzione { FONT-WEIGHT: bold 17

} </STYLE> </HEAD> <BODY> <H1> <CENTER>Storia dei linguaggi di programmazione</H1></CENTER><A href="file:///C:/Documenti/geppi/pagineweb/Contents.htm">Sistemi operativi</A> &gt; <A href="file:///C:/Documenti/geppi/pagineweb/IndiceLinux.htm">Linguaggi di programmazione</A> &gt; <A href="file:///C:/Documenti/geppi/pagineweb/3_1.htm">Applicativi</A> <H1>Linguaggi di basso livello</H1> <H2>Linguaggi di alto livello</H2> <P>I primi programmatori avevano come unico strumento per programmare il <B>linguaggio macchina</B>. Dati i problemi legati all'uso del citato linguaggio , il livello di astrazione è stato elevato con l'uso del <A href="file:///C:/Documenti/geppi/pagineweb/unix.htm">linguaggio Assembler</A>.I programmi scritti con l'Assembler hanno bisogno di un ulteriore programma, detto<A class=speciale href="file:///C:/Documenti/geppi/pagineweb/unix.htm">Assemblatore</A>, in grado di tradurre il codice scritto in linguaggio assembler in linguaggio macchina, cioè sequenze di zeri e uno.</P><BR><BR> <TABLE cellSpacing=0 cellPadding=1 width="50%" border=4 align="center"> <TR> <TH>Linguaggio</TH> <TH>Anno</TH> <TH>Utilizzo</TH> <TH>Paradigma</TH> <TH>Loghi</TH></TR> <TR> <TD class=nome_distribuzione width=10%>Pascal</TD> <TD>1971</TD> <TD>Usi generali</TD> <TD>Imperativo</TD> <TD class="logo"><IMG height=25 src="tesina_file/foto1.gif" width=25></TD></TR> <TR> <TD class=nome_distribuzione>C++</TD> <TD>1979</TD> <TD>Usi generali</TD> <TD>Ad oggetti</TD> <TD class=logo><IMG height=25 src="tesina_file/foto1.gif" width=25></TD></TR> <TR> <TD class=nome_distribuzione>JAVA</TD> <TD>1995</TD> <TD>Usi generali</TD> <TD>Ad oggetti</TD> <TD class=logo><IMG height=25 src="tesina_file/foto1.gif" width=25></TD></TR></TBODY></TABLE></BODY></HTML> 18

ALLEGATO 2 (ATTRIBUTI DI STILE PER IL TESTO) 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: <STYLE> BODY { font-family:arial } </STYLE> 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 all'apposita sezione di questo sito). I font con nomi composti da piu' termini vanno inseriti tra apici doppi: <STYLE> BODY { font-family:arial, "courier new", impact } </STYLE> 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: <STYLE> BODY { font-family:serif } </STYLE> 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 <STYLE>BODY { font-family:serif }</STYLE> •

Sans Serif Senza grazie. Tipici gli arial e gli helvetica <STYLE>BODY { font-family:"sans serif" }</STYLE>

•

Cursive Font corsivi che imitano la calligrafica umana. <STYLE>BODY { font-family:cursive }</STYLE>

•

Fantasy Caratteri decorativi come, per esempio, comic sans <STYLE>BODY { font-family:fanct }</STYLE>

•

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. <STYLE>BODY { font-family:monospace }</STYLE>

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 permettono un controllo molto più preciso ed elastico, che non soffre di nessuna limitazione.

E' possibile impostare lo stile in base a cinque diverse unita' di misura: 19

•

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. <STYLE>BODY { font-size:12pt }</STYLE>

•

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) <STYLE>BODY { font-size:12px }</STYLE>

•

Pollici: classica unita' di misura anglosassone, i pollici sono espressi dall'abbreviazione in <STYLE>BODY { font-size:1in }</STYLE>

•

Centimetri: unita' di misura comune di molti paesi occidentali ma poco usata nell'ambito della Web grafica <STYLE>BODY { font-size:3cm }</STYLE>

•

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. <STYLE>BODY { font-size:200% }</STYLE>

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. <STYLE>BODY { font-size:smaller }</STYLE> definisce il font immediatamente piu' piccolo rispetto a quello di default. <STYLE>BODY { font-size:larger }</STYLE> il contrario del precedente: definisce il font immediatamente piu' grande rispetto a quello impostato dal browser. <STYLE>BODY { font-size:2em }</STYLE> 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: <STYLE>BODY { font-style:normal }</STYLE> Normal non visualizza alcuno stile particolare e si rifa' a quello stabilito di default dal browser. E' possibile sostituire "roman" a "normal" <STYLE>BODY { font-style:italic }</STYLE> Il classico testo corsivo che ben conosciamo da HTML classico e da tutti gli editor di testo. <STYLE>BODY { font-size:oblique }</STYLE> 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.

20

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" <STYLE>BODY { font-variant: small-caps }</STYLE> 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: <STYLE>BODY { font-weight: extra-light }</STYLE> <STYLE>BODY { font-weight: demi-light }</STYLE> <STYLE>BODY { font-weight: light }</STYLE> <STYLE>BODY { font-weight: medium }</STYLE> <STYLE>BODY { font-weight: extra-bold }</STYLE> <STYLE>BODY { font-weight: demi-bold }</STYLE> <STYLE>BODY { font-weight: bold }</STYLE> 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: <STYLE>BODY { text-decoration: none }</STYLE> <STYLE>BODY { text-decoration: underline }</STYLE> <STYLE>BODY { text-decoration: italic }</STYLE> <STYLE>BODY { text-decoration: line-height }</STYLE>

21

ALLEGATO 3 (ATTRIBUTI MARGINI E ALLINEAMENTO) 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: <STYLE> BODY { margin-top: 10px; margin-right; 10px; margin-bottom: 10px; margin-left: 10px} </STYLE> 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 (margintop), 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: <STYLE> BODY { margin: 10px 10px 10px 10px } </STYLE> In questo primo esempio tutti gli elementi hanno uguale distanza rispetto agli elementi vicini, e ognuno di essi e' correttamente indicato. <STYLE> BODY { margin: 10px 10px } </STYLE> 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: <STYLE> BODY { padding-top: 10pt; padding-right; 10px; padding-bottom: 110%; padding-left: 2in } </STYLE> 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 (paddingbottom) 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: <STYLE>BODY { padding: 10pt 10px 110% 2in }</STYLE> In questo primo esempio tutti gli elementi hanno uguale distanza rispetto agli elementi vicini, e ognuno di essi e' correttamente indicato. <STYLE>BODY { padding: 10pt 10px }</STYLE> 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: <STYLE> BODY { border-top: dotten green; border-left: dashed black; border-right: solid blue; 22

border-bottom: groove yellow } </STYLE> 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: <STYLE> BODY { border-top-width: 5px; border-left-width: 4pt; border-right-width: thick; borderbottom-width: 2em } </STYLE> 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: <STYLE> BODY { border-width: 10pt 10px 1em 2in } </STYLE> 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: <STYLE> BODY { border-color: green } </STYLE> 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: <STYLE> BODY { border-style: groove } </STYLE> 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: <STYLE>BODY { border: 12px groove green }</STYLE> 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: <STYLE>BODY { width: 300px }</STYLE> Attributo float Questo attributo ha una funzione simile ad ALIGN in HTML classico. I valori a disposizione sono left, right e none: <STYLE>BODY { float: right }</STYLE>

23

ALLEGATO 4 (BACKGROUND E COLORI DI SFONDO) 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.

Esempio <DIV STYLE="position:absolute; top:100px; left:100px; width:200px; color:blue"> HTML point e' il sito italiano piu' visitato e autorevole sul Web publishing. </DIV> 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 avvicinato al colore di sfondo delle tabelle. Viene usato soprattutto per evidenziare con espedienti cromatici alcune parti del documento.

Esempio <DIV STYLE="position:absolute; top:100px; left:100px; width:200px; backgroundcolor:blue"> HTML point e' il sito italiano piu' visitato e autorevole sul Web publishing. </DIV> 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 Esempio <DIV STYLE="position:absolute; top:100px; left:100px; width:200px; background-image: url(sfondo.jpg)"> HTML point e' il sito italiano piu' visitato e autorevole sul Web publishing. </DIV> 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): Esempio <DIV STYLE="position:absolute; top:100px; left:100px; width:400px; height:400px; background-image: url(sfondo.jpg); background-repeat: repeat-y"> HTML point e' il sito italiano piu' visitato e autorevole sul Web publishing. </DIV> Esempio <DIV STYLE="position:absolute; top:100px; left:100px; width:400px; height:400px; background-image: url(sfondo.jpg); background-repeat: repeat-x"> HTML point e' il sito italiano piu' visitato e autorevole sul Web publishing. </DIV> 24

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: Esempio <DIV STYLE="position:absolute; top:100px; left:100px; width:400px; height:400px; background-image: url(sfondo.jpg); background-position: right top"> HTML point e' il sito italiano piu' visitato e autorevole sul Web publishing. </DIV> Attributo background E' un attributo che consente di definire univocamente i diversi attributi dello sfondo finora esaminati. L'ordine da seguire e' il seguente: <DIV STYLE="position:absolute; top:100px; left:100px; width:400px; height:300px; background: yellow url(sfondo.jpg) repeat-y fixed right bottom"> HTML point e' il sito italiano piu' visitato e autorevole sul Web publishing. </DIV>

25

BIBLIOGRAFIA TITOLO: Cascading Style Sheet (CSS). Fogli di stile per il web Autore: O. Briggs, S. Champeon, E. Costello, M. Patterson Edizione: Hoepli TITOLO: HTML4 Tutto&Oltre.

Autore: Rick Darnell Edizione: Sams Puublishing Dispense realizzate per il corso d’informatica multimediale dai colleghi dell’Itsos A.Steiner Siti consultati: HTML.it e W3C.it (Consorzio internazionale per lo sviluppo del web)

26