Der eigene Online-Shop für Profi-Fotografen. Für Fotografen, die keine Zeit zu verlieren haben.

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.

CSS-Eigenschaft: quotes
KurzbeschreibungWerteStandardwertKategorieHinweis
Anführungszeichen
  • <string>
  • none
  • inherit
Abhängig von der
Implementierung
Allgemein:
Generierte Inhalte
CSS 2.1:
Generated content, automatic numbering, and lists
CSS 3:
Generated and Replaced Content
 

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.
Browserunterstützung von quotes
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS21
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
j
Version: 8Version: 9Version: 10Version: 11
j
Version: 4Version: 5Version: 6Version: 7
nj
Version: 10Version: 11Version: 12
j

Weiterführende Informationen zu quotes:

  • letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
    presentation-level


Beispiele

HTML:

<p>Normaler Text hat <q>hier und da</q> schon mal ein Zitat.</p>

CSS:

q {
   color: red;
}
/* Per Default wird das &lt;q&gt;-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 &lt;q&gt;-Tags */

Beispiel Nr. 3 So sieht's aus:

Standardeinsatz mit einem hervorgehobenen noch mehr betonten Wort in Quotes

 

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 &lt;p&gt;-Tags werden quotes als 3. und 4. Parameter übergeben.. */

Beispiel Nr. 6 So sieht's aus:

Normaler Text hat hier und da da und hier hier und da schon mal eine Zitat.

 

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!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 01. 04. 2017
Render Time: 6.944 sec.

Browser-Marktanteile