Cos'è un sito Web
CSS 2

I CSS cosa sono e perché usarli

Abbiamo ricordato che l'xhtml tende a distinguere nettamente la parte del contenuto dalla presentazione, cioè la grafica di pubblicazione. Per la parte grafica ci affidiamo dunque ad un codice chiamato css, che può essere allegato (attraverso un richiamo nel codice xhtml ad un file esterno) oppure incorporato nel codice xhtml, in ambedue i casi porremo riferimento o codice nella parte <head> </head>

I riferimenti

Come scrivere un riferimento ad un file css esterno chiamato esempio.css
<link href ="url/percorso"
      rel="stylesheet"
      type="text/css"
      media="screen"
/>

mentre, per un css incorporato nella head, racchiuderemo il codice css dentro i tag
<style type="text/css">
........
</style>

La sintassi

La sintassi del codice css è la seguente:
nome_del_selettore {
    proprieta_prima: valore;
    proprieta_seconda: valore;
    proprieta_terza: valore;
}

Il selettore si riferisce al tag da formattare infatti ha lo stesso nome (id o class) del tag in xhtml.
Il selettore formatta dunque tutti i tag corrispondenti della pagina web.

Esempio pratico di sintassi

body {
....
}

a {
....
}

p.classe {
....
}

div#identita {
....
}

A differenza dei primi, questi secondi due selettori hanno una classe oppure un'identità, innanzitutto è da premettere che non scriveremo mai codice con caratteri speciali, in seconda istanza vediamo cosa significano il . ed il # qualsiasi elemento p che appartenga alla classe .classe sarà formattato secondo le nostre istruzioni, così il div con identità #identita sarà formattato secondo le nostre dichiarazioni.

Classi ed id

Decisivo è ricordare la differenza tra le classi e gli id nel codice xhtml:
<p class="classe"> scrivo un paragrafo </p>
<div id="identita"> scrivo un elemento di blocco</div> mentre più elementi di vario genere possono appartenere alla medesima classe, con id si riconosce un unico elemento in tutta la pagina (univoco).

Indicare sintatticamente gli id e le class
id -> #
class -> .

Il tag <span> </span> Elemento inline, tag generico, senza i css non ha effetto, serve per individuare una porzione di testo e mediante css applicargli una formattazione

Il boxmodel

È un tipo di interpretazione del box in Xhtml e, applicando le seguenti proprietà ai contenuti, possiamo determinare un output grafico:

- larghezza (width)
- altezza (height)
- imbottitura (padding)
- bordo (border)
- margini (margin)

I margini (margin) e l'imbottitura (padding)

Se immaginiamo un elemento, sia esso in linea o di blocco, verrà abbastanza spontaneo pensare alla necessitàdi distanziarlo da un altro elemento.

Pensiamo per esempio a due div, come due scatole che contengono degli elementi. tra di loro potranno essere distanziati di qualche pixel (per evidenziare la distanza precisa potremmo usare un bordo): la distanza che separa i bordi dei due elementi, gerarchicamente allo stesso livello, si chiama margine.

Poniamo ora che sia necessario distanziare all'interno di uno di questi div il bordo che lo delimita dagli elementi che vi sono al suo interno, la distanza che useremo per separarli si chiamerà padding, una sorta di imbottitura che sta all'interno del nostro scatolone div.

abbiamo usato l'esempio dei div perché è quello che maggiormente si presta a chiarificare la differenza tra imbottitura e margine, ricordiamo che queste proprietà possono essere usate comunque in tutti gli elementi di blocco ed in alcuni elementi inlinea.

Usare margin e padding, sintassi

possiamo usare le proprietà singolarmente in questa maniera:

margin-top: 10px;
margin-right: 3px;
margin-bottom: 5px;
margin-left: 2px;

Qualche scorciatoia

Possiamo utilizzare il metodo abbreviato che prevede:

margin: superiore dx inf sin;
margin: 10px 3px 5px 2px;

o ancora, in caso di valori uguali per gli estremi superiore-inferiore e destra-sinistra

margin: sup/inf dx/sin;
margin: 5px 10px;

se tutti gli estremi hanno il medesimo valore:

margin: 5px;

L'uso appena descritto di margin è lo stesso per padding.

I bordi

Ai nostri elementi è possibile aggiungere dei bordi che delimiteranno lo spazio occupato sia dall'elemento che dal suo padding, la sintassi che useremo è la seguente: div#primo_menu {
border: 1px solid red;
}
Un grazioso bordino rosso sottile (spessore un pixel, di tipo lineare) apparirà come contorno del nostro div primo_menu.

