3 - Unità 3 - Utilizzo delle regole di stile (CSS)

Utilizzo delle Regole di Stile (CSS)

Finora abbiamo visto come creare la struttura di un documento base (X)HTML. Tuttavia siamo ancora lontani dal creare una pagina web che assomigli veramente a quelle che siamo abituati a vedere in rete.

In questa unità analizzeremo i concetti di base per l’utilizzo dei fogli di stile.

I fogli di stile (CSS)

I fogli di stile a cascata (Cascading Style Sheets) rappresentano lo standard W3C (World Wide Web Consortium) per definire l’aspetto e le modalità di presentazione dei documenti scritti in HTML, XHTML e in ogni linguaggio XML.

Per presentazione si intende il modo in cui il documento viene visualizzato e presentato all’utente, attraverso qualsiasi tipo di browser.

Con la sigla CSS si sottintende un linguaggio separato con una propria sintassi, distinta da quella che abbiamo già visto per l’(X)HTML: gli stili CSS sono costituiti da regole che dettano quello che sarà l’aspetto degli elementi presenti in una pagina web redatta in (X)HTML.

In questa prima lezione introduttiva sui fogli di stile, così come per l’(X)HTML, analizzeremo i concetti e la terminologia fondamentale per andare a modificare radicalmente l’aspetto delle nostre pagine, cambiando ad esempio il testo e i caratteri fino ad aggiungere colori e immagini alle pagine.

I vantaggi dell’utilizzo dei fogli di stile (CSS)

Gli elementi di presentazione dell’(X)HTML, visti nella lezione precedente, non riescono a modificare l’aspetto di una pagina web allo stesso modo dei fogli di stile.

• L’uso dei CSS ci permette di creare e modificare l’aspetto di una pagina web molto più velocemente e con meno lavoro. E’ infatti addirittura possibile cambiare l’aspetto di un intero sito web revisionando un singolo foglio di stile, senza intervenire sulle singole pagine (X)HTML.

• Attraverso l’utilizzo dei file CSS i siti web risultano molto più accessibili attraverso qualsiasi browser e da qualsiasi utente, dal

momento che è possibile marcare in maniera molto più significativa gli elementi presenti.

Applicare le “regole di stile”

Affinchè sia possibile utilizzare le regole di stile CSS è necessario inserirle o collegarle ai documenti (X)HTML.

Esistono tre modi per applicare le regole al nostro documento:

Attraverso i fogli di stile esterni – In questo caso si creerà un foglio di stile separato, contenente un certo numero di regole di stile. Questo documento di testo, perfettamente realizzabile anche con un editor base come Blocco Note, deve essere salvato con un’estensione .css.

Il documento con questa estensione potrà poi essere collegato a uno o più documenti (X)HTML. In questo modo tutti i file presenti in un sito web potranno condividere allo stesso tempo uno stesso foglio di stile.

Questa modalità di applicazione delle “regole di stile” è sicuramente la più efficace e pertanto la più usata nella progettazione dei siti web.

Aspetto di una regola all’interno di un foglio di stile esterno

h3 { color: green

}/* la definizione di stile è racchiusa sempre tra parentesi graffe */

Attraverso i fogli di stile interni - In questo caso le regole di stile vengono sono inserite all’interno del documento base (X)HTML.

I fogli di stile di questa categoria funzionano solamente per il documento in cui sono inserite e vanno posizionate obbligatoriamente nella sezione head del documento.

Per l’inserimento di un foglio di stile interno sarà necessario l’utilizzo dell’attributo type con il valore "text/css".

Esempio

<head>

<title>utilizzo degli stili css</title>

<h1 style="color: pink">Introduzione</h1>

Per aggiungere più di uno stile in linea basterà utilizzare i punti e virgola, come nell’esempio seguente.

<h1 style="color: red; font-weight: bold">Introduzione</h1>

Il valore dell’attributo costituisce la regola di stile

Scrivere le “regole” di stile

Un foglio di stile è formato da 1 o più “istruzioni di stile”, chiamate convenzionalmente “regole” che servono a descrivere come un elemento o gruppi di elementi dovranno essere visualizzati.

Ogni “regola” seleziona un elemento è ne definisce l’aspetto.

Esempio dell’aspetto delle regole in un foglio di stile esterno e interno

