WebLink - Tutto per la costruzione delle tue pagine web.

Visita il mio sito...

WebLink - Tutto per la costruzione delle tue pagine web.

Usare i fogli di stile

(Cascading Style Sheets)

- versione 1.3 - ottobre 2001 -

entra...

© A.Bianchi 1997÷2003

Potete far domande o discutere sull'argomento nel forum dedicato

Versione Guida di Windows a cura di:

Claudio GUCCHIERATO © 2003


WebLink - Tutto per la costruzione delle tue pagine web.- CSS -

Benvenuti su questa mia breve, ma spero esauriente, descrizione dedicata ai fogli di style o CSS. Non ha certo la pretesa di insegnare le molteplici tecniche legate a questo nuovo modo di programmare le pagine web, vuole con tutta semplicità essere qualcosa in più di un'introduzione, per rendere meglio l'idea di cosa siano, come si adoperano e a cosa servono i CSS, visto poi che sempre più siti ne fanno uso.

Una sola raccomandazione: nelle mie spiegazioni, per quanto abbia cercato di renderle più semplici e comprensibili possibile, ho dato per scontato che voi sappiate muovere almeno i primi passi con HTML, per cui se così non fosse molte cose potrebbero risultare incomprensibili, a questo proposito vi rimando alla lettura della mia rubrica primi passi dove sarà possibile apprendere i concetti di base su HTML.

Per tornare ai fogli di style e vedere cosa producono vi basta notare l'impaginazione di questo documento: la giustificazione del testo, i suoi margini dai bordi, i vari rientri a inizio paragrafo, il titolo sotto e la barra di scorrimento laterale colorata, sono soltanto alcune cose fattibili dopo averle definite una sola volta in un foglio di stile esterno. Direi estremamente comodo, o no?

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.

E' persino possibile creare delle vere e proprie animazioni sfruttando l'elevata versatilità offerta dal posizionamento degli oggetti sullo schermo, siano essi grafici o no, posizionamento che è possibile fare con accurata precisione.

Come tutte le cose di questo mondo, vanno create, per cui scegliete voi come: vi procurate un editor di CSS specifico, oppure potete adoperare lo stesso editor che usate per le vostre pagine html. Anche in questo caso, così come per html, il notepad o wordpad a corredo di windows andranno benissimo.

Vorrei ripetere che per l'uso di questa tecnica si deve necessariamente conoscere html, essendo di fatto i fogli di style un'estensione di html stesso, per cui senza le conoscenza di base non sarebbe possibile capire il loro utilizzo.

Tanto per rendere un po' meglio l'idea, non si limitano a giustificare il testo o a stabilirne i rientri. Pensate alle dimensioni dei caratteri dove non esistono più limiti. Parlando di immagini queste possono essere sovrapposte come se si trattasse di piani, ad ognuno è possibile assegnare una diversa priorità di visualizzazione per cui le possibilità offerte sono davvero notevoli. Insomma avrete certamente capito che se non ci fossero stati andavano inventati :-).

Da non sottovalutare neppure l'aspetto pratico legato al risparmio di tempo e di energie in fase di stesura e modifiche, provate ad immaginare un sito composto da decine (a volte centinaia) di pagine e che queste facciano tutte riferimento ad un unico foglio di stile, sarà sufficiente una modifica a quel solo foglio per vedere immediatamente modificate tutte le pagine che lo richiamano.

C'è da chiedersi perchè mai un sistema che a prima vista offre solo vantaggi, stenti ad avere il successo che meriterebbe; anche se, come ho detto all'inizio ormai sempre più webdesigner ne fanno uso. L'unica possibile spiegazione che ho trovato è quella che non tutti i browser li supportano, non allo stesso modo almeno, fra alcuni di questi ci sono differenze a volte davvero sorprendenti tali da scoraggiare chi ha deciso di farne uso, specie poi se non del tutto convinto :-))

Ultimamente però le cose stanno cambiando, forse il dominio quasi assoluto del browser IE ha fatto venire meno certi scrupoli di compatibilità con gli altri browser, incentivandone l'uso anche da parte dei meno convinti.

Finita questa lunga ma doverosa premessa, credo si possa passare al lato pratico per capire finalmente come si adoperano.

Per prima cosa 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 links, dipende soltanto dalle combinazioni che se ne vorrà fare.

Fondamentalmente sono tre i modi di usare i css, quale sia il migliore dipende soltanto da voi, dalla vostra organizzazione mentale, dalle vostre reali esigenze:

1. Direttamente In linea
2. Ad inizio pagina a stile incorporato
3. Nel collegamento ad un foglio di stile esterno

Continua: la Sintassi


CSS - sintassi

La sintassi Abbiamo detto che 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 che apporteranno le dovute modifiche agli elementi di html definiti. La dichiarazione di style deve essere collocata all'interno dei tags <head> e </head> della pagina web, unica eccezione per le definizioni direttamente in linea.

Fondamentalmente sono tre i modi di usare i css, quale sia il migliore lo lascio decidere a voi visto che dipende soltanto da voi, dal vostro modo di organizzarvi e dalle vostre reali esigenze:

1. Direttamente In linea
2. Ad inizio pagina a stile incorporato
3. Nel collegamento ad un foglio di stile esterno

Ognuno di questi tre possibili modi differisce leggermente dall'altro, lo vedremo più avanti quando li analizzeremo uno per uno.

Le regole comuni sono invece quelle che 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.

Vediamo un possibile style. 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 esattamente come quello che state vedendo in questa pagina.

{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 123 e 125, praticamente tenendo premuto il tasto ALT sinistro, si digiti dal tastierino numerico il relativo numero, senza rilasciare il tasto ALT se non a fine digitazione... spero di essermi spiegato :-))

Per conoscere quali siano gli attributi e i relativi parametri possibili, vi rimando alle voci del menù laterale gli attributi di stile e i parametri dove è possibile vedere un'ampia panoramica, più o meno completa, di quelli che sono i più comuni e di conseguenza i più adoperati.

Abbiamo detto che uno stile può essere associato ad un elemento valido di html, per cui se associamo il nostro stile all'elemento <body> sarà come aver definito uno style per tutta la pagina web, essendo infatti body in html l'elemento che comprende tutta la pagina. Alcuni esempi di possibili stili:

