 5) Inline-Anweisungen
CSS-Anweisungen können auch "an Ort und Stelle", also innerhalb der Seite 'eingebettet' werden. Diese Formatierungsanweisungen werden direkt in ein HTML-Tag integriert und sind für dieses Element gültig.
|
|
Direkte (Inline-)Formatierung von Elementen
Inline-Formatierung (embedding)
Diese 3. Form der Style-Anweisung dient zur direkten Formatierung eines HTML-Elements. Mehrere Einträge von Eigenschaften werden durch Strichpunkt getrennt.
Beispiele:
<p style="color:#8F8F8F; padding:5px">
Text in grau - Abstand 5 Pixel
</p>
<p style="color:#0000FF; align:center">
Text in blau - zentriert
</p>
<p style="font-weight:bold;">
Text in Fettschrift
</p>
Wenn Texte 'inline' mittels CSS formatiert werden sollen, gibt's unterschiedliche Techniken:
Verwendung von Inline-Formatierungen.
Die style-Anweisung kann in beinahe jedes HTML-Tag eingebunden werden. Im nächsten Textblock wurden 4 Inline-Formatierungen eingesetzt:
<p style="border:1px solid #ccc; padding:10px;"> gesamter Text </p>
<span style="color:#00BF00">Stromleitungen</span>
<span style="color:#FF0000">Kabel</span>
<span style="color:#0000FF">Nachteil</span>
Vorteilhaft wenngleich gewöhnen ist, wie glauben dass wie wenn glauben vorhandene wiewohl gratulieren Stromleitungen wobei gratulieren genutzt wohingegen grenzen werden zumal haben können, halten also aber heiraten keine allein helfen neuen als helfen Kabel anstatt interessieren verlegt ausser kümmern werden beziehungsweise misslingen müssen. denn nachschlagen Nachteil doch nachsehen können entweder-oder nähern die jedoch raten Geschwindigkeit nicht nur-sondern auch reden (übertragene oder rufen Bit sondern schaden pro sowie schmecken Sekunde) sowohl-als auch schreiben und statt schützen die und sprechen Abstrahlung weder-noch studieren störender wie zuhören Frequenzen als zusehen sein.
Einsatz im <div> oder <span>-Tag?
Für eine echte Inline-Formatierung in fließendem Text, wird man allerdings kein <p>-Tag (Absatz) einsetzen. Ein HTML-<p>-Tag erzeugt, weil es zu den logischen HTML-Formatierungen gehört, einen Zeilenumbruch, genau wie das <div>- oder <h>-Tag. Verwendung findet also hier der <span>-Befehl.
<span style="color:#2C6ED5"> Text </span>
<div style="color:#2C6ED5"> Text </div>
Der Unterschied besteht in einem Zeilenumbruch, den der <div>-Befehl generiert. Der Text beginnt in einer neuen Zeile.
Wenn die im Head eingebundenen CSS-Befehle nicht ausreichen oder eine Formatierung nur einmal benötigt wird, hilft die style-Anweisung. Formatierungen in einem Fließtext würde ich mittels <span> einbinden.
die Syntax:
<span style="Angaben Strichpunkt Angaben Strichpunkt ">
Text
</span>
<span style="font-weight:bold; color:red;">
Text
</span>
generiert
Text
<span style="font-style:italic; font-size:15pt; color:#E06000;">
Text
</span>
generiert
Text
<span style="font-size:20px; color:#009090;">
Text
</span>
generiert
Text
Großbuchstaben - eine Alternative
Bei kleinen Schriften ist die Umwandlung in Großbuchstaben wegen der besseren Lesbarkeit oft von Vorteil:
<span style="
text-transform:uppercase;
font-size:11px;
color:#009090; "> ...
So sieht das Ergebnis aus:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
Einrücken
Im <span>-Selektor hat die Anweisung 'margin-left:60px' bei einigen Browsern die gleiche Funktion wie ' text-indent:60px; ' im <p>-Selektor.
'text-indent' bewirkt bei mehrzeiligen Texten die Einrückung der 1. Zeile.
<span style="
font-family:Verdana,sans-serif;;
font-size:12px;
color:#2F2F2F;
margin-left:60px "> ...
So sieht das Ergebnis aus:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
Weitere Beispiele zum Einsatz der <span>-Anweisung + Inline-Styles finden Sie auf der Seite
 7) Texte formatieren mit CSS
| 
Home • CSS • inline Anweisungen