Lo sfondo

body {
background-color: yellow;
}

h1 {
background-color: #00ff00
}

I codici per esprimere i colori:

- il nome del colore in inglese (esistono molte sfumature e varianti un esempio: http://www.gb.nrao.edu/~cbignell/testcolors.html )

- il codice colori in esadecimale preceduto dal #:

la numerazione inizia dallo 0 e finisce con la lettera f 0-9, a-f

#d50000 -> questo colore è da dividere in 3 parti

d5-> R (red)
00-> G (green)
00-> B (blue)

dove lo 0 indica l'assenza di luce, ed f, l'ultimo valore, la massima presenza di luce;

- un'istruzione secondo i valori rgb (red, green, blue) che va da 0 a 255 rgb (255, 255, 255)
rgb (valoreR, valoreG, valoreB)

Immagini di sfondo

L'immagine di sfondo per un elemento può diventare un artificio molto utile per aiutarci graficamente.

Innanzitutto è bene ricordare che in vista del principio di accessibilità, dobbiamo decidere se le immagini che intendiamo utilizzare nel nostro sito hanno un carattere comunicativo o semplicemente grafico. Se un'immagine è utile al fine di comunicare o coadiuvare nell'informazione che dà il sito, è bene utilizzare il tag <img> all'interno del codice. Altrimenti, se l'immagine ha un ruolo puramente grafico e non riveste importanza al fine comunicativo del sito, potremmo utilizzarla nel background demandando ai css il compito di richiamarla ed inserirla nella pagina, lasciando così intatto il contenuto, senza orpelli grafici che corromperebbero il messaggio sostanziale.

Sintassi per inserire un'immagine di background tramite css

div#box_con_immagine {
background: #ffffff url('img/orsetto.png') no-repeat top left;
}

La visualizzazione sarà di un elemento con sfondo bianco, al cui interno sta l'immagine orsetto.png, l'immagine non si ripeterà sullo schermo e sarà posizionata in alto a sinistra.

Prediligere un formato immagine per il web

Normalmente abbiamo la possibilità di scegliere tra vari formati immagini, tra questi ricordiamo quelli maggiormente usati nel web, vale a dire le estensioni *.gif *.jpg *.png

- il formato gif è molto compatto, supporta le trasparenze ed è prediletto in questa funzione da browser della famiglia internet explorer.
- i file con estensione *.jpg sono quelli che più si son diffusi con l'utilizzo di supporti digitali portatili quali macchine fotografiche, cellulari etc. al più sono utilizzati per una visualizzazione e risoluzione particolarmente ottimale delle immagini. un buon algoritmo di compressione ha permesso a questa estensione di diventare molto popolare.
- arriviamo ai file con estensione *.png, il suo algoritmo di compressione permette anch'esso una risoluzione decisamente molto buona guadagnato in leggerezza. Il png è un formato abbastanza utilizzato nel web, benché la nota inadempienza dei browser ie non permettano

Il posizionamento

Nel nostro boxmodel possiamo utilizzare due tipi di posizionamento, quello fluttuante o quello assoluto.

Il posizionamento fluttuante

Si usa per gli elementi di blocco che intendiamo lasciar fluttuare nello spazio della pagina che intendiamo dedicargli, decideremo dunque sia la sua larghezza, che la posizione: a destra o a sinistra, il resto della pagina sarà lasciato ad altri elementi che prenderanno lo spazio che ha lasciato questo elemento.

La proprietà float è abbastanza complessa da usare all'inizio della nostra esperienza con i css, soprattutto in rapporto ai bachi dei browser della famiglia microsoft, si rivela comunque utilissima e decisamente versatile per tutti quei tipi di siti che intendono essere un minimo fluidi nella visualizzazione dei contenuti.

esempi di sintassi
div#contenuto {
float: left;
width: 19%;
padding-right: 1%;
}

div#colonna_sinistra {
float: left;
width: 19%;
padding-right: 1%;
}

div#colonna_centrale {
float: left;
width: 38%;
padding-right: 1%;
}

div#colonna_destra {
float: right;
width: 19%;
}

Il posizionamento assoluto

Benché sia necessaria un po' di dimestichezza coi css, questo tipo di posizionamento assicura la posizione esatta degli elementi a cui viene applicato, mi permette di posizionare elementi attraverso delle coordinate, come su di un asse cartesiano x ed y, normalmente si prendono come riferimento il top (alto) e il left (sinistra) da cui parte la pagina.