body {font-size : 10pt; color : #000099;}
B {font-size : 12pt; color : #ff0000;}
I {font-size : 8pt; font-style : italic;}

Vediamo i tre esempi sopra, il primo: body ha un font formato da 10 punti e di colore blu scuro per cui tutto il testo all'interno di quella pagina seguirà questo stile perchè l'elemento html body si riferisce a tutto il documento html. Un po' quello che ho fatto io con questa pagina.

B ( bold in html) invece, aumenta il font di 2 punti rispetto a quello definito in body così da evidenziarlo maggiormente e in più ne cambia anche il colore passando dal blu al rosso.

I ( Italico in html ) mantiene lo stile Italic ma ne riduce il font di due punti rispetto a quello standard definito nel body.

Se avete capito il meccanismo, se vi risulta tutto quanto chiaro, non resta che vedere meglio come associare lo stile ai vari elementi html e per fare questo vi ricordo che i metodi sono tre. Iniziamo dal primo, forse il più semplice ed immediato, quello in linea.

Continua: Style in linea


CSS - in linea

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.

Per esempio un paragrafo <p> che debba avere determinate caratteristiche ma con la certezza che queste non siano estese a tutti gli altri paragrafi <p> contenuti all'interno dello stesso documento.

Per riprendere lo stile dell'esempio precedente, abbiamo detto di volere una leggera indentazione con testo giustificato, essendo questa scelta voluta per un solo paragrafo, il modo più comodo e rapido è quello di associare lo stile al solo elemento <p> interessato.

Questo esempio pratico chiarirà sicuramente meglio:

<p style="text-align : justify; text-indent : 12px;">

Tutto ciò che sarà scritto tra l'elemento di apertura <p style= ..... > (paragrafo) e fino al suo elemento di chiusura </p> avrà come stile: giustificato con una indentazione di 12 pixel;

Si possono combinare fra di loro più stili, la sintassi corretta prevede di racchiudere il tutto fra doppi apici separando i vari attributi di stile con il punto e virgola.

I più attenti si saranno accorti e resi conto dell'importanza di fare uso dell'elemento (tag) di chiusura, in questo caso </p> che mentre per HTML non era indispensabile, lo diventa invece nel caso dei CSS. La chiusura di questo elemento infatti determina anche la chiusura e quindi la fine dello stile, per cui meglio prendere la sana abitudine di chiudere sempre l'elemento (tag) aperto.

Si noti come lo stile sia stato associato all'elemento <p>, semplicemente avendo introdotto lo stile all'interno delle sue stesse parentesi angolari <> allo stesso identico modo avrebbe potuto essere associato a qualsiasi altro elemento valido di HTML. Ne consegue la facile possibilità di personalizzare tutti gli elementi di html, anche quelli che non piacciono o servono a poco e magari proprio per questo non vengono mai adoperati. Con i CSS si adopera di solito due elementi di html che non hanno altro scopo se non quello di fare da contenitore, questi due elementi infatti non producono alcun effetto se adoperati da soli ma ad essi è possibile associare tutti vari styli, e sono rispettivamente <div></div> e <span></span>

Per cui avrei potuto ottenere la stessa cosa nidificando un contenitore all'interno dell'elemento P a questo modo:

<div style="text-align : justify; text-indent : 12px;"><p>
tutto il testo del paragrafo
</p></div>

Continua: Style incorporato nella pagina


CSS - pagina

A style incorporato Cioè quando allo stesso stile fanno riferimento diversi elementi (tags) html. Sarebbe infatti estremamente dispersivo, oltre che laborioso, definire lo stesso stile più volte all'interno della stessa pagina quando poi servirebbe 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.

In questo caso le istruzioni non saranno più inserite all'interno del singolo elemento (tag), ma ad inizio pagina dichiarate dagli elementi (tags) <style> e </style> posti all'interno della sezione <head> </head>

Questo metodo non impedisce però di fare uso anche di eventuali definizioni di stile in linea, le quali avrebbero priorità sulle dichiarazioni di stile inserite ad inizio pagina.

Da notare che in questo modo si renderanno necessarie le parentesi graffe che delimitano il blocco di istruzioni relativo all'elemento interessato.

Facendo riferimento all'esempio precedente:

<style type="text/css">
<!--
p {
text-align : justify;
text-indent : 12px;
}
-->
</style>

Adesso tutto ciò che si troverà all'interno di qualsiasi paragrafo definito con la consueta forma <p></p> subirà lo stile impostato a inizio pagina, a meno che non ne venga creato uno in linea il quale, come ho detto sopra, avrebbe la priorità rispetto all'altro.

Per questo motivo, e lo ripeto ancora una volta, diventa importantissimo non dimenticare mai di chiudere l'elemento che si era aperto, anche nei casi in cui si trattasse di elementi come <p> che in html non necessiterebbero della relativa chiusura </p>.

In questo contesto sono proprio loro, i tags chiusi, a decretare la fine dello style oltre che quella del paragrafo. Dimenticarli potrebbe voler dire indurre il browser ad estendere i parametri dello style a tutto il resto del documento.

Tornando al codice dell'esempio, i due elementi <!-- e --> posti ad inizio e fine blocco, sono gli stessi adoperati in html e servono a far ignorare lo style a tutti quei browser che non dovessero supportarli. Questi elementi infatti così come in html hanno significato di commento, servono cioè soltanto come note, etichette, senza influenzare in alcun modo il browser.

Nell'esempio è stato adoperato l'elemento (tag) <p> ma avrete sicuramente capito che potevamo usare qualsiasi altro elemento valido di html.

Anzi, visto che è possibile, perchè non ridefinire elementi quali <h1>, <h2>, <h3>, ecc. ecc. che di solito non vengono mai adoperati? (almeno questo quanto succede a me).

Così facendo sarebbe come avere a disposizione dei nuovi comandi, o meglio dei nuovi elementi con in più il fatto di averli personalizzati per sfruttarli ancora meglio.

Anche se a dire il vero non ce ne sarebbe alcun bisogno dal momento che con la creazione di "classi", che vedremo più avanti, non esistono limiti al numero di elementi definibili dall'utente, ma era comunque importante sapere che si sarebbe potuto fare anche un'operazione di questo genere.

Continua: Foglio di Style Esterno


CSS - esterno

Foglio di style esterno Abbiamo visto come definire uno stile in linea quando magari serve una veloce particolarità delimitata ad una sola zona del nostro documento.

Abbiamo visto anche come definire invece uno stile ad inizio pagina al quale tutto il documento poteva fare riferimento ed uso.

Vediamo adesso quello che secondo me è il più comodo e pratico dei sistemi, quello in cui esiste un foglio esterno separato dal documento, e nel quale scrivere tutti gli stili che necessitano comprese le classi e gli eventuali id.

Anche nel caso in cui decidessimo di fare uso di un foglio di style esterno, sarà possibile definire all'occorrenza stili ad inizio pagina o stili in linea e questi avrebbero la precedenza sul nostro foglio esterno.

Cosa significa foglio di stile esterno ?

Significa che 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 style, un documento di testo normalissimo ma con estensione finale .css dove al suo interno saranno contenute tutte le dichiarazioni valide per un foglio di style adoperando le stesse regole sintattiche viste per il foglio incorporato a inizio pagina.

Proviamo ad immaginare i vantaggi, pensate di dover fare una modifica all'intero sito, magari semplicemente per cambiare un tipo di font che non vi piace più, o sostituire un colore con un altro, sarà sufficiente apportare la modifica una sola volta a quel singolo foglio per vedere poi immediatamente su tutte le pagine il risultato della modifica.

Comodo vero? Sono finiti (finalmente) i tempi in cui si passavano ore ed ore a rielaborare tutte le pagine dove poi immancabilmente se ne dimenticava sempre qualcuna.

Per creare questo foglio esterno, sarà sufficiente ancora una volta un editor, lo stesso che adoperate per html, meglio ancora se uno specifico per css, vi ricordo comunque che il wordpad o notepad a corredo di windows andranno benissimo, l'importante sarà salvare sempre in formato ascii cioè privo di particolari formattazioni, avendo cura di fare in modo che il file così salvato sia di tipo css e non txt come normalmente avviene.

Esaminiamo più attentamente il nostro foglio esterno:

p	{
    text-align: justify;
    text-indent: 12px;
     }

si noterà che praticamente è lo stesso usato nello "style incorporato" con la sola differenza che non ha più gli elementi iniziali che ne dichiaravano lo stile, questo perchè essendo un foglio esterno la dichiarazione viene messa nel documento HTML che lo richiama, facendo uso delle seguente sintassi:

<link rel=stylesheet href="nome_assegnato.css" type="text/css">

Avendo cura di posizionare questa riga di richiamo fra gli elementi (tags) <head> e </head> del file html, dove nome_assegnato.css sarà il nome esatto che avrete deciso di assegnare al file stesso.

Ovviamente questa riga deve essere inserita in tutte le pagine web che fanno riferimento al foglio di style così creato.

un foglio di style esterno tipo potrebbe essere questo:

BODY{
    margin-left : .5cm;
    margin-right : .5cm;
    color : #000099;
    font-family : Verdana,Arial,Helvetica;
    font-size : 10pt;
    }

A:LINK{
    text-decoration : none;
    color : #009900 ;
      }

A:VISITED{
    text-decoration : none;
    color : Gray;
         }

A:HOVER{
    Color : #ffff00;
    text-decoration : none;
       }

TD{
    font-family : "MS Sans Serif";
    font-size : 12pt;
  }

p{
    text-align: justify;
    text-indent: 12px;
 }

Vediamo cosa ridefinisce, tanto per capire meglio e cominciare a famigliarizzare con le varie sigle:

body tutto quello dichiarato all'interno di questo elemento sarà esteso a tutto il documento, per cui tutta la pagina web farà uso del font verdana, nel caso in cui questo non fosse installato nel PC del visitatore si cercherà di fare uso di Arial, se anche questo dovesse mancare allora Helvetica, dopo di che sarà assunto il font di default =
font-family : Verdana,Arial,Helvetica;

Margine laterale dai bordi destro e sinistro: 0,5cm =
margin-left : .5cm; margin-right : .5cm;

Colore del testo: blu scuro =
color : #000099;

Dimensione del font: 10 punti =
font-size : 10pt;

Link da visitare: non sottolineati di colore verde =
A:LINK{text-decoration : none; color : #009900;}

Link visitati: non sottolineati di colore grigio =
A:VISITED{text-decoration : none; color : Gray;}

Cambio colore al passaggio del mouse: non sottolineati di colore grigio =
A:HOVER{text-decoration :none; Color : #ffff00;}

Tabelle: font Ms Sans Serif dimensione 12 punti=
TD{font-family : "MS Sans Serif";font-size : 12pt;}

Paragrafo: allineamento giustificato, indentizione 12 pixel=
p{text-align: justify;text-indent: 12px;}

Continua: Le Classi


CSS - classi

Le classi Se abbiamo optato per un foglio di style, esterno o interno che sia, non è detto che dobbiamo necessariamente ridefinire tutti o alcuni elementi (tags) di Html, anzi, lasciamoli stare così come sono e creiamone di nuovi facendo uso delle classi, un sistema molto più comodo e pratico, ve lo assicuro; visto poi che se ne possono creare quante e quelle che ci pare, così facendo si sfrutteranno al meglio le potenzialità dei CSS (fogli di style).

E' infatti possibile definire con estrema semplicità delle proprie classi di stile, saranno queste ad essere richiamate dall'interno dei vari elementi html. Pensate al fatto che lo stesso elemento potrebbe richiamare quando una classe, quando un'altra, come dire: si ottengono dallo stesso elemento risultati completamente diversi a seconda di quale classe viene ad esso associata.

Esempio: Definiamo una classe, per farlo è sufficiente editare un nome preceduto da un punto, quale nome? Non ha importanza, decidetelo voi, 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 qualcosa che serva per la nostra firma, quella che di solito si mette a fine pagina. Creeremo una classe col nome firma che faccia uso di un font piccolo 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 style, posizionandoci fuori da eventuali parentesi graffe, possiamo descrivere la nostra classe firma, assegnandole i vari attributi:

.firma {
font-family : Verdana,Arial,Helvetica;
      color : #ff0000;
  font-size : 10pt;
 text-align : center;
font-weight : lighter;
 font-style : italic;
       }

Da notare che fra il . (punto) iniziale e la scritta firma non ci sono spazi. Vediamo cosa fanno le singole voci inserite in questa nuova classe firma:

font-family : Verdana,Arial,Helvetica;

significa che adopererà il font verdana (il primo dichiarato), se questo non fosse installato sul PC del visitatore si cercherà Arial (il secondo dichiarato), nel caso mancasse anche quello si passerà a Helvetica; si possono specificare fino a tre fonts alternativi, nel caso in cui nessuno dei tre fosse installato, verrà visualizzato quello standard di default.

color : #ff0000;

Colore rosso, si possono esprimere i colori in formato esadecimale, come in questo caso, facendoli precedere dal segno pound # (cancelletto), oppure scrivendo il relativo nome del colore in lingua inglese. Anche red avrebbe prodotto lo stesso risultato.

font-size : 10pt;

Dimensioni del font: 10 punti, potevamo esprimere il valore anche in pixel o in centimetri o anche in altri modi che vedremo in seguito. In pixel forse è addirittura meglio che in punti perchè si adatterà perfettamente alla risoluzione video qualunque essa sia. Da notare che non ci sono limiti alle dimensioni come accadeva per il font max 7 di html.

text-align : center;

Allineamento del testo, in questo caso centrato, si poteva scegliere fra destro, sinistro o giustificato; adoperando i relativi termini in lingua inglese: left, right, justify.

font-weight : lighter;

Consistenza del font, lighter; leggera, potevamo adoperare: normal, bolder, bold o anche numeri: 400, 500 ecc. ecc.

font-style : italic;

Stile Italico, avevamo a disposizione anche :normal, oblique.

E adesso ? Adesso la classe è pronta, non resta che richiamarla ogni volta che serve... Come ?

Semplice, ogni elemento (tag) di HTML supporta l'attributo class, quindi dovendo scrivere una parte di testo e volendo che questa parte faccia uso degli attributi appena inseriti nella classe firma, basterà assegnare "firma" 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>

Avrete certamente capito che a questo punto l'elemento html altro non è che un contenitore, per cui potremo continuare ad usare <p> con classi diverse ed avere così paragrafi formattati in modo completamente diverso, basterà semplicemente cambiare il nome della classe facendogli richiamare una classe creata precedentemente. Da questo modo di lavorare la vera versatilità e potenza svolta dai fogli di style.

Un esempio chiarirà molto meglio tutto quanto:

<p class="firma">questo testo rispetta gli attributi della classe firma </p>

Questo il risultato:

questo testo rispetta gli attributi della classe firma

Si possono addirittura combinare le classi nidificandole al loro interno grazie ai contenitori quali <span> </span>, la cosa però non sempre è fattibile e si raccomanda una certa dimestichezza onde evitare pasticci indecifrabili.

Vi sarete resi conto che non è poi così difficile, possiamo creare tutte le classi che ci servono e battezzarle con i nomi che vogliamo per poi assegnare loro i parametri più svariati. Se all'interno del vostro sito, fatto di una o di cento pagine html, vi fosse anche una sola piccola parte di testo che non vi convince, sarà sufficiente assegnargli la giusta classe o crearne una ad ok che faccia al caso vostro.

Continua: I selettori ID


CSS - ID

I selettori ID (Identificatori) Un selettore ID o identificatore, svolge funzione di etichetta di un contenitore, si possono cioè assegnare dei parametri e marcarli con un ID così che quando serviranno quei parametri, basterà richiamare il nome del selettore (ID) e con lui saranno richiamati tutti i valori ad esso associati, valori specificati una sola volta nel foglio di style interno o esterno che sia.

L'uso degli ID, così come quello delle classi, può essere associato a qualsiasi elemento valido di HTML anche se di norma lo si adopera con l'elemento <DIV> Questo elemento (div) di per se non avrebbe molto significato, almeno non in HTML, viene invece di solito adoperato proprio con i CSS, specialmente per la gestione delle immagini e dei blocchi di testo.

Il suo uso rende il codice più pulito e comprensibile in quanto con il solo nome dell'identificatore è possibile richiamare tutti gli attributi ad esso associati, anche nel caso in cui siano molti.

Ancora una volta un esempio chiarirà meglio di qualsiasi discorso:

Esempio: Definiamo un ID, per farlo è sufficiente assegnare un nome, nel nostro esempio: weblink, preceduto dal simbolo # pound (cancelletto) all'interno di uno style, per cui:

<style type="text/css">
<!--

#weblink {

/* elenco parametri, nel nostro esempio: */

font-family : Verdana,Arial,Helvetica;
      color : #ff0000;
  font-size : 10pt;
 text-align : center;
font-weight : lighter;
 font-style : italic;

       }
-->
</style>

A prima vista si direbbe identico ad una classe, e infatti è molto simile, io aggiungerei che è forse più limitato di una classe, in quanto un selettore ID può essere adoperato una volta soltanto all'interno di un documento, mentre una classe non ha praticamente alcun limite.

La cosa positiva è che si possono combinare classi e selettori ID, per cui evviva l'abbondanza che sarà sfruttata dall'estro di ognuno di noi.

Per tornare al nostro esempio, abbiamo inserito gli stessi attributi usati per la classe firma, (vedi le classi dal menù laterale) per cui otterremo lo stesso identico risultato:

questo testo è contenuto all'interno degli elementi DIV con ID="weblink"

facendo uso della seguente sintassi :
<div id="weblink"> questo testo ecc.ecc</div>

che non differisce molto da quella usata per le classi :
<div class="weblink"> questo testo ecc.ecc</div>

Se vi ricordate infatti la classe firma produceva proprio questo risultato.

Abbiamo però detto che l'uso di ID è di solito lasciato al posizionamento gli oggetti grafici, non che non sia possibile anche in altro modo, anzi a dire il vero io preferisco l'uso diretto all'interno dell'elemento DIV, ma lo vedremo parlando di grafica per il momento non vorrei confondervi le idee, per cui vediamo come fare con l'uso di ID, sarete poi voi a decidere quale potrebbe essere il sistema migliore per voi.

Immaginiamo di voler posizionare un'immagine diciamo a 50 pixel dal bordo superiore e 40 pixel dal margine laterale sinistro. Nel nostro esempio impostiamo i riferimenti a questi due parametri facendo uso di posizioni assolute e cioè:

<style type="text/css">
<!--

#weblink2 {

position : absolute;
     top : 50 px;
    left : 20 px;
  zindex : 1;
       }
-->
</style>

Adesso non resta che inserire la nostra immagine, o anche del testo, all'interno dell'elemento <DIV> associare a questo contenitore il selettore ID "Weblink2" così da vedere il contenuto di DIV posizionato a 50 pixel dal bordo superiore e a 20 pixel da quello laterale sinistro con una priorità di visualizzazione uguale a 1.

Ancora una volta capirete meglio il significato di queste sigle più avanti, quando saranno spiegate in modo più accurato, per il momento è sufficiente capire il meccanismo, per cui la sintassi corretta in html è questa:

<div id="weblink2"> ciao </div>

ciao

Se avete capito come funziona avrete anche capito che il mio ciao si trova a 50 pixel dal bordo superiore e a 20 pixel dal bordo laterale sinistro, per cui andate ad inizio pagina, fate bene attenzione a quella zona e potrete notare la piccola scritta ciao, notate anche che questa si trova sopra all'immagine, un posizionamento impossibile con HTML ma reso estremamente semplice e preciso dall'uso dei CSS.

Continua: Gli Oggetti


CSS - oggetti

Grafica, posizionare gli oggetti Se avete letto la parte dedicata ai selettori ID vi sarete resi conto che i CSS non servono solo per assegnare stili al testo ma sono quanto di meglio si potesse avere anche per il posizionamento degli oggetti sulla propria pagina web. Per oggetti si intende tutto quello che fa parte di una pagina: immagini, testo, tabelle, forms e qualsiasi altra cosa venga racchiusa in un contenitore virtuale, di solito l'elemento (tag) html <DIV>.

I metodi per creare questi contenitori virtuali ancora una volta sono diversi, per cui ognuno di voi adopererà quello che meglio preferisce, a prima vista sembrerebbe più semplice fare uso di un selettore ID che contenga la posizione del contenitore e associare poi il nome del selettore al contenitore stesso, ma è anche vero che un risultato identico lo si avrebbe specificando in linea lo style, assegnando cioè all'elemento interessato i vari parametri di posizionamento in modo diretto.

Vi ricordate le classi ?
Si creava una classe perchè questa poteva essere richiamata da più parti, adesso invece trattandosi di immagini a dover essere posizionate, non servirebbe a molto usare una classe in quanto se venisse richiamata da più di un oggetto, questi si sovrapporrebbero dando origine a qualcosa simile ad un pasticcio grafico.

Questa (forse) la spiegazione al fatto che un selettore ID può essere adoperato una sola volta all'interno della stessa pagina web.

Questo fatto non credo si possa vedere come una limitazione, anzi credo sia a garanzia che non vengano commessi errori in questo senso, e poi è tutto a vantaggio di maggiore versatilità, visto che si possono richiamare classi e ID dallo stesso unico contenitore, anche se è meglio sperimentare questa cosa solo dopo aver acquisito una certa esperienza e quindi maggiore familiarità. :-)

Adesso, che si crei un selettore ID con questi parametri:

<style type="text/css">
<!--
#weblink {
position : absolute;
     top : 1300 px;
    left : 50 px;
  zindex : 1;
       }
 -->
