Lezioni di Informatica
- Perchè occorre lo stile?
- Gli elementi e la sintassi dello stile
- Il box-model
- Costruire un box-model e una pagina modello
Perchè occorre lo stile?
HTML con i suoi tag e relativi attributi possiede un suo stile standard che offre purtroppo poche personalizzazioni.
Un sito web deve avere uniformità di colori, di font e dimensioni dei caratteri e di struttura.
A partire dalla fine degli anni '90 si è pensato di ridurre al minimo gli attributi e i tag HTML e di dare uniformità di stile a tutte le pagine di un sito.
Un problema enorme può essere rappresentato con il seguente esempio:
Immaginiamo di aver dato a tutte le tabelle delle 100 pagine del nostro sito il colore di sfondo giallo utilizzando per tutte le tabelle di tutte la pagine del sito l'attributo bgcolor="yellow" nel tag table.
Un "brutto" giorno ci viene richiesto di dare a tutte le tabelle il colore di sfondo verde!
Il paziente programmatore dovrebbe, a questo punto, modificare tutti gli attributi bgcolor di tutte le tabelle delle 100 pagine del sito. Un lavoro incredibilmente faticoso!
Gli elementi e la sintassi dello stile
Gli elementi sono gli oggetti di un documento a cui si vuole assegnare uno stile. Sono di tre tipi:tag
Per descrivere il tag si procede indicando il nome del tag (senza parentesi angolari) e, tra parentesi graffe, si assegnano i valori alle proprietà che vogliamo modificare.ESEMPIO:
Se voglio dare a tutte le colonne di intestazione delle tabelle il colore bianco su sfondo nero e voglio il testo allineato a sinistra devo scrivere:
th
{
color: white;
background-color: black;
text-align: left;
}
Classi
Le classi sono dei tipi di elementi inventati da noi; questi tipi personalizzati possono essere applicati a tutti i tag oppure si può limitare il loro uso solo a tag specifici. Per descrivere una si scrive un nome a piacere preceduto dal puntino e, tra parentesi graffe, si assegnano i valori alle proprietà che vogliamo modificare.I tag che vorranno utilizzare la classe da noi definita dovranno indicare il nome tramite l'attributo class.
ESEMPIO:
Se voglio creare una classe a cui dare il nome evidenza con il colore rosso su sfondo giallo e una dimensione notevole del carattere (es 20 punti) devo scrivere:
.evidenza
{
color: red;
background-color: yellow;
font-size: 20pt;
}
Nelle pagine html potremmo utilizzare la classe .evidenza in questo modo:
... <p class="evidenza">paragrafo con caratteri molto evidenziati</p> ... ... <td class="evidenza">colonna di tabella con caratteri molto evidenziati</td> ...
Sezioni
Mentre le classi si possono utilizzare più volte nella stessa pagina e anche per più di un tag, le sezioni definiscono univocamente delle "zone" del documento e aiutano il progettista nella costruzione del box-model e nella relativa manutenzione.Si descrivono con un nome a piacere preceduto dal simbolo # e, tra parentesi graffe, si assegnano i valori alle proprietà che vogliamo modificare.
Tra le proprietà più importanti troviamo: position, top, left, width, height. Queste infatti servono per il posizionamento della singola sezione nell'ambito del modello grafico.
Per utilizzare la pseudo-classe nelle pagine HTML si usa il tag div e si indica il nome della pseudo-classe tramite l'attributo id (identifier = identificatore)
ESEMPIO:
Se si vuole definire una sezione di nome piede che si vuole collocata in fondo alla pagina potremmo scrivere:
#piede
{
position: absolute;
top: 85%;
left: 5%;
width: 90%;
height: 10%;
background-color: gray;
}
Nella pagina HTML la sezione sarà utilizzata nel seguente modo:
... <div id="piede"> ... </div>
Il box-model
Il modello a scatole è oggi molto più facile da realizzare e da gestire con i fogli di stile a cascata (.css = cascade style sheet) e l'utilizzo del tag div con attributo id.
Negli anni '90 si rimediava con le tabelle ma il lavoro risultava molto lungo e dispendioso.
Costruire un box-model e una pagina modello
Nello schema del paragrafo precedente il box principale lo abbiamo chiamato cornice (1 livello).
Esso raggruppa i box alto e basso (2 livello).
Il box alto contiene i box titolo e logo (3 livello).
Il box basso contiene i box menu1, menu2, e contenuto (3 livello)
Per realizzare concretamente lo schema si procede cosė:
- si crea un foglio di stile salvandolo con un nome qualsiasi e con l'estensione .css (ad esempio stile.css)
-
si inseriscono nel foglio di stile le seguenti istruzioni e si salva il file:
#cornice { position:absolute; top:5%; left:5%; width:90%; height:90%; background-color:pink; border-style:solid; border-width:1px; } #alto { position: absolute; top:1%; left:5%; width:90%; height:20%; background-color:yellow; } #logo { position:absolute; top:5%; left:80%; width:15%; height:90%; text-align:center; font-size:20pt; border-style:dashed; border-width:2px; background-color:transparent; } #titolo { position: absolute; top:25%; left:25%; width:50%; height:50%; text-align:center; font-size:20pt; background-color:white; } #basso { position: absolute; top:22%; left:5%; width:90%; height:76%; background-color:white; } #menu1 { position:absolute; top:5%; left:2%; width:25%; height:80%; background-color:#8A8AE7; } #menu2 { position:absolute; top:5%; left:28%; width:60%; height:10%; background-color:#EEFF88; } #contenuto { position:absolute; top:18%; left:28%; width:60%; height:66%; border-style:solid; border-width:1pt; background-color:#EEFFEE; overflow:auto; } -
si crea la pagina index.htm con il seguente codice HTML e poi si salva:
<html> <head> <title></title> <link rel="stylesheet" type="text/css" href="stile.css" /> </head> <body> <div id="cornice"> <div id="alto"> <div id="logo"> </div> <div id="titolo"> </div> </div> <div id="basso"> <div id="menu1"> </div> <div id="menu2"> </div> <div id="contenuto"> </div> </div> </div> </body> </html>