Propiedad quotes de CSS
La propiedad quotes establece el tipo de comillas para el contenido.
Los pseudo-elementos ::before y ::after se utilizan para insertar las marcas de contenido al principio y al final de una cita. Estos pseudo-elementos se definen mediante la propiedad content.
Los navegadores aplican comillas predeterminadas a los elementos <q> y <blockquote>, pero la propiedad quotes te permite personalizarlas. Puedes aplicar comillas personalizadas a cualquier elemento.
Existen diferentes tipos de comillas, las más populares son las comillas rectas y las comillas curvas.
INFO
Las comillas dependen del agente de usuario.
| Valor inicial | none |
|---|---|
| Se aplica a | Todos los elementos. |
| Heredado | Sí. |
| Animable | No. |
| Versión | CSS2 |
| Sintaxis DOM | element.style.quotes = "'\2018' '\2019'"; |
Sintaxis
Sintaxis CSS de quotes
quotes: none | string | initial | inherit;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>Valores
| Valor | Descripción | Probar |
|---|---|---|
| none | Los valores "open-quote" y "close-quote" de la propiedad content no producen comillas. | Probar » |
[<string> <string>]+ | Especifica la comilla. La primera es la marca de apertura, la segunda es la de cierre. El primer par representa el nivel exterior de la cita, el segundo par es para el primer nivel anidado. | Probar » |
| initial | Hace que la propiedad utilice su valor predeterminado. | Probar » |
| inherit | Hereda la propiedad de su elemento padre. |
Caracteres de comillas
| Marcas | Descripción | Código |
|---|---|---|
| " | comillas dobles | \0022 |
| ' | comillas simples | \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 |
| „ | comillas dobles (doble baja-9) | \201E |
Práctica
¿Cuáles son las funciones de la propiedad 'quotes' en CSS?