“fogli di stile”.

Transcript

“fogli di stile”.

Sommario CSS
1 Cascading Style Sheets, meglio noti come “CSS” o “fogli di stile”.................................................................. 1
1.1 Fogli di stile "in linea" .............................................................................................................................. 2
1.2 Fogli di stile "interni" ............................................................................................................................... 2
1.3 Fogli di stile "esterni"............................................................................................................................... 2
1.4 Che tipo di foglio di stile scegliere? ......................................................................................................... 3
1.5 Selettore di classe (class selector) ............................................................................................................ 4
1.6 Selettore di ID (id selector) ....................................................................................................................... 4
2 Sfondi .............................................................................................................................................................. 5
2.1 Immagine di sfondo ............................................................................................................................. 6
2.2. Immagine di sfondo - Attachment ...................................................................................................... 7
2.3 Immagine di sfondo - Repeat .............................................................................................................. 8
3 LA FORMATTAZIONE DEI LINK ...................................................................................................................... 10
3.1 PERCHÉ MODIFICARE L'ASPETTO DEI LINK? .......................................................................................... 11
3.2 MENU GRAFICI CON ROLLOVER ............................................................................................................. 12
3.3 IL MENU COME LISTA ............................................................................................................................ 12
3.4 ETICHETTE - MENU ORIZZONTALI .......................................................................................................... 14
1 Cascading Style Sheets, meglio noti come “CSS” o “fogli di stile”.
Il termine "cascata" (cascading) indica una delle caratteristiche principali dei CSS, infatti questi possono essere inseriti
più di uno nello stesso documento seguendo regole gerarchiche, quindi ci sono CSS più importanti e altri meno.
I CSS sono supportati dai maggiori browser..
I fogli di stile possono essere inclusi nelle pagine HTML in 3 modi differenti:
1. in linea;
2. internamente;
3. esternamente.
L'inserimento "in linea" avviene direttamente all'interno di un prederminato tag HTML nel corpo del
documento;
l'inserimento "interno" avviene nell'intestazione del documento tra i tag <head> e </head>;
l'inserimento "esterno" viene effettuato da un file apposito con estensione ".css" che viene richiamato
con un semplice link all'interno dell'intestazione di ciascuna pagina.
1.1 Fogli di stile "in linea"
<html>
<head>
<title>Titolo del documento</title>
</head>
<body>
<p style="gli elementi di stile vanno inseriti qui"></p>
</body>
</html>
1.2 Fogli di stile "interni"
<html>
<head>
<style type="text/css">gli elementi di stile vanno inseriti qui</style>
</head>
<body>
<p>I contenuti della pagina vanno qui</p>
</body>
</html>
1.3 Fogli di stile "esterni"
<html>
<head>
<LINK href="nomefile.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
Come si vede in quest'ultimo esempio il documento punta ad un file con estensione ".css" esterno.
All'interno di questo file, preparato con il BloccoNote di Windows© o con un qualunque altro editor di
testo, vi saranno tutti gli elementi di stile. Questo file potrà avere un qualsiasi nome, ma sempre
estensione ".css". Ovviamente il nome vero del file dovrà essere sostituito nell'esempio posto sopra a
"nomefile.css".
Nota: se il file esterno non fosse nella stessa cartella che contiene il documento HTML che lo richiama
occorrerà modificare il percorso nella stringa. Se, ad esempio, si trovasse in una sottocartella chiamata
stili il richiamo assumerebbe questa forma:
<LINK href="stili/nomefile.css" rel="stylesheet" type="text/css">.
Se si trovasse in una cartella superiore chiamata sempre stili il richiamo assumerebbe questa forma:
<LINK href="../stili/nomefile.css" rel="stylesheet" type="text/css">.
Se si trovasse addirittura su un altro spazio web assumerebbe questa forma:
<LINK href="http://www.nomedominio.com/nomefile.css"
rel="stylesheet" type="text/css">.
L'elemento <LINK> presenta una serie di attributi di cui è importante spiegare significato e funzione:
1. rel: descrive il tipo di relazione tra il documento e il file collegato. E' obbligatorio. Per i CSS due
sono i valori possibili: stylesheet e alternate stylesheet. Approfondimenti nella lezione 5, "Fogli di
stile alternativi".
2. href: serve a definire l'URL assoluto o relativo del foglio di stile. E' obbligatorio.
3. type: identifica il tipo di dati da collegare. Per i CSS l'unico valore possibile è text/css. L'attributo è
obbligatorio.
4. media: con questo attributo si identifica il supporto (schermo, stampa, etc) cui applicare un
particolare foglio di stile. Attributo opzionale.
Possibili valori di Media
Value
Description
all
Default. Suitable for all devices
aural
Speech synthesizers
braille
Braille feedback devices
handheld
Handheld devices (small screen, limited bandwidth)
projection
Projectors
print
Print preview mode/printed pages
screen
Computer screens
tty
Teletypes and similar media using a fixed-pitch character grid
tv
Television type devices (low resolution, limited scroll ability)
1.4 Che tipo di foglio di stile scegliere?
Dipende dal tipo di sito, da quante pagine è formato, se le pagine devono avere tutte o gran parte di
esse lo stesso stile.