</style>

E poi lo si richiami dell'elemento (tag) HTML <div> :

<DIV ID="weblink;">nome dell'immagine</div>

Oppure, che si adoperino gli stessi parametri in linea e cioè direttamente associati all'elemento (tag) HTML <div>:

<DIV STYLE="position : absolute; left : 50px; z-index : 1 ; top : 1300px;">nome dell'immagine</div>

il risultato sarà perfettamente identico, entrambi infatti visualizzeranno quello che si troverà contenuto all'interno degli elementi <div></div> rispettando tutti gli attributi di stile impostati, per cui se abbiamo inserito un'immagine, quale potrebbe essere questa: WebLink la stessa sarà posizionata a partire da 1300 pixel dal bordo superiore e 50 pixel dal bordo laterale sinistro con uno z-index, cioè un livello di profondità, uguale a 1. Provate a portarvi in quella zona, dovreste trovare la stessa immagine ma con una notevole differenza: il testo si troverà sopra all'immagine, questo effetto è reso possibile oltre che dal posizionamento assoluto anche da z-index che ne stabilisce il livello di visualizzazione. In HTML invece avremo potuto soltanto girargli intorno: a destra, a sinistra o al centro, proprio come in questo caso.

Questo testo non serve a nulla se non a far vedere l'effetto con le immagini che ci sono sopra una si trova sopra il testo mentre l'altra si trova sotto creando così una visualizzazione a piani che nulla ha a che vedere con i layer supportati dai soli browser NS, questo sistema viene visto da entrami i browser quindi IE e NS. Questo testo non serve a nulla se non a far vedere l'effetto con le immagini che ci sono sopra una si trova sopra il testo mentre l'altra si trova sotto creando così una visualizzazione a piani che nulla ha a che vedere con i layer supportati dai soli browser NS, questo sistema viene visto da entrami i browser quindi IE e NS.Questo testo non serve a nulla se non a far vedere l'effetto con le immagini che ci sono sopra una si trova sopra il testo mentre l'altra si trova sotto creando così una visualizzazione a piani che nulla ha a che vedere con i layer supportati dai soli browser NS, questo sistema viene visto da entrami i browser quindi IE e NS.Questo testo non serve a nulla se non a far vedere l'effetto con le immagini che ci sono sopra una si trova sopra il testo mentre l'altra si trova sotto creando così una visualizzazione a piani che nulla ha a che vedere con i layer supportati dai soli browser NS, questo sistema viene visto da entrami i browser quindi IE e NS.Questo testo non serve a nulla se non a far vedere l'effetto con le immagini che ci sono sopra una si trova sopra il testo mentre l'altra si trova sotto creando così una visualizzazione a piani che nulla ha a che vedere con i layer supportati dai soli browser NS, questo sistema viene visto da entrami i browser quindi IE e NS.
WebLink
WebLink

