*Linux Guide

Fare Web - CSS Parte 1

*

Ormai tutti i WebDesigner conoscono abbastanza approfonditamente l'uso e le caratteristiche dei Fogli di Stile, più conosciuti come CSS, acronimo di Cascading Style Sheet, perciò questo breve studio si rivolge più agli iniziati del WebAuthoring.

I vantaggi dell'uso dei CSS
Innanzitutto un CSS ha una funzione centralizzata di importanza fondamentale, infatti un solo foglio di stile può gestire il layout di una pagina come di un milione di pagine xhtml, nel senso che le pagine che si ricollegano a quel dato foglio di stile, saranno visualizzate tutte allo stesso modo e le modifiche apportate allo specifico CSS, saranno automaticamente implementate in tutte le pagine collegate ad esso. Ne deriva che il webmaster che voglia apportare delle modifiche cromatiche a tutte le pagine del suo sito, potrà farlo aprendo il solo Foglio di Stile e agendo sui suoi contenuti. Viceversa l'uso di attributi valori inline, costringe il webmaster ad aprire ogni singola pagina per modificarne gli elementi.

Poi un singolo Foglio di Stile può agire su pagine con strutture diverse. Infatti ipotizzando di avere 5 pagine a due colonne e 5 pagine a tre colonne, sarà sufficiente nominare gli elementi in modo differente, includendo tutti gli elementi, gli attributi e i valori nell'unico foglio di stile e il gioco è fatto.

L'altro grande vantaggio dato dall'uso dei CSS è dato dal fatto che il codice xhtml di tutte le pagine, sarà molto meno complesso di quanto lo sarebbe se ogni elemento di pagina avesse gli attributi e i valori inline.

Il successivo grande vantaggio derivato dall'uso dei CSS è dato dal fatto che il Forglio di Stile viene caricato una volta per tutte nella Cache Memory del browser e la visualizzazione delle pagine avviene più rapidamente. Se gli elementi avessere gli attributi e i valori inline, il browser dovrebbe leggerli ogni volta e le pagine avrebbero un caricamento più lento.

L'altro importantissimo vantaggio dato dall'uso dei CSS è di tipo indiretto. Un codice (X)HTML pulito, nel quale gli elementi sono privi di attributi e valori inline - che sono invece gestiti dal CSS esterno - è un codice ben formato che i motori di ricerca indicizzano rapidamente e facilmente, facendo salire la pagina che possiede tale codice, verso la fascia alta della classifica, decretando quindi un grande successo alla pagina stessa ed al sito nel quale la pagina è inclusa.

Un ulteriore grande vantaggio è relativo alla conformità delle pagine web agli standard emanati dal World Wide Web Consortium (W3C) che consiglia di applicare un uso estensivo e completo dei CSS nella realizzazione di pagine web. Questo, in ultima analisi, comporta una maggiore possibilità di ottenere la validazione da parte degli organismi ufficiali.

Infine, ma non meno importante, il vantaggio derivante dall'uso dei CSS è quello relativo all'accessibilità delle pagine prodotte. Un codice pulito e semplice pesa poco nel caricamento online e le pagine quindi divengono rapidamente visualizzabili e accessibili anche per coloro che possiedono connessioni lente. In più l'uso dei CSS permette di produrre variazioni che si addicono precipuamente a persone con disabilità (vedi CSS per lettori di schermo, per browser braille, e per altre tecnologie assistive).

La grammatica dei CSS
Prima di passare a vedere come in effetti si possono impiegare i CSS, è il caso di vedere quali siano gli elementi sui quali agisce un CSS.
Elemento (X)HTML. E' un elemento xhtml un entità costituente la pagina stessa, quindi si parla di elementi in riferimento ai vari Tags della pagina web come <body>, <div>, <table>, <td>, <tr>, <p>, <em>, ecc. ecc.
Attributo. L'attributo è il carattere identificativo dell'elemento che lo possiede, per cui un elemento può avere un suo carattere (attributo) che lo distingue da elementi simili. Ad esempio in una pagina possono alloggiarsi diversi elementi di paragrafo, ma se alcuni di questi mostrano un attributo identificativo specifico, questi saranno visualizzati in modo diverso dal browser rispetto agli elementi simili ma privi di attributo.


<p>primo paragrafo</p>
<p>secondo paragrafo</p>
<p class="grassetto">terzo paragrafo</p>

Si nota che tutti tre gli elementi sono paragrafi, ma uno ha un attributo identificativo che lo rende diverso (class).
Valore dell'attributo. Un attributo per essere attivo deve possedere un valore che ne permetta la gestione. Nell'esempio sopra abbiamo visto che il terzo paragrafo ha un attributo che è 'class', ma questo è un attributo generico che potrebbe essere applicato anche agli altri paragrafi i quali apparirebbero così identici. Ciò che trasforma un attributo generico in un attributo specifico è il valore, in questo caso 'grassetto'.