esempi di sintassi
div#contenuto {
position: relative;
}

div#colonna_sinistra {
position: absolute;
top: 0;
left: 0
width: 200px;
}

div#colonna_centrale {
position: absolute;
top: 0;
left: 200px
width: 600px;
}

div#colonna_destra {
position: absolute;
top: 0;
left: 800px
width: 200px;
}

L'esempio qui sopra riportato prende in considerazione un box contenuto che ha al suo interno 3 colonne. Il punto di riferimento per ogni elemento posizionato assolutamente sarà l'elemento con position relative, cioè quello appena gerarchicamente superiore che li contiene tutti. la colonna sinistra partirà dal punto 0 in alto ed a sinistra, quella centrale partirà in alto sempre dal punto 0, ma la sua larghezza inizierà dal pixel 200 a partire da sinistra, sarà larga 600 pixel e sommando i 200 pixel presi dalla colonna di destra ed i 600 della colonna centrale, la colonna di sinistra dovrà partire dal pixel 800 e dunque per simmetria si estenderà ancora per 200 pixel.

I selettori discendenti

È possibile inserire più selettori a cascata per specificare la portata di una regola css, per esempio:
div# p {
.....
}

Si fa qui riferimento a tutto ciò che è contenuto all'interno dei tags <p>, ma solo quelli che stanno all'interno del "box", cioè il <div> con identità "contenuto".

Le gerarchie di formattazione CSS

Tra la proprietà class e quella id, l'id avrà sempre la meglio, cioè, benché un elemento abbia già una classe definita, specificandone un id, la formattazione css che sarà presa in considerazione è quella dell'id.

Cos'è !important

Se da qualche parte abbiamo già definito (noi, o qualcun altro) una proprietà con valori definiti per un certo selettore, potremo usare la sintassi !important prima del ; che definisce un'istruzione affinché sia presa in considerazione questa istruzione e non altre.

Le pseudo-classi

Seguiremo qui solo l'esempio dell'hover e del visited su un elemento, solitamente un link, usando questa pseudoclasse saremo in grado, via css, di dare una personalizzazione nonché una visibilità maggiore a tutti quegli elementi dinamici del nostro ipertesto.

Esempio di sintassi:
a {
  color: #000;
}

a:hover {
  color: red;
}

a:visited {
  color: purple;
}

Ovviamente possiamo dare spazio a tutta la nostra fantasia e lavorare sui background, cambiamento di font, etc.
Sono qui necessari ulteriori approfondimenti.

Famiglie, size e varianti di font (caratteri)

Alcuni semplici esempi per personalizzare un testo in xhtml possono arrivarci dal cambiare il font-family per qualche particolare elemento. Di base potremmo voler utilizzare per tutto il documento un font molto semplice come arial, ma ci potrebe servire, per mettere in evidenza un particolare paragrafo, lista, o qualsiasi altro elemento, un font particolare come per esempio tahoma.
E se volessimo scrivere una frase, un titolo tutto in maiuscoletto, senza differenze tra maiuscole e minuscole?
Aggiungeremo dunque al nostro codice css la seguente sintassi:
body {
font-family: arial
font-size: 90%;
}

p.in_evidenza h1 {
font-variant: small-caps; /* Tutto maiuscoletto */
text-transform: lowercase; /* Le maiuscole diventano minuscole */
font-weight: bold;
}

p.in_evidenza {
font-family: tahoma
font-size: 110%;
}

La lotta per gli standard

Le regole finora contemplate di Xhtml 1.0 e CSS2 fanno parte di una rosa di standardizzazioni internazionali portate avanti dal W3C, un consorzio di organizzzazioni che operano appunto per lo sviluppo degli standard all'interno del mondo web. Il consorzio nacque dall'idea e volontà di Tim Berners-Lee, che nell'ottobre del 1994, lasciando il CERN, ne decise la fondazione al MIT con l'aiuto del DARPA (ricordiamo che Sir Tim Berners-Lee è stato creatore del primo browser web, delle url e delle specifiche html) e Commissione europea.

Il W3C nacque per assicurare compatibilità e consenso tra i produttori nell'adozione di nuovi standard, oggi il consorzio conta con più di quattrocento membri tra organizzazioni, università, entità governative.

Prima della sua nascita il codice era espresso da ogni azienda alla sua maniera e, perciò, letto non propriamente dai browser di un'altra azienda.