A questo punto ogni altro esempio sarebbe superfluo, è fin troppo evidente quale potenzialità si possa avere dall'utilizzo di questa tecnica. Immagini trasparenti potrebbero essere sovrapposte totalmente o parzialmente, dipende soltanto da voi, gli eventi poi di un linguaggio di script quale JavaScript potrebbero nascondere o scoprire questi contenitori dando vita a delle pagine dinamiche, cioè vive! che cambiano a seconda di quello che fa il visitatore, da qui il nome DHTML; per cui è grazie alla combinazione di questi due sistemi ( CSS e JavaScript) che sono praticamente caduti tutti quei limiti che html poteva avere, adesso è tutto più solido e alla base resta proprio il buon "vecchio" html che a quanto pare regge, ed io dico che regge anche molto saldamente :-))

Provate a cliccare su questo link, un evento di JavaScript risponderà alla vostra interazione.

CSS
fai sparire questa immagine, basta un click

Come spesso accade però non è tutto oro quello che luccica, così anche per questa tecnica che apparentemente sembrerebbe offrire soltanto vantaggi; esistono invece alcuni problemi, specie nel caso in cui si combinassero dei posizionamenti assoluti combinati a testo e immagini in html normale. Il problema infatti nascerebbe a seconda della risoluzione video del visitatore il quale potrebbe vedere in modo molto diverso da ciò che ci eravamo prefissati.

