CSS - contenuto

Descrizione

La proprietà content definisce il contenuto da inserire nelle operazioni di contenuto generato. Questa proprietà viene utilizzata insieme a: before o: after pseudo elementi.

Possibili valori

  • string- Qualsiasi valore di stringa consentito. Questo è sempre racchiuso tra virgolette.

  • URI - Un puntatore a una risorsa esterna come un'immagine.

  • counter- Esistono due possibili forme di questo valore: contatore (nome, stile?) E contatori (nome, stringa ,? stile?). In entrambi i casi, il contenuto sarà il valore del contatore denominato in quel punto del documento, reso nel valore di stile opzionale (decimale per impostazione predefinita). Nel caso dei contatori (...), il valore stringa opzionale indica una stringa che segue ogni istanza del contatore denominato.

  • attr(X)- Provoca l'inserimento del valore dell'attributo X per l'oggetto del selettore. Ad esempio, è possibile visualizzare il valore dell'attributo alt di un'immagine utilizzando questo valore.

  • open-quote - Provoca l'inserimento della stringa appropriata specificata utilizzando le virgolette di proprietà.

  • close-quote - Provoca l'inserimento della stringa appropriata specificata utilizzando le virgolette di proprietà.

  • no-open-quote- Impedisce l'inserimento della stringa appropriata specificata utilizzando le virgolette di proprietà. Tuttavia, il livello di nidificazione delle virgolette è ancora aumentato.

  • no-close-quote- Impedisce l'inserimento della stringa appropriata specificata utilizzando le virgolette di proprietà. Tuttavia, il livello di nidificazione delle virgolette è ancora diminuito.

Si applica a

: prima e: dopo gli pseudo-elementi.

Sintassi DOM

object.style.content = "url(home.avi)"

Esempio

Di seguito è riportato l'esempio che dimostra come utilizzare : before element per aggiungere del contenuto prima di qualsiasi elemento.

<html>
   <head>
      <style type = "text/css">
         p:before {
            content: url(/images/bullet.gif)
         }
      </style>
   </head>

   <body>
      <p> This line will be preceded by a bullet.</p>
      <p> This line will be preceded by a bullet.</p>
      <p> This line will be preceded by a bullet.</p>
   </body>
</html>

Questo produrrà il seguente link nero:

Di seguito è riportato l'esempio che dimostra come utilizzare : after element per aggiungere del contenuto dopo ogni elemento.

<html>
   <head>
      <style type = "text/css">
         p:after {
            content: url(/images/bullet.gif)
         }
      </style>
   </head>

   <body>
      <p> This line will be succeeded by a bullet.</p>
      <p> This line will be succeeded by a bullet.</p>
      <p> This line will be succeeded by a bullet.</p>
   </body>
</html>

Questo produrrà il seguente link nero: