CSS quotes-Eigenschaft
Die CSS-Eigenschaft quotes legt Anführungszeichen für Inhalte fest. Werte, Zeichen und Beispiele.
Die CSS-Eigenschaft quotes legt fest, welche Anführungszeichen ein Browser einfügt, wenn die Eigenschaft content open-quote oder close-quote anfordert. Kurz gesagt: Sie können die Standard-Anführungszeichen durch beliebige Zeichen ersetzen — und sogar steuern, welche Zeichen auf jeder Ebene einer verschachtelten Zitatstruktur verwendet werden.
Diese Seite erklärt, was die Eigenschaft bewirkt, ihre Syntax und Werte, die gebräuchlichsten Anführungszeichen (mit ihren Unicode-Escapes) sowie ausführbare Beispiele für einstufige und verschachtelte Anführungszeichen.
Wie quotes funktioniert
Die Eigenschaft quotes setzt selbst keine Anführungszeichen auf der Seite. Sie gibt lediglich an, welche Zeichen verwendet werden sollen. Die eigentlichen Zeichen werden durch die Pseudo-Elemente ::before und ::after gezeichnet, deren content auf die Schlüsselwörter open-quote und close-quote gesetzt wird:
q {
quotes: "«" "»"; /* which marks to use */
}
q::before {
content: open-quote; /* draw the opening mark */
}
q::after {
content: close-quote; /* draw the closing mark */
}Es arbeiten also immer drei Teile zusammen: quotes liefert die Zeichen, und die beiden Pseudo-Elemente platzieren sie. Ohne die content-Schlüsselwörter erscheint nichts, egal was quotes angibt.
Sie können die Zeichen entweder direkt ("«" "»") oder mit dem CSS-Unicode-Escape für den Codepoint ("\00AB" "\00BB") angeben. Die Escape-Schreibweise ist praktisch, wenn die Kodierung Ihres Stylesheets unsicher ist oder das Zeichen schwer zu tippen ist.
Wann man sie verwendet
- Anführungszeichen für
<q>oder<blockquote>an die Konvention einer Sprache anpassen (Deutsch„…", Französisch« … »usw.). - Anführungszeichen auf beliebige Elemente anwenden — nicht nur auf
<q>— indem manquotesmitopen-quote/close-quoteimcontentkombiniert. - Unterschiedliche Zeichen für verschachtelte Zitate bereitstellen (siehe das Vier-Wert-Beispiel unten).
Die Standard-Anführungszeichen, die von <q> und <blockquote> verwendet werden, hängen vom User-Agent und dem lang-Attribut des Dokuments ab. Setzen Sie quotes explizit, wenn Sie einheitliche Zeichen über alle Browser hinweg benötigen.
| Anfangswert | none |
|---|---|
| Gilt für | Alle Elemente. |
| Vererbt | Ja. |
| Animierbar | Nein. |
| Version | CSS2 |
| DOM-Syntax | element.style.quotes = "'\2018' '\2019'"; |
Syntax
CSS quotes-Syntax
quotes: none | [<string> <string>]+ | auto | initial | inherit;Der Wert ist entweder das Schlüsselwort none (oder auto) oder ein oder mehrere Paare von Zeichenketten. Jedes Paar besteht aus einem öffnenden und einem schließenden Zeichen; das erste Paar ist die äußerste Zitatebene, das nächste Paar die erste verschachtelte Ebene usw.
Beispiel der quotes-Eigenschaft:
CSS quotes Code-Beispiel
<!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>Ergebnis
Beispiel der quotes-Eigenschaft mit vier Werten:
CSS quotes inside quotes-Beispiel
<!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>Hier verwendet das äußere <q> gerade doppelte Anführungszeichen (\0022) und das innere die spitzen Klammern («»), da das zweite Zeichenpaar für die erste verschachtelte Ebene gilt.
Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| none | Die Werte "open-quote" und "close-quote" der content-Eigenschaft erzeugen keine Anführungszeichen. | Ausprobieren » |
[<string> <string>]+ | Legt die Anführungszeichen fest. Das erste ist das öffnende, das zweite das schließende Zeichen. Das erste Paar steht für die äußerste Zitatebene, das zweite für die erste verschachtelte Ebene. | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Anführungszeichen-Zeichen
| Zeichen | Beschreibung | Eintragsnummer |
|---|---|---|
| " | doppeltes Anführungszeichen | \0022 |
| ' | einfaches Anführungszeichen | \0027 |
| ‹ | einfaches, linkes Winkelzeichen | \2039 |
| › | einfaches, rechtes Winkelzeichen | \203A |
| « | doppeltes, linkes Winkelzeichen | \00AB |
| » | doppeltes, rechtes Winkelzeichen | \00BB |
| ` | linkes Anführungszeichen (einfach, hoch-6) | \2018 |
| ՛ | rechtes Anführungszeichen (einfach, hoch-9) | \2019 |
| " | linkes Anführungszeichen (doppelt, hoch-6) | \201C |
| " | rechtes Anführungszeichen (doppelt, hoch-9) | \201D |
| „ | doppeltes Anführungszeichen (doppelt, tief-9) | \201E |
Verwandte Eigenschaften
- content — setzt
open-quote/close-quote(und beliebige generierte Inhalte) auf den Pseudo-Elementen. - ::before — fügt das öffnende Zeichen vor dem Inhalt des Elements ein.
- ::after — fügt das schließende Zeichen nach dem Inhalt des Elements ein.