Fabio Donatantonio

Resta connesso

Software Developer / Adjunct Professor

CSS: introduzione ai fogli di stile

Dietro il semplice acronimo CSS (Cascading Style Sheets – Fogli di stile a cascata) si nasconde uno dei fondamentali linguaggi standard del W3C.
La sua storia cammina su binari paralleli rispetto a quelli di HTML, di cui vuole essere l’ideale complemento. Da sempre infatti, nelle intenzioni degli uomini del Consortium, HTML, il CSS dovrebbe essere visto semplicemente come un linguaggio strutturale, alieno da qualunque scopo attinente la presentazione di un documento.

L’obiettivo del CSS è quello di arricchire l’aspetto visuale ed estetico di una pagina e l’idea alla base dell’evoluzione di questo linguaggio è essenzialmente quello di separare il contenuto dalla presentazione.

Il W3C ha pubblicato due raccomandazioni (una sorta di standard) principali per il CSS:

  • CSS1 (1996)
  • CSS2 (1998)

Al momento è in fase di ultimazione la raccomandazione CSS3. Ciascuna di esse definisce le regole e la sintassi a cui deve attenersi uno sviluppatore di fogli di stile.

Perchè utilizzare il CSS

Nelle lezioni precedenti abbiamo appreso le basi per un buon sviluppo di pagine HTML, ed inoltre ci si sarà pienamente resi conto dei limiti di questo linguaggio sul lato della pura presentazione.

Quasi tutto quello che con HTML non è possibile realizzare, riusciremo a farlo con i fogli di stile.
Finalmente, ad esempio, potremo dare al testo delle nostre pagine un aspetto da word-processor: non solo con il colore o i font che si preferisce, ma con un sistema di interlinea pratico e funzionale, con le decorazioni desiderate, riuscendo a spaziare lettere e parole, impostando stili diversi per titoli e paragrafi, sfruttando i benefici dell’indentatura o della giustificazione.
Si potranno distanziare gli elementi che compongono la pagina, incastrarli e sovrapporli tra loro. Giocare con i colori, le sfumature e i bordi ed utilizzare immagini come sfondi.

Un altro vantaggio non di poco conto nell’uso dei fogli di stile è la separazione che esiste tra questi e le pagine html. In altre parole qualora si desideri cambiare un’immagine di sfondo da centinaia di pagine html, sarà necessario modificare esclusivamente poche righe del file CSS legato alle pagine. Il vantaggio inoltre è quello di avere pagine più leggere, facilmente modificabili e mantenibili.

Fogli di stile a cascata

Il termine cascading (presente nell’acronimo CSS) si riferisce all’ordine di applicazioni delle definizioni di stile.
In altre parole il browser interpreta le regole di stile dall’alto verso il basso e le compone insieme per realizzare la presentazione della pagina html a cui è associato.

Se ad esempio, una regola css definisce alcune proprietà di un elemento ed una successiva ne definisce di diverse per lo stesso elemento, queste vanno a sommarsi alle regole precedenti. Di conseguenza se una regola css ri-definisce una regola precedentemente definita, quest’ultima (essendo letta in cascata) sovrascrive la prima.

Inoltre è da sottolineare che le definizioni di stile in un file esterno hanno minore priorità di quelle definite all’interno dei tag html (con l’attributo style visto nella lezione precedente).
Di conseguenza una regola definita all’interno del tag sovrascrive quella definita all’interno del foglio di stile esterno.

CSS esterni ed interni

Esistono vari modi per inserire i fogli di stile in un documento html.
Innanzitutto è necessaria una prima distinzione:

  • CSS esterni
  • CSS interni

È esterno un foglio di stile definito in un file separato dal documento. Si tratta di semplici documenti di testo editabili anche con il Blocco Note ai quali si assegna l’estensione .css.

Un foglio di stile si dice invece interno quando il suo codice è compreso in quello del documento html.

