Corso HTML e CSS (28^ lezione): Contenuto generato

Impariamo a costruire un sito Web

Lezione 28: CSS: Il contenuto generato e la stampa.

Penultima lezione sulle proprietà ed i possibili valori che possiamo assegnare loro nei fogli di stile.

Vediamo oggi le proprietà relative a:

– Contenuto generato (CSS2, quindi supportate da tutti i browsers)

– cursor e le due proprierà relative alla stampa.


content

Usato con :before e :after per inserire del contenuto generato.
Di questa proprietà avevamo già visto un uso legato appunto agli pseudo-elementi :before e :after.

I valori che content può assumere sono:

none Imposta il contenuto vuoto.
normal Imposta il contenuto a normal che per default è none e quindi ancora contenuto vuoto.
counter Il contenuto è un contatore. Vedremo un esempio dopo aver spiegato le proprietà counter-increment e counter-reset.
attr(attributo)

Inserisce il valore di uno specifico attributo prima (:before) o dopo (:after) l’elemento selezionato.

ES.: se nel CSS scriviamo:
a:after {
content:" (" attr(href) ")";
}
e nella pagina html:
<a href="http://www.weweb.in">WeWeb</a>

vedremo il seguente risultato:
WeWeb (http://www.weweb.in)

Le due parentesi tra virgolette sono costanti che vengono riportate così come sono ed in mezzo viene aggiunto l’attributo href che nella circostanza era http://www.weweb.in

stringa Il contenuto viene impostato con la stringa indicata. Abbiamo visto un esempio qui sopra dove abbiamo inserito le stringhe " (" e ")" nel contenuto. Come visto nell’esempio i diversi contenuti (nell’esempio stringhe e attributi) possono essere messi insieme indicandoli conecutivamente secondo come devono apparire separati da uno spazio.
open-quote Imposta il contenuto ad ‘aperte virgolette’ che nel nostro set di caratteri corrispondono a ‘chiuse virgolette’ e cioè ".
close-quote Imposta il contenuto a ‘chiuse virgolette’ che nel nostro set di caratteri corrispondono a aperte virgolette’ e cioè ".
no-open-quote Rimuove le aperte virgolette.
Se per esempio abbiamo open-quote ad <h3> nel CSS così:
h3:before
{
content:open-quote;
}
ma in determinati casi vogliamo che <h3> non venga preceduto dalle virgolette, definiamo una classe a cui assegnamo no-open-quote così:
h3.novirg:before
{
content:no-open-quote;
}
no-close-quote Rimuove le chiuse virgolette. Uso analogo a quanto visto per no-open-quote.
url(url)

Imposta il contenuto con un oggetto reperibile all’URL indicato (immagine, video ecc.)

Es.: Nel CSS scriviamo:
h4:before {
content:url(w_icon.jpg);
}
e nel foglio html:

<h4> Titolo del paragrafo</h4>

A video vedremo:

Titolo del paragrafo

inherit Specifica che il valore di questa proprietà sarà ereditato dall’elemento padre.

 

counter-increment

Incrementa uno o più contatori. Questa proprietà è di regola usata insieme a content ed a counter-reset.

Verrà fornito un esempio al punto successivo dove si parla di counter-reset.

none Nessun contatore sarà incrementato
id numero L’id si riferisce al contatore da incrementare. Il numero stabilisce come vada incrementato ciascuna volta. Il valore di default è 1. Sono ammessi i numeri negativi così come lo zero.
Se l’id si riferisce ad un contatore che non è ancora stato azzerato con counter-reset il valore di partenza di default è 0 e non 1.
inherit Specifica che il valore sarà ereditato dall’elemento padre.
counter-reset

Crea o resetta uno o più contatori.Questa proprietà è di regola usata insieme a content ed a counter-increment.

I valori che può assumere sono:

none Nessun contatore sarà resettato. Default.
id numero L’id si riferisce al contatore da resettare. Il numero stabilisce il valore di partenza del contatore. Il valore di partenza di default è 0.
inherit Specifica che il valore sarà ereditato dall’elemento padre.

Es d’uso:
In un CSS scriviamo:
body {counter-reset:capitolo;}
h2 {counter-reset:paragrafo;}
h2:before {
counter-increment:capitolo;
content:"Capitolo " counter(capitolo) ". ";
}
h3:before
{
counter-increment:paragrafo;
content:counter(capitolo) "." counter(paragrafo) " ";
}

Nel foglio html scriviamo invece:

<h2>Linguaggi client-side</h1>
<h3>HTML</h2>
<h3>Javascript</h2>

<h2>Linguaggi server-side</h1>
<h3>PHP</h2>
<h3>ASP</h2>

A video vedremo:

Capitolo 1. Linguaggi client-side

1.1 HTML

1.2 Javascript

Capitolo 2. Linguaggi server-side

2.1 PHP

2.2 ASP

Inizialmente abbiamo resettato (a zero) il contatore capitolo. Deve essere fatto una sola volta e quindi abbiamo messo il reset in <body>.
Quindi abbiamo detto che ogni volta che scriviamo un <h2> (cioè all’inizio di ogni capitolo) deve essere resettato
il contatore dei paragrafi chiamato paragrafo. Inoltre prima (:before) dell’intestazione dei capitoli deve essere aggiunto il contenuto specificato da content, vale a direla parola "Capitolo " seguita dal valore del contatore capitolo.
Infine abbiamo detto che le intestazioni di tipo <h3> devono sempre incrementare il contatore paragrafo ed inoltre devono anteporre al testo indicato nell’html, il contenuto di content e cioè il contatore capitolo seguito da un punto, dal contatore paragrafo e infine da uno spazio.

 

quotes

Specifica che notazione usare per le virgolette.

I valori che può assumere sono:

none L’url dell’immagine da usare come marcatore degli elementi della lista.
stringa1 stringa2 stringa3 stringa4 Le prime due stringhe indicano le virgolette di apertura e chiusura di primo livello, mentre le seconde due di secondo livello. (vedi sotto l’esempio).
inherit Specifica che il valore sarà ereditato dall’elemento padre.

Le possibili stringhe sono:

&#34;
&#39;
< &#8249;
> &#8250;
« &#171;
» &#187;
&#8216;
&#8217;
&#8220;
&#8221;
&#8222; &#8222;

Es d’uso:
CSS:
q: {
quotes: "«" "»" "‘" "’";
}

Html:
<p><q>Prima e<q>seconda</q> parte</q> quote.<</p>

Il risultato sarà:

«Prima e ‘seconda’ parte»

Vediamo ora le proprietà cursor e le due relative alla stampa.

cursor Specifica il tipo di cursore che deve essere mostrato quando si punta su di un elemento.

I valori che possono essere assegnati a questa proprietà sono quelli indicati di seguito. Passare il mouse sulla descrizione per vedere il cursore in azione. L’uso nel CSS è cursor:valore con valore = uno dei seguenti:

URL Un elenco di URL separati da virgole da dove prelevare il cursore da usare (in caso se ne voglia utilizzare uno custom). Si consiglia di indicare sempre alla fine della lista un cursore standard nel caso che i precedenti non possano essere utilizzati. URL non è riconosciuto dal browser Opera e da Safari fino alla versione 3.
auto Il browser sceglierà il cursore da usare. Questo è il default.
crosshair Un grosso +
default Il cursore di default. E’ differente da auto, perché il cursore non viene cambiato dal browser nelle diverse situazioni.
e-resize Una doppia freccia sinistra-destra.
help Il cursore col classico ‘?’ che si usa per gli help.
move Il cursore classico del drag ‘n drop
n-resize Una doppia freccia nord-sud.
ne-resize Una doppia freccia nord est – sud ovest.
nw-resize Una doppia freccia nord ovest – sud est.
pointer La classica manina.
progress Il cursore standard con un cerchio piccolo che gira, come il simbolo di attesa di Windows..
s-resize Come n-resize.
se-resize Come nw-resize.
sw-resize Come ne-resize.
text La barretta verticale tipica dei campi di testo.
w-resize Come e-resize.
wait Un cerchio che gira, il simbolo di attesa di Windows.
inherit Specifica che il valore di questa proprietà sarà ereditato dall’elemento padre.
page-break-after 

Definisce il comportamento che deve avere il salto pagina dopo un elemento di tabella.
E’ una proprietà da usare con cautela perché ha diverse particolarità. Per esempio non può essere usata su di un elemento che ha un posizionamento assoluto. Da evitare all’interno di tabelle, elementi flottanti e box con bordi.

I valori che possono essere assegnati a questa proprietà sono:

auto Inserisce un salto pagina dopo l’elemento se necessario.
avoid Non inserisce mai un salto pagina dopo l’elemento.
always Inserisce un salto pagina dopo l’elemento sempre.
left Vengono inseriti uno o due salti pagina dopo l’elemento, in modo che l’elemento successivo inizi nella pagina sinistra successiva (per documenti fronte-retro).
right Vengono inseriti uno o due salti pagina dopo l’elemento, in modo che l’elemento successivo inizi nella pagina destra successiva (per documenti fronte-retro).
inherit Specifica che Il valore di questa proprietà sarà ereditato dall’elemento padre.
page-break-before

Identico al precedente tranne ovviamente che inserisce eventulamente il salto pagina
prima dell’elemento e non dopo.

 

 

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.