CSS-Eigenschaft: quotes, Kategorien: Generierte Inhalte (allgemein), Generated content, automatic numbering, and lists (CSS 2.1), Generated and Replaced Content (CSS 3)
Anführungszeichen
Definiert Anführungszeichen oder ignoriert die automatische Ausspielung.
| Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
|---|---|---|---|---|
| Anführungszeichen |
| Abhängig von der Implementierung |
Verwandte Eigenschaften aus der Kategorie: Generierte Inhalte (allgemein), Generated content, automatic numbering, and lists (CSS 2.1), Generated and Replaced Content (CSS 3):
Folgendes ist beim Einsatz von quotes zu beachten:
- Aktuelle Browser stellen das <q>-Tag mit doppelten, hochgestellten Anführungszeichen "lorem ipsum" dar. Über quotes können diese verändert werden.
- Anführungszeichen verändern zu können ergibt sich aus der Tatsache, dass unterschiedliche Sprachen unterschiedliche Zeichen verwenden. In Deutschland und Österreich sind das „ unten und “ oben, im englischen sind beide Quotes oben, in Frankreich, Liechtenstein und teilweise in der Schweiz werden « und » eingesetzt.
- quotes erwartet zwei Parameter, die als vorderes und hinteres Anführungszeichen verwendet werden, beispielsweise quotes: '«' '»';. Die Zeichen selber müssen im CSS in einfachen oder doppelten Anführungszeichen stehen.
Es kann auch ein dritter und vierter Parameter angegeben, die bei einem geschachteltem <q> für die inneren Anführungszeichen verwendet werden. - Statt Anführungszeichen können auch beliebige Zeichen verwendet werden. Ob dies sinnhaft ist, sei dahin gestellt.
- none unterdrückt die Anzeige der automatisch generierten Anführungszeichen.
- quotes gehört zu der Kategorie "generierter Content", dessen Einsatz man genau abwägen muss. Anführungszeichen stehen als solche nicht im Quelltext. Beim Kopieren werden sie je nach Browser allerdings mit kopiert. Ersetzte Zeichen werden wiederum nicht kopiert, hier bleibt es bei den Standard-Zeichen. Der Einsatz kann folglich zu Verwirrungen führen.
- Sowohl das <q>-Tag im HTML als auch quotes im CSS sind Elemente, die in jedem Grundkurs Webstandards fehlen dürfen. Beides taucht in der Praxis so gut wie nicht auf.
 Firefox |  Chrome |  Internet Explorer |  Safari |  Opera |
|||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| CSS21 |
|
|
|
|
| ||||||||||||||||||||||||||||||||||||||||||
Weiterführende Informationen zu quotes:
- W3C Spezifikation:
http://www.w3.org/TR/CSS2/generate.html#propdef-quotes
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
presentation-level - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
range
Beispiele
HTML:
<p>Normaler Text hat <q>hier und da</q> schon mal ein Zitat.</p>CSS:
q {
color: red;
}
/* Per Default wird das <q>-Tag in Anführungzeichen gesetzt, obwohl diese nicht im Quelltext zu finden sind. */Beispiel Nr. 1 So sieht's aus:
Normaler Text hat hier und da
schon mal ein Zitat.
HTML:
<h1>Standardeinsatz mit einem <q>hervorgehobenen Wort</q> in Quotes</h1>CSS:
h1 q {
color: #FF8000;
quotes: '»' '«';.
}
/* Über quotes können die Zeichen angegeben, die für die Hervorhebung dienen sollen. */Beispiel Nr. 2 So sieht's aus:
Standardeinsatz mit einem hervorgehobenen Wort
in Quotes
HTML:
<h2>Standardeinsatz mit einem <q>hervorgehobenen <q>noch mehr betonten</q> Wort</q> in Quotes</h2>CSS:
q q {
color: blue;
}
h2 q {
quotes: '»' '«' '»' '«';
}
/* Vier Zeichen für quotes beeinflussen geschaschtelte <q>-Tags */Beispiel Nr. 3 So sieht's aus:
Standardeinsatz mit einem hervorgehobenen noch mehr betonten
Wort
in Quotes
noch mehr betontenWort
HTML:
<p>Normaler Text hat <q class="doNone">hier und da</q> schon mal eine Zitat.</p>CSS:
q.doNone {
quotes: none;
}
/* Ausblenden von Anführungzeichen. Je nach Browser tauchen diese beim Kopieren wieder auf. */Beispiel Nr. 4 So sieht's aus:
Normaler Text hat hier und da
schon mal eine Zitat.
HTML:
<p>Normaler Text hat <q class="doIndiv">hier und da</q> schon mal eine Zitat.</p>CSS:
q.doIndiv {
quotes: '***' '+++';
}
/* Es können beliebige Zeichen eingesetzt werden. */Beispiel Nr. 5 So sieht's aus:
Normaler Text hat hier und da
schon mal eine Zitat.
HTML:
<p>Normaler Text hat <q class="doInher">hier und da <q>da und hier</q> hier und da </q> schon mal eine Zitat.</p>CSS:
q.doInher {
quotes: ' # ' ' # ' ' *** ' ' *** ';
}
/* Für verschachtelte <p>-Tags werden quotes als 3. und 4. Parameter übergeben.. */Beispiel Nr. 6 So sieht's aus:
Normaler Text hat hier und da
schon mal eine Zitat.da und hier
hier und da
Fehler melden
Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.
Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!
Vielen Dank!