Propriedade CSS quotes
Use a propriedade CSS quotes para definir aspas no conteúdo. Veja valores, caracteres de aspas e exemplos.
A propriedade CSS quotes define quais caracteres de aspas o navegador insere quando a propriedade content solicita open-quote ou close-quote. Em resumo, ela permite substituir as aspas padrão por quaisquer caracteres desejados — e até controlar quais marcas são usadas em cada nível de uma citação aninhada.
Esta página aborda o que a propriedade faz, sua sintaxe e valores, os caracteres de aspas mais úteis (com seus escapes Unicode) e exemplos executáveis para aspas de nível único e aninhadas.
Como o quotes funciona
A propriedade quotes não coloca, por si só, nenhuma aspa na página. Ela apenas declara quais caracteres devem ser usados. As marcas são de fato desenhadas pelos pseudo-elementos ::before e ::after, cujo content é definido com as palavras-chave open-quote e close-quote:
q {
quotes: "«" "»"; /* which marks to use */
}
q::before {
content: open-quote; /* draw the opening mark */
}
q::after {
content: close-quote; /* draw the closing mark */
}Portanto, três partes sempre trabalham juntas: quotes fornece os caracteres, e os dois pseudo-elementos os posicionam. Sem as palavras-chave content, nada aparece, independentemente do que quotes especifique.
Você pode declarar os caracteres literalmente ("«" "»") ou com o escape Unicode CSS para o codepoint ("\00AB" "\00BB"). A forma de escape é útil quando a codificação da folha de estilos é incerta ou a marca é difícil de digitar.
Quando usar
- Estilize as aspas de
<q>ou<blockquote>para corresponder à convenção de um idioma (alemão„…", francês« … », etc.). - Aplique aspas a qualquer elemento — não apenas
<q>— combinandoquotescom o conteúdoopen-quote/close-quote. - Forneça marcas distintas para citações aninhadas (veja o exemplo com quatro valores abaixo).
As aspas padrão usadas por <q> e <blockquote> dependem do agente de usuário e do atributo lang do documento. Defina quotes explicitamente quando precisar das mesmas marcas em todos os navegadores.
| Valor Inicial | none |
|---|---|
| Aplica-se a | Todos os elementos. |
| Herdado | Sim. |
| Animável | Não. |
| Versão | CSS2 |
| Sintaxe DOM | element.style.quotes = "'\2018' '\2019'"; |
Sintaxe
Sintaxe CSS quotes
quotes: none | [<string> <string>]+ | auto | initial | inherit;O valor é a palavra-chave none (ou auto), ou um ou mais pares de strings. Cada par é uma marca de abertura seguida de uma marca de fechamento; o primeiro par é o nível mais externo de citação, o próximo par é o primeiro nível aninhado, e assim por diante.
Exemplo da propriedade quotes:
Exemplo de código CSS quotes
<!DOCTYPE html>
<html>
<head>
<title>Title of the document </title>
<style>
.example {
quotes: "\00AB" "\00BB";
}
.example::before {
content: open-quote;
}
.example::after {
content: close-quote;
}
</style>
</head>
<body>
<h2>Quotes property example</h2>
<p>
<q class="example">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</q>
</p>
</body>
</html>Resultado
Exemplo da propriedade quotes com quatro valores:
Exemplo CSS de aspas dentro de aspas
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
quotes: "\0022" "\0022" "\00AB" "\00BB";
}
.example::before {
content: open-quote;
}
.example::after {
content: close-quote;
}
</style>
</head>
<body>
<h2>Quotes property example</h2>
<p>
<q class="example">
Lorem Ipsum is simply <q>dummy</q> text of the printing and typesetting industry.
</q>
</p>
</body>
</html>Aqui o <q> externo usa aspas duplas retas (\0022) e o interno usa as marcas angulares («»), porque o segundo par de strings se aplica ao primeiro nível aninhado.
Valores
| Valor | Descrição | Experimente |
|---|---|---|
| none | Os valores "open-quote" e "close-quote" da propriedade content não produzem aspas. | Experimente » |
[<string> <string>]+ | Especifica as aspas. A primeira é a marca de abertura e a segunda é a marca de fechamento. O primeiro par representa o nível externo de citação, o segundo par é para o primeiro nível aninhado. | Experimente » |
| initial | Faz a propriedade usar seu valor padrão. | Experimente » |
| inherit | Herda a propriedade do elemento pai. |
Caracteres de Aspas
| Marcas | Descrição | Número de Entrada |
|---|---|---|
| " | aspas duplas | \0022 |
| ' | aspas simples | \0027 |
| ‹ | aspas angulares simples à esquerda | \2039 |
| › | aspas angulares simples à direita | \203A |
| « | aspas angulares duplas à esquerda | \00AB |
| » | aspas angulares duplas à direita | \00BB |
| ` | aspas à esquerda (simples high-6) | \2018 |
| ՛ | aspas à direita (simples high-9) | \2019 |
| " | aspas à esquerda (duplas high-6) | \201C |
| " | aspas à direita (duplas high-9) | \201D |
| „ | aspas duplas (duplas low-9) | \201E |
Propriedades relacionadas
- content — define
open-quote/close-quote(e qualquer conteúdo gerado) nos pseudo-elementos. - ::before — insere a marca de abertura antes do conteúdo do elemento.
- ::after — insere a marca de fechamento após o conteúdo do elemento.