I CSS, acronimo di Cascading Style Sheets ma solitamente chiamati fogli di stile, permettono di gestire il layout di un sito/applicazione web o di un'applicazione per dispositivi mobili basata su una struttura web, quindi HTML (come ad esempio per le applicazioni ibride realizzate con sistemi quali Apache Cordova per citarne uno) e volendo XML (anche se per quest'ultimi è consigliato l'utilizzo di XSL) garantendo una più snella manipolazione ed un più facile posizionamento degli elementi all'interno della pagina ed una loro conservazione strutturale in termini di cross-browser.
In questa guida verrà presa in considerazione sia la prima versione della specifica che la seconda dato che quest'ultima non è altro che la copia della precedente arricchita con nuove proprietà, valori e campi d'azione.
Considerando che i CSS lavorano sull'ereditarietà degli elementi ovvero che una proprietà assegnata ad un elemento viene automaticamente assegnata anche ai suoi discendenti (se le caratteristiche dell'elemento stesso lo permettono) è doverso avere un'idea generale su come gli elementi che compongono una pagina sono legati tra loro. Per lo scopo è possible trovare informazioni sulla struttura dei documenti nella guida dedicata allo standard DOM (Document Object Model).
Tornando direttamente ai CSS è bene inserire un piccolo codice di esempio su cui possiamo andare a fare la nostra analisi per capire meglio le nozioni di base ed andarle eventualmente ad approfondire con articoli dedicati:
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/reset.css" />
<link rel="stylesheet" type="text/css" media="print" href="/css/print.css" />
<style type="text/css">
/* Esempio codice css */
h1,h2 {font-family:Arial;}
#container {border:solid 1px #888;padding:10px;}
span {color:#AA0000;font-weight:bold;}
span.custom {color:#000;font-weight:normal;}
span > u {text-decoration:none;}
span > u > i {text-decoration:underline;}
@media screen and (max-width:319px) {
span {color:#00AA00;}
}
</style>
</head>
<body>
<h1>Titolo</h1>
<h2>Sottotitolo</h2>
<div id="container">
<p>Testo di riempimento per illustrare alcune caratteristiche del <span><u>CSS</u></span>.</p>
<p style="background-color:#00FFFF;">Interessanti sono anche le liste:</p>
<ul>
<li>Primo elemento</li>
<li>Secondo elemento</li>
<li>Terzo elemento</li>
</ul>
<div>E la differenza tra elementi di blocco quali appunto i div, le liste, i paragrafi, i tag h1, h2, ...</div>
<div>...ed elementi in linea come gli <span class="custom">span, <u>i tag per <i style="background-color:#FFFF00;">italico</i> e <b>grassetto</b></u></span>, come anche i <a href="javascript:void(0);">link</a>, gli input, ecc...</div>
</div>
</body>
</html>Eseguendo il codice di cui sopra, visualizzabile direttamente nel JSFiddle seguente è possibile notare alcuni effetti di base (cliccare sul tab "Result" per visualizzare il risultato finale):
Nell'esempio in questione il foglio di stile è presente in diverse tipologie di applicazione; lo troviamo prima di tutto come file esterno (css/reset.css), dove in questo caso le varie dichiarazioni non si trovano direttamente sulla pagina ma sono definite all'interno di un file con estensione .css richiamato attraverso l'elemento link (altro metodo per richiamare un file esterno è l'utilizzo di @import url(css/reset.css);).
Nell'esempio inoltre troviamo altre dichiarazioni presenti però in maniera incorporata ovvero gli stili sono dichiarati direttamente nella pagina, sia nella sua forma in linea all'interno dei tag (vedi ad esempio style="background-color:#00FFFF;" nel secondo paragrafo p) che racchiuso tra i tag style. L'attributo type per il tag style non è obbligatorio ed il blocco di codice può essere inserito in qualsiasi parte del documento anche se consiglio vivamente, per ragioni di organizzazione, interpretazione e caricamento della pagina, di inserirlo tra i tag head.
La soluzione migliore a mio avviso è quella di utilizzare l'elemento link ed esternalizzare il file in modo da rendere il foglio di stile indipendente, modificabile con semplicità e ottenere pagine più leggere.
Per entrare nel vivo della questione ed approcciare al mondo dei fogli di stile comincerei dalle ultime due frasi dell'esempio che introducono il concetto di elementi di blocco ed elementi inline ovvero, i primi possono contenere i secondi e in più altri elementi di blocco e la loro chiusura decreta l'inizio di una nuova riga nel documento; i secondi possono contenere solo altri elementi in linea e di contro non mandano automaticamente a capo il contenuto successivo. L'effetto di quanto appena enunciato è percepibile visivamente dal colore di fondo applicato ai due elementi, il primo paragrafo in celeste e il tag italico in giallo; l'applicazione dello stile è eseguita in maniera identica per entrambi gli elementi solo che per il primo, che appunto è un elemento di blocco, il background occupa tutta la riga mentre per il secondo si limita alla lunghezza del suo contenuto.
Per definire una regola CSS è necessario indicare un selettore ed almeno una dichiarazione che si disingue in una coppia proprietà:valore. Prendendo in esame la prima dichiarazione dell'esempio (#container {border:solid 1px #888;padding:10px;}) è possibile distinguere il selettore #container che definisce l'obiettivo di applicazione della regola, in questo caso l'elemento con id="container", e due dichiarazioni assegnatevi (racchiuse tra parentesi graffe): un bordo a linea unita di colore scuro e un margine di riempimento di 10px per ogni lato.
Il selettore può essere definito in base all'id (antecedendo un # al valore dell'attributo id dell'elemento), in base alla classe (antecedendo un . al valore dell'attributo class dell'elemento), indicando il tipo, ovvero il tag, dell'elemento o della collezione di elementi (span, div, ...) oppure può essere universale (indicandolo semplicemente con un asterisco, *) e le regole assegnateli valgono per tutti gli elementi del documento. Ci sono poi tutta una serie di varianti ed interazioni per definire una particolare classe all'interno di un gruppo di elementi (ad esempio span.custom dove si intende applicare uno stile a tutti gli elementi di tipo span ma che hanno la classe custom).
Un doverso accenno va fatto per la distinzione tra proprietà singole e proprietà a sintassi abbreviata.
Ho specificato precedentemente che la dichiarazione padding:10px; assegna al selettore un margine di riempimento di 10px per ogni lato ma la stessa cosa potrebbe essere scritta in modo diverso:
/* Proprietà a sintassi abbreviata */
#container {padding:10px;}
/* Prorietà singole */
#container {padding-top:10px;padding-bottom:10px;padding-left:10px;padding-right:10px;}
/**** CURIOSITA' ****/
/* E' possibile abbreviare anche altri tipi di situazione dove le proprità singole hanno valori diversi */
/* Prendiamo in considerazione questa dichiarazione a proprietà singole */
#container {padding-top:10px;padding-bottom:10px;padding-left:5px;padding-right:5px;}
/* La dichiarazione di cui sopra può essere scritta con le proprietà a sintassi abbreviata */
#container {padding:10px 5px 10px 5px;}
/* E volendo può essere abbreviata ulteriormente */
#container {padding:10px 5px;}E' evidente a questo punto che i commenti al codice si aggiungono comprendendo il testo tra i simboli /* e */ (anche su multiriga).
Infine per completare la panoramica introduco le regole (rules) che si possono trovare all'interno di un foglio di stile e la cui sintassi vede precedere la dichiarazione dal simbolo @, come nell'esempio @media screen and (max-width:319px) {span {color:#00AA00;}} il cui effetto è percepibile sul colore della parola "CSS" evidenziata nel primo paragrafo in quanto diminuendo la dimensione del browser al minimo il suo colore cambierà (è lo stesso principio su cui si basa il responsive design per adattare il layout ai vari dispositivi: desktop, tablet e smartphone). L'attributo media può trovarsi, oltre che direttamente nel codice css, anche all'interno dell'elemento link, come visibile nel codice di esempio media="print" per indicare che quel foglio di stile deve essere preso in considerazione per la stampa. L'attributo media non è obbligatorio ma può essere utile in molti contesti per indicare il foglio di stile da utilizzare in base al dispositivo che legge la pagina e può assumere anche altri valori oltre a quelli menzionati come ad esempio screen per la visualizzazione su schermo del computer, tv per la visualizzazione su schermi televisivi, projection per le presentazioni, ed altri per i quali rimando alle specifiche nella relativa sezione sul sito w3.org.
Gli articoli che seguono approfondiscono alcuni concetti menzionati con leggerezza in questa parte introduttiva per il solo motivo che richiedono una trattazione a se stante per poter apprezzare in maniera adeguata le proprie caratteristiche.
Nessuno ha ancora commentato questo articolo, fallo tu per primo!
Scrivi un Commento