Links: http://www.web-link.it (scarica qui il tutorial)

CSS: Referenze dei fogli di stile Css

Attributo Valori Descrizione
Elementi di testo
text-align
vertical-align
text-decoration
text-transform
text-indent
letter-spacing
line-height
left, right, center, justify
top, middle, bottom
none, underline, overline, line-through
uppercase, lowercase, capitalize
numerico
numerico
numerico
Allineamento orizzontale del testo o di un oggetto
Allineamento verticale del testo o di un oggetto
Sottolinea in varie modalità un testo
Imposta un testo in maiuscolo o in minuscolo
Testo rientrato espresso in px, pt, %, em, es. 12px
Spazio tra una lettera e l'altra espresso... (come sopra)
Spazio tra una riga e l'altra espresso... (come sopra)
Elementi di formattazione del testo
font-family
font-size
font-weight
font-style
font-variant
first-letter
first-line
nome carattere
numerico
normal, light, demi-light, extra-light, medium, bold
normal, italic, oblique
normal, small-caps
tutti i possibili valori di stile testuali
tutti i possibili valori di stile testuali
Carattere da utilizzare, es. Verdana
Grandezza testo espresso in px, pt, %, em, es. 12px
Imposta il carattere in vari spessori di grassetto
Imposta il carattere in corsivo
Imposta maiuscole e minuscole alla stessa grandezza
Proprietà della prima lettera di una riga
Proprietà della prima riga di un paragrafo
Link
a:link
a:hover
a:active
a:visited
colore, sottolineatura, grandezza carattere ...
colore, sottolineatura, grandezza carattere ...
colore, sottolineatura, grandezza carattere ...
colore, sottolineatura, grandezza carattere ...
Impostazione di default dei link
Azione al passaggio del mouse
Azione sul link attivo (al click)
Azione del link visitato
Colori e sfondi
color
background
background-color
background-image
background-repeat
background-attachment
background-position
colore (White - #FFFFFF - 250,250,250)
transparent, colore..., url (file), repeat, scroll, position
transparent, colore...
none, url (file)
repeat, repeat-x, repeat-y, no-repeat
scroll, fixed
relative, absolute, allineamento orizzontale
Imposta il colore degli elementi selezionati (testo, bordi ...)
Proprietà varie dello sfondo di una pagina o di una tabella
Imposta il colore dello sfondo di una pagina o di una tabella
Seleziona un'immagine di sfondo per una pagina o una tabella
Imposta la ripetizione dell'immagine di sfondo...
Proprietà di scrolling dello sfondo
Posizionamento dinamico dell'immagine di sfondo
Margini di una pagina o di un box
margin
margin-top
margin-left
margin-right
margin-bottom
auto, numerico
auto, numerico
auto, numerico
auto, numerico
auto, numerico
Effetto rientrato espresso in px, pt, %, em, es. 12px (tutti i lati)
Effetto rientrato espresso in px, pt, %, em, es. 12px (superiore)
Effetto rientrato espresso in px, pt, %, em, es. 12px (sinistro)
Effetto rientrato espresso in px, pt, %, em, es. 12px (destro)
Effetto rientrato espresso in px, pt, %, em, es. 12px (inferiore)
Bordi di una pagina o di un box
border
border-top
border-left
border-right
border-bottom
border-style
border-top-style
border-left-style
border-right-style
border-bottom-style
border-color
border-top-color
border-left-color
border-right-color
border-bottom-color
border-width
border-top-width
border-left-width
border-right-width
border-bottom-width
float
clear
stile, dimensione, colore
stile, dimensione, colore
stile, dimensione, colore
stile, dimensione, colore
stile, dimensione, colore
none, solid, double, groove, ridge, inset, outset
none, solid, double, groove, ridge, inset, outset
none, solid, double, groove, ridge, inset, outset
none, solid, double, groove, ridge, inset, outset
none, solid, double, groove, ridge, inset, outset
colore (White - #FFFFFF - 250,250,250)
colore (White - #FFFFFF - 250,250,250)
colore (White - #FFFFFF - 250,250,250)
colore (White - #FFFFFF - 250,250,250)
colore (White - #FFFFFF - 250,250,250)
dimensione
dimensione
dimensione
dimensione
dimensione
none, left, right
none, left, right, both
Combina tutti i valori per tutti i bordi
Combina tutti i valori per il bordo superiore
Combina tutti i valori per il bordo sinistro
Combina tutti i valori per il bordo destro
Combina tutti i valori per il bordo inferiore
Imposta lo stile di tutti i bordi del box
Imposta lo stile del borde superiore del box
Imposta lo stile del borde sinistro del box
Imposta lo stile del borde destro del box
Imposta lo stile del borde inferiore del box
Imposta il colore di tutti i bordi del box
Imposta il colore del borde superiore del box
Imposta il colore del borde sinistro del box
Imposta il colore del borde destro del box
Imposta il colore del borde inferiore del box
Dimensione espressa in px, pt, %, em, es. 12px
Dimensione espressa in px, pt, %, em, es. 12px
Dimensione espressa in px, pt, %, em, es. 12px
Dimensione espressa in px, pt, %, em, es. 12px
Dimensione espressa in px, pt, %, em, es. 12px
Permette il posizionamento di un elemento
Permette il posizionamento di un elemento
Spaziatura interna di una pagina o di un box
padding
padding-top
padding-left
padding-right
padding-bottom
numerico
numerico
numerico
numerico
numerico
Espresso in px, pt, %, em, es. 12px
Espresso in px, pt, %, em, es. 12px
Espresso in px, pt, %, em, es. 12px
Espresso in px, pt, %, em, es. 12px
Espresso in px, pt, %, em, es. 12px
Visualizzazione e visibilità di tutti gli elementi
display
visibility
overflow
none, block, inline, list-item
visible, hidden, inherit
auto, visible, hidden, scroll
Elemento NON visibile: NON considera lo spazio che occuperebbe
Elemento NON visibile: considera lo spazio che occuperebbe
Visualizzazione dinamica delle barre di scorrimento
Liste
list-style-type








list-style-image
list-style-position
list-style
none
disk
circle
square
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
none, file immagine
inside, outside
tutti
Nessun puntatore
Cerchio pieno
Cerchio vuoto
Quadrato pieno
Numeri arabi (1. 2. 3. ...)
Numeri romani in minuscolo (i. ii. iii. iv. ...)
Numeri romani in maiuscolo (I. II. III. IV. ...)
Lettere minuscole (a. b. c. ...)
Lettere maiuscole (A. B. C. ...)
Inserisce un'immagine al posto dei puntatori elencati
Stabilisce la posizione dell'elenco sullo schermo
Tutte le proprietà utilizzate, es. list-style: disk, inside, url(file.gif)
Dimensionamento degli elementi
width
height
clip
numerico
numerico
rect, circle, polygon
Larghezza di un elemento espressa in px, pt, %, em, es. 12px
Altezza di un elemento espressa in px, pt, %, em, es. 12px
Forma di un elemento, quadrata, circolare, astratta
Posizionemanto degli elementi su di un documento
position
top
left
z-index
absolute, relative, static
numerico
numerico
numerico, auto
 
Posizionamento di un elemento sulla pagina
Posizionamento dall'alto espresso in px, pt, %, em, es. 12px
Posizionamento dal basso espresso in px, pt, %, em, es. 12px
Consente di sovrapporre elementi, i valori sono 1 e -1
Cursore
cursor auto
default
crosshair
hand
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
Forma automatica, stabilita dallo sviluppatore per default
Freccia normale
Croce tipo mirino
mano, classica di quando si passa su di un link
Croce con frecce direzionali come quando si sposta una popup
Freccia verso destra
Freccia normale verso destra
Freccia normale verso sinistra (come per default)
Freccia verso l'alto
Freccia normale in basso verso destra
Freccia normale in basso verso sinistra
Freccia verso il basso
Freccia verso sinistra
Linea orizzontale, classica di quando si passa su di un testo
Clessidra
Punto interrogativo
Proprietà di stampa
page-break-before
page-break-after
auto, always :: left, right
auto, always :: left, right
Interruzione di riga prima della fine del testo da stampare
Interruzione di riga dopo la fine del testo da stampare
Barre di scorrimento (stile & colore)
scrollbar-base-color
scrollbar-face-color
scrollbar-face-color
scrollbar-arrow-color
scrollbar-highlight-color
scrollbar-dark-shadow-color
scrollbar-3d-light-color
scrollbar-track-color
colore
colore
colore
colore
colore
colore
colore
colore
Colora l'intermezzo tra le sfumature di tutte le sue componenti
Colora la barra vera e propria, cioè la parte in movimento
Colora l'ombra della barra di scorrimento vera e propria
Colora le frecce della barra di scorrimento
Colora il separatore tra la barra e la parte con le frecce
Colora la parte esterna all'ombra della barra di scorrimento
Colora la parte tridimensionale della parte contenete le frecce
Colora la parte sottostante della barra, quella su cui si muove
 

Fogli di stile (CSS) (da: http://assistenza.tiscali.it/spazioweb/guida_html/articoli/css/pag1.html)
I CSS ovvero Cascading Style Sheets sono ormai divenuti molto comuni sul web, servono per migliorare l'aspetto estetico e al tempo stesso facilitare la creazione e/o la manutenzione di siti, grandi o piccoli che possano essere; se combinati con un linguaggio di scripting, quale JavaScript, danno vita all'HTML Dinamico conosciuto anche come DHTML, consentendo di superare quelli che erano considerati i limiti di html standard.
Per creare i fogli di stile è possibile utilizzare un editor di CSS specifico oppure adoperare lo stesso editor che viene utilizzato per creare pagine web. Come per l’HTML sarà possibile creare fogli di stile utilizzando il blocco note di Windows.
Essendo i fogli di stile un’estensione dell’HTML stesso è necessario, per poterli comprendere e utilizzare, la conoscenza di base del linguaggio HTML.
Fondamentalmente sono tre i modi di usare i CSS, quale sia il migliore dipende soltanto dal tipo di utilizzo che se ne vuole fare all’interno delle nostre pagine web:
1. Direttamente in linea:
Cioè quando si ha la necessità che lo stile sia relativo al solo blocco che stiamo trattando, senza che questo vada ad influire su altre parti dello stesso documento o pagina web.
2. Ad inizio pagina a stile incorporato:
quando allo stesso stile fanno riferimento diversi elementi (tags) html sarebbe molto dispersivo, definire lo stesso stile più volte all'interno della stessa pagina se questo servisse sempre per lo stesso identico scopo. Molto meglio definirlo una sola volta, ad inizio pagina. Così facendo tutti gli elementi interessati seguiranno quello stesso stile.
3. Nel collegamento ad un foglio di stile esterno:
se gli stili definiti sono molti, o meglio ancora molte sono le pagine web che ne faranno uso, la cosa migliore, non fosse altro che per praticità d'uso, sarà quella di creare una struttura alla quale tutte le pagine possano fare riferimento, questa struttura altro non sarebbe che il nostro foglio di stile, un documento di testo normalissimo ma con estensione finale .css dove al suo interno saranno contenute tutte le dichiarazioni valide per un foglio di stile adoperando le stesse regole sintattiche viste per il foglio incorporato a inizio pagina.

SINTASSI
I CSS hanno un loro elemento (tag) che viene specificato in html, si tratta dell'elemento: <style> e relativa chiusura </style>, questo elemento serve ad informare il browser che si tratta di stili e che questi apporteranno le dovute modifiche ai vari elementi (tags) di HTML definiti al suo interno, comprese immagini e link.
Per la creazione dei CSS è necessario seguire una serie di regole comuni: gli attributi devono essere inseriti all'interno di parentesi graffe { } laddove in HTML verrebbe usato un "=" (uguale) viene invece usato ":" (due punti). Argomenti consecutivi sono separati da ";" (punto e virgola) invece che da "," (virgola). Inoltre molti argomenti sono divisi da - (trattini) anche se questi fanno parte integrante del nome stesso.
Immaginiamo di volere assegnare al nostro testo una leggera indentazione (12 pixel) con allineamento giustificato; che tradotto significa avere un leggero rientro del testo ad inizio paragrafo con allineamento poi su entrambi i lati. Ecco come verrà scritto il tag dello stile:
{text-align : justify; text-indent : 12px}
Abbiamo adoperato l'attributo text-align con il parametro justify per il testo giustificato, mentre l'attributo text-indent con il parametro 12 pixel per l'indentazione ad inizio paragrafo.
Da notare in questa fase di apprendimento soltanto la sintassi: parentesi graffa, attributo, due punti, parametro, punto e virgola, attributo, due punti, parametro, parentesi graffa.
Le parentesi graffe non sono presenti nelle tastiere italiane, si possono ottenere con i codici ascii Alt 123 e Alt 125.
Gli attributi modificabili attraverso i CSS sono veramente molti è in questa semplice trattazione non è possibile descriverli tutti. Vediamo pertanto i più semplici ma anche i più utilizzati.

Attributi del testo
text-align:center | left | right | justify ;
Allineamento del testo, valori possibili : centrato , sinistra, destra , giustificato.
text-decoration: overline | underline | line-through | none ;
Decorazione del testo, valori possibili : overline = sopralineato, underline = sottolineato, line-through = sbarrato, none = nessuno.
E' anche possibile combinarne più di uno, per esempio inserendo sia underline che overline. Il parametro none lo si adopera in particolar modo con i link in quanto toglie la fastidiosa sottolineatura che altrimenti avrebbero per default.
text-indent: lunghezza | percentuale ;
Rientro della prima riga di un blocco. E' possibile fare uso anche di numeri negativi per un rientro esterno.
text-transform: capitalize | uppercase | lowercase | none ;
Trasformazione in maiuscolo o minuscolo dell'interno blocco di testo (uppercase lowercase). Capitalize trasforma in maiuscola la prima lettera di ogni parola.
letter-spacing: numero ;
Spazio fra le lettere che compongono il testo. il numero può essere espresso in tutti i modi possibili come riportato alla tabella parametri.
Attributi per il carattere
font-family : famiglia1, famiglia2, famiglia3 ;
Si possono elencare più famiglie di caratteri per dare la possibilità al browser di selezionare quella presente sulla macchina del visitatore. Si tenterà di visualizzare la prima specificata per poi passare a quelle successive nel caso in cui non fossero presenti quelle precedenti. A questo proposito è opportuno descrivere le possibili alternative partendo proprio da quelle più rare.
font-size: lunghezza | dim. assoluta | dim. relativa | percentuale ;
Si possono esprimere le dimensioni del font facendo riferimento a uno dei quattro possibili attributi.
font-style : normal | italic | oblique;
Permette la visualizzazione dei caratteri in corsivo.
font-variant : normal | small-caps ;
Simile a font-style assegna tutte maiuscole grandi per le lettere maiuscole e maiuscole piccole per le lettere minuscole. normal per rimuovere il tutto.

Attributi per il colore e lo sfondo
color : valore;
Questo attributo serve per impostare il colore del testo.
background-color : valore;
Questo attributo definisce il colore di sfondo di uno style e può essere adoperato indipendentemente dal colore di sfondo del testo.
background-image : url (immagine.gif);
Questo attributo definisce l'immagine di sfondo per un elemento e può essere adoperato indipendentemente dall'immagine e dal colore dello sfondo assegnato alla pagina.
Le Classi
Se si opta per un foglio di stile, esterno o interno che sia, non è necessario ridefinire tutti o alcuni elementi (tags) dell’Html. E’ però possibile crearne di nuovi facendo uso delle classi, un sistema molto comodo e pratico. E’ possibile creare tutte le classi che si vogliono, così facendo si sfrutteranno al meglio le potenzialità dei CSS (fogli di style).
E' possibile definire con estrema semplicità le proprie classi di stile, queste saranno poi richiamate dall'interno dei vari elementi html.
Esempio
Definiamo una classe, per farlo è sufficiente editare un nome preceduto da un punto. Il nome non ha importanza, sicuramente meglio se attinente con l'effetto che dovrà produrre in modo tale da essere ricordato con maggiore facilità quando avremo bisogno di adoperarlo.
Vediamo praticamente come fare, immaginiamo di volere un effetto particolare che serva per identificare tutti i titoli degli articoli presenti nel nostro sito. Creeremo una classe col nome testo che faccia uso di un font medio e di colore rosso in stile italico.
Richiamiamo dal nostro editor il file .css (se si trattava di un foglio esterno), altrimenti portatevi all'interno della zona stile, posizionandoci fuori da eventuali parentesi graffe, possiamo descrivere la nostra classe firma, assegnandole i vari attributi:
.titolo {
font-family : Verdana,Arial,Helvetica;
color : #ff0000;
font-size : 12pt;
text-align : right;
font-style : italic;
}
Ogni elemento (tag) di HTML supporta l'attributo class, quindi dovendo scrivere una parte di titolo e volendo che questa parte faccia uso degli attributi appena inseriti nella classe firma, basterà assegnare "titolo" all'elemento (tag) prescelto, nel nostro caso <p>. Tutto ciò che verrà scritto all'interno di questo paragrafo, rispetterà i parametri della classe, mi raccomando la relativa chiusura dell'elemento (tag) </p>
<p class="titolo">questo testo rispetta gli attributi della classe titolo </p>

I link
Abbiamo visto come i CSS siano in grado di cambiare attributi al testo. Esiste però anche un'altra novità introdotta dai CSS, riguarda la gestione dei link.
La tanto odiata sottolineatura, la possibilità di cambiare colore o il tipo di font sono solo alcune cose che possono essere gestite dai CSS e magari proprio nel momento esatto in cui il cursore del mouse passa sopra al link stesso.
Prima di tutto vediamo come si adoperano: possono essere dichiarati in una pagina o in un foglio di stile esterno, questa la relativa sintassi:
<style type="text/css">
<!--
A:LINK {text-decoration : none}
A:VISITED {text-decoration : none; Color : green}
A:HOVER {Color : red}
-->
</style>
Dove A:LINK sono i link ancora da visitare o cliccare,
A:VISITED sono invece i links visitati e
A:HOVER si riferisce all'evento del mouse nel momento preciso in cui viene posizionato sopra il link stesso.
La trattazione dei CSS è sicuramente molto più ampia, maggiori specifiche sui cosiddetti fogli di stile possono essere trovate sul sito del World Wide Web Consortium, organizzazione che si occupa di determinare le modifiche allo standard alla base delle pagine web.

I Box Model
Il box model consente di definire dei blocchi rettangolari con specifici valori di largezza e altezza dei contenuti, il padding, dimensioni e stile del bordo e il margine:
* l'area del contenuto. E' la zona in cui trova spazio il contenuto vero e proprio, testo, immagini, animazioni Flash. Le dimensioni orizzontali dell'area possono essere modificate con la proprietà width mentre quelle verticali con height.
* il padding. E' uno spazio vuoto che può essere creato tra l'area del contenuto e il bordo dell'elemento.
* il bordo. E' una linea di dimensione, stile e colore variabile che circonda la zona del padding e l'area del contenuto.
* il margine. E' uno spazio di dimensioni variabili che separa un dato elemento da quelli adiacenti.
Per esempio, il codice relativo ad un box può essere il seguente:
.classe { width:200px;
border:5px solid #ff9900;
padding:7px;
margin:10px }

I bordi
Utilizzando i CSS è possibile definire le caratteristiche dei bordi. Ciò consente di giustificare il testo senza l'uso di tabelle. I CSS creano degli elementi visualizzati all'interno di box con delle proprietà particolari:
* le proprietà dei margini che assegnano un bordo esterno al box;
* le proprietà di riempimento che assegnano uno spazio interno al box che separa il contenuto dai margini;
* le proprietà dei bordi che definiscono le linee grafiche intorno al box.
Queste proprietà possono essere suddivise in due categorie: singole e a sintassi abbreviata. Le prime definiscono singoli aspetti di ciascuno dei quattro bordi. Le seconde consentono di riunire in una sola regola le diverse impostazioni.
Si può definire lo stile di un singolo bordo utilizzando al seguente sintassi per le proprietà singole:
classe {
border-<lato>-color: <valore>;
border-<lato>-style: <valore>;
border-<lato>-width: <valore>;
}
mentre la sistassi abbreviata è la seguente:
classe { border-<lato>: <valore width> <valore style> <valore color>; }
In cui a <lato> occorre sostituire uno degli indicatori dei quattro lati: top, right, bottom o left.
Come abbiamo specificato all'inizio, per un bordo si possono definire il colore (color), lo stile (style), lo spessore (width).
Lo stile di un bordo può essere espresso con una delle seguenti parole chiave:
none. L'elemento non presenta alcun bordo e lo spessore equivale a 0.
hidden. Equivalente a none
dotted
dashed
solid
double.
groove
ridge
inset
outset
Per quanto riguarda lo spessore, questo può essere definito tramite i seguenti parametri:
* un valore numerico con unità di misura
* thin - Bordo sottile
* medium - Bordo di medio spessore
* thick - Bordo di largo spessore
Tramite la proprietà a sintassi abbreviata "border",è possibile definire con una sola regola le impostazioni per i quattro bordi. Il suo uso è limitato al caso in cui i quattro bordi abbiano tutti lo stesso colore, lo stesso stile e lo stesso spessore:
classe {border: <valore spessore> <valore stile> <valore colore>;}
CSS: teoria e utilizzo
CSS è l'acronimo di Cascading Style Sheets. Il suo ideatore è stato lo svedese Hakon Wium Lie che nel 1990 lavorava ad un progetto di giornale elettronico personalizzato dove ognuno poteva comporsi le pagine scegliendo le notizie che più lo interessavano.
Nonostante la facilità dei CSS e il loro enorme potenziale ci vollero ben 5 anni prima che i browser li supportassero ampiamente.
I browser di ultima generazione hanno un buon supporto per i CSS, al contrario dei precedenti.
I CSS, ormai standard web del W3C, permettono di separare il contenuto della pagina dalle indicazioni di layout da utilizzare . In particolare è possibile definire stili da apllicare a più pagine , in modo che la modifica di uno stile si ripercuota immediatamente su tutte le pagine che lo utilizzano.
Capirete immediatamente con quanta facilità si potrà allora modificare a piacimento un layout di un sito web.
Ma in definitiva come funzionano i CSS e come si scrivono?
Vediamo assieme qualche esempio.
I CSS si basano su regole e ogni regola ha tre elementi: selettori, proprietà e valori.
Ecco come si presenta:
selettore {proprietà: valore;}
I selettori si riferiscono all'elemento HTML di cui si vuole definire lo stile della regola.
Ad esempio se voglio modificare l'aspetto dei paragrafi il selettore sarà p.
Le proprietà dicono cosa di quell'elemento HTML si vuole definire, come il colore, la dimensione, il font, la posizione, ecc.
Ad esempio se volgio modificare il colore del paragrafo utilizzerò la proprietà color.
Il valore specifica come debba essere modificata la proprietà.
Ad esempio se il colore del contenuto del paragrafo vogliamo che sia rosso scriveremo p {color: red}
Ogni regola contiene dunque una o più proprietà e i relativi valori all'interno di parentesi graffe. Ogni proprietà è separata dalle altre tramite il punto e virgola. Nell'ultima proprietà il punto e virgola è superfluo.
Il contentuto delle parentesi graffe si chiama dichiarazione.
Oltre ai normali identificatori HTML è possibilile utilizzare due altri tipi di selettori. Precisamente si tratta di classi e id.
Esempio di classi (class):
1) Codice HTML
<html>
...
<p class="testocolorato">Testo da colorare</p>
...
</html>

2) CSS
.testocolorato {color: #0000FF}

Esempio di id:
1) Codice HTML
<html>
...
<h1 id="nomesito">Acme</p>
...
</html>

2) CSS
#nomesito {backgound-color: #CC0000; font-family: Verdana; color: #FFFFFF}

Spiegheremo ora brevemente quali relazioni intercorrono tra i selettori.
Selettore discendente
h1 a {color: #000000}
Ogni elemento a contenuto in un elemnto h1 sarà nero.
Selettore figlio
div > a {color: #000000}
Si applica a tutti gli elementi a discendenti di div, ma non agli elementi a che sono contenuti in altri selettori figli di div.
Discendente consecutivo
div + a {color: #000000}
Si applica solo al primo elemento a discendente di div.
Vediamo ora come i CSS vengono associati ad un documento HTML.
Vi sono per questo scopo quattro sistemi tutti entrambi validi.
Stili inline
Ad ogni marcatore HTML viene associato uno stile. Ad esempio:
<p style="font-size: 11pt">
Stili embedded
Gli stili vengono inseriti negli head della pagina HTML attraverso il marcatore style. Ad esempio:
<style type="text/css">
h1 {color: #330000}
</style>
Stili linkati
Gli stili sono inseriti in un file con estensione .css esterno dunque al codice HTML.
Questa ovviamente è una soluzione migliore rispetto alle due precedenti in quanto permette di di dividere davvero il layout dai contenuti del documento.
Vediamo un esempio:
<head>
<link rel="stylesheet" type="text/css" href="fogliodistile.css" media="screen" />
</head>
Stili importati
Funzionano come il metodo precedente, ma utilizzano il marcatore style. Ad esempio:
<style type="text/css" media="screen">
@import "fogliodistile.css";
</style>
Per concludere vediamo i valori dell'attributo media da associare ai fogli di stile per definirli.
All
Aural
Braille
Embossed
Handheld
Print
Projection
Screen
Tty
Tv

Posizionamento con i CSS
Ciò che impedisce ai CSS di venire abbracciati dalla stragrande maggioranza di sviluppatori web è la credenza che sia impossibile generare tutti i tipi di layout voluti in modo semplice e stabile.
Credenza che ha le sue basi anche nella cattiva abitudine di molti browser ad interpretare scorrettamente o con alcune differenze i CSS.
Vediamo subito un esempio di un layout formato da quattro cello con all'interno del testo posizionato in modo non troppo immediato da intuire.
Esempio di posizionamento con i CSS.
Qui di seguito il codice dell'esempio:
Codice CSS
body {
background-color: #000000;
font-family: Verdana, Arial, sans-serif;
color: #FFFFFF;
font-size: 10pt;
font-weight: normal
}

#conteiner {
border: 0px;
height: 100%;
width: 100%
}

.alto {
height: 40%
}

.cella1 {
tex-align: left;
margin-right: -4px;
height: 100%;
width: 70%;
border: 2px solid #FFFFFF;
float: left
}

.cella2 {
height: 100%;
border: 2px solid #FFFFFF;
text-align: center
}

.basso {
clear: both;
height: 59%
}

.cella3 {
tex-align: left;
margin-right: -4px;
height: 100%;
width: 70%;
border-top: 1px solid #FFFFFF;
border-right: 2px solid #FFFFFF;
border-left: 2px solid #FFFFFF;
border-bottom: 2px solid #FFFFFF;
float: left;
text-align: center
}

.cella4 {
height: 100%; 
border-top: 1px solid #FFFFFF;
border-right: 2px solid #FFFFFF;
border-left: 2px solid #FFFFFF;
border-bottom: 2px solid #FFFFFF
}

.posizione1 {
position: absolute;
top: 18%;
left: 83%
}

.posizione2 {
position: absolute;
top: 68%;
left: 30%
}

.posizione3 {
position: absolute;
top: 89%;
left: 89%
}

Codice XHTML
<div id="conteiner">
<div class="alto">
<div class="cella1">Prima cella</div> <div class="cella2"><span class="posizione1">Seconda cella</span></div>
</div>
<div class="basso">
<div class="cella3"><span class="posizione2">Terza cella</span></div>
<div class="cella4"><span class="posizione3">Quarta cella</span></div>
</div>
</div>

Box [posizione assoluta] 
#content {
position: absolute;
top: 0px;
left: 0px;
padding: 10px;
margin: 20px;
background: #F4F4F4;
border: 5px solid #000000;
width: 400px; /* IE 5.x per Windows */
voice-family: "\"}\"";
voice-family:inherit;
width: 370px
}
html>body #content {
width: 370px /* IE 5.x per Windows */
}

Box [posizione fluida] 
#content {
position: absolute;
top: 0px;
left: 0px;
margin: 20px;
background: #F4F4F4;
border: 5px solid #000000;
width: 74%; /* IE 5.x per Windows */
padding: 10px 10% 10px 15%;
voice-family: "\"}\"";
voice-family:inherit;
width: 55%;
padding: 10px 9% 10px 11%
}
html>body #content {
width: 55%;
padding: 10px 9% 10px 11%
} /* IE 5.x per Windows */

Box [posizione centrata] 
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center
}

#content {
width: 400px; 
padding: 10px;
margin-top: 20px;
margin-bottom: 20px;
margin-right: auto;
margin-left: auto; 
/* Opera */
background: #F4F4F4;
border: 5px solid #000000;
text-align:left; 
width: 400px; /* IE 5.x per Windows */
voice-family: "\"}\"";
voice-family:inherit;
width: 370px
}

html>body #content {
width: 370px /* IE 5.x per Windows */
}