A seconda che si lavori con un CSS esterno o interno variano sintassi e modalità di inserimento. Rispetto a queste diverse modalità si parla di fogli di stile collegati, incorporati o in linea.
Per caricare un foglio di stile esterno è possibile utilizzare due sintassi differenti: link o import. Nel primo caso scriveremo:

<link rel=”stylesheet” type=”text/css” href=”stile.css”>

Con import invece:

@import url(stile.css);

Entrambe le dichiarazioni di inclusione vanno inserite all’interno dell’head delle pagine html. La import inoltre va preceduta dal tag <style> e seguita dal rispettivo tag di chiusura </style>.

Questi tag sono essenziali anche per definire le regole di stile incorporati. In questo caso all’interno del tag <style> verranno elencate in cascata le varie dichiarazioni:

<style type=‘text/css’>
…..
</style>

E’ essenziale specificare il tipo di linguaggio di stile utilizzato con l’attributo type che nel nostro caso varrà sempre text/css.

Infine lo stile in linea prevede l’uso dell’attributo style per ogni elemento che compone la pagina web. Come visto nella lezione precedente, tale attributo è utile per acquisire familiarità con le diverse proprietà degli elementi html, ma da punto di vista stilistico non è un buon modo di implementare il CSS perché non rispetta la regola enunciata all’inizio di questa lezione, che vuole la netta separazione tra struttura e presentazione.

In definitiva possiamo utilizzare una regola generale per scegliere il tipo di inclusione del nostro codice CSS.

Il CSS interno direttamente sul codice in genere viene usato:

  1. per casi isolati e che non necessitano di cambiamenti
  2. per formattazioni che riguardano tutta la pagina HTML

Il CSS esterno invece:

  1. viene usato per formattazioni che riguardano anche più pagine HTML
Fabio Donatantonio

Fabio Donatantonio. Analista e sviluppatore full-stack di applicazioni web in linguaggio PHP. Professore a Contratto per le cattedre di Fondamenti di Informatica e Archivistica Digitale presso Università degli Studi eCampus. Dal 2008 curatore del sito www.donatantonio.net, da sempre appassionato di programmazione, mare, sigari e... musica.

Ti potrebbe piacere anche

Leave a reply

Your email address will not be published. Required fields are marked *

 

Didattica

Università degli Studi eCampus
Data Evento
05/07/2019
11:30
Esame Archivistica Digitale e Informatica per le Scienze Umane - Cds Filologia Moderna - Lettere - Novedrate(CO)
05/07/2019
11:30
Esame Introduzione all'Archivistica Digitale e all'Informatica per le Scienze Umane - Cds Letteratura, Arte, Musica e Spettacolo - Lettere - Novedrate(CO)
05/07/2019
11:30
Esame Abilità Informatiche e Telematiche - Cds Design e Discipline della Moda - Lettere - Novedrate(CO)
12/07/2019
11:30
Esame Introduzione all'Archivistica Digitale e all'Informatica per le Scienze Umane - Cds Letteratura, Arte, Musica e Spettacolo - Lettere - Roma
12/07/2019
11:30
Esame Archivistica Digitale e Informatica per le Scienze Umane - Cds Filologia Moderna - Lettere - Roma
12/07/2019
11:30
Esame Abilità Informatiche e Telematiche - Cds Design e Discipline della Moda - Lettere - Roma
Risorse
Guida HTML/CSS per principianti (link)
Introduzione agli ipertesti (link)
Esercizi guidati in Java (link)
Intelligenza artificiale (link)
Libri
Fondamenti di Informatica (2011) (link)
Informatica per le Scienze Umane (2011) (link)
Fondamenti di Informatica (2014) (link)
Pagina Docente
uniecampus.it - Scheda Docente (link)
Contatti
fabio.donatantonio[at]uniecampus.it

JWhisper, sviluppato presso il Dipartimento di Informatica Applicata dell'Università degli Studi di Salerno:

Stay Connected

Twitter

Le mie foto

Foto di Fabio Donatantonio
×