CSS/Contenuto generato: differenze tra le versioni

Contenuto cancellato Contenuto aggiunto
BimBot (discussione | contributi)
m Robot: Changing template: Linguaggio CSS
Ramac (discussione | contributi)
m formattazione
Riga 1:
{{CSS}}
Una delle grandi funzionalità del CSS consiste nella possibilità di generare automaticamente il contenuto degli elementi della pagina.<br/>
Per fare ciò si usa la proprietà '''content''', che purtroppo non è supportata sempre correttamente da tutti i browser.
 
== content&nbsp; ==
La proprietà <code>'''content</code>''' imposta il contenuto dell'elemento. Può assumere come valore:
*'''none''': non viene generato alcun contenuto
*una combinazione di:
Riga 13:
**'''no-open-quote''' o '''no-close-quote''': non mostra virgolette ma aumenta il livello di identazione
Questa proprietà è usata soprattutto con le pseudoclassi :before e :after, ad esempio in questo modo:
<source lang=css>
body:after {
content: 'The end';
}
</source>
imposta il contenuto finale del corpo della pagina. Le pseudoclassi :before e :after non sono però supportate correttamente da IE.
 
== Uso delle virgolette ==
Per specificare i diversi tipi di virgolette da usare per i diversi livelli di identazione usiamo la proprietà <code>'''quotes</code>''' la cui sintassi è:
quotes: [apertura1 chiusura1] [apertura2 chiusura2] [apertura''n'' chiusura''n'']
Per spiegare l'uso facciamo un esempio:
<source lang=css>
/* questo è lo stile */
p { quotes: '<<' '>>' '"' '"'; }
blackquote:before { content: open-quote; }
blackquote:after { content: close-quote; }
</source>
<source lang=html4strict>
<!-- nell'HTML -->
<nowiki>
<!-- nell'HTML -->
<p>Luigi disse:
Line 41 ⟶ 43:
Questo è quello che disse Luigi
</p>
</nowikisource>
dovrebbe fornirefornisce come output
<p>Luigi disse:
<blockquote><<
Line 51 ⟶ 53:
Questo è quello che disse Luigi
</p>
 
== Lavorare con i contatori ===
CSS permette inoltre di generare automaticamente contenuti numerati. Per fare ciò è possibile usare due proprietà:
counter-reset: <nome1> <valore1> <nome2> <valore2> <nome''n''> <valore''n''>
Line 62 ⟶ 65:
 
Vediamo un esempio per chiarire il concetto:
<source lang=css>
<nowiki>
/*nel foglio di stile*/
body { counter-reset: capitolo; }
Line 74 ⟶ 77:
counter-increment: sezione;/* incrementa la sezione */
}
</source>
<source lang=html4strict>
<!-- nel codice html -->
<h1>La pagina</h1>
Line 88 ⟶ 92:
<h2>Il tag font</h2>
<p>...</p>
</nowikisource>
 
produrrà come output