CSS quotes-Eigenschaft
Die quotes-Eigenschaft legt die Art der Anführungszeichen für den Inhalt fest.
Die Pseudo-Elemente ::before und ::after werden verwendet, um die Anführungszeichen am Anfang und am Ende eines Zitats einzufügen. Diese Pseudo-Elemente werden durch die content-Eigenschaft definiert.
Browser wenden standardmäßige Anführungszeichen auf <q>- und <blockquote>-Elemente an, aber die quotes-Eigenschaft ermöglicht es Ihnen, diese anzupassen. Sie können benutzerdefinierte Anführungszeichen auf jedes Element anwenden.
Es gibt verschiedene Arten von Anführungszeichen, die gängigsten sind die geraden und die geschweiften Anführungszeichen.
INFO
Anführungszeichen hängen vom User Agent ab.
| Initialwert | none |
|---|---|
| Anwendbar auf | Alle Elemente. |
| Vererbbar | Ja. |
| Animierbar | Nein. |
| Version | CSS2 |
| DOM-Syntax | element.style.quotes = "'\2018' '\2019'"; |
Syntax
CSS quotes-Syntax
quotes: none | string | initial | inherit;Beispiel für die quotes-Eigenschaft:
CSS quotes-Codebeispiel
<!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 für die quotes-Eigenschaft mit vier Werten:
CSS quotes innerhalb von 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>Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| none | Die Werte „open-quote“ und „close-quote“ der content-Eigenschaft erzeugen keine Anführungszeichen. | Ausprobieren » |
[<string> <string>]+ | Legt das Anführungszeichen fest. Das erste ist das öffnende Zeichen, das zweite das schließende Zeichen. Das erste Paar repräsentiert die äußere Zitatebene, das zweite Paar die erste verschachtelte Ebene. | Ausprobieren » |
| initial | Legt fest, dass die Eigenschaft ihren Standardwert verwendet. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom Elternelement. |
Zeichen für Anführungszeichen
| Zeichen | Beschreibung | Unicode-Eintrag |
|---|---|---|
| " | doppeltes Anführungszeichen | \0022 |
| ' | einfaches Anführungszeichen | \0027 |
| ‹ | einfaches, linkes Winkel-Zeichen | \2039 |
| › | einfaches, rechtes Winkel-Zeichen | \203A |
| « | doppeltes, linkes Winkel-Zeichen | \00AB |
| » | doppeltes, rechtes Winkel-Zeichen | \00BB |
| ` | linkes Anführungszeichen (hoch-6) | \2018 |
| ՛ | rechtes Anführungszeichen (hoch-9) | \2019 |
| “ | linkes Anführungszeichen (doppelt hoch-6) | \201C |
| ” | rechtes Anführungszeichen (doppelt hoch-9) | \201D |
| „ | doppeltes Anführungszeichen (doppelt tief-9) | \201E |
Praxis
Welche Funktionen hat die 'quotes'-Eigenschaft in CSS?