Gli attributi possono essere molto numerosi e possono avere valori assai diversificati, vediamone qualcuno:
  • class
  • id
  • language
  • type
  • selected
  • name
  • value
  • target
  • height
  • width
ed altri, ma quelli che più ci interessano sono i primi due.

L'attributo 'class' si può applicare a più elementi anche diversi nell'ambito dello stesso codice, mentre l'attributo 'id' può essere applicato ad un solo elemento del codice.
Utilizzando un attributo 'class' si possono identificare elementi uguali nello stesso codice e questo è pratico quando ci sono elementi ripetuti nella pagina che debbano avere le stesse caratteristiche.
L'uso del secondo attributo si addice a quegli elementi che non potrebbero avere un duplicato nella pagina come il caso dei capitoli. Se si è nella necessità di avere due capitoli <h1>, uno potrà rimanere senza attributo, mentre l'altro potrà portare l'attributo identificativo 'id' con valori a scelta.


<html>
<head>
<title>CSS esterni</title>
</head>
<body>
<h1>Titolo</h1>
<h1 id="sottotitolo">sottotitolo</h1>
<p class="premesssa">Premessa</p>
<p>testo</p>
</body>
</html>

Ora è il caso di vedere come fa un CSS ad influenzare un elemento xhtml.
In pratica il CSS è una cassettiera nella quale sono alloggiati tanti cassetti con dei nomi ben precisi e mai doppi, all'interno dei quali sono custoditi degli oggetti (valori) e sono tutti cassetti chiusi a chiave. Le chiavi dei singoli cassetti sono in possesso degli elementi della struttura xhtml della pagina web. Quindi l'elemento <h1> ha le chiavi per aprire il cassetto 'h1', l'elemento <p class="premessa"> ha le chiavi per aprire il cassetto '.premessa' e via di questo passo.
Quando il browser deve visualizzare l'elemento <h1>, prende da questo la chiave del cassetto e va nella cassettiera a prelevare i valori custoditi nel cassetto 'h1'.
Se il browser deve visualizzare l'elemento <h1> di un altra pagina, ha già i valori a disposizione e non deve stare a rifare il passaggio descritto dianzi.

Un elemento viene indicato nel CSS con il suo nome che possiede nel codice (X)HTML, quindi :
<body> = body
<h1> = h1
<em> = em , ecc. ecc.
Se l'elemento possiede un attributo ed un valore, nel foglio di stile compaiono le stesse cose :
<h1 id="sottotitolo"> = #sottotitolo
<p class="premessa"> = .premessa
e qui vediamo che l'attributo 'id' viene siglato con il cancelletto (#) posto prima del valore dell'attributo, mentre l'attributo 'class' viene siglato con un punto (.) prima del valore dell'attributo.

Cosa contiene ogni singolo cassetto della cassettiera di cui si diceva sopra?
Attributi e valori nel modo descritto qui sotto.
Supponiamo di volere che il colore di fondo delle nostre pagine sia grigio chiaro. Dovremo inserire nel cassetto chiamato 'body' un attributo chiamato 'background' che abbia un valore cromatico pari al grigio chiaro e per farlo useremo un codice in cifre e numeri in cui il grigio chiaro è rappresentato dal seguente codice : #cccccc. Il codice che verrà prodotto è il seguente :


body{
background : #cccccc
}

Come si nota gli attributi e i valori dell'elemento body sono racchiusi tra due parentesi graffa e tra l'attributo e il valore ci sono i due punti di separazione. In questo modo si possono gestire tutti gli elementi che presenteranno, ovviamente, molti altri attributi e svariati valori.

Nel caso invece che l'elemento possegga un attributo e un valore, il CSS ha una sintassi lievemente più complessa. L'elemento h1 comparirà nel codice come :
<h1 id="sottotitolo">
e il CSS che lo gestisce sarà :


#sottotitolo{ font : 110% arial,verdana,sans-serif; color : #ff0000; font-weight : bold; }

Noteremo subito come il selettore (elemento) sia preceduto da un cancelletto il che presuppone che solo quell'elemento avrà quelle caratteristiche. Poi notiamo come sia stato usato un attributo che gestisce la grandezza e l'aspetto del font che sarà pari al 110% dei valori impostati dal browser ed avrà le caratteristiche fisiche dei font indicati (Arial, Verdana, sans-serif). L'attributo 'color' indica di che colore saranno le lettere dell'elemento 'h1 sottotitolo', mentre l'ultimo attributo indica che le lettere saranno riprodotte in grassetto.

Quindi è giunto il momento di parlare delle singole proprietà.

Indice | Successiva >>

Linux Guide | Torna in alto