Provate infatti ad immaginare un'immagine a 1300 pixel dal bordo superiore, questa essendo una misura fissa sarà sempre rispettata, è quello che gli si trova al suo fianco o al di sotto che molto probabilmente si sposterà a seconda delle impostazioni video del nostro visitatore. E non dipende soltanto dalla risoluzione video, ma anche se la navigazione avviene a tutto schermo o in una finestrella ristretta.

Ho volutamente riportato l'esempio sopra, quello delle due immagini affiancate, ho lasciato sotto di esse del normalissimo testo contenuto in una tabella html, tutto questo proprio per permettervi di notare cosa accade se allargate o restringete la finestra del browser.

Fate dunque attenzione quando adoperate i posizionamenti assoluti.

Continua: I links


CSS - link

I links Abbiamo visto come i CSS siano in grado di cambiare attributi al testo. Come e con quale facilità sia possibile posizionare con estrema precisione oggetti grafici e testuali. Esiste però anche un'altra novità introdotta dai CSS, riguarda la gestione dei links.

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.

Risultato: sono un link non sottolineato e di colore verde Provate a passarci sopra col puntatore del mouse... non succede nulla?

Dimenticavo di dirvi che HOVER, quello che cambia colore, non è riconosciuto da tutti i browser, NetScape per esempio è uno di questi, per cui soltanto gli utenti Microsoft Internet Explorer potranno vederlo.

