I Fogli di Stile - Università degli Studi dell`Aquila

Transcript

I Fogli di Stile
Dispense per il corso di Ingegneria del Web
Revisione 05/11
Giuseppe Della Penna ([email protected])
Dipartimento di Informatica
Università degli studi dell'Aquila
Corso di Ingegneria del Web
I Fogli di Stile: Compatibilità Cross-Browser
I Fogli di Stile
Un foglio di stile CSS è un documento di testo, costituito da una serie di regole di stile, che
determina le caratteristiche visive del documento cui è associato. Un foglio di stile, in generale,
può essere incorporato in un documento o collegato ad esso.
In un documento HTML, i fogli di stile CSS incorporati vanno inseriti nella sezione <head>
all’interno di tag <style> aventi type=“text/css”, , mentre i fogli di stile CSS collegati possono
essere indicati inserendo nella sezione <head> dei tag <link> aventi type=“text/css”,
rel=“stylesheet” e href=“uri_del_foglio_di_stile”. E' anche possibile incorporare una regola di stile
di stile inerente uno specifico elemento scrivendola direttamente nell’attributo style dello stesso.
<html>
<head>

<style type="text/css">
.classe2 {background-color: magenta}
</style>

<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<p style="font-size: 15pt">Testo</p>
</body>
</html>
Ogni documento HTML può avere anche più di un foglio di stile associato: le regole di ciascun
foglio vengono applicate, in base ai loro criteri di attivazione, e si sommano secondo le regole di
cascading.
Compatibilità Cross-Browser
Modalità Standards e Quirks
Prima di fare esperimenti con i CSS, però, è necessario ricordare che i browser supportano due
modalità di rendering: Standards mode and Quirks mode.
Lo Standards mode lavora seguendo il più possibile le specifiche del W3C, quindi in maniera
(quasi) indipendente dal browser, mentre il Quirks mode segue le regole di formattazione dello
specifico browser, con le sue limitazioni ed estensioni. La modalità Quirks esiste per rendere i
browser compatibili con i vecchi siti web, che erano sviluppati con codice molto browserdipendente. Oggi, è necessario sviluppare i nuovi siti in modalità Standards.
Tuttavia, di default i browser usano la modalità Quirks. Per entrare in modalità Standards occorre
inserire all’inizio del documento una dichiarazione doctype come quella che segue
Per usare l’XHTML transitional:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Per usare l’XHTML strict:
Revisione 05/11
Pagina 2/25
I Fogli di Stile: Fogli di Stile Multipli
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Stylesheet di Default e di Base
Molti browser applicano alle proprietà dei vari elementi default diversi, corrispondenti al loro
stylesheet di default. Per realizzare CSS crossbrowser, può essere utile azzerare queste differenze
e creare i fogli di stile a partire da una base minima comune. Questo si può ottenere inserendo
all’inizio
del
foglio
di
stile
una
specifica
come
la
seguente
(http://kurafire.net/log/archive/2005/07/26/starting-css-revisited):
html, body, form, fieldset { margin: 0; padding: 0; font: 100%/120%
Verdana, Arial, Helvetica, sans-serif; }
h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address { margin:
1em 0; padding: 0; }
li, dd, blockquote { margin-left: 1em; }
form label { cursor: pointer; }
fieldset { border: none; }
input, select, textarea { font-size: 100%; }
Fogli di Stile Multipli
Se si associano più fogli di stile per lo stesso documento, CSS in generale li combina in ordine di
inclusione.
In più, con HTML è possibile specificare l’inclusione condizionale di un foglio di stile (o un gruppo
di fogli) in un documento in base a vari criteri:
•
•
Il media di output
Le preferenze dell’utente
Media Types
Quando si incorpora o collega un foglio di stile a un documento HTML, è possibile specificare
nell’elemento <style> o <link> l’attributo media.
Il valore di media è una lista separata da virgole di nomi di media descriptors, che identificano il
tipo di output per il quale il foglio di stile è adatto:
•
•
•
•
•
screen (default)
tty, tv, projection, handheld: indicano diversi tipi di terminali di tipo visivo
print: il foglio di stile selezionato per la stampa (utile ad esempio per eliminare o combiare
colori o elementi opzionali presenti nel rendering su schermo)
aural, braille: rendering per sintetizzatori vocali o braille
all: tutti i tipi di media
<head>

<link rel="stylesheet" type="text/css" media="screen" href="main.css"/>
</head>
Revisione 05/11
Pagina 3/25
I Fogli di Stile: Regole
I media types sono utili per creare fogli di stile alternativi. Infatti un foglio di stile con un
particolare media verrà utilizzato dal browser solo se il documento viene renderizzato sul media
indicato (schermo, stampante, ...).
Si veda l’esempio sui fogli di stile alternativi presente tra il materiale online del corso
Fogli di Stile Alternativi
In HTML è possibile dotare di una pagina di tre diversi tipi di stile per lo stesso tipo di media:
•
•
•
Stili persistenti: sono sempre caricati dal browser. Gli stili incorporati nel documento sono
sempre persistenti.
Stili preferiti: si tratta gli stili di default che verranno combinati a quelli persistenti, se
presenti. Uno stile preferito deve essere sempre collegato (esterno) e si indica inserendo
l’attributo title=“nome_stile” all’interno del tag <link>.
Stili alternativi: sono stili che possono essere caricati alternativamente a quello preferito, a
seconda delle preferenze dell’utente. Devono essere sempre collegati e si indicano
inserendo l’attributo title=“nome_stile” all’interno del tag <link> e modificandone
l’attributo rel ad “alternate stylesheet”.
<head>

<link rel="stylesheet" type="text/css" title="principale" href="main.css"/>

<link rel="alternate stylesheet" type="text/css" title="alternativo"
href="main.css"/>
</head>
Il browser mostra inizialmente il foglio di stile preferito insieme a quelli persistenti, e non usa
quelli alternativi. L'utente può scegliere uno stile alternativo utilizzando il menu del browser (ad
esempio, in Firefox, selezionando Visualizza > Stile pagina). Questa scelta non è definitiva: in
generale, ricaricando la pagina, si ritorna allo stile predefinito.
Si veda l’esempio sui fogli di stile alternativi presente tra il materiale online del corso
Regole
Una regola CSS definisce uno stile di formattazione e una classe di elementi a cui deve essere
applicato. Lo stile di formattazione è a sua volta definito da una lista di proprietà valorizzate, con la
sintassi proprietà: valore, poste all’interno di parentesi graffe e separate da un punto e virgola. La
classe di elementi è invece definita con speciali pattern detti selettori.
Un esempio di regola astratta è
SEL {P1: V1 [!important]; P2: V2; P3: V3}
dove P1,P2,P3 sono nomi di proprietà e V1, V2, V3 i relativi valori. Il modificatore !important,
opzionale, scritto dopo il valore (ma prima del separatore) di qualsiasi proprietà, serve ad
aumentare la priorità della regola durante il processo di cascading, come vedremo più avanti.
Revisione 05/11
Pagina 4/25
I Fogli di Stile: Selettori
Selettori
Un uso corretto dei selettori permette di rendere i fogli di stile compatti e modulari. Indicare in
modo corretto gli elementi su cui applicare una certa formattazione è un esercizio importante per
imparare ad usare bene i CSS.
Per ciascun tipo di selettore si vedano i corrispondenti esempi commentati presenti tra il materiale online del
corso
Selettori Semplici
Un selettore semplice è un selettore di base seguito da zero o più selettori di attributo, selettori
di classe, selettori di ID , pseudo classi e pseudo elementi.
I selettori di base sono due:
•
•
Il selettore universale (*) fa match con ogni elemento.
I selettori di tipo (stringhe rappresentanti nomi di elementi) fanno match con gli elementi
aventi il nome corrispondente.
p {color: red} /* imposta a rosso il colore del testo in tutti gli elementi
p */
Selettori di Attributo
Ad ogni selettore di base possono essere posposti dei selettori di attributo. I possibili selettori di
questo tipo sono:
•
•
•
•
[A] (l’elemento deve avere un attributo A)
[A=V] (l’elemento deve avere un attributo A con valore V)
[A~=V] (l’elemento deve avere un attributo A il cui valore è una lista separata da spazi
contenente V)
[A|=V] (l’elemento deve avere un attributo A il cui valore è una lista separata da ‘-’
contenente V)
p[id] {color: red} /* imposta a rosso il colore del testo in tutti gli
elementi p dotati di attributo id */
I selettori di attributo non sono supportati nelle versioni meno recenti di quasi tutti i browser.
L'esempio che segue mostra come marcare visivamente in una pagina HTML il testo di lingua
inglese (la lingua è indicata correttamente tramite l'attributo lang di HTML).
*[lang=en] {font-variant: italic}
Selettori di Classe
Quando si lavora con HTML, è disponibile una speciale sintassi abbreviata, detta selettore di
classe, per lavorare con l’attributo class degli elementi.
Revisione 05/11
Pagina 5/25
La sintassi “S.C”, applicabile a qualsiasi selettore semplice S, è equivalente a S[class~=C]. Come
caso speciale, è possibile scrivere il selettore di classe da solo (mentre in generale i selettori di
attributo devono seguire un altro selettore valido), sottintendendo, prima di esso, il selettore
universale: .C è equivalente a *.C, cioè *[class~=C].
p.special {color: red} /* imposta a rosso il colore del testo in tutti gli
elementi p di classe special */
.other {color: blue} /* imposta a blu il colore del testo in tutti gli
elementi di classe other */
Selettori di ID
In XML (e in HTML) è possibile assegnare ad ogni elemento un ID univoco. Questo ID può essere
usato nei CSS per applicare formattazione a un elemento specifico.
Il selettore ID può essere posto dopo ogni selettore di base ed ha la sintassi #ID. Il selettore S#ID
fa match con l’elemento che corrisponde al selettore S ed ha l’ID specificato. E’ possibile (e molto
comune) usare i selettori di ID da soli, proprio come quelli di classe, sottintendendo un selettore
universale: #ID equivale a *#ID, cioè all’elemento (di qualunque tipo) avente l’ID specificato.
I selettori di ID si usano spesso per formattare gli elementi principali del layout di una pagina
web. Ciascun elemento (header, corso, menu, barra, ...) viene dotato di un ID univoco e quindi
formattato con l'ausilio di CSS.
#header {height: 100px} /* imposta la dimensione verticale del blocco co ID
header */
div#menu {border: 1px solid black} * imposta il bordo della div con ID menu
*/
Pseudo classi
Le pseudo classi permettono di identificare elementi in base ad alcune loro particolari proprietà.
•
•
•
•
•
•
:first-child (l’elemento è il primo figlio del suo genitore)
:link (l’elemento è un link non visitato)
:visited (l’elemento è un link visitato)
:hover (l'elemento è attualmente indicato dall’utente, ad esempio passandovi sopra il
mouse)
:focus (l'elemento è attualmente con focus, cioè che accetta input da tastiera)
:active (l'elemento è attualmente attivato, ad esempio da un click del mouse)
a:hover {color: red} /* colora di rosso il testo negli elementi a quando il
mouse li sovrasta */
La pseudoclasse :hover è utilizzatissima per realizzare animazioni al passaggio del mouse, ad
esempio righe di una tabella che si evidenziano o sottomenu che appaiono quindi il mouse passa
sopra di essi.
Si veda l'esempio del menu css statico presente tra il materiale online del corso
Tuttavia, Internet Explorer l'imita tuttora l'uso di questa pseudoclasse ai soli elementi a (link).
Questo significa che, per ottenere degli effetti di animazione css anche in internet explorer, è
necessario che l'oggetto da animare sia in qualche modo incluso all'interno di un link. Sono stati
Revisione 05/11
Pagina 6/25
sviluppate molte tecniche per ovviare a questo problema. Si vedano ad esempio i menu popup CSS
crossbrowser sul sito CSSPlay.
Pseudo elementi
E’ infine possibile applicare formattazione ad elementi fittizi, non propriamente facenti parte del
documento e/o delimitati da tag. Questi elementi si chiamano pseudo elementi.
•
•
•
:first-line (la prima riga del blocco di testo contenuto nell’elemento)
:first-letter (il primo carattere del blocco di testo contenuto nell’elemento)
:before, :after (indicano le posizioni precedente e successiva all’elemento. Si usano un
congiunzione con la proprietà CSS content)
p:first-letter {font-size: 110%} /* aumenta la dimensione della prima
lettera di ogni paragrafo */
Combinazioni di Selettori
Due selettori S e T possono essere combinati in un terzo selettore in vari modi. Se S e T sono due
selettori, allora possiamo scrivere anche i seguenti selettori composti:
•
•
•
•
S T (spazio intermedio)
Questo selettore fa match con gli elementi indicati da T solo se sono discendenti di un
elemento che fa match con S
S>T
Questo selettore fa match con gli elementi indicati da T solo se sono figli di un elemento
che fa match con S
S+T
Questo selettore fa match con gli elementi indicati da T solo se seguono immediatamente
un elemento che fa match con S, e condividono con questo lo stesso genitore.
S, T
Questo selettore fa match con gli elementi indicati da S e da T (or logico o raggruppamento
di selettori)
h1,h2,h3 {color: red} /* colora di rosso il testo dei titoli di livello 1-3
*/
div#menu a {color: blue} /* colora di blu il testo degli elementi a
all'interno della div con ID menu */
Attenzione, però: i selettori composti che utilizzano "+" e ">" sono la caratteristica dei selettori
CSS meno supportata dai browser meno recenti (e in alcuni casi anche da quelli recenti), quindi
vanno usati con estrema cautela!
L'uso corretto dei selettori CSS permette di ottenere facilmente effetti molto interessanti.
Si veda l'esempio del menu css statico presente tra il materiale online del corso, in cui una lista non ordinata
viene trasformata da CSS in un menu multilivello animato. Per ora si osservi solo la forma dei selettori, più avanti
illustreremo le proprietà di stile che realizzano la formattazione.
Revisione 05/11
Pagina 7/25
I Fogli di Stile: Calcolo dei Valori delle Proprietà di Stile
Calcolo dei Valori delle Proprietà di Stile
Durante il rendering, CSS deve determinare lo stile da assegnare a ciascun elemento del
documento. Questo implica calcolare il valore di ogni singola proprietà di stile che l’elemento può
avere. Per determinare il valore di una specifica proprietà P per un elemento E, CSS applica le
regole seguenti, nell'ordine:
1. Cascading
La proprietà ha uno stile specificato tramite regole CSS?
2. Ereditarietà
Se le proprietà non è specificata, può essere ereditata dall’elemento padre?
3. Valore di default
In caso nulla sia applicabile, la proprietà assume inizialmente il valore dato dallo stylesheet
di default.
Vediamo ora come funzionano queste regole.
Cascading
In un foglio di stile (o nell'insieme dei fogli di stile associati a un documento) è possibile (e a volte
molto utile) che esistano più regole che fanno match con gli stessi elementi. Inoltre CSS prevede,
oltre ai fogli di stile dati dall’autore, altri due fogli di stile da considerare:
•
•
Foglio di stile utente. L’utente può fornire delle regole di stile implicite, come ad esempio
la dimensione di base dei caratteri, tramite le opzioni del browser.
Foglio di stile del browser. Ogni browser deve avere un suo foglio di stile di default, che
determina la visualizzazione di base di ogni elemento HTML.
Quando CSS calcola il valore di ogni singola proprietà di stile, prende in considerazione tutte le
regole che fanno match (tramite il loro selettore) con l’elemento da formattare in tutti i fogli di
stile, e ne seleziona una sola con il metodo della cascata. In particolare, quando più regole fanno
match con lo stesso elemento, l’effettivo valore di ciascuna proprietà viene selezionato
confrontando (in ordine di importanza) la priorità di origine, la specificità e l'ordine di definizione
delle regole e selezionando quella che risulta avere maggior peso.
La Priorità di origine di una regola è determinata dalla lista che segue:
1.
2.
3.
4.
5.
Valore !important del foglio di stile utente
Valore !important del foglio di stile autore
Valore del foglio di stile autore
Valore del foglio di stile utente
Valore di default del foglio di stile del browser
Quindi una proprietà dichiarata !important dall'utente (ad esempio, l'impostazione della
dimensione base del carattere in alcuni browser) è prioritaria rispetto a qualsiasi foglio di stile
creato dall'autore della pagina. D'altra parte, tutte le proprietà non !important definite dall'utente
sono meno prioritarie di quelle definite dall'autore. I valori di default del browser sono i meno
Revisione 05/11
Pagina 8/25
I Fogli di Stile: Calcolo dei Valori delle Proprietà di Stile
prioritari. In base alla lista precedente, quindi, il browser è in grado di attribuire una priorità ad
ogni regola. Se a questo punto esiste una sola regola con priorità massima, viene selezionata. Se,
invece, ci sono più regole con la stessa priorità massima, il browser prova a distinguerle tramite la
loro specificità.
La specificità di una regola è determinata da quanto essa indichi con precisione l'oggetto a cui sta
per essere applicata:
1. Un selettore più specifico per un determinato elemento ha la precedenza su uno più
generico.
2. In HTML, le regole inserite nell’attributo style dell’elemento sono considerate con la
massima specificità.
Quindi, ad esempio, una regola con selettore p.cl (paragrafo di classe cl) ha la meglio sulle una
regole con selettore .cl o p quando deve essere applicata a un paragrafo di classe cl. Nello stesso
caso, il selettore .cl ha la meglio sul selettore p in quanto meno generico.
p {color: red; font-size: 18pt;}
.cl {color: blue; background-color: green; }
p.cl{background-color: olive}
...
<p class="cl">TEST</p>
Nell'esempio, viene selezionato il valore blue come color, una font-size di 18 punti e un colore di
fondo oliva.
Se due o più regole hanno la stessa priorità e la stessa specificità, viene infine preso in
considerazione il loro ordine di dichiarazione: una regola ha la precedenza su tutte quelle che la
precedono.
Ereditarietà
Molte proprietà (si veda la specifica CSS) vengono automaticamente ereditate dai figli di un
elemento, se non esistono regole specifiche che ne calcolano un valore diverso tramite la cascata.
Questo comportamento di default è molto utile quando si creano fogli di stile complessi. Ad
esempio, se si specifica un font per i tag p, tutti i tag in esso contenuti (ad esempio b) avranno lo
stesso font, a meno che non venga loro assegnato (globalmente o individualmente) uno stile che
specifichi un font diverso.
E’ inoltre possibile forzare l’ereditarietà di una proprietà specificando (ove possibile) la parola
chiave inherit come valore della proprietà stessa.
p {background-color: blue; color: white; border-top: 10px solid olive}
b {color: red}
i {border: inherit}
Nell'esempio, i paragrafi e gli elementi b,i in essi nidificati avranno tutti sfondo blu. I tag b
avranno testo rosso, mentre tutto il resto del testo nel paragrafo (compreso quello nei tag i) sarà
bianco. I tag p e i, infine, avranno un bordo superiore di 10 pixel.
Dopo aver visto tutte le regole di selezione usate dai CSS, è utile per esercizio leggere il sorgente dell'esempio
cascading ed ereditarietà presente tra il materiale online del corso, e verificare se si è in grado di prevedere che
attributi avranno nel browser i vari elementi della pagina. Provate anche a cercare differenze di rendering della
stessa pagina tra browser diversi!
Revisione 05/11
Pagina 9/25
I Fogli di Stile: Elementi Base del Linguaggio CSS
Elementi Base del Linguaggio CSS
Vediamo ora alcune regole di base utilizzate per esprimere i valori delle proprietà CSS.
Da questo punto in poi, è possibile avvalersi dello script CSS explorer, presente tra il materiale online del corso,
oltre che degli esempi via via indicati, per testare interattivamente le proprietà di stile e il loro effetto sugli
elementi.
Misure ed Unità di Misura
Le misure vengono espresse nel linguaggio CSS da numeri (anche decimali, e in alcuni casi
negativi) seguiti immediatamente dal codice dell’unità di misura. Inserire uno spazio tra il numero
e il codice rende di solito non valida la proprietà! Tuttavia, la misura zero può essere specificata
anche senza un codice di unità. Esempi di kisure valide sono, ad esempio, 0, 3mm, 4px, -2in, 80%.
Esistono due classi di unità di misura: relative e assolute.
Le unità relative sono em (font-size attuale), ex (x-height attuale) e px (pixel del dispositivo). Sono
molto indicate nel caso in cui si desideri far adattare automaticamente le dimensioni al dispositivo
e alle sue impostazioni (es. stampante o browser con varie dimensioni di carattere). Infatti, ad
esempio, 1em corrisponde alla corrente dimensione del font, quindi la sua effettiva misura può
variare se la dimensione carattere del browser viene aumentata dall'utente o da altre regole del
foglio di stile, facendo adattare di conseguenza anche le strutture che ospitano il testo.
Le unità assolute sono in (pollici), cm (centimetri), mm (millimetri), pt (punti = 1/72 di pollice), pc
(pica = 12 punti) . Sono utili solo quando il dispositivo di output è unico e precisamente definito.
In molti casi, le misure possono anche essere espresse come percentuali. La misura di riferimento
è di solito quella della stessa proprietà nell’elemento contenitore.
Colori
Il colori possono essere definiti nel linguaggio CSS tramite la specifica numerica RGB o attraverso
il loro nome proprio.
Le specifica RGB permette di definire qualsiasi colore attraverso il valore delle sue tre
componenti rossa, verde e blu.
Le stringhe RGB esadecimali hanno la forma #RRGGBB, in cui ciascuna coppia di cifre rappresenta
il valore esadecimale della rispettiva componente. Ad esempio, #FFFFFF rappresenta il colore
bianco. La forma abbreviata #RGB rappresenta il numero in cui ogni componente ha come valore
quello della cifra corrispondente ripetuto per due volte: quindi #FFF è uguale all'esempio visto
sopra.
Le stringhe RGB decimali, invece, si ottengono utilizzando il costrutto rgb(R,G,B), dove R, G e B
sono numeri compresi tra 0 e 255 o percentuali (intese come frazioni del valore massimo 255). In
questo caso il colore bianco si scrive rgb(255,255,255).
Infine, i colori per cui è definito un nome proprio sono maroon (#800000), red (#ff0000), orange
(#ffA500), yellow (#ffff00), olive (#808000), purple (#800080), fuchsia (#ff00ff), white #ffffff, lime
(#00ff00), green (#008000), navy (#000080), blue (#0000ff), aqua (#00ffff), teal (#008080), black
(#000000), silver (#c0c0c0) e gray (#808080).
Revisione 05/11
Pagina 10/25
I Fogli di Stile: Bordi
Shortand Properties
Il linguaggio CSS dispone di molte proprietà che spesso vengono impostate in gruppo, come ad
esempio le tre proprietà che definiscono un bordo (colore, spessore, stile) o le proprietà di un font
(famiglia, dimensione, peso, …). Per questo motivo, sono disponibili anche le cosiddette proprietà
shortand, che permettono, con la loro particolare sintassi, di impostare con una sola operazione i
valori di diverse proprietà. Nell’impostare una proprietà shorthand, i valori di ogni singola
proprietà “componente” vengono scritti di seguito, separati da uno spazio. L’ordine non è di solito
significativo, in quanto non esistono ambiguità nel linguaggio. Se una o più proprietà vengono
omesse nell’impostazione shorthand, il loro valore è considerato quello di default.
Ad esempio, la proprietà CSS font può essere usata per impostare contemporaneamente tutte le
proprietà font-style, font-variant, font-weight, font-size, line-height e font-family. Per impostare un
bordo uniforme intorno a un elemento, si può scrivere
border: 1px solid black
oppure
border-left: 1px solid black
border-right: : 1px solid black
border-top: 1px solid black
border-bottom: : 1px solid black
oppure
border-left-width: 1px
border-left-style: solid
border-left-color: black
border-right-width: 1px
border-right-style: solid
border-right-color: black
border-top-width: 1px
border-top-style: solid
border-top-color: black
border-bottom-width: 1px
border-bottom-style: solid
border-bottom-color: black
Bordi
La maggior parte degli elementi possono essere dotati di un bordo sui quattro lati del loro box.
Ogni bordo può possedere differenti caratteristiche (colore, spessore, stile). E’ inoltre possibile, nel
caso dei bordi delle tabelle, specificare come i bordi adiacenti debbano combinarsi.
Nota: I bordi delle tabelle specificati tramite CSS sono indipendenti da quelli mostrati tramite
l’attributo border di <table>.
•
•
I colori dei bordi possono essere specificati, come di consueto, tramite nomi simbolici (ad
es. white), o tramite le loro componenti rgb in esadecimale (ad es. #FFFFFF) o decimale (ad
es. rgb(255,255,255)).
Lo spessore dei bordi è invece un valore che può essere specificato in una qualsiasi delle
unità di misura accettate dai CSS (ad es. px, pt, mm, …)
Revisione 05/11
Pagina 11/25
•
I Fogli di Stile: Bordi
I principali stili per i bordi sono dotted, dashed, solid, double, groove, ridge, inset, outset.
Tuttavia, la maggior parte dei browser supporta solo solid, dotted e dashed.
#e {border: 1px solid black} /* imposta un bordo solido, nero dello
spessore di 1 pixel intorno all'elemento con ID e */
Per tutte le proprietà esistono degli shorthand che permettono di impostare gli stessi valori per
tutti i lati contemporaneamente e/o di specificare le tre proprietà (colore, spessore, stile) con
un’unica istruzione.
Molto spesso è richiesta la realizzazione di bordi arrotondati. Questo in CSS2 non è possibile,
tuttavia esistono varie tecniche per ottenere lo stesso risultato.
Tra il materiale del corso sono esposti tre esempi di questo tipo: il primo esempio utilizza delle piccole immagini
per realizzare gli angoli smussati, ed è quindi più difficile da realizzare e mantenere, sebbene rappresenti la
tecnica attualmente più diffusa. Un esempio alternativo utilizza invece solo i bordi CSS con qualche piccolo
trucco per realizzare l’illusione degli angoli smussati. Infine, è possibile usare, con opportuni accorgimenti di
portabilità, anche le nuove proprietà di stile CSS3 per ottenere questo effetto.
Proprietà CSS per i Bordi
•
•
•
•
•
proprietà: border
shorthand per border-top, border-right, border-bottom, border-left
valori: {spessore, stile, colore}
proprietà: border-color
shorthand per border-top-color,border-right-color,border-bottom-color,border-left-color
valori: colore | transparent
proprietà: border-style
shorthand per border-top-style,border-right-style,border-bottom-style,border-left-style
valori: none | nome stile bordo | inherit
proprietà: border-width
shorthand per border-top-width,border-right-width,border-bottom-width,border-left-width
valori: misura
proprietà: border-collapse
determina in che modo i bordi di elementi adiacenti (ad esempio le celle di una tabella)
saranno visualizzati. Il valore collapse li collassa in un bordo solo, mentre separate li mostra
entrambi affiancati.
valori: collapse | separate
elementi su cui è applicabile: tabelle ed elementi interni inline
Si vedano gli esempi tra le proprietà comuni CSS presenti tra il materiale online del corso. E' anche possibile
effettuare prove interattive tramite il CSS explorer.
Nuove Proprietà Introdotte dai CSS3: Bordi Smussati
Il CSS3 introducono molte nuove proprietà riguardanti i box e i loro bordi. Tuttavia, non essendo
ancora del tutto supportate, queste proprietà vanno usate con cautela e applicando opportuni
accorgimenti per massimizzarne la resa crossbrowser.
In particolare, per realizzare bordi con angoli smussati è possibile usare le proprietà che seguono:
Revisione 05/11
Pagina 12/25
•
•
I Fogli di Stile: Sfondo
proprietà: border-top-left-radius, border-top-right-radius, border-bottom-left-radius,
border-bottom-right-radius
valori: misura | misura misura
determina il raggio di curvatura dell’angolo indicato dalla proprietà. Se si specifica un solo
valore, il raggio orizzontale sarà uguale a quello verticale (cioè l’angolo sarà circolare),
altrimenti è possibile specificare separatamente questi due valori (generando bordi ellittici).
proprietà: border-radius
valori: misura{1,4} | misura{1,4} / misura{1,4}
determina il raggio di curvatura di tutti gli angoli contemporaneamente. Nella prima
versione, le misure fornite rappresentano il raggio (orizzontale e verticale) di ciascun
angolo. Se se ne specificano meno di quattro, le restanti saranno dedotte (ad esempio, se si
specifica una sola misura, verrà usata per tutti gli angoli). Nella seconda versione, le misure
poste prima del simbolo “/” rappresentano i raggi orizzontali, mentre quelle poste dopo di
esso indicano i raggi verticali.
Purtroppo queste proprietà non sono interpretate correttamente neppure da alcune versioni
di Firefox e di Chrome. Per sanare il più possibile questa situazione, è possibile inserire nei
fogli di stile, oltre alle proprietà suddette, anche le loro versioni “proprietarie” dei vari browser,
in modo che ciascuno “veda” il comando che gli è più congeniale. Per fortuna, queste proprietà
specifiche hanno la stessa sintassi di quelle standard appena viste: quelle usate da Firefox si
ottengono anteponendo la stringa “-moz-“ al nome della proprietà, mentre quelle usate da
Chrome e Safari usando il prefisso “-webkit-“.
Riassumendo, l’esempio che segue mostra come realizzare un tipico bordo arrotondato su un
box:
.roundbox {
border: 1px solid #8AAFE1;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
Sfondo
Tutti gli elementi di tipo blocco possono essere dotati di uno sfondo, costituito da un colore
solido o da un’immagine.
Nel caso di sfondi costituiti da immagini, il file da utilizzare deve essere indicato tramite il
costrutto url(‘…’), il cui argomento deve essere una URL valida (anche relativa alla posizione del
foglio di stile CSS sul filesystem), ed è possibile specificare:
•
•
•
In che posizione far apparire l’immagine rispetto all’elemento di cui è sfondo.
Se l’immagine dovrà essere ripetuta per riempire l’intera superficie messa a disposizione
dall’elemento.
Se l’immagine debba “scorrere” insieme al contenuto della finestra o rimanere fissa.
#e {background-color: red}
ID e */
Revisione 05/11
/* imposta uno sfondo rosso per l'elemento con
Pagina 13/25
I Fogli di Stile: Sfondo
E' spesso utile specificare un colore di fondo anche quando si utilizza un'immagine di sfondo.
Infatti, l'immagine viene sovrapposta al colore, quindi si può usare il riempimento dato dal colore
di sfondo per sostituire l'immagine mentre è ancora in fase di caricamento, senza far degradare
troppo l'aspetto visuale, o per "estendere" l'immagine collegandosi al suo colore di fondo.
Grazie all’elevata versatilità degli sfondi, questi vengono spesso utilizzati per scopi impropri, ad
esempio per creare effetti grafici (bottoni, elementi strutturali della pagina, ecc) che non
sarebbero realizzabili importando semplicemente le immagini tramite il costrutto <img> di HTML.
Proprietà CSS per lo sfondo
•
•
•
•
•
proprietà: background-color
colore di fondo
valori: colore | transparent
proprietà: background-attachment
ancoraggio dello sfondo. Determina se l'immagine di fondo si muove quando il suo
contenitore viene scrollato (ad esempio tramite una barra di scorrimento)
valori: scroll | fixed | inherit
(scrolla con la pagina | resta fisso rispetto alla pagina | eredita il comportamento
dell'elemento genitore)
proprietà: background-image
definisce l'immagine di fondo, posizionata al di sopra del colore di fondo
valori: url | none | inherit
(inserisci come sfondo il file grafico dato | nessuna immagine)
proprietà: background-position
definisce la posizione dell’immagine di fondo, orizzontale e verticale
valori: top left | top center | top right | center left | center center | center right | bottom
left | bottom center | bottom right | inherit
proprietà: background-repeat
imposta l'estensione dell’immagine di fondo: se l'immagine è più piccola dell'area che
dovrebbe coprire, viene ripetuta più volte
valori: repeat | repeat-x | repeat-y | no-repeat | inherit
(ripeti l'immagine in orizzontale e verticale | ripeti solo in orizzontale | ripeti solo in
verticale | non ripetere )
Nuove Proprietà Introdotte dai CSS3: le Ombre
I CSS3 permettono di realizzare facilmente ombre, che prima venivano ottenute con complesse
operazioni tramite sovrapposizione di oggetti con sfondi particolari. In particolare, è possibile
usare la proprietà che segue:
•
proprietà: box-shadow
valori: none | inset? misura{2,4} colore (, inset? misura{2,4} colore)*
le prime due misure (obbligatorie) impostano l’offset dell’ombra rispetto all’oggetto, cioè di
quanto “sporgerà” da esso, e possono essere anche negative per spostare l’ombra in alto o
Revisione 05/11
Pagina 14/25
I Fogli di Stile: Formattazione
a sinistra. La terza misura, opzionale, è il raggio di sfumatura dell’ombra: più è alto, più
l’ombra risulterà sfumata verso gli estremi. La quarta misura, opzionale, è lo “spread”
dell’ombra, che rappresenta quanto l’ombra stessa verrà “espansa” o “contratta” (se il
valore è negativo) rispetto all’area dell’oggetto che la proietta. L’ultimo parametro indica il
colore dell’ombra (omettendo il quale ciascun browser userà il suo default). Se precedute
dalla parola chiave inset, queste misure determinano un’ombra proiettata all’interno
dell’oggetto. Infine, se si specificano più configurazioni di ombra (separate da virgole),
queste verranno tutte applicate, nell’ordine, “stratificandole”.
Anche questa proprietà non è interpretata correttamente da tutti i browser, ma è possibile
inserire, oltre ai nomi standard, le versioni “proprietarie” di questa proprietà per migliorarne la
compatibilità. Ecco quindi un esempio in cui viene proiettata in’ombra esterna, spostata di 5
pixel a sinistra e in basso, con un raggio di sfumatura di due pixel e di colore grigio:
.shadow {
box-shadow:5px 5px 2px #DDD;
-moz-box-shadow:5px 5px 2px #DDD;
-webkit-box-shadow:5px 5px 2px #DDD
}
Formattazione
Di seguito riportiamo la lista commentata delle principali proprietà di formattazione per caratteri
e paragrafi. Si tratta di proprietà molto comuni e spesso auto esplicative.
Caratteri
•
•
•
•
•
proprietà: color
colore carattere
valori: colore
proprietà: font-family
tipo di carattere
valori: uno o più nomi di font, separati da virgole, in ordine di priorità (se un carattere non
è presente sul sistema, viene provato il successivo, e così via. E' consigliabile concludere
sempre la lista con un nome di font comune come Helvetica o Times, seguito da un nome
generico di famiglia come sans-serif o serif, solitamente compresi da tutte le piattaforme)
proprietà: font-size
dimensione carattere
valori: misura
proprietà: font-style
stile del carattere
valori: normal | italic | oblique
(normale | corsivo | obliquo)
proprietà: font-variant
variante del font
valori: normal | small-caps
(normale | maiuscoletto)
Revisione 05/11
Pagina 15/25
•
•
•
I Fogli di Stile: Formattazione
proprietà: font-weight
peso del font
valori: normal | bold | bolder | lighter
(normale | grassetto | grassetto pronunciato | sottile)
proprietà: text-decoration
sottolineatura dei caratteri
valori: none | underline | overline | line-through
(nessuna | sottolineato | sovralineato | barrato)
proprietà: text-transform
trasformazione del testo (maiuscole/minuscole)
valori: capitalize | uppercase | lowercase | none
(iniziali maiuscole | tutto maiuscolo | tutto minuscolo | normale)
#e {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11pt;}
E’ possibile importare all’interno dei documenti dei font scaricabili dal web (le cosiddette web
fonts) tramite la speciale “at-rule” CSS denominata @font-face. Ad esempio, il codice che segue
installa un font liberamente distribuito da Google:
@font-face {
font-family: 'Tangerine';
font-style: normal;
font-weight: normal;
src:
url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouGRPY6323mHUZFJMgTvxaG2iE');
src: local('Tangerine'),
url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouGRD8E0i7KZn-EPnyo3HZu7kw') format('woff');
}
Dopo aver eseguito questo comando, si potrà assegnare a qualsiasi blocco di testo la font-family
chiamata “Tangerine”, che verrà scaricata dagli indirizzi indicati e messa nella cache del browser.
Da notare che questa direttiva importa il font assegnandolo alla sola variante non-grassetto noncorsivo di questa famiglia.
L’uso delle web fonts è tuttora in fase di crescita e definizione, quindi per ulteriori informazioni si rimanda, ad
esempio, al sito Google Web Fonts: http://www.google.com/webfonts.
Paragrafi
•
•
proprietà: line-height
altezza delle righe, cioè la distanza tra la base dei caratteri di due righe consecutive. E'
diverso dal concetto di interlinea, che rappresenta lo spazio tra due righe, ma può essere
utilizzato per ottenere gli stessi effetti.
valori: misura | normal
proprietà: text-align
allineamento orizzontale paragrafi
valori: left | right | center | justify
(sinistra | centro | destra | giustificato) Nel caso dell'allineamento justify, gli spazi tra
Revisione 05/11
Pagina 16/25
•
•
•
•
I Fogli di Stile: Liste
parole vengono espansi per fare in modo che tutte le righe abbiano la medesima larghezza.
E' un effetto molto professionale, tipico dei word processors, ma alcuni browser non lo
supportano.
proprietà: vertical-align
allineamento verticale paragrafi all'interno delle celle di una tabella: non funziona per il
testo in generale!
valori: top | middle | bottom
(in alto | al centro | in basso)
elementi applicabili: celle di tabelle
proprietà: text-indent
rientro sinistro paragrafi
valori: misura
proprietà: word-spacing
spazio tra parole
proprietà: letter-spacing
spazio tra lettere
Liste
Tramite CSS è possibile creare liste puntate e numerate di tipo semplice, con immagini standard o
numeri (arabi, romani, ecc.) come punti elenco, usando l’attributo list-style-type. In generale, gli
attributi lista di CSS si applicano agli elementi lista già definiti da HTML (ul, ol, li) per modificarne il
comportamento di default. Tuttavia, gli attributi di tipo list possono essere applicati a tutti gli
elementi per la cui proprietà display sia impostata al valore list-item.
La funzionalità più avanzata, resa disponibile tramite l’attributo list-style-image, prevede l’uso di
immagini come punti elenco. In questo caso, l’attributo list-style-type viene ignorato. Quando si
creano liste di tipo personalizzato con immagini, bisogna sempre regolare i rientri, il padding e i
margini degli elementi in modo da ottenere l’effetto visivo desiderato. Infatti, a seconda del
browser, il margine e/o il padding dell’elemento list-item determinano il rientro dell’elemento
stesso e/o lo spazio tra il punto elenco e il testo associato.
Proprietà CSS per le liste
•
•
proprietà: list-style-type
tipi standard di punto elenco attribuibili ad elementi list-item
valori:disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman
| lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upperalpha | none
proprietà: list-style-image
punto elenco immagine: permette di sostituire il punto (selezionato con list-style-type) con
un'immagine arbitraria
valori: uri |none
Revisione 05/11
Pagina 17/25
•
I Fogli di Stile: Box Model
come nel caso della proprietà background-image, si utilizza il costrutto uri('...') per caricare
l'immagine da usare come punto elenco
proprietà: list-style-position
posizione del punto elenco rispetto al testo
valori:inside | outside
determina se il testo a capo debba iniziare sotto (inside) o a fianco (outside) del punto
elenco
Si vedano gli esempi delle proprietà lista nei CSS presenti tra il materiale online del corso.
Box Model
Il box model del CSS controlla il dimensionamento e il posizionamento di tutti gli elementi della
pagina HTML, manipolandoli tramite il loro bounding box, cioè il rettangolo che li racchiude. Per
questo, in questa sezione parleremo spesso di box riferendoci al contorno di un generico
elemento.
Controllare la Generazione dei Box
Tramite la proprietà CSS display è possibile specificare/modificare il comportamento del box
associato a un elemento, rispetto al suo contesto. I valori ammessi sono inline, block, list-item e
none.
•
•
•
•
block genera un box di tipo blocco (che occupa uno spazio orizzontale e verticale separato
dagli altri box, come p o div)
inline genera un box inline, che entra a far parte del flusso esterno senza interromperlo
(come b o span)
list-item visualizza il box come un elemento di lista (come li)
none disattiva la generazione del box, rimuovendo l’elemento associato dal documento a
tutti gli effetti.
E' quindi possibile, ad esempio, trasformare i link (elemento a), che di default sono di tipo inline
(come da specifica HTML), in un elemento di tipo blocco specificando la clausola CSS
a {display: block}
La proprietà display è usata molto spesso per rendere visibili selettivamente delle parti della
pagina, ad esempio elementi attivati da uno script. Per rimuovere completamente un elemento
dal flusso della pagina è infatti sufficiente impostare la sua proprietà display su none, mentre per
farlo riapparire è necessario reimpostare il suo display sul valore appropriato (inline, block, listitem) per l'elemento stesso.
Si vedano gli esempi relativi alla gestione della visibilità con i CSS presenti tra il materiale online del corso.
Un esempio avanzato di menu simile a quello presente negli esempi precedenti è mostrato nell'esempio di menu
con popup multilivello realizzato tramite CSS, presente tra il materiale online del corso. Parte di quest'ultimo
esempio sarà però chiara più avanti, dopo aver studiato il posizionamento degli elementi.
Revisione 05/11
Pagina 18/25
I Fogli di Stile: Box Model
Mostrare e Nascondere Elementi
Dopo aver generato il box relativo a un elemento, si può specificare se il contenuto del box debba
essere o meno visualizzato tramite la proprietà visibility, i cui valori possono essere visible o
hidden.
•
•
visible (default) mostra l’elemento.
hidden nasconde l’elemento.
Impostando la proprietà ad hidden, il box dell’elemento non viene rimosso dal flusso del
documento, per cui il suo ingombro viene comunque considerato nel calcolo del layout. In pratica
sulla pagina apparirà uno "spazio vuoto" al posto dell'elemento. Se si vuole rimuovere totalmente
un elemento dalla pagina, quindi, è necessario usare la proprietà display.
Gestione del Contenuto
Tutti gli elementi contenitori, cioè quelli che possono contenere testo e altri elementi HTML,
solitamente adattano le proprie dimensioni in base all'ampiezza del loro contenuto. Spesso, però,
questi elementi possono avere una dimensione fissa o massima. In questi casi, se il contenuto è
più grande del contenitore, si può specificare come trattare la parte che ne fuoriesce tramite la
proprietà overflow, che può avere uno dei valori visible, hidden, scroll o auto.
•
•
•
•
visible (default) lascia che il contenuto extra sia renderizzato anche fuori dal contenitore,
sovrapponendosi ai suoi bordi e al contenuto circostante.
hidden nasconde la parte di contenuto che fuoriesce dal contenitore, effettuando il
cosiddetto clipping. Si tratta di un effetto utile, ad esempio, per simulare lo scorrimento di
un contenuto all'interno di una finestra.
scroll fa apparire delle barre di scorrimento all’interno del contenitore, in modo che il
contenuto possa essere gestito tramite scrolling. Le barre appariranno in ogni caso, anche
se il contenuto non fuoriesce.
auto fa apparire delle barre di scorrimento all’interno del contenitore, in modo che il
contenuto possa essere gestito tramite scrolling, solo se questo fuoriesce dal contenitore.
In questo modo, è possibile dotare ogni elemento della logica di scorrimento tipica della
finestra del browser.
Si vedano gli esempi relativi alla gestione dell'overflow con i CSS presenti tra il materiale online del corso.
Margini e Spazi
Il margine è lo spazio vuoto lasciato tra il bordo del box di un oggetto e quello degli oggetti
circostanti; determina, cioè, la distanza tra il bordo esterno del box (anche se il bordo non è
visibile) e quello dei box circostanti. Si specifica tramite una misura impostata sulla proprietà
margin (che è una shorthand per le quattro proprietà margin-right, margin-left, margin-top,
margin-bottom).
Il padding, invece, è lo spazio vuoto lasciato tra il bordo del box di un oggetto e il contenuto del
box stesso. Si specifica tramite una misura impostata sulla proprietà padding (che è una shorthand
per le quattro proprietà padding-top, padding-right, padding-bottom, padding-left).
Revisione 05/11
Pagina 19/25
I Fogli di Stile: Posizionamento
In molti casi, se il bordo dell'oggetto non è visibile, margin e padding producono lo stesso effetto
visivo, ma bisogna sempre usare l’attributo logicamente più adatto allo scopo.
#e {border: 1px solid black; margin-top: 3mm; padding: 5px}
/* imposta un margine di 3 millimetri prima dell'elemento con ID e,
inserisce un padding di 5 pixel tra il suo bordo e il contenuto */
Dimensionamento
La dimensione di ogni elemento può essere impostata in vari modi, sovrascrivendo
completamente o vincolandoparzialmente la dimensione naturale calcolata dal browser
(solitamente adatta al contenuto).
Nel caso si voglia fissare la dimensione di un oggetto, è possibile specificarla tramite le proprietà
width e height, che accettano come valori misure assolute o percentuali, che in quest'ultimo caso
si intendono relative alle corrispondenti dimensioni del contenitore. Il valore di default auto per
entrambe queste proprietà corrisponde alla dimensione naturale, calcolata attraverso le altre
proprietà dell’elemento.
In alternativa, è possibile specificare le dimensioni minime o massime che il browser può far
assumere a un contenitore tramite le proprietà max-height, max-width, min-height e min-width,
anch’esse espresse come misure assolute o percentuali. In questo modo si fornisce una certa
libertà al browser di adattare l'oggetto al suo contenuto e al contesto, ma si forniscono vincoli di
massima, ad esempio per impedire che un oggetto diventi troppo piccolo in seguito al
ridimensionamento della finestra del browser. Tuttavia queste proprietà non sono supportate da
alcuni browser.
In generale, le proprietà di dimensionamento hanno valore solo per elementi di tipo blocco.
Oggetti con dimensione minima o fissata possono determinare l'apparizione delle barre di
scorrimento nel contenitore
#e {min-width: 100px; max-width: 250px}
Posizionamento
Il posizionamento degli elementi è la chiave per la realizzazione di layout complessi, in cui le aree
funzionali delle pagine web sono disposte con precisione in base allo spazio messo a disposizione
dal browser. Gli elementi possono essere posizionati in quattro modi diversi, specificabili con
l’attributo CSS position: static, relative, absolute e fixed. Le ultime quattro modalità si utilizzando
di solito in combinazione con le proprietà left, right, top, e bottom, che accettano come valori
misure utilizzate per determinare l'effettivo posizionamento degli elementi.
Gli elementi posizionati in maniera absolute o fixed si dicono rimossi dal flusso del testo. La loro
posizione non dipende più dagli elementi che li circondano, anche se, nel caso absolute,
continuano a scorrere insieme al resto della pagina.
Gli elementi posizionati, infine, possono in generale anche sovrapporsi ad altri elementi, in
quanto la loro posizione non influenza più il posizionamento degli elementi che li circondano
(posizionato i no). In questo caso, è utile determinare quali elementi siano in primo piano e quali
in secondo piano, cioè quali elementi possano "nasconderne" altri. Questo è possibile utilizzando
Revisione 05/11
Pagina 20/25
I Fogli di Stile: Posizionamento
la proprietà z-index, il cui valore determina la posizione dell'elemento sull'asse Z. Maggiore è il
valore dello z-index, più in alto (in primo piano) si troverà l'elemento.
Vediamo in dettaglio come funzionano i vari sistemi si posizionamento.
Posizionamento statico (static)
L’oggetto viene posto nella sua posizione naturale, data dal flusso del testo (default). Tutti gli
elementi HTML hanno posizionamento static, a meno che la loro proprietà position venga
impostata tramite CSS.
Posizionamento relativo (relative)
L’oggetto viene posizionato alle coordinate impostate tramite gli attributi left, right, top e bottom
e relative alla sua posizione naturale. In pratica, gli attributi left, right, top e bottom vengono
interpretati come offset rispetto alla posizione che l'elemento avrebbe in modalità static. Ad
esempio, il codice
{position: relative; left: -10px}
sposta l'elemento a cui è applicato di 10 pixel a sinistra rispetto alla sua posizione naturale. In
generale, comunque, il posizionamento relativo è poco usato. E' molto comune invece attivare il
posizionamento relativo senza impostare le proprietà left, right, top, bottom (che sono quindi
implicitamente poste a zero). Questo fa sì che l'elemento resti posizionato nella sua locazione
naturale (quella data dal metodo static), ma lo rende una potenziale origine per il posizionamento
del suo contenuto, come spiegato di seguito.
Si vedano i relativi esempi di posizionamento presenti tra il materiale online del corso.
Posizionamento assoluto (absolute)
e relative all’angolo superiore sinistro del suo più diretto contenitore con posizionamento non
statico. In questo caso, quindi, i valori di left, right, top e bottom sono coordinate assolute,
misurate rispetto all'origine data dall'angolo superiore sinistro di un altro elemento. Questo
elemento "di riferimento" viene scelto tra i contenitori dell'oggetto posizionato, in ordine
gerarchico (prima il contenitore diretto, poi il contenitore del contenitore, ecc. fino ad arrivare al
body del documento). Il criterio di scelta è semplice: viene selezionato il primo contenitore che
abbia una proprietà position impostata a un valore diverso da static. Come detto sopra, questo
non implica che il contenitore debba essere a sua volta posizionato in una locazione diversa da
quella naturale: infatti, impostare position su relative senza modificare gli attributi left, right, top e
bottom corrisponde logicamente a conservare il posizionamento static, ma rende l'oggetto un
potenziale riferimento per il posizionamento (assoluto) di altri elementi. E' quindi molto comune
trovare elementi posizionati in maniera assoluta rispetto al documento (o meglio al suo body, che
è sempre un origine valida) o a un suo contenitore con posizionamento relativo.
Revisione 05/11
Pagina 21/25
I Fogli di Stile: Floats
Posizionamento fisso (fixed)
e relative all’angolo superiore sinistro del viewport (di solito la finestra del browser), e non al
documento. Questo significa che l'oggetto non scorrerà con il contenuto della finestra, ma rimarrà
fisso rispetto all'area di visualizzazione del browser. Nei casi di posizionamento relativo o
assoluto, invece, l'oggetto rimane ancorato a un riferimento presente nel documento, quindi
scorre insieme al documento stesso.
Questo effetto può essere utile per costruire elementi del layout (come menu o avvisi) che siano
sempre visibili all'utente. Prima dell'avvento del posizionamento fisso, questo stesso effetto si
otteneva usando javascript per alterare la posizione di un elemento in base allo scorrimento della
finestra, in modo che apparisse come fisso. In alcuni casi questa tecnica è ancora utile, in quanto il
posizionamento fisso non è ancora supportato da tutti i browser.
Proprietà di Posizionamento
Riassumiamo le proprietà coinvolte nel posizionamento degli elementi.
•
•
•
proprietà: position
Determina il tipo di posizionamento dell’elelento
valori: static | relative | absolute | fixed
proprietà: top, left, right, bottom
Determina la posizione dell’elemento, in base alle regole definite dal valore della proprietà
position
valori: misura
proprietà: z-index
Determina la posizione dell’elemento sull’asse Z. Valori maggiori spostano l’elemento verso
l’utente.
valori: numero | auto | inherit
Floats
Un altro modo di disporre elementi nella pagina web in maniera non statica è quello dei floats.
Tramite la tecnica di floating è possibile rimuovere degli elementi dal flusso del testo e posizionarli
in maniera dinamica sul bordo sinistro o destro del loro contenitore.
Gli elementi posizionati tramite floating hanno delle caratteristiche uniche che li rendono
"intelligenti": si distribuiscono sempre al meglio in relazione allo spazio a loro disposizione, si
impilano e vanno a capo dinamicamente come fossero elementi di testo, e il testo che li circonda
scorre intorno a loro margine in maniera automatica. Questo tipo di effetto è spesso usato per
creare menu, layout a colonne, ecc. Tuttavia, i l'algoritmo di disposizione dei float è molto
complesso, e differisce tra i vari browser, anche nelle versioni più attuali. Per questo alcuni effetti
ottenuti tramite floats potrebbero non essere pienamente crossbrowser. Usate quindi questa
proprietà con cautela!
Revisione 05/11
Pagina 22/25
I Fogli di Stile: Contenuto Dinamico
Per rendere floating un blocco si imposta la sua proprietà float su left o right. In questo modo il
blocco assumerà l'ampiezza minima richiesta dal suo contenuto (è spesso opportuno dichiarare
una dimensione minima o fissa per i float) e si disporrà sul margine indicato del suo contenitore.
Poiché l'oggetto è rimosso dal flusso della pagina, potrà anche fuoriuscire dal contenitore e
sovrapporsi agli oggetti circostanti. Tuttavia, il testo in tutti gli oggetti a cui il blocco float si
sovrappone non verrà coperto dal blocco, ma scorrerà intorno ad esso. Questo rende i float molto
diversi dai normali blocchi posizionati.
Per evitare che un blocco float appaia oltre una certa posizione verticale, o si sovrapponga a un
segmento della pagina, si può dotare qualsiasi elemento della proprietà clear. Questa proprietà
può avere valore left, right o both, e istruisce CSS a porre l'elemento indicato, e tutti quelli che lo
seguono, dopo la fine di tutti i blocchi float, rispettivamente sinistri, destri o entrambi. Questo può
ovviamente implicare l'inserimento di spazio bianco sulla pagina.
Infine, se si inseriscono nella stessa area della pagina più blocchi float sullo stesso margine, questi
si comporteranno come caratteri di un testo: si affiancheranno, in ordine di dichiarazione,
formando una riga, se lo spazio orizzontale del browser lo permette, altrimenti alcuni float
saranno "mandati a capo" a formare una riga al di sotto della prima. Questo effetto è molto utile,
ad esempio per creare una serie di riquadri che si ridispongono automaticamente per occupare al
meglio l'area a loro disposizione. Ad esempio, provate il seguente codice CSS e HTML, variando la
dimensione della finestra:
.box
<div
<div
<div
{min-width: 200px; float: left; border: 1px dashed red; }
class="box"> Primo riquadro </div>
class="box"> Secondo riquadro </div>
class="box"> Terzo riquadro </div>
Altri esempi potete trovarli sul file degli esempi d'uso dei blocchi float presente tra il materiale online del corso.
E' utile visualizzare questi esempi su più browser per identificare le differenze di rendering.
Proprietà per i floats
•
•
proprietà: float
Imposta l’oggetto come floating sul lato sinistro o destro del contenitore. Il valore none
disabilita il floating.
valori: left | right | none
proprietà: clear
La proprietà clear impostata su un elemento fa sì che tutti i floats del tipo specificato
(sinistri, destri o entrambi) vengano disposti prima dell’elemento stesso.In altre parole, il
contenuto dei float indicati dalla proprietà clear non potrà scorrere verticalmente oltre
l'elemento che ha questa proprietà impostata.
valori: left | right | both
Contenuto Dinamico
Anche se è una caratteristica poco nota, i CSS permettono anche di inserire particolari tipi di
contenuto (testo) nel documento, oltre a variarne l'aspetto puramente visuale.
La generazione automatica di contenuto si realizza in due fasi: prima si definisce e/o si aggiorna il
testo da inserire, tramite le proprietà quotes, counter-reset e counter-increment, poi si inserisce il
testo vero e proprio usando la proprietà content.
Revisione 05/11
Pagina 23/25
I Fogli di Stile: Altre Proprietà
L'attributo quotes permette di specificare le virgolette (aperta e chiusa) che dovranno circondare
l'elemento, se richiesto. E’ possibile specificare più coppie, una per ciascun livello di nidificazione
delle virgolette stesse. I valori ammessi sono none (nessuna virgoletta) o una o più coppie di
stringhe, ad esempio
#elemento {quotes: "<" ">" "<<" ">>"}
Il comportamento speciale dell'elemento q di HTML, ad esempio, è realizzato tramite la proprietà
quotes. Tuttavia, non tutti i browser supportano questa proprietà.
In CSS è inoltre possibile programmare contatori sequenziali, utilizzabili ad esempio per
numerare titoli o liste. I contatori hanno un nome proprio, e vengono controllati tramite proprietà
poste in opportune regole. La proprietà counter-reset permette di impostare a un certo valore o
azzerare uno o più contatori. La sintassi della proprietà è counter-reset (stringa [intero])+, dove le
stringhe sono nomi di contatori e gli interi, opzionali (default zero), il numero a cui impostarli. Ad
esempio, il seguente codice crea un contatore esempi che viene resettato dopo l'inizio di ogni
sezione di primo livello (h1):
h1 {counter-reset: esempi}
La proprietà counter-increment, invece, permette di incrementare uno o più contatori di un
valore dato (default 1), ed ha come sintassi counter-increment (stringa [intero])+. L'esempio che
segue si aggiunge a quello precedente: il contatore esempi viene incrementato in ogni elemento di
ogni lista ordinata di classe esempio.
ol.esempio li {counter-increment: esempi}
Infine, una volta definito il contenuto, lo si può inserire prima o dopo un elemento (non è
possibile, cioè, intervenire sul contenuto dell'elemento stesso), A questo scopo, si utilizza la
proprietà content, che è applicabile solo agli pseudo elementi :before e :after, e specifica il testo
che andrà inserito rispettivamente prima o dopo l'elemento a cui è applicata. La sintassi della
proprietà è content: none | ("stringa" | counter(C,S) | open-quote | close-quote)+
I valori di open-quote e close-quote generano in output le stringhe impostate dall’attributo
quotes sullo stesso elemento. C può essere il nome di un qualunque contatore visibile
dall’elemento, mentre S (opzionale) è uno dei valori definiti per la proprietà list-style-type, e
determina il modo in cui il numero sarà formattato. E' possibile anche inserire una stringa costante
arbitraria, o una sequenza di uno o più dei suddetti elementi. Ad esempio, a completamento dei
due frammenti proposti soopra, il codice CSS che segue fa in modo che le liste ordinate di classe
esempio abbiano una numerazione sequenziale che non ricomincia in ogni lista, ma si riavvia solo
all'inizio di ogni sezione di primo livello.
ol.esempio {list-style: none}
ol.esempio li:before {content: counter(esempi,decimal) ". "}
Si vedano anche gli esempi nel file delle altre proprietà CSS presenti tra il materiale online del corso.
Altre Proprietà
Elenchiamo qui altre proprietà CSS che possono essere utili in nelle applicazioni web più comini.
•
proprietà: cursor
Imposta la forma del mouse quando è sopra l’elemento.
Revisione 05/11
Pagina 24/25
I Fogli di Stile: Altre Proprietà
valori: [uri, ]* (auto | crosshair | default | pointer | move | e-resize| ne-resize | nw-resize
| n-resize | se-resize | sw-resize |s-resize | w-resize | text | wait | help | progress)
I nomi rappresentano i più comuni tipi standard di cursore usati nei sistemi operativi. La
lista di uri, opzionale, indica una o più risorse (immagini) esterne da usare come cursore. Il
browser utilizzerà la prima di cui riconosce il formato. In ogni caso, è necessario fornire
anche uno dei cursori standard, come unico valore o come ultima scelta nella lista.
Si vedano anche gli esempi nel file delle altre proprietà CSS presenti tra il materiale online del corso.
This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported
License. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/ or send a
letter to Creative Commons, 444 Castro Street, Suite 900, Mountain View, California, 94041, USA.
Revisione 05/11
Pagina 25/25

I Fogli di Stile - Università degli Studi dell`Aquila

Transcript

Documenti analoghi

Lezione 1 (stampa)

FOGLI DI STILE (CSS: Cascading Style Sheets )

THEDARKROOM FIRENZE

Caso pillola Yasmin: «La sentenza del Tribunale federale dà

Corso Online Web Designer

qualcosa di basilare sui fogli di stile

Materiali utili alle attività di Arte e Immagine Classi Prime ( Media )

Istruzioni d`uso per i Test on-line

informatica base Web content editor – primo livello diurno/serale