Sintassi delle regole CSS nell'attributo HTML "style"

Riassunto

Il linguaggio HTML comprende un attributo "style" utilizzabile con la maggior parte degli elementi e contenente un frammento di foglio di stile da applicare a quegli elementi. Uno dei linguaggi in cui scrivere i fogli di stile è il linguaggio CSS. Questo documento descrive la sintassi del frammento di CSS da usare nell'attributo "style".

Stato di questo documento

Questa sezione descrive lo stato di questo documento al momento della pubblicazione.

Questo documento è stato elaborato dal gruppo di lavoro sui CSS come parte dell'attività riguardante gli stili (si veda il riassunto). E' una Bozza di lavoro del W3C, soggetta a revisione da parte dei membri del W3C e di altre parti interessate. Essendo un documento in versione bozza, può essere aggiornato, sostituito, o reso obsoleto da altri documenti in qualsiasi momento. E' inappropriato citare o fare riferimento alle Bozze di lavoro del W3C se non in termini di "lavori in corso".

I commenti sono ben accetti, e possono essere inviati alla mailing list pubblica www-style@w3.org (si vedano le istruzioni per l'iscrizione), o direttamente ai redattori. Le discussioni devono comunque avvenire all'interno della mailing list.

Un elenco delle attuali Bozze di lavoro pubbliche del W3C è disponibile all'indirizzo http://www.w3.org/TR.

Indice dei contenuti

1. Riepilogo

Il linguaggio HTML 4.0 introduce l'attributo "style", i cui contenuti possono includere qualsiasi linguaggio per gli stili (attraverso l'uso di META http-equiv Content-Style-Type), ma che per default, e nella pratica, si usa solo per includere CSS. La Modularizzazione XHTML introduce il Modulo Attributo Style che ha anch'esso un attributo "style" la cui semantica è la stessa di quella in HTML 4. Il linguaggio SVG ha anch'esso un attributo "style" neutrale, il cui linguaggio viene specificato dall'attributo contentStyleType che ha come valore predefinito "text/css". Il linguaggio MathML prevede che tutti gli elementi MathML accettino l'attributo "style" per facilitare la compatibilità con i CSS.

Non tutti i formati di documento basati su XML hanno un attributo "style" che consenta l'uso di CSS per rendere gli stili di documenti e di elementi specifici all'interno di documenti, ma nel caso in cui un certo formato abbia un attributo "style" e l'attributo accetti il linguaggio CSS come valore, queste indicazioni descrivono la sintassi e l'interpretazione dell'attributo.

2. Esempi

Ecco alcuni esempi:

1. Per impostare soltanto proprietà per l'elemento stesso, senza usare pseudo-elementi o pseudo-classi:

   <p style="color: #090; line-height: 1.2">...</p>

