|
I '''fogli di stile''' o fogli di stile a cascata''' - (dall'[[lingua_inglese|inglese]] '''CSS''', ''Cascading Style Sheets -Sheet'' sono unil linguaggio didefinito stiledal che[[W3C]] permette(''World diWide dareWeb unaConsortium'') per '''[[formattazione]]definire l'aspetto''' ad undelle documentopagine [[HTML]] oe [[XHTML]]. GliLa '''stili'''loro sonocreazione, applicabili anche aavvenuta filenel [[XML1996]], si è resa necessaria per '''separare i contenuti dalla [[SVGformattazione]]''' e similiimporre una programmazione più chiara e facile da utilizzare, sia per l'autore che per l'utente.
== Motivi ed evoluzione dei CSS ==
== Introduzione ==
=== Prima dei CSS ===
I '''fogli di stile''' sono un grande passo avanti per i [[progettista|progettisti]] di pagine [[Web]]: il contenuto è separato dalla sua rappresentazione, i tempi di caricamento delle pagine sono molto più bassi, è possibile creare più [[layout]] per tipo di dispositivo ([[stampante|stampanti]], [[browser]] testuali...) con un'unica pagina [[HTML]].
Una [[pagina web]] è formata fondamentalmente da due elementi: i '''contenuti''' veri e propri che la pagina intende fornire e la '''formattazione''' ovvero l'aspetto con cui i contenuti saranno mostrati all'utente.
Agli albori dell''''[[Internet]]''', il [[Web]] era usato prevalentemente negli ambienti scientifici, i [[ricercatore|ricercatori]] lo usavano per divulgare le proprie conoscenze, non erano interessati alla visualizzazione grafica. Inoltre, i mezzi disponibili (la [[banda larga]] è nata in questi ultimi anni) esigevano pagine web leggere. Le '''tabelle''' venivano usate come tabelle appunto: per contenere ed organizzare dati.
Il linguaggio HTML (e la sua evoluzione XHTML) ha come scopo quello di gestire i contenuti, specificandone la struttura attraverso ''tag'' diversi. Ogni tag (ad esempio <code><h1></code> o <code><p></code>) specifica un diverso ruolo dei contenuti che contrassegna (quindi il tag <code><h1></code> definirà un'importanza maggiore del tag <code><p></code>).
Con l'introduzione da parte di [[Netscape]] del [[tag]] <img>, sono nati i primi '''layout grafici''': le '''tabelle annidate''' dentro altre tabelle sono state impropriamente usate per 'contenere' le immagini, creando anche '''layout grafici''' complessi. Inoltre, la diffusione dell'[[Internet]], la facilità e la gratuità dell''''HTML''', la nascita di '''[[editor]] [[WYSIWYG]]''' ("What You See Is What You Get", ciò che vedi è ciò che otterrai) che permettavano a chiunque di creare pagine web, ha invaso il Web di pagine piene di '''[[grafica]] inutile''' e ridondante: sono aumentati i tempi necessari per scaricare le pagine e l'attenzione non si è focalizzata più sulla sostanza ma sulla forma, sull'aspetto delle pagine web.
I '''[[browser]]''' che interpretano il codice (X)HTML mostrano all'utente '''formattazioni predefinite''' per ogni tag che incontrano (così ad esempio i contenuti marcati con il tag <code><h1></code> avranno carattere ''18pt'' e i contenuti marcati da <code><p></code> avranno carattere ''12pt''). Tuttavia questa formattazione è completamente '''sotto il controllo dell'utente''', che può modificarla nelle ''Impostazioni'' del suo browser.
Queste tecniche accrescono considerevolmente la complessità delle pagine Web, offrono una flessibilità limitata, soffrono di '''problemi''' di interoperabilità e creano barriere per le persone disabili:
*L'uso di '''estensioni proprietarie''' di HTML
*La conversione del testo in '''immagini'''
*L'uso di immagini per il controllo dello '''spazio bianco'''
*L'uso di '''tabelle''' per l'impaginazione
*La scrittura di '''[[programma|programmi]]''' in sostituzione dell'uso di HTML
Per permettere agli '''autori''' di definire l'aspetto delle loro pagine, dal [[1993]] in poi [[Netscape Navigator]] ed [[Internet Explorer]], i due browser che si disputavano gli utenti nella nota [[guerra dei browser]], presentarono '''tag proprietari''', ovvero non aderenti agli ''standard'' e non compatibili con i browser concorrenti. Un esempio di questi tag è <code><font></code>.
'''''I fogli di stile risolvono questi problemi''''' nello stesso momento in cui sostituiscono la serie limitata di meccanismi di presentazione in '''HTML'''. I fogli di stile rendono semplice specificare la '''spaziatura delle righe''', i '''rientri''', i '''colori''' usati per il testo e gli sfondi, il corpo e lo stile dei '''caratteri''' ed una moltitudine di altri dettagli.
Questi tag proprietari di formattazione erano l'unico modo per gli autori di definire la formattazione e così il loro uso è diventato massiccio. Tuttavia questi tag presentano '''tre problemi''':
Ad esempio, il breve foglio di stile '''[[CSS]]''' che segue (presente nel file "special.css"), imposta sul verde il colore del testo di un [[paragrafo]] e lo circonda con un bordo continuo rosso:
#Il primo problema è costituito dalla lunghezza di questi tag. Se confrontata con una pagina che adotta il linguaggio CSS, una pagina che non lo adotta è in genere '''più pesante''' (in termini di [[Bit_(informatica)#Il_.27.27bit.27.27_come_cifra_binaria|bit]]) in un rapporto che spesso raggiunge il '''200%'''. Inoltre le istruzioni CSS possono essere raccolte in un [[file]] esterno che rimane memorizzato nella [[cache]] del browser, riducendo ulteriormente la quantità di dati che i [[server]] devono trasmettere.
P.special {
#Il secondo problema risiede nella mancanza di logica del codice (X)HTML. Un codice non aderente agli standard, ridondante e confuso comporta infatti molto '''lavoro aggiuntivo''' per i browser, che devono cercare di correggere ed interpretare (quando possibile) direttive arbitrarie.
color : green;
#Il terzo problema comincia a diventare sempre più rilevante ed è la mancanza di compatibilità con i nuovi '''[[Computer_palmare|computer palmari]]''' e gli [[smartphone]]. Queste pagine infatti sono progettate per schermi con risoluzione minima ''800x600 pixel''. I palmari, che hanno una risoluzione inferiore ed una forma dello schermo ben diversa dal rapporto 4:3 dei monitor per computer, si trovano quindi impossibilitati a visualizzare correttamente la pagina e l'utente dovrà tentare di "decodificarla", operazione spesso molto scomoda.
border: solid red;
}
Si tende ad evidenziare anche un ulteriore questione, nelle pagine web non standard, ovvero l'uso del tag <code><table></code> (le '''tabelle''') per realizzare l'impaginazione delle pagine web. Questo viene considerato dai puristi come inaccettabile in quanto le tabelle sono pensate per impaginare dati tabulari e non layout web. In realtà l'unico svantaggio serio di questo sistema è l'incredibile peso delle pagine, come già indicato al problema 1.
Gli autori possono collegare questo foglio di stile al loro documento sorgente HTML con l'elemento LINK:
=== CSS 1 ===
"<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40">
<HTML>
<HEAD>
<LINK href="special.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<P class="special">Questo paragrafo dovrebbe avere uno speciale testo verde.</P>
</BODY>
</HTML>"
Per tentare di risolvere questa situazione, nel [[1996]] il W3C '''emanò le specifiche CSS 1'''. I CSS 1 erano un interessante sistema per separare contenuto da formattazione. La base di questo lingaggio, infatti consisteva nel fatto che il contenuto sarebbe stato sempre definito dal codice (X)HTML, mentre la formattazione si sarebbe trasferito su un codice '''completamente separato''', il CSS appunto. I richiami tra i due codici venivano effettuati tramite due particolari attributi: ''class'' e ''ID''. Queste specifiche:
HTML 4.0 supporta le seguenti caratteristiche dei fogli di stile:
#Erano un'efficace soluzione al primo problema (escludendo la questione del tag <code><table></code>) perché riducevano notevolmente le dimensioni della pagine.
* '''Posizionamento flessibile delle informazioni''' sullo stile — '''Archiviare i fogli di stile''' in [[file]] separati li rende più facili da riutilizzare. A volte è utile includere istruzioni relative alla presentazione all'interno del documento a cui si applicano, raggruppate alternativamente all'inizio del documento, o negli attributi degli elementi per tutto il corpo del documento. Allo scopo di rendere più facile la gestione dello stile a livello [[sito web|sito]], queste specifiche descrivono come usare le intestazioni [[HTTP]] per impostare i fogli di stile da applicare a un documento.
#Risolvevano il secondo in modo parziale perché consentivano al codice (X)HTML di ritornare in gran parte semplice ed essenziale, ma presentavano qualche mancanza che costringeva a ricorrere ai tag HTML.
* '''Indipendenza da linguaggi specifici''' per fogli di stile — Queste specifiche non legano HTML ad alcun particolare linguaggio per fogli di stile. Ciò permette l'utilizzo di una serie di linguaggi, ad esempio semplici per la maggioranza degli utenti e anche molto più complessi per la minoranza di utenti con esigenze altamente specifiche. Gli esempi inclusi in seguito usano tutti il linguaggio CSS ([[Cascading Style Sheets]], fogli di stile a cascata) [CSS1], ma altri linguaggi per fogli di stile sarebbero ugualmente utilizzabili.
#Non prendevano però in considerazione il terzo, dato che nel 1996 i PDA erano scarsamente diffusi.
* '''Cascata''' — È la possibilità, fornita da alcuni linguaggi per fogli di stile come CSS, di mescolare le informazioni di stile a partire da diverse fonti. Queste potrebbero essere costituite, ad esempio, da linee guida [[azienda|aziendali]], stili comuni a un gruppo di documenti o stili specifici di un singolo documento. Memorizzando tutto ciò separatamente, i fogli di stile possono essere riutilizzati, semplificando la scrittura e rendendo più efficace l'uso delle [[cache di rete]]. La cascata definisce una [[sequenza]] ordinata di fogli di stile, dove le regole degli ultimi fogli hanno la precedenza su quelle precedenti. Non tutti i [[linguaggio di progrmmazione|linguaggi]] per fogli di stile supportano le cascate.
*'''Dipendenza dal media''' — HTML permette agli autori di scrivere documenti in modo indipendente dal [[media]]. Ciò permette agli utenti di accedere alle pagine Web usando una gran varietà di dispositivi e media come, ad esempio, visualizzazioni grafiche per [[computer]] [[Windows]], [[Macintosh]] [[Sistema operativo|OS]] e [[X11]], dispositivi per [[televisore|televisori]], [[telefono|telefoni]] adattati e dispositivi portatili basati su unità [[PDA]], [[interprete (informatica)|interpreti]] vocali e dispositivi tattili basati su [[braille]].
I fogli di stile, per contro, si applicano a media specifici o a gruppi di media. Un foglio di stile destinato all'uso su schermo potrebbe essere applicabile alla stampa, ma sarebbe alquanto inutile per gli interpreti vocali. Queste specifiche permettono di definire le categorie generiche di media a cui un dato foglio di stile è applicabile. Ciò permette agli interpreti di evitare di recuperare fogli di stile inappropriati. I linguaggi per fogli di stile possono includere caratteristiche per la descrizione di dipendenze dal media all'interno del foglio di stile stesso.
I CSS 1 sviluppavano un'idea semplice ma efficace, ma nonostante le loro grandi potenzialità non ebbero successo a causa della mancanza di browser in grado di supportarli.
=== Stili alternativi ===
Gli autori potrebbero voler offrire ai lettori ''diversi modi per viualizzare un documento''. Ad esempio, un foglio di stile per la presentazione di documenti compatti con [[carattere tipografico|caratteri]] di piccole dimensioni, o uno che specifichi caratteri più grandi per una maggiore leggibilità. Queste specifiche permettono agli autori di specificare un foglio di stile preferito così come '''alternative''' che hanno per obiettivo specifici utenti o media. Gli '''interpreti''' dovrebbero dare agli utenti l'opportunità di scegliere tra i vari fogli di stile alternativi o di disattivare completamente i fogli di stile.
=== CSS 2 e CSS 2.1 ===
Alcune persone hanno espresso preoccupazione riguardo gli effetti dei fogli di stile sulle prestazioni. Ad esempio, recuperare un foglio di stile esterno potrebbe ritardare la presentazione completa per l'utente. Una tale situazione si presenta se l'inizio ([[head]]) del documento include una serie troppo lunga di regole di stile.
Per includere nuove funzionalità e rendere i CSS un linguaggio ben supportato, nel [[1998]] il W3C '''emanò le specifiche CSS 2''' e nel [[2004]] le specifiche '''CSS 2.1'''. I CSS 2 sono la naturale evoluzione dei CSS 1 ed offrono potenti soluzioni per risolvere soprattutto il problema tre, con la possibilità di creare fogli di stile separati per i dispositivi portatili. Anche il problema due è ormai pienamente risolvibile, scrivendo una pagina (X)HTML esclusivamente indirizzata alla struttura e ai contenuti e manovrandola poi esclusivamente con i CSS per impaginarla.
La proposta corrente affronta tali questioni permettendo agli autori di includere istruzioni di presentazione all'interno di ogni elemento HTML. Le informazioni di presentazione restano così sempre disponibili nel momento in cui l'interprete vuole presentare ogni elemento.
Con la comparsa di [[Internet_Explorer|Internet Explorer 5]], di [[Firefox]] e di [[Opera_(browser)|Opera 7]], i CSS 2 hanno potuto avvalersi di browser in grado di interpretarli e sono quindi entrati a far parte del codice di molti siti web.
In molti casi, gli autori trarranno vantaggio da un foglio di stile comune per un gruppo di documenti. In questo caso, distribuire le regole di stile lungo il documento porterebbe in realtà a prestazioni peggiori rispetto all'uso di un foglio di stile collegato, poiché per la maggior parte dei documenti il foglio di stile sarebbe già presente nella cache locale. La disponibilità pubblica di buoni fogli di stile incoraggia questo effetto.
=== AggiungereCSS stile ad HTML3 ===
Nota. L'esempio di foglio di stile predefinito per HTML 4.0 incluso in [CSS2] esprime informazioni di stile predefinito generalmente accettate per ogni elemento. Gli autori e gli implementatori allo stesso modo potrebbero trovare qui una risorsa molto utile.
Le specifiche CSS 3 non sono state ancora rilasciate, sebbene il W3C pubblichi costantemente [http://www.w3.org/Style/CSS/current-work informazioni] sulle novità in fase di sviluppo. I CSS 3 dovrebbero presentare soluzioni per la correzione di alcuni bachi di interpretazione di Internet Explorer, migliorie nella gestione degli sfondi e una soluzione per realizzare i '''bordi arrotondati''' che la cui realizzazione affligge i webdesigner da tempo.
I documenti HTML possono contenere regole di stile direttamente al loro interno o possono importare i fogli di stile.
== Il codice CSS ==
Si può usare qualsiasi linguaggio per fogli di stile con HTML. Un linguaggio semplice per fogli di stile dovrebbe soddisfare i bisogni della maggior parte degli utenti, ma altri linguaggi potrebbero essere più indicati per usi maggiormente specializzati. Queste specifiche usano il linguaggio per fogli si stile "Cascading Style Sheets" ([CSS1]), CSS in breve, per gli esempi.
L'inserimento di codice CSS nelle pagine web può essere effettuato in due modi:
*Inserendo nel tag <code><head></code> della pagina un [[link|collegamento]] ad un foglio di stile '''esterno''', cioè un file contrassegnato dall'estensione ''.css'' come negli esempi seguenti:
<html>
<head>
<title>Esempio</title>
<link rel="stylesheet" type="text/css" href="'''foglio_di_stile.css'''">
</head>
o
La [[sintassi]] dei dati di stile dipende dal linguaggio utilizzato.
<html>
=== Impostazione del linguaggio predefinito per i fogli di stile ===
<head>
Gli autori devono specificare il linguaggio usato per le informazioni di stile associate ad un documento HTML.
<title>Esempio</title>
<style type="text/css">
@import "'''foglio_di_stile.css'''";
</style>
</head>
*Inserendo, sempre all'interno dell'<code><head></code> tra gli specifici tag <code><style></code> e <code></style></code> le dichiarazioni css.
Gli autori dovrebbero utilizzare l'elemento [[META]] per impostare il linguaggio predefinito per i fogli di stile di un documento. Ad esempio, per impostare CSS come linguaggio predefinito, gli autori dovrebbero inserire nella sezione HEAD dei loro documenti la seguente dichiarazione:
<html>
<head>
<title>Esempio</title>
<style type="text/css">
'''codice css'''
</style>
</head>
Le regole CSS sono strutturate secondo il seguente schema:
<META http-equiv="Content-Style-Type" content="text/css">Il linguaggio predefinito per fogli di stile può anche essere impostato mediante le intestazioni HTTP. La precedente dichiarazione META è equivalente all'intestazione HTTP:
''selettore'' {
''proprietà'' : ''valore1'', ''valore2'';
}
Gli elementi sono illustrati di seguito.
=== Selettori ===
Content-Style-Type: text/cssGli interpreti dovrebbero determinare il linguaggio predefinito per fogli di stile di un documento seguendo i seguenti passi (con importanza decrescente):
==== Selettori di tipo ====
Se qualsiasi dichiarazione META specifica il "[[Content-Style-Type]]" (tipo di stile del contenuto), l'ultima parte della [[Stringa (informatica)|stringa]] determina il linguaggio predefinito per fogli di stile.
I selettori di tipo applicano la regola a tutti gli elementi della pagina del tipo determinato. Esempi:
Altrimenti, se qualsiasi intestazione HTTP specifica il "Content-Style-Type" l'ultima parte della stringa determina il linguaggio predefinito per fogli di stile .
body {
Altrimenti, il linguaggio predefinito per fogli di stile è "text/css".
[...]
I documenti che includono elementi che impostano l'attributo [[style]] ma che non definiscono un linguaggio predefinito per fogli di stile sono scorretti. Gli strumenti di [[authoring]] dovrebbero generare le informazioni sul linguaggio predefinito per fogli di stile (tipicamente una dichiarazione META) in modo che gli interpreti non debbano confidare in "text/css" come linguaggio predefinito.
}
o
p {
[...]
}
==== Classi ====
=== Informazioni sullo stile in linea ===
Le classi applicano la regola a tutti gli elementi della pagina che presentano la proprietà <code>class="nome_classe"</code>. La sintassi CSS è la seguente:
Definizioni degli attributi
.nome_classe {
[...]
}
==== Identificatori ====
style = style [CN]
Gli identificatori (comunemente '''ID'''): applicano la regola a quell'elemento della pagina che presenta la proprietà <code>id="nome_identificatore"</code>. Solo un elemento in tutta la pagina può corrispondere ad un identificatore. La sintassi CSS è la seguente:
Questo attributo specifica le informazioni di stile per l'elemento corrente.
#nome_identificatore {
L'attributo style specifica le informazioni di stile per un singolo elemento. Il linguaggio dei fogli di stile per le regole di stile in linea è dato dal linguaggio predefinito per fogli di stile. La sintassi dei dati di stile dipende dal linguaggio utilizzato.
[...]
}
==== Pseudoclassi ====
Questo esempio imposta informazioni su colore e dimensioni dei caratteri per il testo in un paragrafo specifico.
Le pseudoclassi identificano elementi in base alle loro proprietà.
*''first-child'' individua un elemento solo se è il ''primo figlio'' dell'elemento padre. Così quindi
<P style="font-size: 12pt; color: fuchsia">Non sono favolosi, i fogli di stile? In CSS, le dichiarazioni di proprietà hanno la forma "nome : valore" e sono separati dal punto e virgola.
div:first-child {
[...]
}
individuerà nel codice X(HTML) sottostante solo il primo paragrafo.
<body>
<div>Lorem ipsum</div>
<div>Lorem ipsum</div>
<div>Lorem ipsum</div>
</body>
*''link'' e ''visited'' si applicano ai collegamenti. La prima identifica i collegamenti non visitati, la seconda quelli visitati. La sintassi CSS è:
L'attributo style può essere utilizzato per applicare un particolare stile a un singolo elemento HTML. Se lo stile sarà riutilizzato per diversi elementi, gli autori dovrebbero utilizzare l'elemento STYLE per raggruppare tali informazioni. Per una flessibilità ottimale, gli autori dovrebbero definire gli stili in fogli di stile esterni.
a:link {
[...]
}
*''active'', ''focus'' e ''hover'' identificano gli elementi solo in particolari condizioni, la prima se l'elemento è attivo, la seconda se è selezionato, la terza se il puntatore è sopra di lui. Quindi
=== Informazioni sullo stile nell'[[intestazione]]: l'elemento STYLE ===
p:hover {
<!ELEMENT STYLE - - %StyleSheet -- informazioni di stile -->
[...]
<!ATTLIST STYLE
}
%i18n; -- lang, dir, da usare con title --
si applicherà solo se il puntatore del mouse andrà sopra un paragrafo e solo per il tempo che vi rimarrà.
type %ContentType; #REQUIRED -- tipo di contenuto del linguaggio di stile --
media %MediaDesc; #IMPLIED -- progettato per l'uso con questi media --
title %Text; #IMPLIED -- titolo di riferimento --
>
Tag iniziale: richiesto, Tag finale: richiesto
*''lang'' si utilizza per identificare gli elementi di una certa lingua ma il suo supporto è esiguo.
Definizioni degli attributi
==== Pseudoelementi ====
type = content-type [CI]
Gli pseudoelementi identificano solo una parte di un elemento, senza la necessità di utilizzare la marcatura (X)HTML.
Questo attributo specifica il linguaggio dei fogli di stile per il contenuto degli elementi e sovrascrive il linguaggio predefinito. Il linguaggio per fogli di stile è specificato come un tipo di contenuto (ad es. "text/css"). Gli autori devono fornire un valore per questo attributo, per il quale non c'è valore predefinito.
media = media-descriptors [CI]
Questo attributo specifica il media a cui l'informazione di stile è destinata. Può essere un singolo descrittore di media oppure una lista di descrittori separati tra di loro da virgole. Il valore predefinito per questo attributo è "[[screen]]" (schermo).
Attributi definiti altrove
*''first-line'' individua solo la prima linea di un paragrafo. Se la finestra del browser cambia dimensione di adatterà automaticamente alla nuova dimensione della linea. La sintassi CSS è la seguente:
[[lang]] (informazioni sulla lingua), [[dir]] (direzione del testo)
p:first-line {
[[title]] (titolo dell'elemento)
[...]
L'elemento STYLE consente agli autori di inserire le regole di stile nell'intestazione del documento. HTML permette qualsiasi numero di elementi STYLE nella sezione HEAD di un documento.
}
*''first-letter'' individua solo il primo carattere di un elemento.
Gli interpreti che non supportano i fogli di stile, o che non supportano lo specifico linguaggio per fogli di stile usato da un elemento STYLE, devono occultare i contenuti dell'elemento STYLE. È un errore presentare il contenuto come parte del testo del documento. Alcuni linguaggi per fogli di stile supportano sintassi per nascondere il contenuto agli interpreti non conformi.
*''before'' e ''after'' sono due pseudoclassi utilizzate nella creazione dei '''contenuti generati'''. Non individuano un elemento, ma una posizione dove creare i contenuti. Sono poco utilizzate, dato il mancato supporto di Internet Explorer.
La sintassi dei dati di stile dipende dal linguaggio utilizzato.
==== Selettore di discendenza, figlio e fratello ====
Alcune [[implementazione|implementazioni]] dei fogli di stile possono permettere una maggiore varietà di regole, sia nell'elemento STYLE che nell'attributo style. Ad esempio, con CSS, le regole possono essere dichiarate all'interno di un elemento STYLE per:
Identificano solamente gli elementi che si trovino in una particolare condizione di discendenza nella struttura (X)HTML della pagina.
Tutte*Il le istanzeselettore di unodiscendenza specificoidentifica elemento HTML (ad es. tuttisolo gli elementi P,contenuti tuttiin glialtri elementi H1, ecc.) Così
p span {
Tutte le istanze di un [[elemento HTML]] appartenenti a una specifica classe (cioè, il cui attributo class è impostato su un qualche valore).
[...]
Singole istanze di un elemento HTML (cioè, il cui attributo id è impostato su un qualche valore).
}
Le regole per le precedenze tra regole di stile ed eredità dipendono dal linguaggio per fogli di stile.
identifica solo gli elementi <code><span></code> contenuti in elementi <code><p></code>.
*Il selettore figlio identifica invece solo gli elementi che siano contenuti ''direttamente'' nell'elemento padre. Così
La seguente dichiarazione STYLE CSS pone un bordo attorno a ogni elemento H1 nel documento e lo centra nella pagina.
div > p {
[...]
}
individua solo i <code><p></code> contenuti direttamenti in un <code><div></code>.
*Il selettore fratello identifica solo il ''primo'' elemento che abbia lo stesso grado di parentela di un altro. Così
<HEAD>
h1 + p {
<STYLE type="text/css">
[...]
H1 {border-width: 1; border: solid; text-align: center}
}
</STYLE>
individua solo il primo <code><p></code> fratello di <code><h1></code>
</HEAD>
Per specificare che queste informazioni di stile dovrebbero applicarsi solo agli elementi H1 di una specifica classe, si modifichi come segue:
==== Selettore di attributi ====
<HEAD>
<STYLE type="text/css">
H1.miaclass {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 class="miaclass"> Questo H1 è influenzato dal nostro stile </H1>
<H1> Questo non lo è </H1>
</BODY>
Il selettore di attributi permette, tramite la sintassi che segue, di identificare elementi (X)HTML in base ai loro attributi.
Infine, per limitare lo scopo delle informazioni di stile a una singola istanza di H1, si imposti l'elemento id:
a[title=Esempio]{
[...]
}
Questa regola si applica solo agli elementi <code><a></code> che presentano l'attributo <code>title="Esempio"</code>. I selettori di attributi sono molti e permetterebbero un controllo eccellente della pagina, ma Internet Explorer non li supporta ed il loro uso è quindi molto limitato.
=== Proprietà ===
<HEAD>
<STYLE type="text/css">
#miaid {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 class="miaclass"> Questo H1 non è influenzato </H1>
<H1 id="miaid"> Questo H1 è influenzato dallo stile </H1>
<H1> Questo H1 non è influenzato </H1>
</BODY>
Sebbene le informazioni di stile possano essere impostate per quasi tutti gli elementi HTML, due elementi, [[DIV]] e [[SPAN]], sono particolarmente utili dal momento che non impongono alcuna presentazione [[logica]] (a parte "a livello blocco" o "in linea"). Quando combinati con i fogli di stile, questi elementi permettono agli utenti di estendere HTML all'infinito, in particolare quando usati con gli attributi [[class]] e [[id]].
Le proprietà CSS sono molto numerose, circa '''60'''. Le più utilizzate sono:
Nell'esempio seguente, usiamo l'elemento SPAN per impostare il carattere delle prime parole di un paragrafo in minuscolo.
* ''background''. Definisce lo sfondo di un elemento. È la somma delle proprietà più specifiche ''background-attachment, background-color, background-image, background-position e background-repeat''.
* ''border''. Definisce il bordo di un elemento. È la somma delle proprietà più specifiche ''border-color, border-style e border-width''.
* ''color''. Definisce il colore del testo di un elemento. Per definire lo sfondo si utilizza la proprietà ''background''.
* ''float''. Questa proprietà definisce un blocco ''[[Flottante_(informatica)|flottante]]'', ovvero che permette la disposizione di altri elementi ai suoi lati.
* ''font''. Definisce le proprietà del carattere. È la somma di proprietà più specifiche tra cui ''font-family, font-size e font-weight''.
* ''margin'' e ''padding''. Definiscono lo spazio circostante gli elementi. La prima lo spazio esterno ai bordi, la seconda quello interno.
* ''text-align''. Definisce l'allineamento del testo.
=== Valori ===
<HEAD>
<STYLE type="text/css">
SPAN.sc-ex { font-variant: small-caps }
</STYLE>
</HEAD>
<BODY>
<P><SPAN class="sc-ex">Le prime parole</SPAN> di
questo paragrafo sono minuscole.
</BODY>
Se non specificata, una proprietà assume i valori predefiniti di ogni browser, altrimenti può assumere uno dei seguenti:
Nel seguente esempio, usiamo DIV e l'attributo class per impostare la [[giustificazione]] del testo per una serie di paragrafi, che costituiscono la sezione introduttiva di un articolo scientifico. Queste informazioni di stile possono essere riutilizzate per altre sezioni introduttive impostando l'attributo class altrove nel documento.
*''inherit''
*''auto''
*numero
*percentuale
*[[RGB|colore]]
*[[URI]]
*[[font]]
*altri valori tipici di ogni proprietà
La stringa ''inherit'' specifica che la proprietà deve ereditare il valore dagli elementi da cui l'elemento discende.
<HEAD>
<STYLE type="text/css">
DIV.Abstract { text-align: justify }
</STYLE>
</HEAD>
<BODY>
<DIV class="Abstract">
<P>La linea Chieftain è la nostra ammiraglia per
l'anno prossimo. Questo testo spiega come posizionare
Chieftain in relazione ai prodotti concorrenti.
La stringa ''auto'' indica che il browser deve utilizzare il suo valore di default.
<P>Chieftain rimpiazza la serie Commander, che resterà
in listino fino a ulteriori comunicazioni.
</DIV>
</BODY>
Se i numeri sono contraddistinti da un'unità di misura è necessario che tale unità sia espressa (tranne che nel caso dello zero). Tra il numero e l'unità non devono esserci spazi, come nell'esempio che segue.
=== Tipi di media ===
p {
HTML permette agli autori di progettare documenti che traggano vantaggio dalle caratteristiche del media dove il documento sarà presentato (ad es. [[visualizzatore grafico|visualizzatori grafici]], [[schermo televisivo|schermi televisivi]], dispositivi [[palmare|palmari]], interpreti vocali, dispositivi tattili basati su braille, ecc.). Specificando l'attributo media, gli autori permettono agli interpreti di caricare e applicare i fogli di stile selettivamente. Si prega di consultare la lista dei descrittori dei media riconosciuti.
margin : 5px;
padding: 0;
}
I colori possono essere indicati con più di un sistema. Ad esempio il colore arancione può essere indicato con
Le seguenti dichiarazioni di esempio si applicano agli elementi [[H1]]. In una proiezione per un incontro di affari, tutte le istanze saranno di colore blu. In una stampa, tutte le istanze saranno allineate al centro del foglio.
#ff6600
#f60
rgb(255,102,0)
rgb(100%,40%,0%)
L'[[URL]] viene indicato nelle forme
<HEAD>
url(<nowiki>http://esempio.it/file.html</nowiki>)
<STYLE type="text/css" media="projection">
url(<nowiki>"http://esempio.it/file.html"</nowiki>)
H1 { color: blue}
</STYLE>
I CSS permettono di indicare nella proprietà ''font-family'' più di un font. In questo modo il browser utilizzerà il primo che troverà installato sul [[sistema operativo]]. La dichiarazione utilizza questa sintassi:
<STYLE type="text/css" media="print">
p {
H1 { text-align: center }
font-family : Arial, Verdana, sans-serif;
</STYLE>Questo esempio aggiunge effetti sonori alle ancore per l'uso in output vocale:
}
<STYLE type="text/css" media="aural">
A { cue-before: uri(bell.aiff); cue-after: uri(dong.wav)}
</STYLE>
</HEAD>
Il controllo del media è particolarmente interessante quando applicato a fogli di stile esterni poiché gli interpreti possono risparmiare tempo recuperando dalla rete solo quei fogli di stile che si applicano al dispositivo corrente. Per esempio, gli interpreti a controllo vocale possono evitare di scaricare fogli di stile disegnati per la presentazione grafica. Si veda il paragrafo sulle cascate dipendenti dal media per maggiori informazioni.
== Fogli di stile esterni ==
Gli autori possono separare i fogli di stile dai documenti HTML. Ciò offre svariati benefici:
Gli autori e gli amministratori di siti Web possono condividere i fogli di stile per un gran numero di documenti (e siti).
Gli autori possono cambiare il foglio di stile senza che ciò richieda modifiche al documento.
Gli interpreti possono scaricare i fogli di stile selettivamente (basandosi sulle descrizioni del media).
=== Fogli di stile preferiti e alternativi ===
HTML permette agli autori di associare qualsiasi numero di fogli di stile esterni a un documento. Il linguaggio dei fogli di stile definisce come fogli di stile esterni multipli interagiscono (ad esempio, le regole di "cascata" CSS).
Gli autori possono specificare un certo numero di fogli di stile mutuamente esclusivi chiamati fogli di stile alternativi. Gli utenti possono selezionare il loro preferito tra questi in base ai loro gusti. Per esempio, un autore potrebbe specificare un foglio di stile disegnato per piccoli schermi e un altro per utenti con difficoltà di vista (es. caratteri di dimensione maggiore). Gli interpreti dovrebbero permettere agli utenti di selezionare tra i vari fogli di stile alternativi.
Gli autori possono specificare che una delle alternative è il foglio di stile preferito. Gli interpreti dovrebbero applicare il foglio di stile preferito dall'autore a meno che l'utente abbia selezionato una differente alternativa.
Gli autori possono raggruppare diversi fogli di stile alternativi (inclusi i fogli di stile preferiti dall'autore) sotto un singolo nome di stile. Quando un utente sceglie uno stile con un dato nome, l'interprete deve applicare tutti i fogli di stile con quel nome. Gli interpreti non devono applicare fogli di stile alternativi con un nome di stile diverso. Il paragrafo sulla specificazione di fogli di stile esterni spiega come assegnare un nome a un gruppo di fogli di stile.
Gli autori possono anche specificare dei fogli di stile persistenti che l'interprete deve applicare in aggiunta a qualsiasi foglio di stile alternativo.
Gli interpreti devono rispettare i descrittori dei media all'atto dell'applicazione di un foglio di stile.
Gli interpreti devono anche permettere agli utenti di disabilitare interamente i fogli di stile dell'autore, nel qual caso l'interprete non deve applicare alcun foglio di stile, persistente o alternativo.
=== Specificare i fogli di stile esterni ===
Gli autori specificano i fogli di stile esterni con i seguenti attributi dell'elemento [[LINK]]:
Impostare il valore di [[href]] sulla locazione del file del foglio di stile. Il valore di href è un [[URI]].
Impostare il valore dell'attributo type per indicare il linguaggio della risorsa (foglio di stile) collegata.
Questo permette all'interprete di evitare di scaricare un foglio di stile per un linguaggio non supportato.
Specificare che il foglio di stile è persistente, preferito o alternativo:
Per rendere un foglio di stile persistente, impostare l'attributo [[rel]] a "stylesheet" e non impostare
l'attributo title.
Per rendere un foglio di stile preferito, impostare l'attributo rel a "stylesheet" e dare un nome al foglio di stile con l'attributo title.
Per specificare un foglio di stile alternativo, impostare l'attributo rel a "alternate stylesheet" e dare un nome al foglio di stile con l'attributo title.
Gli interpreti dovrebbero dar modo agli utenti di visionare e scegliere dalla lista di stili alternativi. Si raccomanda il valore dell'attributo title come nome di ogni scelta.
In questo esempio, per primo specifichiamo un foglio di stile persistente locato nel file mystyle.css:
<LINK href="mystyle.css" rel="stylesheet" type="text/css">Impostare l'attributo title rende questo il foglio di stile preferito dall'autore:
<LINK href="mystyle.css" title="compact" rel="stylesheet" type="text/css">Aggiungere la parola chiave "alternate" all'attributo rel lo rende foglio di stile alternativo:
<LINK href="mystyle.css" title="Medium" rel="alternate stylesheet" type="text/css">
Per maggiori informazioni sui fogli di stile esterni, si prega di consultare il paragrafo su collegamenti e fogli di stile esterni.
Gli autori possono anche usare l'elemento META per impostare il foglio di stile preferito per il documento. Per esempio, per impostare il foglio di stile preferito su "compact" (vedere l'esempio precedente), gli autori potrebbero includere la seguente linea nella sezione HEAD:
<META http-equiv="Default-Style" content="compact">
Il foglio di stile preferito può anche essere specificato con le intestazioni HTTP. La dichiarazione META vista sopra è equivalente all'intestazione HTTP:
Default-Style: "compact"
Se due o più dichiarazioni META o intestazioni HTTP specificano il foglio di stile preferito, l'ultimo assume la precedenza. Le intestazioni HTTP sono supposte collocate all'inizio della sezione HEAD del documento a questo proposito.
Se due o più elementi LINK specificano un foglio di stile preferito, il primo assume la precedenza.
== Browser e CSS ==
I fogli di stile preferiti specificati con META o intestazioni HTTP hanno precedenza su quelli specificati con l'elemento LINK.
Il supporto completo e corretto delle specifiche CSS non è offerto da nessun browser attuale. Tuttavia esistono browser che si avvicinano molto a questo risulatato ed altri che invece ne sono molto lontani. La lista che segue è di [[motore di rendering|motori di rendering]] perché a loro è assegnato il compito di formattare la pagina secondo le istruzioni CSS.
== Fogli di stile a cascata ==
I linguaggi per fogli di stile a cascata quali CSS permettono di unire informazioni di stile provenienti da diverse fonti. Comunque, non tutti i linguaggi per fogli di stile supportano le cascate. Per definire una cascata, gli autori specificano una sequenza di elementi LINK e/o STYLE. L'informazione di stile è posta in cascata nell'ordine in cui gli elementi appaiono nella sezione HEAD.
*Trident ([[Internet Explorer]] e AOL Browser): Internet Explorer è attualmente il browser più diffuso e il suo supporto molto scarso dei CSS è probabilmente il maggior freno al loro sviluppo. Explorer presenta infatti molti [[Bug_(informatica)|bachi]] nella formattazione delle pagine, che le rendono diverse da quelle ottenute con altri browser. In aggiunta ai bachi, Explorer non supporta assolutamente alcune porzioni delle specifiche CSS 2. Le mancanze più gravi sono l'assenza di supporto per i '''contenuti generati''' e per il '''selettore di attributo'''. Gli unici strumenti a disposizione dei [[web designer]] sono i ''commenti condizionali'', una particolare funzionalità di Explorer che consente di inviare istruzioni solo a questo browser. La sintassi dei commenti condizionali è la seguente:
Nota. Queste specifiche non determinano come i fogli di stile in diversi linguaggi supportano le cascate. Gli autori dovrebbero evitare di mescolare i linguaggi per fogli di stile.
<!--'''[if IE]>'''
''codice esclusivamente per Internet Explorer''
'''<![endif]'''-->
:poichè <code><!--</code> introduce di norma un commento, i browser diversi da Explorer 5.0 o superiori non interpretano il codice. I commenti condizionali permettono di specificare un foglio di stile specifico per Internet Explorer nel modo che segue:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="'''foglio_di_stile_per_IE.css'''">
<![endif]-->
*[[Gecko]] ([[Firefox]] e [[Netscape_Navigator|Netscape]]): Gecko ha un ottimo supporto dei CSS 1 e 2 ed è per questo spesso utilizzato nella verifica della resa delle pagine web.
Nel seguente esempio, specifichiamo due fogli di stile alternativi nominati "compact". Se l'utente seleziona lo stile "compact", l'interprete deve applicare entrambi i fogli di stile esterni, così come il foglio di stile persistente "common.css". Se l'utente seleziona lo stile "big print", solo il foglio di stile alternativo "bigprint.css" e il foglio di stile persistente "common.css" saranno applicati.
*[[Presto_(motore_di_rendering)|Presto]] ([[Opera]]): anche Presto offre un ottimo supporto dei CSS 1 e 2. Opera offre inoltre un'opzione che permette all'utente di disattivare i fogli di stile o usarne di propri.
<LINK rel="alternate stylesheet" title="compact" href="small-base.css" type="text/css">
<LINK rel="alternate stylesheet" title="compact" href="small-extras.css" type="text/css">
<LINK rel="alternate stylesheet" title="big print" href="bigprint.css" type="text/css">
<LINK rel="stylesheet" href="common.css" type="text/css">Questo è un esempio di cascata che implica sia l'elemento LINK che quello STYLE.
*[[KHTML]] ([[Safari_(browser)|Safari]] e [[Konqueror]]): KHTML è attualmente il motore che offre il maggior supporto ai CSS, offrendo una parziale interpretazione anche dei CSS 3.
<LINK rel="stylesheet" href="corporate.css" type="text/css">
<LINK rel="stylesheet" href="techreport.css" type="text/css">
<STYLE type="text/css">
p.special { color: rgb(230, 100, 180) }
</STYLE>
=== Cascate dipendenti dai media ===
Una cascata potrebbe includere fogli di stile applicabili a media differenti. Sia LINK che STYLE possono essere usati con l'attributo media. è compito dell'interprete filtrare quei fogli di stile che non si applicano al medium corrente.
== CSS sui diversi dispositivi ==
Nel seguente esempio, definiamo una cascata in cui il foglio di stile "corporate" è fornito in diverse versioni: una indicata per la stampa, una per l'uso su schermo e una per [[interprete vocale|interpreti vocali]] (utile, ad esempio, per leggere la [[posta elettronica]] in [[automobile|auto]]). Il foglio di stile "techreport" si applica a tutti i mezzi. La regola di colore definita dall'elemento STYLE è usata per la stampa e lo schermo ma non per la presentazione audio.
Una utilissima funzione dei CSS è la possibilità di essere applicati solo sui dispositivi ('''media''') specificati dall'autore. La sintassi (X)HTML da utilizzare è la seguente.
<LINK rel="stylesheet" media="aural" href="corporate-aural.css" type="text/css">
<LINK rel="stylesheet" media="screen" href="corporate-screen.css" type="text/css">
<LINK rel="stylesheet" media="print" href="corporate-print.css" type="text/css">
<LINK rel="stylesheet" href="techreport.css" type="text/css">
<STYLE type="text/css">
p.special { color: rgb(230, 100, 180) }
</STYLE>
14.4.2 Ereditarietà e cascata
Quando l'interprete vuole presentare un documento, ha bisogno di trovare i valori per le proprietà di stile, ad esempio la famiglia di caratteri, il loro stile, la dimensione, l'altezza della linea, il colore del testo e così via. Il meccanismo esatto dipende dal linguaggio del foglio di stile, ma la descrizione che segue è generalmente applicabile.
<link rel="stylesheet" type="text/css" href="foglio.css" '''media="screen"'''>
Il meccanismo della cascata è usato quando un certo numero di regole di stile è applicato direttamente a un elemento. Il meccanismo permette agli interpreti di ordinare le regole per specificità, di determinare quale regola applicare. Se nessuna regola è disponibile, il passo successivo dipende dal fatto che le proprietà di stile possano essere ereditate o meno. Non tutte le proprietà possono essere ereditate. Per tali proprietà il linguaggio dei fogli di stile fornisce i valori predefiniti da usare quando non ci sono specifiche regole per un particolare elemento.
Il codice precedente associa il foglio di stile solo (in teoria) ai browser standard per computer desktop e portatili. I valori dell'attributo media sono i seguenti:
Se la proprietà può essere ereditata, l'interprete esamina l'elemento accluso per vedere se una regola si applica ad esso. Questo processo continua fino al reperimento di una regola applicabile. Questo meccanismo permette ai fogli di stile di essere specificati in modo compatto. Per esempio, gli autori possono specificare la famiglia di caratteri per tutti gli elementi all'interno del BODY (corpo) con una singola regola che si applica all'elemento BODY.
*screen ([[Desktop_(computer)|desktop]] e [[laptop]])
== Occultare i dati di stile agli interpreti HTML ==
*handheld ([[PDA]] e [[smartphone]])
Alcuni linguaggi per fogli di stile supportano una sintassi volta a permettere agli autori di occultare il contenuto degli elementi STYLE agli interpreti non conformi.
*print ([[Stampante|stampanti]])
*braille (browser braille)
*embossed (stampanti braille)
*projection (proiezioni)
*speech o aural (sintetizzatori vocali)
*tty (telescriventi)
*tv (televisioni)
*all (tutti i dispositivi)
Sebbene il numero dei dispositivi gestibili tramite CSS sia notevole, soltanto '''i primi tre sono supportati''' in maniera sufficiente. Il media screen è quello standard cui si fa riferimento. Il media handheld è specifico per i palmari, ma alcuni browser per palmari tentano, spesso con scarso successo, di interpretare anche i fogli marcati con screen, per cui si preferisce in genere marcare con handheld sia il foglio per lo schermo che quello per il palmare e poi usare quest'ultimo per sovrascrivere le istruzioni del primo. Il media print codifica la pagina per la stampa, è supportato discretamente. Un supporto completo è garantito da Opera.
Questo esempio illustra, per i CSS, come escludere un commento dal contenuto degli elementi STYLE per assicurarsi che gli interpreti più vecchi e non conformi non li presentino come testo.
== Fogli di stile preferiti e alternativi ==
<STYLE type="text/css">
<!--
H1 { color: red }
P { color: blue}
-->
</STYLE>
== Collegarsi ai fogli di stile tramite intestazione HTTP ==
Gli amministratori di [[server]] Web potrebbero trovare conveniente configurare il server così che un foglio di stile venga applicato a un gruppo di pagine. L'intestazione HTTP Link è descritta in [RFC2068], paragrafo 19.6.1.2, ha lo stesso effetto di un elemento LINK con gli stessi attributi e valori. Intestazioni multiple Link corrispondono a elementi multipli LINK occorrenti nello stesso ordine. Ad esempio,
Come descritto, ad ogni pagina si possono collegare '''più fogli di stile'''. Tuttavia è anche possibile '''far scegliere all'utente quali applicare'''. Per farlo si definiscono innanzitutto i fogli di stile permanenti, cioè non disattivabili, secondo la sintassi già vista. Poi si definiscono i fogli preferiti, cioè attivi al caricamento della pagina, ma disattivabili, aggiungendo l'attributo <code><title></code> come nell'esempio che segue:
<code><nowiki>Link: <http://www.acme.com/corporate.css>; REL=stylesheet</nowiki></code>
<link rel="stylesheet" type="text/css" href="foglio_preferito.css" '''title="Esempio1"'''>
corrisponde a:
A questo punto possiamo specificare fogli di stile alternativi cioè non attivi al caricamento, ma attivabili dall'utente, come nell'esempio che segue:
<code><nowiki><LINK rel="stylesheet" href="http://www.acme.com/corporate.css"></nowiki></code>
<link rel="'''alternate''' stylesheet" type="text/css" href="foglio_alternativo.css" '''title="Esempio2"'''>
è possibile specificare diversi stili alternativi usando intestazioni Link multiple e poi usare l'attributo rel per determinare lo stile predefinito.
Per attivare e disattivare i fogli di stile l'utente può ricorrere all'apposito menu del suo browser, tuttavia Internet Explorer non offre questa possibilità quindi è necessario creare uno script [[Javascript]] che svolga la funzione di sostituire i fogli. Il codice è stato pubblicato la prima volta su [http://www.alistapart.com/articles/alternate www.alistapart.com] ed è ora comunemente utilizzato. Tuttavia se questo script è facile da mettere in opera per gli sviluppatori, richiede un browser moderno con un buon supporto del [[DOM]], oltre che avere attivati sia Javascript e i cookie. Un sistema più complesso ma molto più robusto può essere uno script [[lato server]] come [[PHP]]. Un esempio è disponibile sempre sullo [http://www.alistapart.com/articles/phpswitch/ stesso sito].
Nel seguente esempio, "compact" è applicato come predefinito poiché omette la parola chiave "alternate" per l'attributo rel.
== Voci correlate ==
Link: <compact.css>; rel="stylesheet"; title="compact"
*[[Accessibilità_(informatica)|Accessibilità]]
Link: <bigprint.css>; rel="alternate stylesheet"; title="big print"Ciò dovrebbe ugualmente funzionare quando i documenti HTML sono inviati via posta elettronica. Alcuni interpreti di posta elettronica possono alterare l'ordine delle intestazioni [RFC822]. Per evitare che ciò influisca sull'ordine di cascata per i fogli di stile specificati tramite intestazioni Link, gli autori possono usare la concatenazione delle intestazioni per unificare diverse occorrenze del campo della stessa intestazione. Le virgolette sono necessarie solo quando i valori degli attributi includono spazi. Usare le entità [[SGML]] per riferirsi a caratteri che non sarebbero altrimenti permessi all'interno delle intestazioni HTTP o di posta elettronica, o che saranno probabilmente influenzati dal transito attraverso le [[gateway]].
*[[Browser]]
*[[Pagina web]]
*[[W3C]]
== Collegamenti esterni ==
Gli elementi LINK e META implicati in intestazioni HTTP sono definiti come se occorrano prima di qualsiasi elemento LINK e META esplicito nell'HEAD dei documenti.
* {{en}} [http://www.w3.org/TR/CSS1 Specifiche ufficiali CSS 1]
* {{en}} [http://www.w3.org/TR/CSS21 Specifiche ufficiali CSS 2.1]
* {{en}} [http://www.w3.org/Style/CSS/current-work Progetto CSS 3]
* {{en}} [http://jigsaw.w3.org/css-validator/ Validatore CSS]
* [http://www.html.it/css/ Guida ai CSS] di html.it
==Collegamenti esterni==
* [http://www.webmasterpointconstile.org/css/ Guidaconstile.org] suiSito Css]dedicato all'uso dei CSS
* [http://www.w3.org/TR/CSS21/ Specifiche CSS 2.1]
* [http://lau.csi.it/risorse/CSS2/index.shtml Lista completa delle proprietà CSS2 con descrizione delle funzionalità, valori e supporto dei browser.]
[[Categoria:Linguaggi di markup]] [[Categoria: Internet]] [[Categoria:Informatica]]
[[ar:صفحات الطرز المتراصة]]
[[tr:CSS]]
[[vi:CSS]]
[[zh:CSS]]
| 