Non vi piace il colore rosso?

Sostituite red con qualsiasi altro nome valido di un colore, oppure allo stesso modo divertitevi a cambiare il colore dei link visitati e/o di quelli da visitare. I colori possono essere espressi anche con il relativo codice easadecimale preceduto dal simbolo # pound (cancelletto) vedi anche la sez. dedicata ai parametri.

Il rosso per esempio equivale a #ff0000, dove le sei cifre vanno viste come tre coppie ben distinte di valori esadecimali ed esprimono i colori nella formula RGB, (rosso - verde - blu) dove i valori ammessi sono rappresentati da 00 ~ ff in notazione esadecimale per ogni coppia di numeri. Per cui ff = 16 x 16 = 256 (max valore ottenibile), da qui: ff ff ff = 256 x 256 x 256 = 16,7 Mil di colori.

Avete capito bene; 16,7 Milioni di colori, tutti quelli che la vostra scheda video è in grado di visualizzare comprese le relative sfumature.

Anche per i links una volta capito il meccanismo si potranno combinare i vari attributi fino a creare degli effetti di notevole impatto, il tutto con estrema semplicità e senza ricorrere a programmazione avanzata. Ecco un altro esempio:

<style type="text/css">
<!--

A:LINK    {text-decoration : none; font-size : 10 pt;}
A:VISITED {text-decoration : none; Color : green; font-size : 10 pt;}
A:HOVER   {Color : red; font-size : 12 pt;}

-->
</style>

Risultato: sono un link non sottolineato e di colore verde Se provate a passarci sopra col puntatore del mouse, il font passerà dai 10pt (punti) del link da visitare ai 12 pt del link HOVER, in questo modo avrete dato vita ad una vera e propria animazione. Notate che tutto il testo viene spostato per fare posto al font di dimensioni maggiori.

Continua: Gli Attributi di style


CSS - attributi

Gli attributi per gli styli Sono davvero molti i possibili attributi, non credo che riuscirei a descriverli tutti, alcuni poi sono così strani e rari che non so neppure se sia il caso di citarli, altri invece sono supportati da un solo browser per cui parleremo soltanto di quelli che si adoperano con una certa frequenza e che funzionano sia con IE che con NS a partire dalle rispettive versioni 4.0.

Prima di passare in rassegna le categorie di attributi è meglio ricordare la loro sintassi, e questo qualunque sia il modo che deciderete di usare.

Abbiamo detto che gli attributi devono essere inseriti all'interno di parentesi graffe { } e 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.

Per i parametri ad essi associabili fare riferimento a questa tabellina.

Attributi per il colore e lo sfondo. | Attributi per i caratteri.
Attributi per il testo. | Attributi per la posizione.

Continua: Parametri


CSS - attributi testo

Gli attributi per il testo

Prima di passare in rassegna le categorie di attributi vorrei ricordare la loro sintassi per poterli adoperare, e questo qualunque sia il modo che deciderete di usare.

Gli attributi devono essere inseriti all'interno di parentesi graffe { } e 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.

Per i parametri ad essi associabili fare riferimento a questa tabellina.

Passiamo in rassegna gli attributi del testo:

text-align : center | left | right | justify ;

Allineamento del testo, valori possibili : centrato , sinistra, destra , giustificato. Meglio evitare se possibile il giustificato in quanto produce effetti diversi nei due browser.

P    {text-align: center;}
DIV  {text-align: left;}

text-align: center

text-align: left

text-align: right

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. NS non supporta underline. None lo si adopera in particolar modo con i link in quanto toglie la fastidiosa sottolineatura che altrimenti avrebbero per default.

P    {text-decoration: none;}
h1   {text-decoration: underline;}

text-decoration:overline sopralineato

text-decoration:none nessuno

text-decoration:underline sottolineato

text-decoration:line-through sbarrato

text-decoration:overline underline entrambi sopralineato e sottolineato.

text-indent : lunghezza | percentuale ;

Rientro della prima riga di un blocco. E' possibile fare uso anche di numeri negativi per un rientro esterno.

P    {text-indent: 12px;}
DIV  {text-indent: 20%;}

text-indent : -5px
text-indent : 15px

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.

P    {text-transform: lowercase;}
h2   {text-transform: capitalize;}

text transform: lowercase
text transform: uppercase
text trasform: capitalize

line-height : normal | numero | lunghezza | percentuale ;

Altezza della riga del testo, valori possibili : normal , numero , lunghezza , percentuale. Con il valore normal il testo non avrà alcuna variazione.

P    {line-height: 3em;}
DIV  {line-height: 50%;}

line-height: 3em
line-height: 50%

letter-spacing : numero ;

Spazio fra le lettere che compongono il testo. il numero puo essere espresso in tutti i modi possibili come riportato alla tabella parametri.

P    {letter-spacing: 1em;}
DIV  {letter-spacing: 2px;}

letter-spacing: 1em
letter-spacing: 2px

vertical-align : baseline | sub | super | top | middle | bottom | text-top | text-bottom ;

Allineamento verticale del testo rispetto ad un riferimento assoluto o all'elemento che lo include.

P    {vertical-align: middle;}
DIV  {vertical-align: top;}
SUB  {vertical-align: 60%;}

vertical-align: baseline rispetto all'immagine di lato.

vertical-align: sub rispetto all'immagine di lato.

vertical-align: super rispetto all'immagine di lato.

vertical-align: top rispetto all'immagine di lato.

Continua: Attributi per il carattere


CSS - attributi font

Gli attributi per il font (carattere)

Prima di passare in rassegna le categorie di attributi vorrei ricordare la loro sintassi per poterli adoperare, e questo qualunque sia il modo che deciderete di usare.

Gli attributi devono essere inseriti all'interno di parentesi graffe { } e 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.

Per i parametri ad essi associabili fare riferimento a questa tabellina.

Passiamo in rassegna gli 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.

Le famiglie si separano da uno spazio vuoto o da una virgola e nel caso in cui il nome della famiglia fosse composto da più di una sola parola, per esempio: MS Sans Serif, questo dovrà essere racchiuso fra virgolete (doppie o singole) "MS Sans Serif".

P    {font-family: verdana,arial,geneva;}
DIV  {font-family: "MS Sans Serif", verdana, arial;}
B    {font-family: "MS Sans Serif" verdana arial;}

font-family: 'MS Serif', 'New York', serif;
font-family: verdana, arial;

font-size : lunghezza | dim. assoluta | dim. relativa | percentuale ;

Si possono esprimere le dimensioni del font facendi riferimento a uno dei quattro possibili attributi, vedi anche tabellina parametri.

Di solito si adoperano i punti (pt), ma qualsiasi altro parametro andrà sintatticamente bene.

P    {font-size: 12pt;}
I    {font-size: larger;}
B    {font-size: 22mm;}
H1   {font-size: 150%;}