Due box 
#content {
float: left;
padding: 10px;
margin: 20px;
background: #F4F4F4;
border: 5px solid #000000;
width: 300px; 
/* IE 5.x per Windows */
voice-family: "\"}\"";
voice-family:inherit;
width: 270px
}

html>body #content {
width: 270px
/* IE 5.x per Windows */
}

#content2 {
float: left;
padding: 10px;
margin: 20px;
background: #F4F4F4;
border: 5px solid #000000;
width: 300px; 
/* IE 5.x per Windows */
voice-family: "\"}\"";
voice-family:inherit;
width: 270px
}

html>body #content2 {
width: 270px
/* IE 5.x per Windows */
}

Due colonne [fluido] 
#content {
float: left;
padding: 10px 2% 10px 2%;
margin: 20px 1% 20px 2%;
background: #F4F4F4;
border: 5px solid #000000;
width: 44%; /* IE 5.x per Windows */
voice-family: "\"}\"";
voice-family:inherit;
width: 41%
}

html>body #content {
width: 41% /* IE 5.x per Windows */
}

#content2 {
float: right;
padding: 10px 2% 10px 2%;
margin: 20px 1% 20px 1%;
background: #F4F4F4;
border: 5px solid #000000;
width: 44%; /* IE 5.x per Windows */
voice-family: "\"}\"";
voice-family:inherit;
width: 41%
}

