Die Eigenschaft quotes stellt den Type der Anführungszeichen für den Inhalt ein.
Mit den Pseudo-Elementen ::before und ::after werden die Inhaltsmarkierungen am Anfang und am Ende eines Zitats eingefügt. Diese Pseudoelemente werden durch die Eigenschaft content definiert.
Es gibt verschiedene Typen von Anführungszeichen, die beliebtesten sind die geraden und die geschweiften Anführungszeichen.
Die Anführungszeichen hängen vom Benutzeragenten ab.
Anfangswert | Nicht definiert |
Gilt für | Alle Elemente |
Geerbt | Ja |
Animierbar | Nein |
Version | CSS2 |
DOM Syntax | Object.style.quotes = "'\2018' '\2019'"; |
Syntax
quotes: none | string | initial | inherit;
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
.example {
quotes: "\00AB" "\00BB";
}
</style>
</head>
<body>
<h2>Beispiel für die Eigenschaft quotes</h2>
<p><q class="example">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</q></p>
</body>
</html>
Ein anderes Beispiel mit der Eigenschaft quotes:
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
.example {
quotes: "\0022" "\0022" "\00AB" "\00BB";
}
</style>
</head>
<body>
<h2>Beispiel für die Eigenschaft quotes</h2>
<p><q class="example">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</q></p>
</body>
</html>
Werte
Wert | Beschreibung |
---|---|
none | Die Werte "open-quote" und "close-quote" der Eigenschaft content erzeugen keine Anführungszeichen. |
[<string> <string>]+ | Gibt das Anführungszeichen an. Das erste ist die Öffnungsmarke, das zweite ist die Schließungsmarke. Das erste Paar stellt die äußere Ebene der Notierung dar, das zweite Paar ist für die erste verschachtelte Ebene. |
initial | Der Wert stellt die Eigenschaft auf seinen Standardwert ein. |
inherit | Der Wert erbt die Eigenschaft von seinem übergeordneten Element. |
Anführungszeichen
Zeichen | Beschreibung | Eintragsnummer |
---|---|---|
" | doppeltes Anführungszeichen | \0022 |
' | einfaches Anführungszeichen | \0027 |
‹ | einfaches, linkes französisches Anführungszeichen | \2039 |
› | einfaches, rechtes französisches Anführungszeichen | \203A |
« | doppeltes, linkes französisches Anführungszeichen | \00AB |
» | doppeltes, rechtes französisches Anführungszeichen | \00BB |
` | linkes Anführungszeichen (single high-6) | \2018 |
՛ | rechtes Anführungszeichen (single high-9) | \2019 |
“ | linkes Anführungszeichen (double high-6) | \201C |
” | rechtes Anführungszeichen (double high-9) | \201D |
„ | doppeltes Anführungszeichen (double low-9) | \201E |
Browser-Support
11.0+ | 12.0+ | 1.5+ | 9.0+ | 4.0+ |
Übe dein Wissen
Was ist die Standarddefinition für das Quotes CSS-Eigenschaft?
Richtig!
Falsch!