h1 { /* la regola viene applicata all’elemento h1 */

color: green; /* la regola di stile determina il colore dell’elemento h1 */}

p { /* la regola viene applicata all’elemento h1 */

font-size: small; font-family: sans-serif; /* la regola di stile determina il la tipologia e la grandezza del font del paragrafo */

}

L’esempio riportato contiene due regole. La prima ci dice che l’elemento h1 dovrà essere visualizzato in verde. La seconda ci dice che il paragrafo dovrà apparire redatto con uno specifico font, in una dimensione precisa.

Seconda la terminologia specifica dei CSS, le due sezioni principali in cui ogni “regola” è strutturata sono:

Il selettore di regola che identifica gli elementi coinvolti nel cambiamento di stile.

La dichiarazione di regola che indica le istruzioni necessarie per determinare lo stile finale dell’elemento.

Ogni dichiarazione di regola è a sua volta divisa in due parti:

la prima indica una proprietà o caratteristica precisa (ad es. il colore);

la seconda indica il valore da associare a essa (ad es. “green”).

Dichiarazioni di regola = proprietà + valore

Le dichiarazioni di regola, come nell’esempio riportato sono sempre inserite all’interno di parentesi graffe, nei fogli di stile interni ed esterni.

La sintassi è invece diversa per gli stili in linea, come abbiamo già avuto modo di avere. Tuttavia anche nel caso degli stili in linea abbiamo sempre un selettore di regola e una dichiarazione.

<p style="font-size: 14px"> testo del paragrafo </p>

Proprietà di stile Valore di stile

N.B. Nei fogli di stile esterni, in quelli interni e anche negli stili in linea se si utilizza più di una regola queste andranno separate dal simbolo di punto e virgola.

Molto spesso proprio per evitare di scordare questo importante elemento sintattico anche quando si ha una sola regola si tende ad applicare alla fine di questa un punto e virgola, nel caso si desideri aggiungere altro in seguito.

div {

font-size: 12px;

font-weight: bold;

background-color: yellow;

color: purple;

}

La stessa regola vista “in linea”

<div style="font-size: 12px; font-weight: bold; background-color: yellow; color: purple;"> contenuto del div</div>

Selettori di regola

Negli esempi riportati gli elementi p, div, h1 e h3 sono stati utilizzati come “selettori” di diverse regole di stile.

• Con un foglio di stile interno le proprietà definite attraverso la regola verranno applicate per ogni elemento p, div, h1 e h3 presente nel singolo documento (X)HTML in cui abbiamo inserito le regole nella sezione head.

• Con un foglio di stile esterno le proprietà definite attraverso la regola verranno applicate per ogni elemento p, div, h1 e h3 presente in tutti i documenti (X)HTML collegati al foglio di stile.

• Con gli stili in linea le proprietà definite attraverso la regola verranno applicate per i singoli elementi p, div, h1 e h3 a cui le regole sono state associate tramite l’inserimento dell’attributo style.

Dichiarazioni di regola

Come già sappiamo ogni dichiarazione è formata dalla coppia proprietà/valore.

Una singola regola può contenere una o molte dichiarazioni, separate sempre dal simbolo di punto e virgola.

Nei fogli di stile interni ed esterni le diverse dichiarazioni vanno racchiuse all’interno delle parentesi graffe: ciò che si trova all’interno

delle parentesi viene definito come “blocco di dichiarazione” (declaration block)

I file CSS ignorano gli spazi e gli invii all’interno dei suddetti “blocchi di dichiarazione”, pertanto ogni dichiarazione può essere riportata su una stessa linea

p { font-size: small; font-family: sans-serif; }

oppure su line diverse

p {

font-size: small;

font-family: sans-serif;

}

Generalmente nella stesura dei fogli di stile interni ed esterni si tende a sviluppare le dichiarazioni su linee diverse, semplicemente per facilitarne la lettura.

Diversamente negli stili in linea con gli elementi (X)HTML si tende a riportare le regole su una stessa riga, senza inserire invii.

Affinchè una regola possa funzionare andrà specificato il valore della proprietà che definirà l’effettivo cambiamento di stile.

p { font-size: small /* il valore della proprietà font-size è “small” */

}

I valori dipendono dalle proprietà: alcune proprietà di stile richiamano misure, altre impostazioni per il colore, altre ancora possono richiamare liste di parole chiave.