Mentre alcuni browser quali per esempio quello che oggi conosciamo come Firefox sono andati immediatamente adattandosi agli standard rilasciati, altri browser, sicuramente limitati alle esigenze di un interesse particolare d'azienda, continuano a sollevare problemi sempre più insostenibili leggendo il codice malamente con grande soddisfazione da parte di chi si impegna per scrivere buon codice (!).

Ci si renderà presto conto, con l'uso sempre più approfondito dei css che questi problemi di politica aziendale in realtà creano problemi al resto del mondo che intende attenersi agli standard

Combattendo contro ie6 e ie7

Vi rendete presto conto che nonostante la varietà dei browser, solo due browser daranno visualizzazioni grafiche completamente diverse alle vostre creazioni web, benché le abbiate scritte con tanto amore ed acribia e tutti i validatori al mondo nonché tutti i maggiori browser vi diano ragione.
I due browser "problematici" sono (gli esperti esclameranno in coro: "ovviamente!"...) internet explorer 6 e internet explorer 7, al momento molte aziende non prendono più in considerazione ie5. La scelta di correggere le inadempienze di questi browser, attraverso uno scervellamento e danneggiamento del bel codice css che avete scritto dipenderà dal vostro livello di masochismo, o dall'ignoranza e sadismo (conscio o meno) dei vostri committenti.

Talvolta, si rende necessario scrivere istruzioni che lavorino diversamente per ie6 e ancora diversamente per ie7 un modo per bypassare l'ultimo scoglio della lettera del nostro codice solo da parte di quei due browser è usare il cancelletto prima dell'istruzione (nel caso in cui sia da leggere per tutti gli ie) o ponendo un punto nel caso di ie7 o ancora un underscore nel caso di ie6.
Vediamo la sintassi:
div#contenuto p.descrizione {
margin: 4px;
# margin-bottom: 0 !important
. margin-top: -2px;
_margin-top: -8px;
}

Cosa implica questo codice?
il paragrafo chiamato "descrizione" ha dei problemi di visualizzazione in ie6 e ie7. Tutti gli altri browser danno il margine di 4 px, ma ie6 ed ie7 danno un margine di 8px sul fondo e rispettivamente ie7 un margine di 6px al top, mentre ie6 un margine addirittura di 12px.
Con molta pazienza, dovremo cercare di trovare questi valori per applicare un artificio dei css quale un margine negativo, per far rientrare così la visualizzazione da parte di ie6 e ie7 negli standard.

Questo era un esempio ottimista.
Devo comunque ricordare anche la realtà dei fatti. Molti sviluppatori web sono costretti a richiamare un css totalmente diverso (esattamente un altro file, regolato per i browser ie, o singolarmente per ciascuno di essi) per ovviare a dei problemi grafici ben più gravi del nostro esempio.
In questi casi saremo costretti a richiamare i files css in un'altra maniera e cioè aggiungendo, sempre nella <head></head> questo riferimento:

Per tutte le versione di Internet Explorer:
Solo per Internet Explorer 7:
Per versione superiore a Internet Explorer 5:
Per versione di Internet Explorer 5 o superiore:
Per versione inferiore a Internet Explorer 7:
Per versione di Internet Explorer 6 o inferiore
Per versione differente di Internet Explorer 7

Il tipo di media: screen, print...