html>body #content2 {
width: 41% /* IE 5.x per Windows */
}

Due colonne [menu a sinistra] 
#content {
position: relative;
top: 85px;
right: 120px;
margin: 0px 50px 50px 450px;
padding: 10px;
background-color:#F4F4F4;
border: 5px solid #000000
}

#menu {
position: absolute;
top: 100px;
left: 20px;
width: 172px;
padding: 10px;
background-color:#F4F4F4;
border: 5px solid #000000;
line-height: 17px;
voice-family: "\"}\"";
voice-family: inherit;
width: 272px
}

body>#menu {
width: 272px;
top: 92px
}

Due colonne [menu a destra] 
#content {
margin: 85px 330px 50px 10px;
padding: 10px;
background-color: #F4F4F4;
border: 5px solid #000000
}

#menu {
position: absolute;
top: 100px;
right: 20px;
width: 172px;
padding: 10px;
background-color: #F4F4F4;
border: 5px solid #000000;
line-height: 17px;
voice-family: "\"}\"";
voice-family: inherit;
width: 272px
}

body>#menu {
width: 272px;
top: 86px
}

Tre colonne [1] 
#left {
position: absolute;
top: 0px;
left: 0px;
margin: 20px;
padding: 10px;
border: 5px solid #000000;
background: #F4F4F4;
width: 150px; 
voice-family: "\"}\"";
voice-family:inherit;
width: 120px
}