Usando le diverse proprietà è importante considerare i valori che ognuna è in grado di accettare.

I fogli di stile e il loro rapporto con l’(X)HTML

I documenti base in (X)HTML presentano una struttura gerarchica in cui troviamo elementi che dipendono strettamente da altri.

L’elemento p ad esempio dipende dall’elemento body, gli elementi body e head dipendono dal tag html.

Nel web design, in base al principio di gerarchia stabiliamo quali elementi dipendono dagli altri.

Nella creazione della struttura (X)HTML abbiamo visto come l’inserimento di alcuni elementi sia indispensabile per l’utilizzo di altri.

Ad esempio una struttura base inizia sempre con il tag <html> di apertura che poi servirà a chiudere l’intero contenuto della pagina </html>.

All’interno di questi due tag verranno inseriti gli altri come ad esempio head e body e dopo questi gli altri tag “dipendenti” secondo il principio di gerarchia come p, h1 da cui può dipendere un elemento em o un elemento immagine e così via.

Schema di una struttura gerarchica di base di un documento (X)HTML

Il principio gerarchico è alla base del principio dell’ereditarietà che ci permette di impostare determinate regole di stile per gli elementi dipendenti da un elemento superiore: il solo a cui verrà applicato lo stile.

Naturalmente è possibile impostare una regola di stile specifica per ogni elemento della marcatura (X)HTML ma qualora questo non venga fatto, un elemento “gerarchicamente” dipendente da un altro come, ad esempio, la marcatura em rispetto al tag p, adotterà lo stile impostato per il paragrafo.

Se per il paragrafo non è stato impostato uno stile specifico, questo a sua volta prenderà automaticamente lo stile del corpo del testo (body).

Ad esempio, se impostiamo una regola di stile relativa a un font, usando l’elemento di paragrafo p come selettore, tale regola verrà applicata a tutti i paragrafi presenti nel documento, così come agli elementi di testo in linea (dipendenti dall’elemento p), contenuti nei paragrafi stessi.

Elemento html

<p> testo del paragrafo con <em> altri elementi in linea</em> al suo interno </p>

Regola di stile

p {color: green; /* questa regola, interna o esterna, viene applicata a tutti i paragrafi del documento (X)HTML a cui è collegata e a tutti gli contenuti nei tag p */

}

Il principio dell’ereditarietà ci viene particolarmente in aiuto nella creazione dei nostri fogli di stile dal momento che, proprio tenendo conto della struttura gerarchica dei documenti (X)HTML e dell’ereditarietà, possiamo evitare di applicare regole per ogni singolo elemento dal momento che un’unica regola può essere ereditata da tutti gli elementi dipendenti.

Se ad esempio vogliamo applicare una regola di stile all’elemento paragrafo non sarà poi necessario applicarla nuovamente all’elemento di enfasi <strong> dal momento che questo dipende dal paragrafo.

I fogli di stile “a cascata”

Ora capiremo finalmente perché i fogli di stile vengono definiti in questo modo.

Il sistema CSS ci permette di applicare molteplici fogli di stile a uno stesso documento senza creare conflitti nella visualizzazione finale.

Ad esempio che cosa succederebbe se in un foglio di stile esterno fosse stata scritta una determinate regola per un certo elemento e nel foglio di stile interno ne comparisse una opposta?

Esiste una gerarchia nell’applicazione dei fogli di stile

Il termine “cascata” riguarda quello che accade quando diverse fonti relative a regole di stile competono tra loro per il controllo degli elementi presenti in una pagina.

“una determinata informazione di stile viene tralasciata quando risulta sovrascritta da un comando di stile con maggior importanza”.

Ad esempio se non viene applicato alcun foglio di stile a una pagina, questa verrà automaticamente resa in un certo modo dal nostro browser, secondo i suoi fogli di stile (si tratta di una resa di default).

Tuttavia, se il Web Designer ha associato alla pagina dei fogli di stile, questi prevarranno sulla visualizzazione standard determinata dal browser.

Determinare l’importanza degli stili

Come abbiamo visto esistono tre modi per associare le informazioni di stile al nostro documento base (X)HTML.

Generalmente più il foglio di stile è vicino al contenuto, più sarà importante e avrà un peso maggiore.

