Lezioni di Informatica
"Una volta che abbiate conosciuto il volo, camminerete sulla terra guardando il cielo" [ L. da Vinci ]
Informazioni sul Sito
N. visitatori  000059263  dal 21/01/2007  |   e-mail: ksoft64camera@gmail.com   
Cerca nel sito
Documenti collegati alla pagina
  Stile e css
  Manuale sintetico CSS
Stile e css

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!

Torna al menu |  Vai giù

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;
}
Torna al paragrafo

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>
...
Torna al paragrafo

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>
Torna al paragrafo

Torna al menu |  Vai giù |  Vai su

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.

Torna al menu |  Vai giù |  Vai su

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>
    

Torna al menu |  Vai su