CSS
HTML
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

CSS quotes

La proprietà CSS3 quotes definisce i simboli usati per le citazioni testuali

La proprietà quotes permette di personalizzare i caratteri utilizzati per racchiudere le citazioni, solitamente rese tramite il tag <q> o con pseudo-elementi. È particolarmente utile per adattare lo stile delle virgolette a convenzioni linguistiche differenti (come « » per il francese o tedesco).

Sintassi

quotes: string open-quote string close-quote [string open-quote string close-quote]*;

Significato dei valori principali:

  • "open-quote" e "close-quote": coppie di stringhe che definiscono le virgolette aperte e chiuse da usare. Possono essere personalizzate con simboli tipografici, virgolette singole/doppie, ecc.

  • none: Disabilita completamente l'uso di virgolette automatiche.

  • inherit / initial / unset: Valori globali CSS per ereditare o reimpostare il comportamento.


Esempio proprietà: quotes


Codice Esempio: quotes

CODE: CSSpreleva codice
  1. .quotes-example {
  2.   quotes: "«" "»" "‹" "›";
  3. }
  4.  
  5. .quotes-example q::before {
  6.   content: open-quote;
  7. }
  8.  
  9. .quotes-example q::after {
  10.   content: close-quote;
  11. }
  12.  
  13. .quotes-none {
  14.   quotes: none;
  15. }
  16.  
  17. .quotes-none q::before,
  18. .quotes-none q::after {
  19.   content: "";
  20. }

Contenuto Esempio: quotes

Esempio di utilizzo della proprietà quotes

In questo esempio, la proprietà quotes viene utilizzata per personalizzare i simboli di apertura e chiusura delle citazioni create con il tag <q>:


Frase con citazione: Questa è una citazione in stile europeo.

Citazione senza virgolette: Citazione visivamente neutra.


HTML e CSS completo per l'esempio:


<style>
  .quotes-example {
    quotes: "«" "»" "‹" "›";
  }

  .quotes-example q::before {
    content: open-quote;
  }

  .quotes-example q::after {
    content: close-quote;
  }

  .quotes-none {
    quotes: none;
  }

  .quotes-none q::before,
  .quotes-none q::after {
    content: "";
  }
</style>

<div class="quotes-example">
  <p>Frase con citazione: <q>Questa è una citazione in stile europeo</q>.</p>
</div>

<div class="quotes-none">
  <p>Citazione senza virgolette: <q>Citazione visivamente neutra</q>.</p>
</div>


Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser

Browser Support

I Cookie su questo sito:

Il nostro sito utilizza cookie e altre tecnologie in modo tale che sia noi, sia i nostri partner, possiamo ricordarci di te e capire come tu e gli altri visitatori utilizzate il nostro sito. Qui puoi trovare ulteriori informazioni sui cookie e le altre tecnologie. Chiudendo questo banner o continuando la navigazione acconsenti all'uso dei cookie. Acconsento Info Cookies