CSS: Inhaltserzeugung
Seit CSS Level 2 ist es möglich, Inhalt nachträglich in ein Element einfügen zu lassen, ohne dazu den Element-Quelltext verändern zu müssen. Das Ganze war/ist dazu gedacht, dass beispielsweise wiederkehrende Inhalte von Elementen (z.B. Anführungsstriche am Anfang und Ende eines Zitates) nur einmal definiert werden müssen/brauchen und dennoch bei allen Elementen zur Verfügung stehen.content
Diecontent-Eigenschaft wird dazu verwendet, Inhalt nachträglich in Elemente einzubinden bzw. den Inhalt von Elementen nachträglich zu verändern. Dazu stehen die folgenden Werte zur Verfügung:
- Text - Fügt den definierten Text in das Element ein.
- URL - Fügt eine externe Quelle, beispielsweise ein Bild, ein. Dabei muss die URL dieser Quelle definiert werden.
- Counter - Fügt einen Counter ein. Zu Countern lesen Sie bitte im Kapitel CSS - Counter & Listen - Counter.
-
attr()- Fügt den Wert eines Attributes ein. Dazu muss innerhalb der Klammern der Name des Attributes notiert werden, dessen Wert eingefügt werden soll. -
open-quote- Fügt ein öffnendes Anführungszeichen ein. -
close-quote- Fügt ein schließendes Anführungszeichen ein. -
no-open-quote- Fügt nichts ein und verringert die Anzahl der öffnenden Anführungszeichen um eins. -
no-close-quote- Fügt nichts ein und verringert die Anzahl der schließenden Anführungszeichen um eins.
/*in CSS*/
P:before { content:open-quote; quotes: '>' '<'; }
P:after { content:close-quote; quotes: '>' '<'; }
P.a:before { content: url('http://www.name.de/name.gif'); }
P.b:after { content: no-close-quote; }
IMG:after { content: '<br>' attr(alt); }
LI:before { content: counter(MeinCounter, upper-roman);
counter-increment: MeinCounter; }
/*In HTML*/
<p>Normaler Text</p>
<p class="a">Text mit Bild davor</p>
<p class="b">Text ohne Anführungszeichen am Ende</p>
<img src="name.gif" alt="Darstelung: ein Bild.">
<ul>
<li> Eintrag </li>
<li> Eintrag </li>
<li> Eintrag </li>
</ul>
content-Eigenschaft nur in Verbindung mit den Pseudo-Elementen :before und :after verwendet werden darf.
quotes
Diequotes-Eigenschaft beschreibt, wie Anführungszeichen auszusehen haben. Das wird als Wert ein oder mehrere Anführungszeichen-Paare notiert. Jedes Paar besteht aus zwei Strings (Text) die jeweils das Aussehen beschreiben. Dabei wird der erste als öffnendes Anführungszeichen und der zweite als schließendes Anführungszeichen angesehen. Beide werden durch eine Leertaste voneinander getrennt. Beispiel:
CITE { quotes: '>' '<'; }
CITE:before { content:open-quote; }
CITE:after { content:close-quote; }
/* alle CITE Elemente werden jetzt >CITE< */
CITE, EM { quotes: '>>' '<<' '»' '«'; }
CITE:before, EM:before { content:open-quote; }
CITE:after, EM:after { content:close-quote; }
/* ... macht aus: */
<cite> Text <em> Text </em> Text </cite>
/* ... das: */
<cite> >>Text <em> »Text« </em> Text<< </cite>
Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.
Weiterlesen: ⯈ Microsoft Layouteigenschaften
Über uns
Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project