NOTA! Questo sito utilizza i cookie e tecnologie simili.

Se non si modificano le impostazioni del browser, l'utente accetta. Per saperne di piu'

Approvo

Capitolo 1: Introduzione. Cosa ci serve. Cosa faremo. Come aggiungere un foglio di stile ad una pagina web.

 

I CSS (Cascading Style Sheets), detti anche fogli di stile, sono particolari documenti, costituiti da un set di selettori (che identificano elementi html delle pagine web) e regole (coppie proprietà-valore) utilizzati per definire in maniera semplice e modulare l'aspetto visivo e il posizionamento degli elementi nelle pagine web.

 

Permettono, dunque, di separare l'attività di definizione dei contenuti (parole, immagini, ...) e della programmazione della pagina web (script, ...) dall'ASPETTO(posizioni, dimensioni, colori, sfondi, formattazione del testo) che tali contenuti dovranno avere una volta mostrati a video.

 

Un foglio di stile, poi, può essere condiviso da molti file html, ed una modifica apportata a tale documento verrà effettuata automaticamente su tutte le pagine; definito, quindi, un "template" (un modello) mediante uno o più file CSS, potrete gestire facilmente una gran quantità di pagine "in un colpo solo"!

 

 

Questa guida non intende essere un corso COMPLETO sui CSS (non verranno trattati argomenti quali gli stili audio o i CSS per la stampa), nè sostituire le "API" (le specifiche) dei fogli di stile, ma solo un corso di base e un "vademecum", un promemoria delle principali proprietà degli elementi.

 

Le specifiche complete di CSS1 sono reperibili mediante questo link, mentre per reperire le specifiche CSS2.1 potete cliccare qui.

 

Questa guida ha, come prerequisito, una buona conoscenza, da parte del lettore, dei comandi HTML e della definizione di pagine web in tale linguaggio.

Tali argomenti NON verranno ripresi nel corso della guida.

 

 

Tutto quello che ci serve è un semplice editor di testo (anche il classico "Blocco Note" va benissimo!) nel quale definire i fogli di stile (da salvare come file con estensione .css) e i file delle pagine web di prova (da salvare come file in formato .html).

 

 

Una considerazione sulla "notazione" utilizzata per elencare i possibili valori di una proprietà:

  • un insieme di termini separati dal segno | identificherà una serie di valori possibili per una data proprietà; ad es., la scrittura: "float: right | left | both | none" indicherà che, per la proprietà float, sarà possibile utilizzare un valore scelto tra right, left, both e none;
  • in caso di scelte più ampie, verrà indicato tra [] di leggere la descrizione posta successivamente nel testo o di riferirsi ad altre descrizioni già mostrate; es.: "width: [stesse opzioni di height]" indicherà al lettore che i valori possibili per il parametro width sono gli stessi già visti con height, per cui si rimanda alla descrizione di tale proprietà.

Con l'espressione "nell'html", poi, intenderemo "nel file html ove è definita la pagina web da gestire".

 

 

Vediamo subito come inserire i fogli di stile in un documento; sostanzialmente, abbiamo le seguenti opzioni (NON esclusive: potete utilizzare più metodi nello stesso documento):

  • foglio di stile in un file esterno, da caricare nel file html mediante il tag link posto in <HEAD>:

<HEAD>

...

<LINK REL="stylesheet" TYPE="text/css" HREF="[percorsoDelFile.css]">

...

</HEAD>

 

  • foglio di stile in un file esterno, da caricare nel file html mediante la direttiva @import posta all'interno di un blocco <STYLE>:

<STYLE>

@import url([percorsoDelFile.css]);

</STYLE>

 

  • foglio di stile interno, definito direttamente tramite uno o più blocchi <STYLE>:

<STYLE TYPE="text/css">

/* Regole, selettori, proprietà e valori CSS */

</STYLE>

 

  • non un foglio di stile, ma un attributo "STYLE" da specificare per ogni elemento all'intendo del documento html; ad esempio:

<P STYLE='color: red; text-align: left;'>Testo di prova</P>

 

Il consiglio è quello di utilizzare file esterni (aumenta la modularità e semplifica la leggibilità e la manutenzione del codice, agevolando le modifiche), o comunque di evitare la quarta soluzione (utilizzo degli attributi STYLE per i vari elementi).

 

 

NOTA: problemi di compatibilità --- Non tutti i browser supportano in maniera uniforme il set di comandi CSS, o a volte lo fanno ma con comportamenti diversi; potrebbe rendersi necessario, quindi, predisporre più fogli di stile per una pagina web per gestire tale evenienza, magari con  programmazione server-side (uno script in php o in un altro linguaggio potrebbe riconoscere il browser utilizzato dall'utente e decidere, di conseguenza, quale foglio di stile, tra quelli creati, associare alla pagina).

 

Altri articoli...

 
Vai all'inizio della pagina