html>body #left {
width: 120px
}

#middle {
margin: 5px 175px 20px 190px;
padding: 10px;
border: 5px solid #000000;
background: #F4F4F4
}

#right {
position: absolute;
top: 0px;
right: 0px;
margin: 20px;
padding: 10px;
border: 5px solid #000000;
background: #F4F4F4;
width: 150px;
voice-family: "\"}\"";
voice-family:inherit;
width: 120px
}

html>body right {
width: 120px
}

Tre colonne + top box 
#top {
margin: 20px 10px 0px 10px;
padding: 10px;
border: 5px solid #000000;
background: #F4F4F4;
height: 100px;
voice-family: "\"}\"";
voice-family:inherit;
height: 70px
}

html>body #top {
height: 70px
}

#left {
position: absolute;
top: 120px;
left: 0px;
margin: 20px;
padding: 10px;
border: 5px solid #000000;
background: #F4F4F4;
width: 150px; 
voice-family: "\"}\"";
voice-family:inherit;
width: 120px
}

html>body #left {
width: 120px
}

#middle {
margin: 5px 175px 20px 190px;
padding: 10px;
border: 5px solid #000000;
background: #F4F4F4
}

#right {
position: absolute;
top: 120px;
right: 0px;
margin: 20px;
padding: 10px;
border: 5px solid #000000;
background: #F4F4F4;
width: 150px;
voice-family: "\"}\"";
voice-family:inherit;
width: 120px
}

