A Sbafo! Tutto per il web gratis e in italiano... |
 |
Aggiungi ai preferiti |
A Sbafo! Tutto per il web gratis e in italiano... |
|
Aggiungi ai preferiti |
 |
 |
||
 |
 |
||
 |
|
| :: Sei qui: Home > Manuali > Indice generale dei manuali - Giochiamo con i fogli di stile - pagina 15 | |||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||
|
Le tabelle, avendo il proprio tag predefinito <table> e tag distinti per titolo <caption>, intestazioni <th>, per righe <tr> e per celle <td>, accettano un qualunque elemento di stile sia ad esso associato, come una formattazione del testo o dei links, colori o immagini di sfondo, che possono anche essere diversi da quelli del normale paragrafo indicato con il tag <p>. Vediamo come assegnare gli elementi di stile che già conosciamo ad una tabella o ad una sua parte. Supponiamo di:
Utilizzeremo questo foglio di stile: <html> Come risultato, applicando il foglio di stile al tag <table>, avremo ottenuto una tabella bordata di rosso scuro, con sfondo rosa nella quale le scritte, a differenza della pagina, sono in Arial 14 pixel grassettate ed in rosso. Come si può vedere l'elemento di stile è stato applicato alla tabella nel suo intero complesso, senza preoccuparsi della divisione in quattro celle. Proviamo allora ad applicare lo stesso foglio di stile non più all'intera tabella, ma alle singole celle, cioè al tag <TD>. Ecco l'esempio: <html> Come avrai potuto vedere il bordo è ora applicato alle quattro celle e la formattazione del testo, come nel primo esempio, al complesso delle celle che formano la tabella. E' importante apprendere questo concetto per capire a quale parte della tabella applicare un certo elemento di stile per ottenere l'aspetto finale che si desidera. Premesso ciò, vediamo un esempio complesso che richiamerà elementi di stile che abbiamo già esaminato in precedenza. Strutturiamo un foglio in questo modo, ricordandoci sempre che gli elementi di stile comuni ad un unico argomento possono essere raggruppati tra loro: <html> Se sei stato attento avrai notato come vi siano delle (apparenti) incongruenze. Nell'elemento TABLE abbiamo, tra l'altro, stabilito che lo sfondo della tabella dovesse essere bianco (white) ed il carattere dovesse essere un Arial 14 punti, normale, grassettato e di colore verde. L'interno delle celle, al di là di quelle che abbiamo modificato grazie alle classi "green" e "purple", appare invece con lo sfondo di colore nero e con le scritte in grassetto, corsivo e di colore giallo. Ebbene ciò è avvenuto perché lo stile che abbiamo associato alla singola cella nel tag <td> prevede appunto td { background:#000000; text-align:left; font-style:italic; color:yellow;} e quindi colore di sfondo nero (background:#000000), allineamento del testo a sinistra (text-align:left), stile del carattere corsivo (font-style:italic) e colore della scritta in giallo (color:yellow). Ciò sta a significare che, se uno specifico tag con campo più ristretto ha elementi di stile differenti da quelli del tag gerarchicamente superiore, prevalgono sempre i primi. Questo è fondamentale nell'uso dei fogli di stile. Se non avvenisse questo, tutto il testo, i colori, gli sfondi, i link e tutti gli altri elementi di una pagina HTML sarebbero sempre quelli definiti dall'elemento di stile assegnato a BODY, gerarchicamente superiore a tutto il resto, che è invece la formattazione generale della pagina in assenza di ulteriori istruzioni. Non a caso, sempre esaminando il precedente esempio, nella singola cella il carattere è grassettato: non essendoci contrasto con gli elementi di stile assegnati alle celle, subentrano quelli del tag gerarchicamente superiore, nel nostro caso TABLE che difatti prevede la grassettatura del testo (font: bold). Vediamo ora come utilizzare un foglio di stile associato ad una tabella per creare un menù "rollover", cioè un menù nel quale, passando il mouse o cliccando sulle varie voci cambi l'aspetto del link. <html> |
| Nota: come avrai potuto notare, nel foglio di stile sono ripetuti gli elementi degli eventi riferiti ai links, la prima volta per definire l'aspetto di quelli esterni alla tabella che appariranno del tutto normali, la seconda per definire l'aspetto di quelli interni che appariranno in un effetto rollover. |
Con le tabelle ci fermiamo volutamente qui. Ci sarebbero moltissimi altri elementi di stile da applicare alle tabelle, ma non ne faremo menzione, perché ti lascerebbero senz'altro confuso, credici. Se vorrai approfondire l'argomento, una volta diventato padrone dei fogli di stile, potrai approdare a manuali per webmasters professionisti cercandoli semplicemente nel web. |
|
|
|
|
Questo sito è ottimizzato per Explorer 5.0 o superiore, Java compatibile. Alcune delle applicazioni presenti potrebbero non essere supportate da Netscape© o da sistemi operativi diversi da Microsoft© Windows. Tutti i marchi citati sono di proprietà dei loro legittimi autori. |
Webmaster: Seatiger Team 
