Propiedad CSS quotes
Usa la propiedad CSS quotes para definir las comillas del contenido. Consulta valores, caracteres de comillas y ejemplos.
La propiedad CSS quotes define qué caracteres de comillas inserta el navegador cuando la propiedad content solicita open-quote o close-quote. En pocas palabras, te permite reemplazar las comillas predeterminadas con cualquier carácter que desees — e incluso controlar qué marcas se usan en cada nivel de una cita anidada.
Esta página explica qué hace la propiedad, su sintaxis y valores, los caracteres de comillas más útiles (con sus escapes Unicode) y ejemplos ejecutables para comillas de un solo nivel y anidadas.
Cómo funciona quotes
La propiedad quotes no coloca por sí sola ninguna comilla en la página. Solo declara qué caracteres deben usarse. Las marcas son insertadas realmente por los pseudoelementos ::before y ::after, cuyo content se establece con las palabras clave open-quote y 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 */
}Así, tres partes siempre trabajan juntas: quotes suministra los caracteres, y los dos pseudoelementos los colocan. Sin las palabras clave content, nada aparece, independientemente de lo que diga quotes.
Puedes declarar los caracteres de forma literal ("«" "»") o con el escape Unicode de CSS para el punto de código ("\00AB" "\00BB"). La forma de escape es útil cuando la codificación de tu hoja de estilos es incierta o el carácter es difícil de escribir.
Cuándo usarlo
- Dar estilo a las comillas de
<q>o<blockquote>para que coincidan con la convención de un idioma (alemán„…", francés« … », etc.). - Aplicar comillas a cualquier elemento — no solo a
<q>— combinandoquotescon el contenidoopen-quote/close-quote. - Proporcionar marcas distintas para citas anidadas (ver el ejemplo de cuatro valores más abajo).
Las comillas predeterminadas usadas por <q> y <blockquote> dependen del agente de usuario y del atributo lang del documento. Establece quotes explícitamente cuando necesites las mismas marcas en todos los navegadores.
| Valor inicial | none |
|---|---|
| Se aplica a | Todos los elementos. |
| Heredable | Sí. |
| Animable | No. |
| Versión | CSS2 |
| Sintaxis DOM | element.style.quotes = "'\2018' '\2019'"; |
Sintaxis
Sintaxis de CSS quotes
quotes: none | [<string> <string>]+ | auto | initial | inherit;El valor es la palabra clave none (o auto), o uno o más pares de strings. Cada par es una marca de apertura seguida de una marca de cierre; el primer par es el nivel de cita más externo, el siguiente par es el primer nivel anidado, y así sucesivamente.
Ejemplo de la propiedad quotes:
Ejemplo 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
Ejemplo de la propiedad quotes con cuatro valores:
Ejemplo de CSS quotes dentro de quotes
<!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>Aquí el <q> externo usa comillas dobles rectas (\0022) y el interno usa las marcas angulares («»), porque el segundo par de strings se aplica al primer nivel anidado.
Valores
| Valor | Descripción | Pruébalo |
|---|---|---|
| none | Los valores "open-quote" y "close-quote" de la propiedad content no producen comillas. | Pruébalo » |
[<string> <string>]+ | Especifica las comillas. El primero es la marca de apertura y el segundo es la marca de cierre. El primer par representa el nivel externo de la cita; el segundo par corresponde al primer nivel anidado. | Pruébalo » |
| initial | Hace que la propiedad use su valor predeterminado. | Pruébalo » |
| inherit | Hereda la propiedad de su elemento padre. |
Caracteres de comillas
| Marca | Descripción | Número de entrada |
|---|---|---|
| " | comilla doble | \0022 |
| ' | comilla simple | \0027 |
| ‹ | comilla angular simple izquierda | \2039 |
| › | comilla angular simple derecha | \203A |
| « | comilla angular doble izquierda | \00AB |
| » | comilla angular doble derecha | \00BB |
| ` | comilla izquierda (simple alta-6) | \2018 |
| ՛ | comilla derecha (simple alta-9) | \2019 |
| " | comilla izquierda (doble alta-6) | \201C |
| " | comilla derecha (doble alta-9) | \201D |
| „ | comilla doble (doble baja-9) | \201E |
Propiedades relacionadas
- content — establece
open-quote/close-quote(y cualquier contenido generado) en los pseudoelementos. - ::before — inserta la marca de apertura antes del contenido del elemento.
- ::after — inserta la marca de cierre después del contenido del elemento.