i fogli di stile "in linea" non sono molto pratici in quanto per ogni paragrafo interessato occorre
inserirli manualmente, operazione che su pagine complesse può diventare molto lunga e
ripetitiva;
i fogli di stile "interni" sono adatti a siti formati da poche pagine oppure a siti che, pur avendo
un certo numero di pagine, necessitano di stili differenti per ciascuna pagina o gruppo di
pagine;
i fogli di stile "esterni" sono adatti a siti di dimensioni medio grandi o grandi e che hanno
l'esigenza che tutte le pagine abbiano, in termini di stile, le medesime caratteristiche. Con un
foglio di stile "esterno" è infatti estremamente facile cambiare le caratteristiche di tutte le
pagine: se abbiamo un sito scritto tutto in "Arial 12" e vogliamo sostituire il carattere con un
"Verdana 10" basterà cambiare il riferimento al font nel foglio di stile e, in un colpo solo,
avremo modificato tutte le pagine !
1.5 Selettore di classe (class selector)
Serve quando si ha la necessità di associare ad uno stesso tag XHTML differenti stili.
Nei CSS i selettori class utilizzano “ . “ (il punto)
p.centrato {
text-align: center;
}
In questo caso il paragrafo di classe CENTRATO avrà il testo allineato al centro; per
richiamarlo nel foglio xhtml si inserirà :
<p class=”centrato”> sono il testo centrato </p>
Altro esempio:
.contenitore {
color: rgb(158,0,0);
border: 1px solid Red;
padding: 3px;
margin-top: 05em;
background: #f9f5de;
}
<p class=”contenitore”> sono un testo dentro un contenitore </p>
1.6 Selettore di ID (id selector)
I selettori di ID permettono di assegnare una regola CSS ad un unico elemento nella
pagina
XHTML che è specificato attraverso l' attributo ID. Comunemente sono utilizzati per
applicare
uno stile a BOX specifici. Nei CSS i selettori ID utilizzano “ # “ (il cancelletto)
CODICE CSS
#colonna-sx {
float: left;
width: 20%;
}
CODICE XHTML
<div id="colonna-sx">