html>body right {
width: 120px
}

CSS: Impaginare testo su 2 colonne e preservare lo spazio
In questo articolo sui CSS impagineremo del testo sempre su due colonne, ma "preserveremo" uno spazio che potrebbe esserci utile per inscrivere una immagine o altro.
L' impostazione della pagina rimane sempre la stessa; quello che andremo ad aggiungere è uno spazio in una colonna o, volendo, in entrambe.
Impostazione della pagina
Riporto il codice che ci ha permesso di avere il testo diviso su due colonne, senza ripetermi nel commento dello stesso ma mi soffermerò sulla parte che ci permette di avere il "vuoto".
#container {
width:770px;
margin: 10px auto;
padding:0;

.colonna {
width:370px;
padding: 0 5px;
float:left;
margin:0;
text-align:left;

.colonna h1{
margin:0;
padding:3px;
font-size:1.5em;
color:#980;

p {
padding:3px;
text-align: justify;
line-height:1.6em;

Il codice fin qui riportato è quello che abbiamo utilizzato nell' articolo precedente; adesso vediamo quello relativo allo spazio. Premetto subito che si tratta di una semplicissima classe, che chiamerò: .spazio; questo per individuare facilmente i nostri elementi sia nel foglio di stile che nella pagina HTML. Ecco il codice:
.spazio {
width:150px;
height:200px;
padding:5px;
float:right;

Il nostro spazio avrà una larghezza pari a 150 px, un' altezza di 200 px, un margine interno (padding) di 5 px e, cosa molto importante, flotterà verso destra; vale a dire che, quando visualizzeremo la pagina finale, avremo un vuoto sul lato destro, ma possiamo scegliere anche a sinista, della colonna nella quale abbiamo deciso di inserirlo. Perchè abbiamo dichiarato una classe? Potremmo volere due "vuoti" nella pagina: o su una stessa colonna oppure su entrambe. Invece di creare due box con ID univoco, le classi ci permettono di essere richiamate quante volte vogliamo all' interno della stessa pagina.

Attributo letter-spacing
Letter-spacing stabilisce la distanza tra le singole lettere all'interno di un documento. I valori sono espressi in misure em. Si tratta di un'unita' di misura pari alla grandezza della lettera m. Viene usata anche con decimali.

<DIV STYLE="font-family:arial; letter-spacing:1em">
HTML.it e' il sito italiano piu' visitato e autorevole sul Web publishing. Decine di tutorial, centinaia di Javascript, di applet Java, di demo per Dynamic HTML.
</DIV>
 

Attributo text-transform
Questo attributo permette di manipolare le minuscole e le maiuscole del testo grazie a tre parole chiave:

 

  • uppercase: rende maiuscole tutte le lettere dell'elemento:

    <DIV STYLE="font-family:arial; text-transform:uppercase">
    HTML.it e' il sito italiano piu' visitato e autorevole sul Web publishing. Decine di tutorial, centinaia di Javascript, di applet Java, di demo per Dynamic HTML.
    </DIV>


     
  • capitalize: rende maiuscola solo la prima lettera di ogni parola:

    <DIV STYLE="font-family:arial; text-transform:capitalize">
    HTML.it e' il sito italiano piu' visitato e autorevole sul Web publishing. Decine di tutorial, centinaia di Javascript, di applet Java, di demo per Dynamic HTML.
    </DIV>


     
  • lowercase: rende minuscole tutte le lettere dell'elemento:

    <DIV STYLE="font-family:arial; text-transform:lowercase">
    HTML.it e' il sito italiano piu' visitato e autorevole sul Web publishing. Decine di tutorial, centinaia di Javascript, di applet Java, di demo per Dynamic HTML.
    </DIV>
  •  

    Attributo text-align
    Questo attributo ha la funzione di visualizzare il testo in quattro posizioni: left (sinistra), center (centrato), right (destra) e justify (giustificato).

    <DIV STYLE="font-family:arial; text-align: right">
    HTML.it e' il sito italiano piu' visitato e autorevole sul Web publishing. Decine di tutorial, centinaia di Javascript, di applet Java, di demo per Dynamic HTML.
    </DIV>

    Attributo text-indent
    Questo attributo definisce la quantita' di spazio (espressa in valori assoluti em o in pollici) aggiunta immeditamente prima della prima parola.

    <DIV STYLE="font-family:arial; text-indent: 5em">
    HTML.it e' il sito italiano piu' visitato e autorevole sul Web publishing. Decine di tutorial, centinaia di Javascript, di applet Java, di demo per Dynamic HTML.
    </DIV>

    Attributo line-height
    L'attributo line-height definisce la distanza verticale tra le varie linee di testo. I valori sono espressi in percentuali o in unita' assoluti em. Tali valori sono direttamente proporzionali alla grandezza del testo (font-size). Per cui, nell'esempio che segue, essendo il valore assoluto line-height impostato su 2 e il testo su 14px, la distanza sara 28px (14px * 2em).

    <DIV STYLE="font-family:arial; font-size:14px; width:400px; line-height: 2em">
    HTML.it e' il sito italiano piu' visitato e autorevole sul Web publishing. Decine di tutorial, centinaia di Javascript, di applet Java, di demo per Dynamic HTML.
    </DIV>

    Attributo list-style
    La proprieta' list-style consente di sostituire i punti elenco standard di HTML con immagini in formato GIF. E' possibile applicare tali punti a tutto l'elenco o soltanto ad una parte di questo.

    <style type="text/css">
    UL { list-style-image:URL(punto.gif) }
    </style>

    Link senza sottolineatura
    Da sempre i link testuali vengono visualizzati dai browser con una sottolineatura (underline) che ne ribadisce la funzione. Internet Explorer da' la possibilita' di eliminare tale sottolineatura agendo sulle proprieta' del browser. Con i fogli di stile gli svilupattori hanno la possibilita' di eliminare del tutto la sottolineatura attraverso un semplice codice da inserire tra i marcatori BODY del documento:

    <style type="text/css">
    A:link, A:visited { text-decoration: none }
    </style>

    Link sottolineato solo al passaggio del mouse
    L'esempio visto in precedenza puo' essere rielaborato per rendere le pagina piu' accattivante. Fermo restando che i link non abbiano sottolineatura, e' possibile che la ottengano solo quando il mouse vi passa sopra, grazie alle proprieta' A:hover.

    <style type="text/css">
    A:link, A:visited { text-decoration: none }
    A:hover { text-decoration: underline }
    </style>
    In riferimento all'ultimo esempio e' possibile impostare il CSS per l'effetto contrario: i link sono sottolineati di default ma perdono la sottolineatura quando il mouse vi passa sopra:

    <style type="text/css">
    A:link, A:visited { text-decoration: underline }
    A:hover { text-decoration: none }
    </style>

    Link cambiano colore al passaggio del mouse
    Sfruttando ulteriormente la proprieta' A:hover e' possibile creare un effetto mediante il quale i link hanno un colore di default, che cambia quando il mouse vi passa sopra. Il colore puo' essere impostato come parola chiave (red, green, blue ecc.) o come tripletta esadecimale.

    <style type="text/css">
    A:hover { color: red }
    </style>

    Link cambiano colore di sfondo al passaggio del mouse
    Ancora la proprieta' A:hover che di concerto con le proprieta' di definizione del background genera un effetto molto interessante: quando il puntatore del mouse passa sul link, lo stesso si attiva con un colore di testo e di sfondo impostati.

    <style type="text/css">
    A:hover { color: white; background:blue }
    </style>

    Link cambia dimensione al testo quando attivato dal mouse
    Ultimo esempio riguardante A:hover. Questa volta il testo viene ingrandito quando il mouse vi passa sopra.

    <style type="text/css">
    A:link { font-size: 15px }
    A:visited { font-size: 15px }
    A:hover { font-size: 16px }
    </style>

     

    I fogli di stile finora considerati sono incorporati, cioe' posti tra i campi HEAD del documento e riferiti alla totalita' degli elementi presenti nella pagina.
    Esigenze particolari possono richiedere che soltanto per taluni link vengano attivati tali effetti. Se per esempio i link si vogliono sottolineati, tranne un unico elemento della pagina, si usano i fogli di stile in linea in questo modo:

    <A STYLE="text-decoration: none" HREF="http://www.html.it">VISITA HTML.it</A>

    Una buona regola e' quella di rendere omogenei gli effetti sui link per tutti i documenti del sito, adottando un metodo che permette un automatismo in questo senso. La soluzione ideale sono i fogli di stile esterni, all'interno dei quali vanno inseriti gli attributi di stile.