Pertanto i fogli di stile interni hanno un’importanza maggiore di quelli esterni con estensione .css.

Di conseguenza le regole di stile in linea, applicate a specifici e singoli elementi (X)HTML, avranno un peso maggiore rispetto a quelle interne ed esterne.

Il Criterio di Specificità

Per evitare possibili conflitti tra le regole di stile ci si può avvalere anche del criterio di specificità.

Quando due regole in uno stesso foglio di stile sono in conflitto, per determinarne il livello di importanza si sfrutta la tipologia del selettore di regola: più specifico è il selettore, più importanza avrà.

Le diverse specificità di un selettore verranno prese in considerazione più avanti quando si esamineranno in dettaglio i file CSS e verranno presentati i diversi selettori.

Il Criterio di Ordinamento

Infine se sussistono conflitti tra regole di uguale importanza, l’ultima nell’ordine risulterà sempre la vincitrice.

Esempio


p {color: blue;

}

p {color: red;

}

p {color: green;

}

</style>

Dall’esempio riportato sappiamo che il testo del paragrafo della nostra pagina verrà visualizzato in verde, dal momento che l’ultima regola andrà a sovrascrivere le altre due.

Il box model

Come accennato nella lezione precedente, i browser mostrano gli elementi presenti in una pagina come se fossero all’interno di contenitori.

E’ possibile applicare a questi “contenitori” alcune proprietà, relative ai loro margini, al padding e alla loro posizione all’interno della pagina.

Per vedere gli elementi del nostro documento base così come li vedrebbe il browser è possibile scrivere delle regole di stile per aggiungere gli stessi bordi attorno ad ogni elemento, sia a livello di blocco sia in linea.

Es. <html>

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<title>Pagina Esempio</title>


h1 { border: 1px solid red; } /* regole di stile per evidenziare i contenitori degli elementi */

h2 { border: 1px solid red; }

p { border: 1px solid red; }

em { border: 1px solid red; }

img { border: 1px solid red; }

</style>

</head>

<body>

<h1>Titolo principale</h1>

<h2>pagina di prova con bluefish</h2>

<p>Questa è una pagina di prova con <em>bluefish</em> </p>

<p>non ho più problemi a utilizzare <em>bluefish</em></p>

<img src="images/blue_rose.gif" alt="una rosa blu" />

</body>

</html>

Visualizzazione tramite Browser

Inserendo le regole riportate nell’esempio, una “contenitore” con bordo di colore rosso e con uno spessore di linea definito comparirà intorno a tutti gli elementi, compresi i termini marcati con il tag em e le immagini.

Raggruppare i selettori

Vediamo ora un piccolo consiglio per velocizzare la digitazione delle nostre regole di stile. Supponiamo di volere applicare a diversi elementi, h1, h2, h3, em e cite, uno stesso colore: per applicare uno stessa proprietà di stile a diversi elementi, è possibile indicarli tutti insieme come selettori di una sola regola.

La regola riportata nell’esempio seguente funziona esattamente come quella usata nell’esempio precedente:

h1, h2, p, em, img { border: 1px solid red; }

Anche in questo caso tutti gli elementi indicati verranno racchiusi in “contenitori” con bordo rosso.

Pe raggruppare i selettori di una regola basta indicarli tutti di seguito separandoli con una virgola.

Gli stili per la formattazione dei testi

Ora analizzeremo alcune proprietà di stile utili alla formattazione dei testi presenti nelle pagine (X)HTML.

Proprietà dei caratteri (fonts properties)

Attraverso la scrittura delle nostre regole di stile, è possibile usare la specifica proprietà font-family, con i suoi valori relativi, che tiene conto del principio dell’ereditarietà ed è applicabile senza distinzione a tutti gli elementi destinati a contenere del testo.

Es. 1 - p { font-family: Arial }

Es. 2 - body { font-family: "trebuchet MS" }

Es. 3 - p { font-family: Verdana, Calibri; }

Nell’utilizzo della proprietà font-family i valori saranno rappresentati dai nomi dei font.

I font con nome composto da una sola parola (ad es. Arial) vanno sempre riportati con la lettera iniziale maiuscola. I nomi di font con nome composto da due parti, contenente quindi uno spazio, come nell’es. 2, devono essere racchiusi dalle virgolette.

