HTMLWorld - HTML, CSS, JavaScript, PHP, Java, Flash und vieles mehrHTMLWorld:   Home | Impressum |
 

 
 

Anzeige 
 
               Forum
 
 
HTMLWorld » CSS » Inhaltserzeugung

CSS: Inhaltserzeugung

von Jan Winkler

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.

Anzeige

content  nach oben

Die content-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.

Beispiel:

/*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>

Bitte beachten Sie, dass die content-Eigenschaft nur in Verbindung mit den Pseudo-Elementen :before und :after verwendet werden darf.

quotes  nach oben

Die quotes-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< */ 

Werden mehrere Paare notiert, so werden sie ebenfalls durch ein Leerzeichen voneinander getrennt. Alle weiteren Paare bestimmen dann eventuelle Anführungszeichen innerhalb der bestehenden Anführungszeichen. Beispiel:

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> 



« zurück weiter »
Bewerten

 

CSS

.Autor:Jan Winkler.
. Bewertung:
CSS: Inhaltserzeugung HTMLWorld
(5/5 bei 1 Votes)
.
. Community: 450 Beiträge im CSS Forum .

Navigation

Images verschiedener Größe gleich anpassen von Alphavader
Seite verzerrt bei anderen Auflösungen. von Gorgomir
img Stretcher auf fluid Div Container von Thunder1985
Dropdown Menu unter den header von Harburger1887
Kreis um Buchstabe... von karinsch
footer unten platzieren von Alex...
css-anfaengerin - schreibschutz von css-tempate entfernen von kiloberta
Programmierer in Festanstellung oder Freiberuflich gesucht von GP.1226
Button Formatierungs Problem mit Transparentem Hintergrund von redlin
Runde Ecken IE 8 / ohne JavaScript und BG Bilder? von kamikaetzelein
3 Div Elemente ausrichten von Kanikkl
Bilder werden nur im IE angezeigt von Schmido
Contentinhalt vor Linkstruktur im Seitenquelltext von tbtip
Browserunterschiede in Darstellung von CrazyPlaya
Wie sollte ich das aufbauen? von Reelay

zum CSS Forum »


 
     
 

Anzeige