2. Per impostare proprietà per l'elemento, e anche per la prima lettera dell'elemento, tramite lo pseudo-elemento '::first-letter'. Si tenga presente che in questo caso sono necessarie le parentesi graffe ({...}):

   <p style="{color: #090; line-height: 1.2}
             ::first-letter {color: #900}">...</p>

3. Per impostare le proprietà di un anchor (tag per i collegamenti) in ognuno dei suoi stati dinamici, usando le pseudo-classi:

   <a href="http://www.w3.org/"
             style="{color: #900}
             :link {background: #ff0}
             :visited {background: #fff}
             :hover {outline: thin red solid}
             :active {background: #00f}">...</a>

4. Per importare un foglio di stile da applicare a un preciso elemento:

   <div class="navigation">
             style="@import url(navigationstyles.css);">...</div>

Nota: in CSS1 e CSS2, l'ortografia di '::first-letter' e '::first-line' è rispettivamente ':first-letter' e ':first-line', cioé, con un singolo due punti, ma le specifiche sui Selettori raccomandano l'uso di doppi due punti per i pseudo-elementi.

Questo documento definisce sia il caso semplice (solo proprietà sull'elemento stesso - esempio 1) sia casi più complessi come regole da applicare solo all'elemento (per es., proprietà per gli pseudo-elementi e le pseudo-classi dell'elemento - esempi 2 e 3), e fogli di stile specifici (l'uso di @import per applicare il foglio di stile così invocato alla sezione del documento formata dall'elemento e dai suoi elementi discendenti, che hanno come root l'elemento stesso - esempio 4).

3. Grammatica

La sintassi del frammento di CSS consentito nell'attributo HTML "style" può essere formalmente specificata come segue:

foglio di stile inline
  : S* [ dichiarazioni | blocco di dichiarazioni | gruppo di regole inline* | foglio di stile ]
  ;

dichiarazioni
  : dichiarazione [ ';' S* dichiarazione ]*
  ;
  
blocco di dichiarazioni
  : '{' S* dichiarazioni '}' S*
  ;
  
gruppo di regole inline
  : [ pseudo* S* [ ',' S* pseudo* S* ]* ]?
    blocco di dichiarazioni
  ;  

Si prega di far riferimento alla grammatica descritta nell'appendice D delle specifiche CSS2 [CSS2] per la definizione dei simboli non definiti in questo documento.

Al foglio di stile inline si applicano le stesse regole per l'elaborazione compatibile con versioni successive che si applicano ai fogli di stile normali. Si veda il capitolo 4 delle specifiche CSS2.

4. Ordine di cascata

Il linguaggio CSS definisce già l'ordine in cui i fogli di stile e gli attributi "style" si applicano insieme nel caso in cui il frammento inline consista solo di dichiarazioni.

Oltre a semplici dichiarazioni, all'attributo "style" è ora consentito anche di esprimere gruppi di regole. Queste regole hanno la specificità aggiuntiva dei loro selettori oltre alla specificità dell'attributo "style". Gli esempi idicano cosa viene aggiunto a ciascun componente della specificità usando la familiare annotazione '+='.

Esempio:

<p style="{color: green; width: 10em}                   /* a+=0 b+=0 c+=0 */
          ::first-letter {float: left; font-size: 300%}   /* a+=0 b+=0 c+=1 */
         ">
  Questo è un esempio di un paragrafo con regole definite nell'attributo inline "style"
  per creare un effetto specifico, in questo caso, per ingrandire la lettera iniziale
  della prima parola, a mo' di manoscritto.
</p>

Esempio:

<a href="http://www.w3.org/Style/CSS"
   style="{color: blue; background: white}  /* a+=0 b+=0 c+=0 */
          :visited {color: green}           /* a+=0 b+=1 c+=0 */
          :hover {background: yellow}       /* a+=0 b+=1 c+=0 */
          :visited:hover {color: purple}    /* a+=0 b+=2 c+=0 */
         ">
  Esempio di un collegamento alla pagina principale sui CSS con effetti speciali
  per i link visitati e per il passaggio del mouse (hover) sul link.
</a>

5. Profili

Vengono forniti qui di seguito diversi profili per la conformità di implementazione. I profili hanno potenza e complessità crescenti. Ogni profilo è un gruppo superiore di tutti i profili che lo precedono, ed è compatibile con essi in modo retroattivo. Ciò consente di implementare per primi i profili più semplici, e in seguito quelli più potenti. Per essere conforme, un'implementazione deve implementare almeno un profilo.

Ogni profilo definisce un sotto-insieme della sintassi CSS consentita ed esclusa da un attributo 'style', elencando sia le forme grammaticali accettate per i fogli di stile inline, sia quelle escluse. Le forme che sono escluse da un profilo sono da considerarsi come non riconosciute, e ignorate, secondo le regole per l'analisi compatibile con versioni successive. Si veda il capitolo 4 delle specifiche per CSS2.

6. Ringraziamenti

Grazie al contributo di: Daniel Glazman, Ian Hickson, Eric A. Meyer, Björn Höhrmann.

7. Riferimenti

7.1. Riferimenti Normativi

[CSS2]

Bert Bos; Håkon Wium Lie; Chris Lilley; Ian Jacobs. Cascading Style Sheets, level 2. 12 May 1998. W3C Recommendation. URL: http://www.w3.org/TR/REC-CSS2

[HTML40]

Raggett, D.; Le Hors, A.; Jacobs, I.. HTML 4.0 Specification. 8 July 1997. W3C Recommendation. URL: http://www.w3.org/TR/REC-html40

7.2. Riferimenti Informativi

[MathML]

Patrick Ion; Robert Miner. Mathematical Markup Language (MathML™) 1.01 7 July 1999. W3C Recommendation. URL: http://www.w3.org/TR/REC-MathML

[SVG10]

Jon Ferraiolo ed. Scalable Vector Graphics (SVG) 1.0 Specification. 5 September 2001. W3C Recommendation. URL: http://www.w3.org/TR/SVG

[XHTMLMOD]

Modularization of XHTML™. 10 April 2001. W3C Recommendation. URL: http://www.w3.org/TR/xhtml-modularization