font-size: 12pt
font-size: 150%

font-style : normal | italic | oblique;

Si puo eseguire il rendering dei caratteri in corsivo.

P    {font-style: italic;}
H1   {font-style: normal;}

font-style: italic;
font-style: normal

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.

P    {font-variant: small-caps;}
H1   {font-variant: normal;}

font-variant: small-caps;
font-variant: normal

font-weight : bold | bolder | lighter | normal;

Per impostare lo spessore del testo. Oltre ai parametri sopra è possibile introdurre anche un numero da 100 a 900 con incremanti di 100, e soltanto a partire dal valore 700 si avvertirà l'effetto grassetto.

P    {font-weight: bold;}
H1   {font-weight: 700;}

font-weight: bold;
font-weight: lighter;

Continua: Colore e sfondo


CSS - attributi colore

Gli attributi per il colore e lo sfondo

Prima di passare in rassegna le categorie di attributi vorrei ricordare la loro sintassi per poterli adoperare, e questo qualunque sia il modo che deciderete di usare.

Gli attributi devono essere inseriti all'interno di parentesi graffe { } e 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.

Per i parametri ad essi associabili fare riferimento a questa tabellina.

Passiamo in rassegna gli attributi per il colore e lo sfondo:

color : valore;

Questo attributo serve per impostare il colore del testo, fare riferimento alla tabellina per i possibili parametri.

