Grazie a questi principi dei CSS potremo creare i nostri layout di pagina staccandoci definitivamente da quelle che sono le limitazioni che una tabella può dare.

Ho intenzione di affrontare la questione in due lezioni. Nella prima esamineremo la proprietà position e le diverse modalità di posizionamento. Nella seconda vedremo con quali proprietà è possibile posizionare con precisione gli elementi e gestirne alcuni decisivi aspetti visuali.

La proprietà position

position è la proprietà fondamentale per la gestione della posizione degli elementi, di cui determina la modalità di presentazione sulla pagina. Si applica a tutti gli elementi e non è ereditata. Sintassi:

<selettore> {position: <valore>;}

i valori che questo parametro può assumere sono 4: fixed, absolute, static, relative. Gli unici due al momento supportati dai vari browser sono solo due: absolute e relative. Parlerò, infatti, solo du questi due parametri.

• absolute – L’elemento, o meglio, il box dell’elemento viene rimosso dal flusso del documento ed è posizionato in base alle coordinate fornite con le proprietà top, left, right o bottom. Il posizionamento avviene sempre rispetto al box contenitore dell’elemento. Un elemento posizionato in modo assoluto scrorre insieme al resto del documento.
• relative - L’elemento viene posizionato relativamente al suo box contenitore. In questo caso il box contenitore è il posto che l’elemento avrebbe occupato nel normale flusso del documento. La posizione viene anche qui impostata con le proprietà top, left, bottom, right. Ma qui esse non indicano un punto preciso, ma l’ammontare dello spostamento in senso orizzontale e verticale rispetto al box contenitore.

La creazione di un livello tipo potrebbe essere questa:

#immagine{ position:absolute;
           top:50px; left:20px; z-index:1; }

In questo esempio, scopriamo una nuova proprietà: z-index. La proprietà z-index indica al browser la posizione sul piano azimutale, rispetto al resto della pagina. Cosa vuol dire: prendiamo due fogli di carta, su uno gli scriviamo testo, sull’altro immagine. Mettiamoli uno sull’altro: abbiamo definito lo z-index ovvero il “livello” superiore o inferiore dell’immagine rispetto al testo. L’unico valore permesso per questa proprietà è un valore numerico piu alto sarà il valore piu sara in rilievo rispetto al resto della pagina. Se mettiamo un valore negativo per esempio -1 il box contenitore andrà a finie sotto lo sfondo! Difficilmente visibile!

E a proposito di visibilità ci sarebbe anche un’altra proprietà, appunto visibility. Dal nome stesso si capisce a cosa può servire, ovvero a rendere visibile o meno un oggetto( testo, immagini o altro) fino a che non si verifichi una determinata condizione. I valori possibili per quest’ultima proprietà sono due: hidden (nascosto) e visible (visibile).

Una pseudo-classe non definisce infatti un elemento ma uno stato di quest’ultimo.

In buona sostanza imposta uno stile per un elemento al verificarsi di certo stato.
Cosa significa: non definisce infatti unelemento ma uno stato di quest’ultimo?

Quando crei un link involontariamente hai dato al browser 4 principali direttive o stati da interpretare, che sono: link non visitato, visitato, passaggio del mouse sul link,e click.
Questi 4 stati del link possono essere definiti singolarmente andando a creare un bell’effetto nelle nostre pagine.

A livello sintattico le pseuso-classi non possono essere mai dichiarate da sole, ma per la loro stessa natura devono sempre appoggiarsi ad un selettore. ma vediamo un esempio semplice:

a:link {color: #ff0000;}

La regola vuol dire: i collegamenti ipertestuali (<A>) non visitati (:link) avranno il colore rosso. Da qui risulta più chiaro il concetto espresso all’inizio: la pseudo-classe :link definisce uno stato di un link (colore quando non è stato visitato). Appena ciò dovesse avvenire, il testo non sarà più rossoe, perchè la condizione originaria è venuta meno e assumerà il colore di predefinito dal browser, questo se non abbiamo definito lo stato di VISITED cioè link visitato.

Torniamo alla sintassi. La pseudo-classe (tutte iniziano con i due punti) segue senza spazi l’elemento.

Subito dopo si crea nel modo consueto il blocco delle dichiarazioni.
Una pseudo-classe può anche essere associata a selettori di tipo classe. I costrutti possibili sono due. Il primo è quello sancito nella specifica CSS1. La pseudo-classe doveva seguire la dichiarazione della classe:

a.collegamento:link {color: green;}

Come va letta questa regola? Avranno il testo verde (green) solo i link non visitati che abbiano come attributo class=”collegamento”. Sarà verde questo collegamento:

<a href=”pagina.htm” class=”collegamento”> LINK </a>

A partire dalla specifica CSS2 è consentita anche questa sintassi:

a:link.collegamento

in cui la classe segue la pseudo-classe. Significato e risultati sono comunque identici al primo esempio. Il primo tipo di sintassi garantisce una maggiore compatibilità con i browser più datati. Gli esempi e la sintassi presentati valgono per tutte le pseudo-classi.

Detto questo passiamo ora capire quali sono gli stati che un link può assumere e come definire i parametri per ciascuno di essi. Gli stati che un link può assumere abbiamo detto sono 4: link non visitato, visitato, passaggio del mouse sul link e click. Nel linguaggio CSS si traducono in :LINK, :HOVER, :VISITED e :ACTIVE.

Prendiamo come esempio lo stile utilizzato dal nostro sito per i link nel menu quindi colore sempre nero e semplice sottolineatura al passaggio del mouse:

<style type=”text/css”>
<!–
A:LINK 

{text-decoration : none; Color : #000000}
A:VISITED {text-decoration : none; Color : #000000}
A:HOVER {Color : #000000; text-decoration : underline;}
–> </style>

Per questo esempio abbiamo utilizzato un blocco di codice incorporato alla pagina e lo riconosciamo subito dalla presenza del tag <style> e relativa chiusura </style>. Ricordiamo inoltre, che per utilizzare gli stili incorporati alla pagina di deve scrivere il codice fra <head> e </head>.

Le pseudoclassi dinamiche: :hover, :focus, :active.

Le pseudoclassi dinamiche rispondono come per javascript ad azioni o eventi compiuti esclusivamente dall’utente, come il posizionamento del puntatore del mouse su un determinato oggetto, la selezione di un elemento o l’attivazione di un oggetto.

Ecco un piccolo trucco.

Anche se queste ultime pseudoclassi possano essere associate agli elementi piu disparati come paragrafi, campi di un form, bottoni ecc Internet Explorer 6, sempre lui…, e precedenti versioni per Windows le supporta solo quando vengono applicate ai collegamenti, mentre IE 7 suppora la pseudoclasse :hover su tutto. Essendo un linguaggio a CASCATA il css è importante scrivere bene il codice onde evitare inutili conflitti di “stato” per i vari link. Facciamo subito un esempio:

a:link{ .. }
a:visited:{  .. }
a:hover{ ... }
a:focus{ ... }
a:active{ ... }

In questo modo non ci saranno conflitti di stato di un collegamento poiche tutte le pseudoclassi hanno la medesima importanza, se per esempio, la regola associata a :visited fosse scritta dopo la regola:hover allora per tutti i collegamenti gia visitati la regola hover non avrebbe piueffetto poiche verrà sovrascritta dalla regola associata a :visited.

Spero vi sia utile questo articolo. Adesso avete le conoscenze necessarie per utilizzare i CSS per la gestione dei vostri link, cosa bisogna fare: provare provare e….vediamo un po provare si si provare! L’unico modo per rendersi conto di cosa si stia facendo. La semplice lettura non basta! Alla prossima lezione!

Le proprietà che definiscono il modo in cui il testo appare sullo schermo sono tante e abbiamo deciso di descriverne solo le piu diffuse. Sono quelle che definiscono i seguenti aspetti:

• font-family - Il carattere da utilizzare
• font-size – Dimensione del carattere
• font-weight – Spessore o consistenza del carattere
• font-style – Stile del carattere
• line-height – Altezza di riga
• text-decoration – Decorazione del testo Andiamo adesso ad esaminarli uno per uno.

font-family

Questo parametro viene utilizzato per determinare il tipo di font, ovvero il carattere del testo, da utilizzare all’intenro della nostra pagina o di uno specifico tag html.

Vediamo la sintassi:

p {font-family: Arial, Verdana, “Times New Roman”;}

Gli uomini del W3C hanno creato un meccanismo che consente all’autore di impostare nei CSS non un font singolo e unico, ma un elenco di caratteri alternativ nel caso in cui il primo non ci fosse.

Nel nostro esempio il browser interpreta questa riga di css cosi: utilizza il carattere Arial, se non c’è utilizza Verdana, se non c’è utilizza Times new roman se non c’è utilizza quello predefinito dal browser.

I nomi dei font della lista vanno separati dalla virgola. I caratteri con nomi composti da più parole vanno inseriti tra virgolette. Se usate famiglie strane e poco comuni come fantasy o cursive usate più di una famiglia generica. Questa andrebbe sempre messa alla fine, altrimenti risulta praticamente inutile la definizione di font specifici.

font-size

Insieme a font-family è la proprietà considerata essenziale nella definizione dell’aspetto del testo, di cui definisce le dimensioni.

Sintassi:

selettore { font-size: <valore>; }

I valori delle dimensioni del testo possono essere espressi in vari modi:

• espressi in unità di misura – per esempio 10px, 10pt, 10cm, 10mm, 10pc, 10in;
• percentuale – per esempio 10%;
• espressi in em (em-height) – per esempio 1.2em (decisamente poco utilizzati);

font-weight

Serve a definire la consistenza o “peso” visivo del testo. Sintassi:

selettore {font-weight: <valore>;}

i valori applicabili per questo parametro sono:

• bold – Il classico grassetto ottenibile con <strong></strong> o <b></b> in html ;
• bolder – Serve a specificare che una determinata porzione di testo dovrà apparire più pesante rispetto al testo dell’elemento;
• lighter – Misura relativa. Il testo sarà più leggero di quello dell’elemento parente;
• normal – E’ l’aspetto normale del font ed equivale al valore 400;
• valori numerici 100 – 200 – 300 – 400 – 500 – 600 – 700 – 800 – 900 ordinati in senso crescente (dal più leggero al più pesante);

Vediamo un esempio:

p {font-weight: 900;}

font-style

Imposta le caratteristiche del testo in base ad uno di questi tre valori:

• normal: il testo mantiene il suo aspetto normale
• italic: formatta il testo in corsivo
• oblique: praticamente simile a italic

Vediamo subito sintassi ed esempio:

p {font-style: italic;}

line-height

Grazie a line-height è possibile finalmente usare nelle nostre pagine un sistema di interlinea degno di questo nome. La proprietà, in realtà, serve a definire l’altezza di una riga di testo all’interno di un elemento blocco. Ma l’effetto ottenuto è appunto quello tanto ambito da tutti i web designer: un modo per impostare uno spazio tra le righe. La proprietà si applica a tutti gli elementi. Sintassi:

selettore {line-height: <valore>;}

i valori possibili per questo parametro sono diversi, vediamoli un po:

• normal. Il browser separerà le righe con uno spazio ritenuto “ragionevole”. Dovrebbe corrispondere a un valore numerico compreso tra 1 e 1.2
• valore numerico. Usando valori numerici tipo 1.2, 1.3, 1.5 si ottiene questo risultato: l’altezza della riga sarà uguale alla dimensione del font moltiplicata per questo valore.
• un valore numerico con unità di misura. L’altezza della riga sarà uguale alla dimensione
  specificata.
• percentuale. L’altezza della riga viene calcolata come una percentuale della dimensione del font.

Personalmente utilizzo solo il valore numerico senza definire in pixel o in cm l’altezza della riga. In queste pagine viene utilizzato 1.600 come valore numerico definito per l’altezza della riga, e secondo me, ma questo è soggettivo, è un giusto equilibrio che permette al visitatore di leggere senza difficoltà le guide, poichè tra un rigo e l’altro non si viene a creare quell’ammasso di grigio che infastidisce gli occhi davanti al monitor.

text-decoration

Questo parametro molto usato con le pseudo classi, che tratteremo piu avanti, per eliminare l’effetto sottolineatura di default dai link. Permette infatti di definire se una determinata porzione di testo debba avere appunto delle decorazioni. Sintassi:

selettore {text-decoration: <valore> o <valori>;}

i valori che definibili in text-decoration sono diversi:

• none - Il testo non avrà alcuna decorazione;
• underline – Il testo sarà sottolineato;
• overline – Il testo avrà una linea superiore;
• line-through – Il testo sarà attraversato da una linea orizzontale al centro;
• blink – testo lampeggiante;

vediamo alcuni esempi di utilizzo.

p {text-decoration: blink;}
 a {text-decoration: none;}

La scelta si restringe comunque a due elementi: il corpo principale della pagina (<BODY>) o le tabelle. Un’altra limitazione riguarda il comportamento delle immagini di sfondo: esse vengono infatti ripetute in senso orizzontale e verticale fino a riempire l’intera area della finestra, del frame o della tabella.

Proprio questo comportamento ha fatto sempre propendere per la scelta di piccole textures in grado di dare la sensazione visiva dell’ uniformità. Grazie ai CSS queste limitazioni vengono spazzate via e le possibilità creative, compatibilità permettendo, sono davvero infinite.

Ecco la lista delle proprietà, applicabili, ed è questa la prima grande innovazione dei CSS, a tutti gli elementi:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Ciascuna di essa definisce un solo, particolare aspetto relativo allo sfondo di un elemento. La proprietà background, invece, è una proprietà a sintassi abbreviata con cui possiamo definire sinteticamente e con una sola dichiarazione tutti i valori per lo sfondo. La analizeremo alla fine. Prima è necessario chiarire significato e sintassi delle proprietà singole. Ma andiamo ad eseminare i 5 parametri per la gestione dello sfondo:

background-color

Definisce il colore di sfondo di un elemento. Questa proprietà non è ereditata. Sintassi:

selettore {background-color: <valore>;}

i valori possono essere due: la parola chiave trasparent o un qualsiasi colore in formato esadecimale (#000000).

Per chi non conoscesse la tabella esadecimale dei colori, guardi la tavolozza presente nella categoria Webdesign nella lezione sui principi di webdesign.

Esempi:

body { 

background-color: white; }
 p { background-color: #FFFFFF; }
 .classe1 { background-color: rgb(0, 0, 0)}

background-image

Definisce l’URL di un’immagine da usare come sfondo di un elemento. Sintassi:

selettore { background-image: url(<valore>); }

i valori possono essere o l’url dell’immagine o la parola chiave none.

body {background-image: url(sfondo.gif); }
 div body {background-image: url(http://www.kabuia.com/images/sfondo.gif); }

Usando questa proprietà da sola si ottiene lo stesso risultato che in HTML si aveva con l’attributo background.

background-repeat

Con questa proprietà iniziano le novità. Essa consente di definire la direzione in cui l’immagine di sfondo viene ripetuta. Sintassi:

selettore {background-repeat: <valore>;} 

i valori in question possono essere 4:

1. repeat L’immagine viene ripetuta in orizzontale e verticale. E’ il comportamento standard
2. repeat-x L’immagine viene ripetuta solo in orizzontale
3. repeat-y L’immagine viene ripetuta solo in verticale
4. no-repeat L’immagine non viene ripetuta

Esempi:

body { background-image: url(sfondo.gif); background-repeat: repeat; }
 div { background-image:url(sfondo.gif); background-repeat: repeat-x; }

background-attachment

Con questa proprietà si imposta il comportamento dell’immagine di sfondo rispetto all’elemento cui è applicata e all’intera finestra del browser. Si decide, in pratica, se essa deve scorrere insieme al contenuto o se deve invece rimanere fissa.

Sintassi:

selettore {background-attachment: <valore>;}

i valori possono essere, appunto due, fixed e scroll.

Questa proprietà consente risultati estetici di grande impatto ed è consigliabile, per ottenerne il meglio, usarla sia in combinazione con le altre proprietà sia con immagini grandi.

Esempi:

body { background-image: url(back_400.gif);
 background-repeat: repeat-x;
 background-attachment: fixed; }

background-position

Proprietà un pò complessa. Definisce il punto in cui verrà piazzata un’immagine di sfondo non ripetuta o da dove inizierà la ripetizione di una ripetuta. Attenzione alla compatibilità e alla resa, non omogeena, tra i vari browser.

Sintassi:

selettore {background-position: <valore> o <valori>;}

I valori possibili sono diversi. Tutti però definiscono le coordinate di un punto sull’asse verticale e su quello orizzontale. Ciò può avvenire nei seguenti modi:

body {
 background-image: url(back_400.gif);
 background-repeat: no-repeat;
 background-position: 50px 50px;
 } 

Significa che l’immagine apparirà a 50px dal bordo superiore e a 50px da quello sinistro della finestra. Potevo usare invece dei pixel altre unità di misura o percentuali. Come al solito, la scelta delle percentuali mi assicura una maggiore affiidabilità a risoluzioni diverse. Allo stesso modo potevo utilizzare le parole chiave. Se, ad esempio, uso:

body {
 background-image: url(back_400.gif);
 background-repeat: no-repeat;
 background-position: center center;
 }

Logica vuole, trattandosi di definire le coordinate che si impostino due valori. Definendone uno solo esso sarà usato sia per l’asse orizzontale che per quello verticale.

background

E veniamo alla proprietà background. Con essa, ricordiamolo, possiamo definire in un colpo solo tutti gli aspetti dello sfondo. Per essere valida, la dichiarazione non deve contenere necessariamente riferimenti a tutte le proprietà viste finora, ma deve contenere almeno la definizione del colore di sfondo.

Sintassi:

selettore {background:
           background-color
           background-image
           background-repeat
           backgroundattachment
           background-position;} 

Gli argomenti non vanno separati da virgole. L’ordine non è importante, ma quello dato è il più logico e andrebbe rispetatto: si va in ordine di importanza.

Partiamo dall’inizio. In (X)HTML esistono due attributi fondamentali applicabili a tutti gli elementi: sono, appunto, class e id. Questi selettori hanno la stessa funzione, con la marginale differenza che gli ID si possono richiamare, all’interno della pagina, una sola volta, invece le classi possono essere richiamate sempre in tutta la pagina. Passiamo adesso ad eseminare uno per uno questi selettori.

Le classi

Per definire una classe si usa far precedere il nome da un semplice punto:

.nome_della_classe_scelto{ Regole della classe }

Esiste un secondo tipo di sintassi:

<elemento>.nome_della_classe{}

Esso è più restrittivo rispetto alla sintassi generica. Se infatti definiamo questa regola:

p.testorosso {color: red;}

lo stile verrà applicato solo ai paragrafi che presentino l’attributo class=”testorosso”. Anche qui è importante stabilire un minimo di strategia. Il secondo tipo di sintassi va usato solo se pensate di applicare una classe ad uno specifico tipo di elemento (solo paragrafi o solo div, e così via). Se invece ritenete di doverla applicare a tipi diversi usate la sintassi generica.

Vediamo un esempio completo di classe:

.testo_nero_10px{
 font-family : Verdana,Arial,Helvetica;
 color : #000000;
 font-size : 10pt;
 text-align : left;
 }

Nell’esempio abbiamo dichiarato una classe che si chiama: .testo_nero_10px.
Questa classe contiene i seguenti parametri:

• Dichiarazione del carattere da utilizzare: font-family : Verdana,Arial,Helvetica;
• Dichiarazione del colore del testo: color : #000000;
• Dichiarazione della grandezza del testo: font-size : 10pt;
• Dichiarazione dell’allineamento del testo: text-align :left;

Adesso per utilizzare la classe, basterà scrivere all’interno del tag, al quale vogliamo apporre lo stile, l’attributo class=”testo_nero_10px”.

<p class=”testo_nero_10px”>…</p>

Possiamo utilizzare questa classe tutte le volte che vogliamo e soprattutto in tutti i tag che vogliamo.

Gli ID o etichette

Abbiamo già detto, che gli ID differenziano dalle classi per la caratteristica di poter essere utilizzati sono una volta ll’interno del documento. Questa caratteristica deli ID li rendono particolarmente adatti nell’utilizzo di elementi che riguardano l’architettura del sito solitamente utilizzati con i tag <div> e i <table>.

Un selettore ID o identificatore, infatti, altro non è che una etichetta di un contenitore di codice. Fondamentalmente una o piu caratteristiche CSS  vengono applicate ad un selettore. La parola parla da sé: si tratta di una semplice dichiarazione che serve a selezionare la parte o le parti di un documento soggette ad una specifico stile.
Vediamo rapidamente come si definisce un ID:

#titolo {color: blue;}

assegniamo il colore blue all’elemento che presenti questa definizione:

<h1 id=”titolo”>…</h1>

Come per le classi è possibile usare una sintassi con elemento:

p#titolo

In realtà questa modalità è assolutamente superflua. Se l’id è univoco non abbiamo alcun bisogno di distinguere l’elemento cui verrà applicata. Inoltre: la sintassi generica si rivela più razionale e utile.

Se si dichiara un ID semplice è possibile assegnarlo a qualunque tipo di elemento. Posso usarlo su un paragrafo, ma se poi cambio idea posso passare tranquillamente ad un div senza dover modificare il foglio di stile.
Usando la seconda sintassi, invece, sono costretto a rispettare l’elemento definito nel selettore.