Per indicare come valori più font allo stesso tempo, bisogna inserire tra questi una virgola, come nell’es. 3.

Il browser visualizzerà solamente quelle famiglie di caratteri già installati sul computer di ogni utente.

Specificare più font per una stessa proprietà serve proprio ad ovviare a questo inconveniente.

Se il font indicato non è disponibile sul computer dell’utente che visita la pagina, verrà usato il font standard del browser.

I font specificati in più servono a fornire delle alternative qualora la prima scelta non fosse disponibile. Qualora il font Verdana non risultasse disponibile il browser visualizzerà il font Calibri.

Alla fine della "lista" dei possibili font, è bene inserire una famiglia di appartenenza generica per il font scelto che andrà invece scritta con l'iniziale minuscola.

In questo modo il browser andrà a scegliere un font rientrante in una stessa famiglia, non potendo visualizzare lo specifico font indicato.

Le famiglie generiche dei font sono 5:

• serif (in cui rientra ad esempio il Times New Roman)

• sans-serif (a cui appartiene l'Arial)

• cursive (a cui appartiene il Comic Sans)

• fantasy (a cui appartiene l’Allegro BT)

• monospace (in cui rientra il Courier)

es.

p {

font-family: Arial, Calibri, Verdana sans-serif

}

I font Arial, Calibri e Verdana forniti dalla regola di stile come alternative per la visualizzazione dei paragrafi appartengono alla famiglia di font sans-serif. Pertanto nel caso in cui il browser non riesca a visualizzare tali font ne sceglierà un altro sempre della stessa famiglia sans-serif.

Per specificare le dimensioni dei caratteri è possibile utilizzare la proprietà font-size, secondo l’esempio seguente:

h1 { font-size: 12px; }

Generalmente il valore della proprietà font-size è determinato i pixel.

I pixel sono l’unità di misura generalmente più utilizzata per la gestione degli elementi e degli stili nelle pagine web.

Quando si specifica un numero preciso di unità, bisogna assicurarsi che tra l’abbreviazione (px nell’esempio riportato) posta subito dopo il numero e quest’ultimo non ci sia mai uno spazio.

E anche possibile aumentare di una certa percentuale le dimensioni di un font rispetto a quelle di visualizzazione standard.

h1 { font-size: 75%; }

E’ inoltre possibile aumentare o diminuire le dimensioni dei caratteri di un determinato elemento rispetto a quelle degli altri che lo circondano. In questo caso useremo le parole chiave relative larger e smaller, secondo gli esempi seguenti.

strong { font-size: larger; }

h1 { font-size: smaller; }

A questo punto bisogna fare una distinzione tra le tipologie di keyword: assolute e relative.

Abbiamo già menzionato le keyword relative smaller e larger, di cui abbiamo visto anche la funzione.

E’ possibile specificare le dimensioni dei caratteri attraverso delle parole chiave assolute predefinite come ad esempio small, medium, large ecc.

Queste keyword non corrispondono a misure precise ma sono bilanciate le une in relazione alle altre. Ad esempio la keyword

assoluta medium è quella standard, normalmente visualizzata nei browser.

Per concludere il nostro discorso sulle unità di misura, citiamo l’em.

L’em è un’unità di misura che calcola la dimensione del testo in base ad una misura fissa (e quindi non relativa) di base.

1em corrisponde alla dimensione di base assegnata al documento o all’elemento: dal momento che si tratta di un’unità di misura relativa, sarà necessario impostare una regola per determinare una misura fissa dei caratteri per il contenitore principale dei vari elementi.

body { font-size: 12px;

}

h1 { font-size: 1.5em; }

p { font-size: 1em; }

Gli elementi h1 e p definiscono la loro dimensione in riferimento alla misura dell’oggetto che li contiene. Pertanto per ottenere la dimensione finale degli oggetti sarà sufficiente moltiplicare il valore in em assegnato all’elemento per il valore fisso del suo elemento contenitore.

h1 = 10 x 1.5 = 15px

p = 10 x 1 = 10px

Pertanto i paragrafi del documento conterranno un testo della dimensione di 10px, mentre l’intestazione h1 avrà una dimensione di 15 pixel.

Un’altra importante proprietà relativa ai font è quella che va a toccare il loro spessore o peso. Ad esempio, se vogliamo far apparire un elemento in grassetto dobbiamo utilizzare la proprietà font-weight secondo il modello seguente.

p { font-weight: bold; }

oppure

p { font-weight: bolder; }

I valori associati a questa proprietà servono a cambiare a seconda delle esigenze l’incisività con cui vogliamo far apparire un determinato elemento.

Infine è possibile, con la proprietà font-style, cambiare lo stile di un determinato elemento come nell’esempio seguente.

p { font style: oblique; }

In questo modo possiamo scegliere se un determinato elemento nel nostro testo base dovrà essere poi visualizzato come normale oppure in corsivo, come nell’esempio.

La proprietà generica Font

Impostare proprietà multiple relative ai font può essere ripetitivo. Pertanto utilizzando i file CSS è possibile utilizzare la proprietà abbreviata font che racchiude in un’unica regola tutte le proprietà relative ai caratteri di testo.

Il valore della proprietà font è una lista di tutti i valori per tutte le proprietà dei font viste finora. In questo caso l’ordine dei vari font, separati da uno spazio, è importante per determinare la loro priorità di utilizzo.

Di base, la proprietà font deve includere un valore relativo alla dimensione dei caratteri (font-size) e un valore relativo alla loro famiglia di appartenenza (font-family), in questo preciso ordine.

Il seguente è un esempio del valore minimo di una proprietà font:

p { font: 1px Arial; }

Di seguito sono riportate tutte le proprietà che possono essere abbreviate tramite la proprietà font: se tutti i valori sono specificati l’ordine seguente dovrà essere rispettato.

font-style, font-variant, font-weight, font-size e font-family

Metodi per cambiare il colore dei caratteri di testo

Utilizzando le regole di stile è possibile naturalmente cambiare anche il colore dei caratteri usando la proprietà color.

Il valore della proprietà color può essere uno dei 17 nomi di colori predefiniti oppure un valore numerico specifico di un colore RGB.

Es.

h1 { color: green }

h1 { color: #666666 }

h1 { color: #666 }

I valori numerici dei diversi colori verranno nel secondo modulo del corso.

Per il momento cambieremo il colore del nostro testo solo attraverso i 17 nomi di colori, elencati nella slide successiva.

Anche la proprietà color segue il principio dell’ereditarietà e pertanto è possibile cambiare il colore di tutto il contenuto testuale presente in un documento applicando la proprietà al corpo (body) come nell’esempio seguente.

body { color: red; }

Il seguente elenco contiene tutte le 17 parole chiave relative ai valori specifici della proprietà color, che ci saranno utili per modificare velocemente il colore dei nostri testi.

1 red 2 purple 13 fuchsia

3 silver 4 orange 14 navy

5 yellow 6 teal 15 olive

7 aqua 8 black 16 maroon

9 white 10 blue 17 lime

11 gray 12 green

Sottolineature per il testo

Se si vogliono creare o cancellare delle sottolineature sotto, sopra o sul testo stesso è possibile usare la proprietà text-decoration.

I seguenti sono i valori applicabili a questa particolare proprietà:

text-decoration: underline – permette di sottolineare il testo

text-decoration: overline – crea una linea sopra il testo

text-decoration: line through – crea una linea attraverso il testo

Con la stessa proprietà è anche possibile eliminare quelle sottolineature che compaiono automaticamente sotto quei testi dotati di un collegamento.

Es.

a { text-decoration: none; }

Applicare colori in primo piano e sullo sfondo

Con le regole di stile è possibile specificare i colori di sfondo e quelli in primo piano per ogni elemento (X)HTML.

Il primo piano di un elemento è costituito dal suo testo e dal suo bordo. Il colore del testo viene sempre indicato attraverso la proprietà color, mentre il colore del bordo viene indicato tramite la proprietà border-color.

blockquote {

border-color: green;

border-style: solid; /* di default i bordi degli elementi sono invisibili pertanto ne andrà specificato uno stile di visualizzazione*/

color: blue;

}

Con la proprietà background-color è possibile riempire lo spazio che racchiude gli elementi indicati. Nell’esempio seguente l’area di una citazione, indicata dall’elemento blockquote, viene riempita con un colore specifico:

blockquote { background-color: yellow

}

La proprietà background-color può essere pertanto utilizzata per indicare un colore di sfondo per una pagina intera o per ogni singolo elemento ( sia a livello di blocco sia in linea) indicato nella struttura (X)HTML.

Aggiungere un’immagine di sfondo

Ora vedremo come aggiungere un’immagine utilizzando i fogli di stile anziché il linguaggio (X)HTML.

Utilizzando determinate regole di stile è possibile inserire delle immagini di sfondo per le nostre pagine. Inoltre è possibile applicare un’immagine diversa per ogni elemento presente nel documento.

La proprietà background-image viene utilizzata proprio per aggiungere un’immagine di sfondo a un determinato elemento.

Il primo passo da compiere in questo caso consiste sempre nel fornire la posizione del nostro file immagine, cioè il suo URL.

Il valore specifico di questa proprietà è infatti rappresentato da quell’elemento che contiene l’URL dell’immagine da utilizzare.

L’URL in questo caso sarà relativo al documento (X)HTML cui verrà applicata la regola oppure al documento CSS esterno che contiene gli stili da applicare a determinate pagine.

Con questa proprietà per inserire un’immagine di sfondo all’intera pagina basterà applicare la regola al body del nostro documento base, come nell’esempio seguente.

body{ background-image: url(cake.gif); } /* la keyword URL va inserita dal momento che rappresenta la proprietà della regola: il percorso ne costituisce il valore */

Con questa regola l’immagine verrà inserita e ripetuta nell’intera pagina fino a riempirne lo sfondo.

Per evitare che l’immagine venga ripetuta è necessario utilizzare la proprietà background-repeat a cui possono essere associati i seguenti valori: repeat , repeat-x , repeat-y , no-repeat (dove repeat è sempre il valore prestabilito).

Se si desidera far apparire l’immagine di sfondo una sola volta bisognerà utilizzare il valore no-repeat, così come nell’esempio seguente:

body {

background-image: url(cake.gif);

background-repeat: no-repeat;

}

E’ possibile inoltre indicare che l’immagine di sfondo venga ripetuta solo orizzontalmente (repeat-x) o verticalmente (repeat-y)

E’ possibile inoltre specificare l’esatta posizione sullo sfondo in cui vogliamo far comparire la nostra immagine, attraverso la proprietà background-position. Normalmente le immagini compaiono, dove non altrimenti specificato, nell’angolo in alto a sinistra di una pagina, per poi eventualmente ripetersi fino a coprire l’intero sfondo.

Per modificare la posizione standard di un’immagine si usano i seguenti valori: left, center, right, top, bottom.

Questi valori (left, center, right, top, bottom, and center) posizionano l’immagine di origine in relazione ai limiti dell’elemento indicati dalla regola.

Ad esempio, il valore right posizionerà l’immagine sull’angolo destro dell’area di sfondo.

Molto spesso queste keyword vengono utilizzate in coppia, come negli esempi seguenti:

selettore{ background-position: left bottom; }

selettore{ background-position: right center; }

Per determinare l’esatta posizione di un’immagine è anche possibile impostare i valori precisi relativi alla sua distanza dall’angolo in alto a sinistra dell’elemento, indicando prima il dato relativo allo spostamento in orizzontale.

Es.

{ background-position: 200px 50px; /* in questo modo l’immagine verrà spostata di 200px in orizzontale e di 50 px in verticale, rispetto all’angolo in alto a sinistra dell’elemento che la contiene */

}

Le proprietà di background e il concetto di ereditarietà

Contrariamente alle proprietà finora analizzate, le regole di stile basate sulla keyword “background” (quindi proprietà come background-image, background-color, ecc.) non seguono il principio di ereditarietà.

Se impostiamo un’immagine di sfondo per il body del nostro documento questa andrà a occupare anche lo sfondo degli elementi dipendenti: tuttavia questo fatto non dipende dall’ereditarietà ma dal fatto che di default lo sfondo degli elementi (X)HTML è sempre trasparente e pertanto permette la visualizzazione dell’immagine si sfondo.

Se gli elementi del body ereditassero veramente l’immagine di sfondo, la riprodurrebbero al loro interno interamente: per fortuna tale processo non ha luogo, altrimenti avremo una stessa immagine sovrapposta in più punti all’interno della nostra pagina.

Bloccare le immagini sullo sfondo

E’ possibile utilizzare la proprietà di background-attachment per far si che l’immagine inserita come sfondo non si muova mentre si scorrono le pagine del browser.

Quando un’immagine viene impostata come fissa (valore: fixed) rimane nella stessa posizione, in relazione all’area di visualizzazione del browser.

Nell’esempio seguente un’immagine non ripetuta è posizionata sullo sfondo dell’intero documento (body). Automaticamente, scorrendo la pagina, l’immagine inserita si muoverà ma con l’aggiunta della regola evidenziata l’immagine rimarrà fissa, nel punto in cui è stata originariamente inserita.

Es.

body {

background-image: url(images/supercake.gif);


background-position: center;

background-attachment: fixed; }

La proprietà generica background

Così come per i font anche per i colori e le immagini è possibile richiamare con un’unica generica proprietà tutti i valori utilizzabili, per modificare in breve tempo le nostre immagini e i colori di sfondo.

Possiamo utilizzare la funzione generica background nel modo seguente per indicare insieme tutti quei cambiamenti che vanno

apportati durante l’inserimento di un colore o un’immagine sullo sfondo di una pagina o di un elemento.

Es.

body { background: black url(arlo.jpg) no-repeat right top fixed; }

Senza questa regola generale avremmo dovuto apportare gli stessi cambiamenti nel modo seguente:

body{

background-color: black;

background-image: url(river.jpg);


background-position: right top;

background-attachment: fixed;

}

I fogli di stile esterni

All’inizio di questa lezione abbiamo menzionato tre modalità per collegare i fogli di stile alle marcature (X)HTML.

Tali fogli di stile utilizzano la sintassi che abbiamo visto finora, valida per la gestione degli stili interni.

Ora però dobbiamo vedere in che modo collegare un foglio di stile esterno ai documenti (X)HTML a cui desideriamo associarlo.

Esistono due modi per far riferimento a un foglio di stile esterno, all’interno di un documento (X)HTML:

1) Attraverso l’elemento link

2) la regola dell’@import

3)