</div>
Si può specificare un selettore ID nei seguenti modi:
#menu {
proprietà: valore;
proprietà: valore;
}
oppure
div#menu {
proprietà: valore;
proprietà: valore;
}
2 Sfondi
Il colore di sfondo predefinito di un documento HTML è il bianco, ma
naturalmente si può cambiare con molta facilità. Vediamo coma farlo con
un foglio di stile "interno":
<html>
<head>
<style type="text/css">body { background:#FFFF00; color:#000000 }
</style>
</head>
<body>
</body>
</html>
La stringa:
body { background:#FFFF00 } cambierà il colore di sfondo in giallo. Si
possono usare, al posto del formato esadecimale, anche i nomi dei colori in
lingua inglese. Ad esempio con la stringa body { background:yellow } si
otterrà lo stesso risultato, ma l'utilizzo del formato esadecimale consentirà
di adottare sfumature di colore altrimenti non ottenibili. Analogamente si
possono usare colori anche in formato rgb utilizzando la stringa body {
background:rgb(255,255,0) }
Nota 1: I colori espressi in formato esacimale devono essere preceduti dal
simbolo della celletta #
Nota 2: Come avrai notato, sono stati utilizzati due simboli, le parentesi
graffe, non presenti in una normale tastiera. Poiché sono simboli ricorrenti
nella creazione dei fogli di stile, occorre spiegare come ottenerli:


la parentesi graffa aperta { si ottiene tenendo premuti
contemporaneamente i tasti "maiuscolo (Shift)", "control (Ctrl)",
"alterna (Alt)", digitando la lettera è e rilasciando i tasti;
la parentesi graffa chiusa } si ottiene tenendo premuti
contemporaneamente i tasti "maiuscolo(Shift)", "control (Ctrl)",
"alterna (Alt)", digitando il simbolo + (attenzione quello a fianco
della lettera "è" e non quello del tastierino numerico!) e rilasciando
i tasti.
2.1 Immagine di sfondo
Ovviamente, al posto di un colore, potresti decidere di utilizzare
un'immagine di sfondo. Vediamo coma farlo con un foglio di stile
"interno":
<html>
<head>
<style type="text/css">body { background-image: url("sfondo.jpg") }
</style>
</head>
<body>
</body>
</html>
La stringa:
body { background-image: url("sfondo.jpg") userà l'immagine "sfondo.gif"
come background. Ovviamente il nome potrà essere anche diverso e potrai
usare anche un'immagine ".gif".
Nota: se l'immagine da utilizzare come sfondo non fosse nella stessa
cartella che contiene il documento HTML, occorrerà modificare il percorso
nella stringa. Se, ad esempio, si trovasse in una sottocartella chiamata img
la stringa assumerebbe questa forma:
body { background-image: url("img/sfondo.jpg")
Se si trovasse in una cartella superiore chiamata sempre img la stringa
assumerebbe questa forma:
body { background-image: url("../img/sfondo.jpg")
Se si trovasse addirittura su un altro spazio web assumerebbe questa forma:
body { background-image:
url("http://www.nomedominio.com/img/sfondo.jpg")
Abbiamo visto come inserire un'immagine di sfondo. Uno potrebbe
chiedersi il perché inserire uno sfondo con un foglio di stile, anziché con
un semplice comando HTML. Perché con un foglio di stile si possono
assegnare delle particolari caratteristiche alle immagini di sfondo,
impensabile con il solo HTML, o comunque di difficile attuazione.
Vediamo alcuni elementi nei particolari.
2.2. Immagine di sfondo - Attachment
Determina se lo sfondo deve rimanere fisso (default) oppure muoversi con
il testo.
Ha due possibili valori:


fixed
scroll
<html>
<head>
<style type="text/css">body
{ background-image: url("sfondo.jpg"); background-attachment: fixed }
</style>
</head>
<body>
</body>
</html>
La stringa:
background-image: url("sfondo.jpg"); background-attachment: fixed fa si
che l'immagine dello sfondo rimanga statica, mentre il contenuto della
pagina scorre.
<html>
<head>
{ background-image: url("sfondo.jpg"); background-attachment: scroll }
</style>
</head>
<body>
</body>
</html>
La stringa:
background-image: url("sfondo.jpg"); background-attachment: scroll fa si
che sia l'immagine dello sfondo che il contenuto della pagina scorrano
assieme.
2.3 Immagine di sfondo - Repeat
Determina come deve replicarsi l'immagine di sfondo.
Ha quattro possibili valori:




repeat-y
repeat-x
repeat
no-repeat
<html>
<head>
{ background-image: url("sfondo.jpg"); background-repeat: repeat-y }
</style>
</head>
<body>
</body>
</html>
La stringa:
background-image: url("sfondo.jpg"); background-repeat: repeat-y fa si
che lo sfondo si ripeta solo in una colonna verticale posta sul lato sinistro
del monitor lasciando vuoto il resto della pagina.
<html>
<head>
{ background-image: url("sfondo.jpg"); background-repeat: repeat-x }
</style>
</head>
<body>
</body>
</html>
La stringa:
background-image: url("sfondo.jpg"); background-repeat: repeat-x fa si
che lo sfondo si ripeta solo in una riga orizzontale posta sul lato superiore
del monitor lasciando vuoto il resto della pagina.
<html>
<head>
{ background-image: url("sfondo.jpg"); background-repeat: repeat }
</style>
</head>
<body>
</body>
</html>
La stringa:
background-image: url("sfondo.jpg"); background-repeat: repeat fa sì che
lo sfondo si ripeta su tutta la superficie della pagina. Formalmente equivale
ad omettere il valore.
<html>
<head>
{ background-image: url("sfondo.jpg"); background-repeat: no-repeat }
</style>
</head>
<body>
</body>
</html>
La stringa:
background-image: url("sfondo.jpg"); background-repeat: no-repeat fa sì
che lo sfondo non si ripeta. In pratica appare solo una tessera nell'angolo
superiore sinistro della pagina che è poi il punto di origine.
Nota: Gli argomenti si possono anche sommare tra loro, basta che non
siano in contrasto. Uno stile come quello riportato qui sotto genererà una
pagina
<html>
<head>
{ background-image: url("sfondo.jpg"); background-attachment: fixed;
background-repeat: repeat-y }
</style>
</head>
<body>
</body>
</html>
La stringa:
background-image: url("sfondo.jpg"); background-attachment: fixed;
background-repeat: repeat-y farà sì che lo sfondo si ripeta in una colonna
verticale posta sul lato sinistro del monitor e che non scorra con il resto del
contenuto della pagina.
Il codice CSS per il link (menu verticali e orizzontali)
3 LA FORMATTAZIONE DEI LINK
-I link sono quanto di più irritante si possa trovare nel trattamento tipografico sul Web,
soprattutto perché (tra le altre cose) cambiano il loro aspetto dinamicamente, cosa di cui la
tipografia tradizionale non si era mai dovuta preoccupare. Tim Berners-Lee pensò che i
link dovessero essere sottolineati; non fu una cattiva idea: la sottolineatura è rara in
tipografia, e quindi non c'era rischio di possibili associazioni logiche. Decise anche che
dovessero essere blu il che, ma se ne può discutere, non è stato forse altrettanto saggio.
Questo è uno dei rari casi in cui l'uso di due variabili (il colore e la sottolineatura) per
differenziare un elemento funziona veramente: una variabile (il colore) vi dice che
l'elemento è diverso dal testo circostante e vi da informazioni di stato (visitato, non
visitato); l'altra variabile indica che si tratta di un elemento dinamico.
Dal momento che per default il colore di un link cambia in funzione del suo stato, mentre la
sottolineatura non cambia, è quest'ultima che ha assunto il significato quasi universale di
link.
Per questa ragione, di norma, conviene evitare l'uso della sottolineatura per cose diverse
dai link.- (CSS hoepli)
3.1 PERCHÉ MODIFICARE L'ASPETTO DEI LINK?
Se si usano colori o immagini particolari per lo sfondo della pagina o di una tabella,
modificare i colori predefiniti risulta l'unico modo per visualizzare correttamente questi
fondamentali ele-menti. Grazie ai CSS è possibile assegnare colori, decorazioni del testo,
font o colori di sfondo diversi a seconda dello stato del link. Nel linguaggio dei CSS le
configurazioni possibili dei link sono cinque e rientrano in una speciale categoria, quella
delle pseudoclassi. Esse definiscono uno stile per un elemento al verificarsi di certe
condizioni. La sintassi è: "elemento:condizione".
Nelle specifiche dei CSS sì distinguono cinque possibili condizioni per i link:
1. a:link - Definisce un link non ancora visitato.
2. a:visited - Definisce un link visitato, ovvero presente nella memoria del browser.
3. a:hover - Definisce lo stato del link quando l'utente sposta il cursore su di esso
(compare la manina).
Tuttavia, seppur una minoranza, non tutti gli utenti utilizzano il mouse per selezionare i
link, ma utilizzano invece il tab della tastiera e dato che la classe 'hover' è legata allo
stumento con cui si interagisce (il mouse), con una navigazione da tastiera i link non
vengono differenziati come avverrebbe con il mouse.
La soluzione sarebbe utilizzare la pseudo classe 'focus'.
Che però non è supportata da Internet Explorer. Per ottenere lo stesso effetto anche
su IE si usa la pseudo classe 'active' .
4. a:focus - E’ importante questa condizione perché è abbinata al link puntato tramite la
tastiera con il tasto tab (tabindex) o l’accesskey.
5. a:active - Definisce lo stato del link mentre il tasto del mouse è premuto e non rilasciato
–o puntato da “focus” Inseriamo il seguente codice html nel menu verticale:
<a href="....">primo link</a>
<a href="...">secondo link</a>
<a href="...">terzo link</a>
Esempi:
Per modificare i colori nelle condizioni definiamo le pseudoclassi nei nel
nostro foglio stile:
/*---- LINK DA VISITARE ----*/
a.:link {
color: #006699;
text-decoration: none;
}
/*---- LINK VISITATO ----*/
a.:visited {
color: Lime;
}
/*---- LINK PUNTATO DAL MOUSE ----*/
a:hover {
color: White;
background-color: Blue;
}
/*---- LINK ATTIVO ----*/
a.:active {
color: Black;
background-color: Fuchsia;
}
/*---- LINK PUNTATO TRAMITE TASTIERA - TASTO TAB ----*/
a.:focus {
color: Black;
background-color: Aqua;
}
3.2 MENU GRAFICI CON ROLLOVER
Orientare l'utente nella navigazione
Prima di addentrarci nella realizzazione pratica dei menu, una piccola
introduzione sull'usabilità di un menu di navigazione. Ci sono alcuni principi di
cui si dovrebbe tenere sempre conto:
• l'utente dovrebbe poter capire facilmente dove può andare: è quindi
indispensabile avere una navigazione chiara e ben distinta dal resto della
pagina, sia a livello spaziale che di colore;
• è importante distinguere i link al passaggio del mouse: questo per far capire
all'utente che il cambiamento di stato del link, grazie al rollover, indica un
possibile cambiamento di pagina;
• l'utente dovrebbe poter capire immediatamente dove si trova: è quindi
importante distinguere la pagina/sezione corrente tramite il menu.
• Il menu deve essere accessibile anche se il foglio stile non viene caricato
(non vedenti)
3.3 IL MENU COME LISTA
Per rendere i menu verticali compatibili con tutti i browser il codice (X)HTML è
stato reso più semplice e chiaro possibile usando le liste. Il codice (X)HTML
di un menu sarà, ad esempio, il seguente:
<div id="menu">
<ul >
<li ><a href="....">primo link</a></li>
<li><a href="...">secondo link</a></li>
<li><a href="...">terzo link</a></li>
</ul>
</div>
Attraverso le regole CSS trasformeremo una semplice lista di link in un
semplice menu verticale. Per fare ciò elimineremo i marcatori di lista e la
sottolineatura, aggiungeremo un effetto roll-over realizzato con i soli
CSS senza l'uso del JavaScript e renderemo il link attivo non solo sul testo
ma su tutta l'area orizzontale associata al link.
Per realizzare tale trasformazione abbiamo adottato le
seguenti regole CSS.
div#menu {
color: #000;
}
div#menu ul {
list-style: none; /* elimino i punti elenco */
margin: 0px 0px 0px 0px; /* elimino i rientri delle liste */
padding: 0px 0px 0px 0px; /* elimino i rientri delle liste */
}
Innanzitutto impostiamo il contenitore del menu, e definiamo le caratteristiche
del nostro marcatore:
eliminiamo i marcatori della lista ed annulliamo l'indentazione tipica delle liste.
A questo punto il menu appare con una semplice lista di link, senza marcatori
né indentazione.
div#menu li{
margin: 0px;
padding: 0px 0px 1px 0px;
}
div#menu li a {
display: block; /* il link occupa tutto lo spazio orizzontale */
color: white;
background-color: #607e91;
text-decoration: none;/* elimino la sottolineatura, che si tratta di un link si
capisce dalla struttura */
height:2em; line-height:2em; /* altezza del link: height e line-height devono
avere il medesimo valore */
}
Attraverso la dichiarazione display:block, il link occuperà tutta l'area
orizzontale quindi non sarà cliccabile solo il testo del link ma tutta l'area della
riga occupata dal link. Si elimina poi la sottolineatura del link poiché sarà la
struttura stessa del menu ad indicare la presenza di collegamenti.
Attraveso il padding si discostano i link dal bordo del menu. Utilizzando le
proprietà height e line-height è possibile determinare l'altezza dell'area
occupata da ogni singolo link. Ciò si dimostra molto utile anche per un
piacevole "effetto collaterale" che annulla un fastidioso bug di Internet
Explorer. Su quest'ultimo browser, infatti, il link non occupa tutta l'area
(nonostante la dichiarazione display:block) se è contenuto in un elemento di
cui si è fissata la larghezza (come appunto l'elemento ul.menu1). Lo
svantaggio di specificare l'altezza (necessario per sopperire ad un bug di
Internet Explorer) consiste nel fatto che se il testo del link non entra tutto in
una sola riga si possono avere spiacevoli sovrapposizioni fra link adiacenti.
Infine si crea l'effetto roll-over, sfruttando la pseudo-classe a:hover
semplicemente giocando con i colori dello sfondo e del testo dei link.
3.4 ETICHETTE - MENU ORIZZONTALI
Prendiamo spunto dal menu verticale per realizzare il menu orizzontale.
Inseriamo il codice html:
<h1>testata</h1>
<div id="nav">
<ul >
<li><a href="index.html" >Home</a></li>
<li><a href="mappa.html" >Mappa</a></li>
<li><a href="aiuti.html" >Aiuti</a></li>
</ul>
</div>
Ed il codice css:
/* ==== NAVIGAZIONE ORIZZONTALE ===*/
div#nav{
color: #333366;
background-color: #efefef;
height: 20px;
}
div#nav ul {
list-style: none; /* elimino i punti elenco */
margin: 0px 0px 0px 0px; /* elimino i rientri delle liste */
padding: 0px 0px 0px 0px; /* elimino i rientri delle liste */
}
div#nav li {
display: inline; /* mette gli elementi della lista in linea */
margin: 0px 0px 0px 5px;
}
div#nav li a{
color: #333366;
background-color: #efefef;
}
div#nav li a:hover, div#nav li a:focus, div#nav li a:active {
color: #333366;
background-color: #fff;
border-bottom: 5px solid #A5A5A5;
}
L’unica cosa importante e diversa è la linea evidenziata.
Se vogliamo creare delle linguette della stessa lunghezza dobbiamo inserire i
seguenti comandi
In
div#nav li a
display: block;
width: 65px; (lunghezza linguetta)

“fogli di stile”.

Transcript

Documenti analoghi

Soluzioni capitolo 11 1

Fogli di stile css :: Gdesign.it

FOGLI DI STILE (CSS: Cascading Style Sheets )

Corso WordPress IASF - Pegotest

CSS: Cascading Style Sheet

Sfondo Sito - Assistenza Aruba.it

Aggiornamento di alcuni segni grafici Rigo a cascata Il rigo a

testo - labinf - Politecnico di Torino

DELUCIDAZIONI DVD49-50 in PDF

myCSS. Manuale di registrazione.