Guida Fogli di Stile CSS | nell apagina web

Guida CSS Fogli di stile - Ver. 4.1.3 - Ottobre 2008

A style incorporato Cioè quando allo stesso stile fanno riferimento più elementi (tags) html uguali nella stessa pagina. Sarebbe estremamente dispersivo, oltre che laborioso, definire lo stesso stile più volte all'interno della stessa pagina visto che servirebbe sempre per lo stesso identico scopo. Molto meglio definirlo una sola volta, ad inizio pagina. Così facendo tutti gli elementi della pagina interessati seguiranno lo stesso stile.

In questo caso le istruzioni non saranno più inserite all'interno di uno specifico elemento come abbiamo visto nella spiegazione in linea ma saranno dichiarate ad inizio pagina, usando il tag (tags) <style> e </style> posto all'interno della sezione <head> </head>

Questo metodo non impedisce di fare uso anche di eventuali definizioni di stile in linea, definizioni che 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, cosa che non serviva per gli styli in linea.

Facendo riferimento ancora 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 <p> definito con la consueta forma html <p> ... </p> subirà lo stile impostato ad inizio pagina, a meno che non ne venga creato uno in linea, il quale, come ho detto sopra, avrebbe la priorità rispetto all'altro.

Ripeto ancora una volta l'importanza della chiusura degli elemento aperti, anche nei casi in cui si trattasse di elementi come <p> che in html non necessiterebbero della relativa chiusura </p> Non chiudere un elemento significa non porre fine allo stile ad esso associato ed estenderlo a tutto il documento, cosa sbagliata e spesso non voluta.

In questo contesto infatti 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.

Spiegando il codice dell'esempio: i due elementi , 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 supportarlo. Da non usare nel caso in cui si volessero lasciare commenti all'interno della dichiarazione di stile, non è come con HTML, se serve commentare si adoperano /* (barra e asterisco) per inizio commento e */ (asterisco barra) per la sua fine.

<style type="text/css">
<!--
p {
text-align: justify; /*  allineamento giustificato */
color: #ff0000; /*  colore rosso */
}
-->
</style>

La stesura del codice io l'ho scritta così solo per dare un certo ordine ma nessuno vieta che possa essere scritta tutta su una riga, l'importante è rispettare i simboli, parentesi, due punti, spazi, punti e virgola:

<style type="text/css">
<!--
p {text-align: justify; color: #ff0000;}
-->
</style>

Nell'esempio è stato adoperato l'elemento (tag) <p> senza le sue parentesi angolari, avrete sicuramente capito che potevamo usare qualsiasi altro elemento valido di html.

Vista questa possibilità, perché non ridefinire elementi che non si adoperano perchè non piacciono o personalizzare quelli più adoperati per rendere il tutto più gradevole?

Così facendo sarebbe come avere a disposizione dei nuovi comandi html, o meglio dei nuovi elementi, con in più il fatto di averli personalizzati a proprio piacere, se non è versatilità questa.

Personalmente faccio poco uso di elementi ridefiniti, preferisco molto di più usare delle "classi" (le vedremo più avanti) che creo sul momento e alle quali associo nomi molto più significativi, per me, che mi facciano capire meglio cosa fanno. Non esistono limiti al numero di classi definibili dall'utente, per cui viva la fantasia di ognuno di noi.