Collegamento tramite l’elemento link

Il metodo migliore per creare un link diretto a un documento .css è proprio quello di inserire nell’intestazione del documento (X)HTML un elemento link.

Es.

<head>

<link rel="stylesheet" href="stili/stile1.css" type="text/css" />

<title>Cakedesign</title>

</head>

Nell’elemento link è necessario inserire tre attributi:

• rel="stylesheet": definisce la relazione tra il documento corrente e quello a cui viene collegato. Il valore dell’attributo rel è sempre style sheet quando si realizza un collegamento con un foglio di stile.

• href="url": fornisce la posizione del file .css.

• type="text/css": identifica la tipologia del foglio di stile come “text/css”

In un documento è possibile includere senza problemi più di un link per differenti fogli di stile. Nel caso in cui si verifichino conflitti fra i link, l’ultimo nella sequenza sovrascriverà le istruzioni precedenti.

L’elemento link rappresenta sicuramente il sistema migliore per collegare i fogli di stile esterni ai documenti (X)HTML.

Dobbiamo infatti considerare anche la velocità di lettura da parte del browser dei fogli esterni collegati a una pagina: il metodo link ha dimostrato attraverso numerosi test con i browser attuali di ottimizzare e velocizzare la lettura dei fogli di stile esterni.

Collegamento tramite l’@import

Vediamo anche l’altro metodo per allegare i fogli di stile esterni a un documento (X)HTML. Questo secondo metodo, meno utilizzato, prevede l’utilizzo della regola @import, secondo l’esempio seguente:

<head>


@import url("http://path/stylesheet.css");

p { font-face: Verdana;}

</style>

<title>pagina di prova</title>

</head>

Nell’esempio viene indicato un URL assoluto ma poteva benissimo essere specificato invece un URL relativo, relativa al documento (X)HTML corrente.

L’esempio mostra che un @import può comparire in un elemento di stile con altre regole ma deve essere inserito prima di ogni selettore. Anche in questo caso, attraverso l’utilizzo dell’@import è possibile allegare al documento (X)HTML più di un foglio di stile esterno contenente le nostre regole .

FINE LEZIONE

3 - Unità 3 - Utilizzo delle regole di stile (CSS)

Documents

Transcript of 3 - Unità 3 - Utilizzo delle regole di stile (CSS)