P    {color: red;}
DIV  {color: #990099;}

P {color: red;}
div {color: #990099;}

background-color : valore;

Questo attributo definisce il colore di sfondo di uno style e può essere adoperato indipendentemente dal colore di sfondo del testo.
Per i possibili parametri fare riferimento alla ormai nota tabellina.

P    {background-color: yellow}
DIV  {background-color: #33ccff}

P {background-color: yellow;}
DIV {background-color: #33ccff;}

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.

P    {background-image : url(file:immagine.gif);}
DIV  {background-image: url (logo.gif);}

P {background-image : url(file:immagine.gif);}
continuo a scrivere per meglio
rendere l'idea dello sfondo sotto.

DIV {background-image: url (logo.gif);}
continuo a scrivere per meglio
rendere l'idea dello sfondo sotto.

Se associato al tag body diventa lo sfondo di tutta la pagina.

BODY  {background-image: url ("logo.gif");}

background-repeat : repeat | repeat-x | repeat-y | no-repeat ;

Questo attributo serve per specificare come disporre le immagini di sfondo quando non si tratta di uno sfondo omogeneo che riempie tutta la pagina: repeat indica che l'immagine deve essere replicata in orizzontale e in verticale. repeat-x deve essere replicata soltanto in orizzontale. repeat-y deve essere replicata soltanto in verticale. Logicamente questo attributo deve essere adoperato in abbinamento a background-image.

     {background-image : url(logo.gif);
      background-repeat : repeat-x ;}

 {background-image : url(logo.gif);
      background-repeat : repeat-y ;}

     {background-image : url(logo.gif);
      background-repeat : repeat ;}

     {background-image : url(logo.gif);
      background-repeat : no-repeat ;}

background-position : coordinate;

Questo attributo definisce il punto da cui iniziare a posizionare l'immagine e deve essere associato ai due precedentemente illustrati. Si possono adoperare parole chiave per la posizione orizzontale: left, center o right e parole chiave per la posizione verticale: top, center o bottom. E' anche possibile esprimere valori percentuali, dove: 0% 0% indica l'angolo in alto a sinistra (default) e: 100% 100% indica l'angolo in basso a destra. Per maggior precisione si possono specificare anche coordinate espresse in mm, cm, inc.

     {background-image : url(logo.gif);
      background-repeat : repeat-y;
      background-position : 50% 50%;}

     {background-image : url(logo.gif);
      background-repeat : repeat-x;
      background-position : 50% 50%;}

     {background-image : url(logo.gif);
      background-repeat : repeat-x;
      background-position : 10mm 10mm;}

background-attachment : scroll | fixed ;

Questo attributo definisce se l'immagine usata deve scorrere sullo schermo insieme al testo (scroll) oppure restare fissa sullo sfondo (fixed) nel momento in cui si scorre la pagina.

     {background-image : url(logo.gif);
      background-attachment : scroll;}

     {background-image : url(logo.gif);
      background-attachment : fixed;}

background : parametri;

Questo attributo da solo serve per specificare diversi attributi all'interno dello stesso separandoli semplicemente da uno spazio.

{background: red url(logo.gif) repeat-x fixed}

Continua: Posizionare oggetti


CSS - attributi posizione

Gli attributi per il posizionamento dei livelli

Prima di passare in rassegna le categorie di attributi vorrei ricordare la loro sintassi per poterli adoperare, e questo qualunque sia il modo che deciderete di usare.

Gli attributi devono essere inseriti all'interno di parentesi graffe { } e 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.

Per i parametri ad essi associabili fare riferimento a questa tabellina.

Prima di passare in rassegna i vari attributi di posizionamento è bene ricordare che questi difficilmente saranno adoperati singolarmente, essi infatti fanno parte di un insieme di altri parametri che servono a definire e posizionare un contenitore o livello all'interno di una pagina web.

La creazione di un livello tipo potrebbe essere questa, già vista nella lezione riguardante gli ID:

{
position : absolute;
     top : 50 px;
    left : 20 px;
  zindex : 1;
}

position : absolute | relative ;

Determina il tipo di posizionamento che dovrà assumere il contenitore creato sullo schermo in uno dei possibili modi.

Absolute o Relative, in entrambi i casi l'attributo ha ragione di esistere se abbinato con gli altri attributi di posizionamanto.

{position:absolute; left:100px; top:50px;}

Contenitore o livello posizionato in modo assoluto a 100 px dal lato destro e 50 px dal bordo superiore della finestra del browser.

top : lunghezza | percentuale | auto ;

Determina la distanza del margine superiore del contenitore dal margine superiore della finestra del browser. Si possono adoperare tutti i valori ammessi riportati nella tabella parametri.

{position:absolute; top:50px;  left:100px;}

Contenitore o livello posizionato in modo assoluto a 50 px dal bordo superiore e 100 px dal lato destro della finestra del browser.

left : lunghezza | percentuale | auto ;

Determina la distanza del margine laterale sinistro del contenitore dal margine laterale sinistro della finestra del browser. Si possono adoperare tutti i valori ammessi riportati nella tabella parametri.

{position:absolute; left:100px; top:50px;}

Contenitore o livello posizionato in modo assoluto a 100 px dal lato destro e 50 px dal bordo superiore della finestra del browser.

widht : larghezza ;

Determina la larghezza del contenitore se posizionato in modo absolute.

{position:absolute; widht:300px; left:100px; top:50px;}

Contenitore o livello con una sua dimensione in larghezza di 300 px posizionato in modo assoluto a 100 px dal lato destro e 50 px dal bordo superiore della finestra del browser.

height : altezza ;

Determina l' altezza del contenitore se posizionato in modo absolute.

{position:absolute; height:400px; widht:300px; left:100px; top:50px;}

Contenitore o livello con una sua dimensione in altezza di 400 px con a larghezza di 300 px posizionato in modo assoluto a 100 px dal lato destro e 50 px dal bordo superiore della finestra del browser.

visibility : visible | hidden | inherit ;

Determina la visibilità del contenitore, questo infatti potrebbe sparire se associato al suo attributo hidden.

{position:absolute; visibility:hidden; height:400px; widht:300px; left:100px; top:50px;}

Contenitore o livello nascosto, con una sua dimensione in altezza di 400 px con a larghezza di 300 px posizionato in modo assoluto a 100 px dal lato destro e 50 px dal bordo superiore della finestra del browser. Se non viene specificato alcun attributo per default il contenitore è visible.

z-index : valore;

Determina la priorità di visualizzazione del contenitore rispetto allo sfondo della pagina o rispetto ad altri contenitori posizionati sullo schermo.

{position:absolute; z-index:-1; height:400px; widht:300px; left:100px; top:50px;}

Contenitore o livello con priorità negativa (-1) che lo posiziona addirittura sotto lo sfondo; con una sua dimensione in altezza di 400 px con a larghezza di 300 px posizionato in modo assoluto a 100 px dal lato destro e 50 px dal bordo superiore della finestra del browser. Se non viene specificato alcun attributo per default il contenitore è visible.

Continua: Conclusioni


CSS - parametri

I possibili parametri Sono quei valori che vanno specificati negli attributi e variano a seconda dell'attributo stesso, nelle tabelline riportate sotto è possibile rendersi conto di come possono essere espressi, alcuni di essi producono lo stesso risultato per cui sarete voi a decidere quale adoperare in base ai vostri gusti e alla vostra indole.

Unità di misura:

ho adoperato l'attributo font-size con i parametri per i vari esempi.

Unità | Descrizione | Esempio | Risultato
cm | Centimetri | 1cm | Risultato
mm | Millimetri | 7mm | Risultato
in | Pollici | 0,25in | Risultato
pt | Punti | 12pt | Risultato
pc | Pica(=12 punti) | 2pc | Risultato
px | Pixel | 25px | Risultato
em | Lun. lettera m | 2,5em | Risultato
ex | Altezza carattere x | 3ex | Risultato

Valori assoluti:

ho adoperato l'attributo font-size per i vari esempi.

Descrizione | Sintassi | Risultato
xx-small | font-size : xx-small | Risultato
x-small | font-size : x-small | Risultato
small | font-size : small | Risultato
medium | font-size : medium | Risultato
large | font-size : large | Risultato
x-large | font-size : x-large | Risultato
xx-large | font-size : xx-large | Risultato

Valori relativi:

ho adoperato l'attributo font-size per i vari esempi.

Descrizione | Sintassi | Risultato
xx-small | font-size : smaller | Risultato
larger | font-size : larger | Risultato

Colori:

ho adoperato l'attributo font-size 15px per i vari esempi.

Descrizione | Sintassi | Risultato
nome | color:red | Risultato
valore esadecimale | color:#ff0000 | Risultato
valore RGB | color:rgb(255,0,0) | Risultato
percentuale RGB | color:rgb(100%,0%,0%) | Risultato

Posizionamento:

si tratta di elementi necessari per posizionare i contenitori o livelli.

Attributo | Parametri | Descrizione
position | absolute - static - relative | Il modo in cui deve essere posizionato un contenitore o livello.
left | cm - mm - in - pt - pc - px - ex - em | la distanza del contenitore dal margine sinistro della finestra del browser.
top | cm - mm - in - pt - pc - px - ex - em | la distanza del contenitore dal margine superiore della finestra del browser.
height | cm - mm - in - pt - pc - px - ex - em | Altezza del contenitore se posizionato in modo absolute.
widht | cm - mm - in - pt - pc - px - ex - em | Larghezza del contenitore se posizionato in modo absolute.
overflow | visible - hidden - scroll | Contenuto che supera Larghezza Altezza del contenitore o livello.
visibility | visible - hidden - | Visibilità o meno di un contenitore o livello.
Z-index | numeri positivi o negativi | L'ordine di priorità di visualizzazione di un contenitore o livello.

Continua: Conclusioni


CSS - conclusioni

Conclusioni

Avrei finito, consapevole che ci sarebbe ancora molto da dire, lascio questo compito alla letteratura specializzata o a quei siti che si occupano soltanto di questo argomento.

Per quanto mi riguarda considero questa rubrica/guida sufficiente per poter apprendere e capire le varie tecniche legate a questo sistema di programmazione che si integra con il buon "vecchio" HTML.

Non mi resta dunque che salutarvi e magari con un esempio di scritta gigante, in html le dimensioni massime ottenibili dall'elemento font sono

Queste

e cioè size 7. Con i CSS non ci sono limiti se non quelli dello schermo...

una dimostrazione ?

Vi saluto con un grosso ciao... lo so che poteva essere anche più grande, ma accontentatevi :-))

CIAO

Vi ricordo due indirizzi sui quali reperire ulteriori informazioni: specifiche del W3C , dove troverete tutti gli attributi e i parametri ammessi e supportati dai CSS1 e : specifiche per i nuovi CSS2 dove alcuni di questi non sono ancora supportati da nessun browser, almeno non fino alle versioni 5.5 di IE e 6 di NS.

© A.Bianchi 1997 ÷ 2003


Informazioni sull'autore

Visita il mio sito...

WebLink - Tutto per la costruzione delle tue pagine web.

© A.Bianchi 1997 ÷ 2003

CSS Versione 1.3
Http://Web-Link.it Ottobre 2001
Realizzato da Andrea Bianchi
------------------------------------------
Una guida completa e semplice da utilizzare
per poter imparare i CSS ovvero i fogli di
style per pagine web.

La guida è freeware cioè completamente gratuita
può essere copiata e distribuita liberamente a
patto che non siano alterati in alcun modo i
riferimenti all'autore e al suo sito di riferimento.
------------------------------------------
Eventuali modifiche e/o aggiornamenti saranno
reperibili sul sito http://www.web-link.it
Per qualsiasi informazione, anomalie o altro
è possibile contattare l'autore al seguente
indirizzo e-mail css@web-link.it

Versione Guida di Windows a cura di: Claudio GUCCHIERATO

maggio 2003


immagini

matt.gif (1142 byte) weblink21.gif (11613 byte) home.gif (1058 byte) tile4.jpg (1788 byte)