Possiamo utilizzare un tipo di css apposito per la visualizzazione a monitor ed una versione modificata (semplificata, senza particolari leziosità, per la stampa (per evitare consumi eccessivi di inchiostro).
All'interno del riferimento che abbiamo dato per i css:
<link href ="url/percorso"
      rel="stylesheet"
      type="text/css"
      media="screen"
/>

potremo scrivere nel tipo di media (prima screen) il valore "print" oppure il valore "all", nel caso volessimo utilizzare lo stesso css sia per la stampa, che per la visualizzazione a schermo.

È necessario però rimandare ad ulteriori approfondimenti per questo argomento.

Le tabelle

Molto usate in passato per la struttura del layout, sono ormai un metodo di formattazione grafica assolutamente desueto e deprecato.

Oggi vengono utilizzate per contenere dati che necessitano una visualizzazione tabellare (specchietti per il confronto e la raccolta dati, per esempio).

Le unità di misura

I pixel - misura standard, come il metro
La percentuale - misurata in riferimento all'elemento gerarchicamente superiore
Gli em - storicamente deriva dall'utilizzo della M nella tipografia, che necessitava di una larghezza particolare, al giorno d'oggi benché solo il nostro alfabeto utilizzi questa lettera, è tuttavia rimasta come unità di misura in altezza negli standard internazionali

Grafica e dinamica

I tipi di layout

Possiamo articolare il nostro layout in tre maniere:
- fisso
- fluido
- elastico

Il layout fisso intende la grafica della pagina staticamente: ogni elemento è fisso in un suo particolare posto, con larghezza e spesso altezza fisse determinate precisamente in pixel. È molto comodo per non affrontare il problema della differenza di risoluzioni dello schermo degli utenti

Il layout fluido intende la pagina come un elemento che si estende, stira e tende per tutta la larghezza della pagina, in questo caso si usano le percentuali intendendo ogni elemento del contenuto della pagina esteso per un tot di percentuale della pagina. Questo metodo è abbastanza complesso da utilizzare, poco usato perché necessita dimestichezza con le proprietà css, ma soprattutto è, usando l'xhtml ed i css2 (cioè non appoggiandosi alle tabelle per il layout grafico) risulta spesso difficile da rendere compatibili con le interpretazioni di browser di bassa lega quali quelli della famiglia microsoft.

Il layout elastico è interamente misurato in em, per cui aumentando la dimensione del carattere dal nostro browser di visualizzazione, otterremo una specie di effetto zoom. Al momento è il sistema di layout meno utilizzato per un esempio proficuo potreste visitare il sito del cms (content management system) spip.

Immagini in movimento e file flash

Ormai usate oltre ogni decoro le immagini in movimento ed i file in flash la fanno da padrone nel web.
Ritengo importante dedicare qui qualche attimo per uno spunto di riflessione non tanto per castrare qualsiasi interesse in questo tipo di tecnologie (che, ricordiamocelo bene: non sono libere ed i software da utilizzare per creare questo tipo di file sono molto costosi e pur rendendone semplice la creazione da parte dell'utente, sono impostati per "prendere decisioni" al posto dello sviluppatore, soprattutto quando in erba), ma per rilevare alcuni problemi che potrebbero affliggere gli utenti del nostro sito e le problematicità che si aprono utilizzando tali tecnologie.
È necessario prendere in considerazione come utenti delle nostre pagine web soggetti molto sensibili alla vista: dai non vedenti, agli ipovedenti, le persone anziane o con problemi di epilessia, o ancora, molto più semplicemente, persone che come l'autrice di questa pagina, trovano molto più rilassante leggere testi ariosi e con caratteri più grandi e sono disturbate, nell'attenzione e concentrazione, da immagini che muovono velocemente o ad intermittenza.
È anche necessario prendere in considerazione la natura del nostro sito: se sono presenti molti testi o se prevale di gran lunga la natura grafica del prodotto.
Nel caso il nostro sito contenga del testo (più di qualche riga e link) sarà bene prendere in considerazione le problematiche succitate.
I file in flash, soprattutto, necessitano di molte risorse per essere visualizzati e su computer non potentissimi si può facilmente immaginare quale sia il risultato.
E ancora... i supporti per rendere "accessibili" questi tipi di file sono molto complicati e necessitano di conoscenze molto avanzate, tanto che chi dovrebbe occuparsene preferisce o non affrontare il problema o utilizzare altre risorse (siti paralleli in html piuttosto che l'uso di xml con flash). Da non dimenticare è anche il dispendio di energie che uno screen reader richiede alla macchina dell'utente, a questo si andrebbe sommando l'immagine in movimento etc.
Per queste ragioni, appena accennate, personalmente, ritengo sia meglio usare con molta parsimonia questo tipo di tecnologie, utilizzando invece layout sobrii che facciano da contrappeso in positivo a siti che probabilmente, essendo dinamici (uso di php e database, per esempio) devono visualizzare un codice già abbastanza elaborato.
Lo stesso discorso di accessibilità è necessario per lo scripting javascript. Esso può rilevarsi infatti un'arma a doppio taglio, sebbene gli effetti grafici e dinamici possibili siano apprezzabili, non sempre rende l'interpretazione semplice da parte del browser e, se non opportunamente scritto, può invalidare il nostro codice xhtml.

Queste opere (ed immagini) sono pubblicate sotto Licenza Creative Commons

Layout by arums

Per qualsiasi suggerimento, proposta, osservazione, rimango a disposizione.

Cos'è un sito WebCSS 2

Esempio pratico di sintassi

Usare margin e padding, sintassi

Qualche scorciatoia

Combattendo contro ie6 e ie7

Cos'è un sito Web
CSS 2