7275
666
574
I CSS (Cascade Style Sheets) sono una specifica
aggiunta all'HTML già dalla versione 3.2 ma solo ultimamente
trovano un diffuso uso tra i creatori di siti web professionali.
Sebbene infatti i CSS siano uno standard riconosciuto dal consorzio
che vigila e coordina l'evoluzione dei linguaggi di script (W3C)
i Webmaster erano restii ad utilizzarli a causa delle fin troppe
incompatibilità tra i vari Navigatori sugli stessi e che sono
ancora ben lontane da essere risolte. La filosofia che si cela
dietro i Fogli di stile è la possibilità di gestire le caratteristiche
grafiche di un sito Web in modo centralizzato e di rendere i
contenuti di intere porzioni di pagine web indipendenti tra
di loro.
Uno dei limiti dell'HTML è sempre stato il
fatto che la formattazione di una pagina web era legata ad un
oggetto nato per tutt'altri scopi: La Tabella; questo rendeva
la creazione, manutenzione e la modifica di un sito di medie-grandi
dimensioni un lavoro delicato e di difficile attuazione anche
per coloro che ormai sono esperti del campo.
Per comprendere meglio possiamo fare un esempio
pratico: Supponiamo di dover creare un sito di 100 pagine Web
e che queste pagine dovranno avere una certa impostazione grafica:
Il carattere usato sarà Arial con dimensione 2, i Colori predominanti
saranno il Giallo e il Nero ed altre cose. Dopo un certo tempo
dalla creazione del Sito, il nostro Cliente ci chiede (non stiamo
a specificare per quali motivi) che il sito avrà il carattere
Verdana con dimensione 1 e i Colori predominanti saranno il
Rosso e il Bianco: Possiamo facilmente immaginare che con l'uso
tradizionale dell'HTML saremo costretti a modificare una per
una tutte e 100 pagine del Sito portandoci via una grande quantità
di tempo.
Questo è solo un esempio di ciò che può essere
evitato utilizzando i css, o meglio progettando il sito secondo
le specifiche css.
PERSONALIZZARE I COMANDI HTML
Uno strumento messo a disposizione dai css
è la possibilità di cambiare il comportamento dei tag HTML dando
uno stile grafico personalizzato. Prendiamo ad esempio il tag
<H1>. Sappiamo benissimo qual'è il suo effetto:
Supponiamo di voler fare in modo che il comando
produca un carattere Arial di colore Blu. Inseriremo all'interno
dell'Intestazione il seguente Codice:
D' ora in poi nella nostra pagina web il comando
si comporterà nel seguente Modo:
Questo apre un'interessante prospettiva: D'ora
in poi per modificare lo stile grafico dei caratteri di una pagina
non sarà più necessario modificare ogni singolo comando inserito
in una pagina, basterà modificare i comandi all'interno del comando
<STYLE></STYLE> e il gioco è fatto.
Per impostare uno stile valido per tutte le pagine
web del nostro sito il webmaster ha necessità di utilizzare un
modo per incorporare gli stessi comandi per tutte le pagine. Per
fare ciò si creerà un file di testo che contiene i comandi per
lo stile e lo si salverà nel nostro sito (è consigliata l'estensione
.css) con un nome a piacere (per esempio Stile.css). Fatto
ciò in tutte le nostre pagine richiameremo quel file mettendo
il seguente comando HTML all'Interno dell'Intestazione della Pagina:
Ora sarà sufficiente, quando vorremo modificare
gli attributi di uno dei stili impostati nel nostro sito, fare
i cambiamenti solo nel file Stile.css e questo avrà effetto in
tutto il nostro Sito Web. Non dimenticate che nel File che conterrà
i comandi css bisogna mettere solo i comandi stessi senza i tag
<STYLE> e </STYLE>. Ecco un esempio di codice all'interno
del File:
Una delle possibilità più interessanti che i
fogli di stile mettono a disposizione è la possibilità di dare
un certo stile solo per una certa zona della pagina web in modo
del tutto indipendente dal resto della stessa. Questo è possibile
inserendo la parte di pagina all'Interno dei tag <DIV> e
</DIV> e aggiungere i comandi per lo stile all'Interno dell'
attributo STYLE dentro al tag <DIV>. Ecco un Esempio esaustivo:
Queste porzioni di pagina possono essere anche sovrapposte
le une alle altre:
Una volta assimilati questi concetti si può
passare alla lista degli attributi di stile che possono essere
usati nei fogli di stile:
| Attributo |
Valori possibili |
Effetto |
| font-family: |
Arial,
Courier,Serif,Sans Serif, Cursive,Fantasy, Monospace, Verdana
e tutti i font di caratteri installati. |
Imposta
il font di caratteri che verrà usato nel foglio. E' possibile
indicare anche più font separati da una virgola. |
| font-size: |
da 1pt
(punti) in poi oppure da 1px (pixel) in poi oppure da un 1in
(pollici) in poi oppure da 1cm (centimetri) in poi. |
Imposta
la grandezza del testo |
| font-style: |
normal,
italic, oblique |
Imposta
una stilizzazione ai caratteri che compongono il font |
| font-variant: |
normal,
small-caps |
Permette
di impostare il maiuscoletto al font |
| font-weight: |
extra-light,
demi-light, light, medium, extra-bold, demi-bold, bold |
Permette
di aggiungere diversi tipi di grassetto al nostro font. |
| border: |
tutti
i valori degli altri attributi border messi insieme e separati
da uno spazio. Es: H1
{ border:15px dotted red }
|
Permette
di creare un bordo attorno al foglio di stile. |
border-top:
border-bottom:
border-right:
border-left: |
none,
dotted, dashed, solid, double, groove, ridge, inset, outset |
Permettono
di impostare lo stile e il colore della bordatura dei vari
lati di un foglio di stile <DIV> |
| border-width: |
quattro
valori per tutti e quattro i lati da 1pt oppure 1px oppure
1em oppure 1in oppure 1cm in poi. Es: BODY
{border-width: 5px 5px 10px 10px}
|
Imposta
lo spessore della bordatura di un foglio di stile <DIV> |
| border-color: |
white,
black, red, green, yellow e vari colori tipici in Inglese. |
imposta
il colore del bordo di un blocco <DIV> |
| border-style: |
none,
dotted, dashed, solid, double, groove, ridge, inset, outset |
Permette
di scegliere lo stile di tutti e quattro i bordi del foglio
di stile. |
| width: |
da 1pt
(punti) in poi oppure da 1px (pixel) in poi oppure da un 1in
(pollici) in poi oppure da 1cm (centimetri) in poi. |
Imposta
la larghezza di un blocco <DIV> |
| height: |
da 1pt
(punti) in poi oppure da 1px (pixel) in poi oppure da un 1in
(pollici) in poi oppure da 1cm (centimetri) in poi. |
Imposta
l'altezza di un blocco <DIV> |
| float: |
left,
right e none |
Imposta
l'allineamento degli elementi nel foglio di stile. |
| color: |
white,
black, red, green, yellow e vari colori tipici in Inglese. |
Imposta
il colore del testo |
| background-color: |
white,
black, red, green, yellow e vari colori tipici in Inglese. |
Imposta
il colore di sfondo del foglio di stile |
| background-image: |
url(ImmagineDiSfondo)
Es:
BODY { background-image: url(Sfondo.gif)
}
|
Imposta
l'immagine di sfondo del foglio di stile. |
| background-repeat: |
repeat,
repeat-x, repeat-y |
Imposta
con quale criterio deve essere ripetuta l'immagine di sfondo
all'interno del foglio di stile. |
| background-position: |
top,
center, bottom per l'allineamento verticale e left, center,
right per l'allineamento orizzontale rispetto al CSS oppure
due coordinate. Es: BODY
{ background-image: url(Sfondo.jpg); background-position:
center right }
|
Imposta
la posizione dell'immagine di sfondo. Può essere utilizzata
per evitare il piastrellamento di un'immagine per tutto il
foglio di stile. |
| background: |
tutti
i valori degli altri attributi background precedenti separati
da uno spazio. Prima il colore, poi l'immagine di sfondo,
quindi la posizione. |
Permette
di impostare tutte le caratteristiche di uno sfondo viste
fino ad ora in un unico comando. |
| position: |
static,
absolute, relative. |
Permette
di scegliere il tipo di posizionamento di un blocco <DIV>
tra relativo o assoluto. |
| top: |
da 0pt
(punti) in poi oppure da 0px (pixel) in poi oppure da un 0in
(pollici) in poi oppure da 0cm (centimetri) in poi. |
Imposta
la posizione Y del blocco. |
| left: |
da 0pt
(punti) in poi oppure da 0px (pixel) in poi oppure da un 0in
(pollici) in poi oppure da 0cm (centimetri) in poi. |
Imposta
la posizione X del blocco. |
| visibility: |
hidden,
visible |
Permette
di impostare la visibilità o l'invisibilità di un CSS. |
| overflow: |
hidden,
scroll |
Permette
di scegliere il comportamento del CSS nel caso eccedesse l'area
dello schermo. |
| z-index: |
1, 2
ecc.. I CSS con z-index impostato ad un valore più alto saranno
visualizzati davanti a quelli con valore inferiore. |
Imposta
la posizione Z del CSS permettendo di portare o meno in primo
piano un certo CSS rispetto ad altri elementi della pagina
web o di altri CSS. |
| letter-spacing: |
da 0pt
(punti) in poi oppure da 0px (pixel) in poi oppure da un 0in
(pollici) in poi oppure da 0cm (centimetri) in poi. |
Imposta
la distanza tra le singole lettere del testo contenuto in
un CSS. |
| text-transform: |
uppercase,
capitalize, lowercase |
Imposta
il maiuscolo, il minuscolo, o maiuscola solo la prima lettera
di ogni parola all'interno del CSS. |
| text-align: |
left,
center, right, justify |
Imposta
l'allineamento del testo rispetto al CSS. |
| text-indent: |
da 0pt
(punti) in poi oppure da 0px (pixel) in poi oppure da un 0in
(pollici) in poi oppure da 0cm (centimetri) in poi. |
Imposta
lo spazio che ci deve essere tra il lato del CSS e la prima
parola di un testo all' interno di esso. |
| text-decoration: |
none,
underline, italic, line-height |
aggiunge
diversi abbellimenti al testo come sottolineature, corsivo
etc. |
| line-height: |
da 0%
in poi oppure da 0em in poi (1 em corrisponde alla larghezza
della lettera "M") |
Imposta
la distanza verticale tra le varie linee di testo. |
| list-style: |
url(ImmagineDiSfondo)
Es:
BODY { list-style: url(PuntoElenco.gif)
}
|
Permette
di inserire un'immagine all'interno di un elenco al posto
dei caratteri standard dei comandi HTML relativi agli elenchi. |
Un' ultima chicca prima di finire qui. Una delle
cose che hanno sempre dato fastidio ai WebMaster era l'impossibilità
di togliere la sottolineatura ai link nelle nostre pagine web.
Ora con i fogli di stile è possibile ottenere vari effetti oltre
all'eliminazione del sottolineato dai link. Ecco qui alcuni effetti
che potete inserire:
11/MAR/10 
UTENTI
ON-LINE:183
SEGNALA
IL SITO AD UN AMICO 
SALA
GIOCHI
