Sie sind hier: Startseite » CSS-Tutorials » Textformatierung
| Text lässt sich mit CSS-Anweisungen phantasievoll gestalten. Beispielsweise lassen sich alle Rahmen auch um Text legen. Darüber hinaus gibt es weitere, attraktive Möglichkeiten, Text zu formatieren. Hilfe zur Textformatierung finden Sie in der Navigation unter "Definitionen" --> "Schrift formatieren". Ferner sind unter "Filter" einige interessante Schattenformatierungen aufgezeigt! Mit der Anweisung "span" können Sie Textformatierungen an Ort und Stelle einbauen und so bestimmte Textpassagen hervorheben. |
||
| Hier können Sie Beispiele ansehen und ausprobieren: | ||
| Editieren |
|
|
| Editieren |
Ein Text mit Textmarker-Effekt
|
|
| Editieren |
Dieser Text wird überstrichen.
|
|
| Editieren |
Ein Text kann natürlich auch unterstrichen werden.
|
|
| Editieren |
Über- und Unterstrich kombiniert
|
|
| Editieren |
Man kann den Text auch durchstreichen
|
|
| Editieren |
Ein Text wird fett und farbig unterstrichen.
|
|
| Editieren |
Ein doppelt unterstrichener Text.
|
|
| Text- und Absatzformatierung bieten mit CSS erheblich mehr Möglichkeiten als mit HTML. Font, -grösse, -farbe, Zeilenabstand, Absatzformat - alles lässt sich bestimmen und ist für die Hervorhebung einzelner Absätze besonders geeignet. | ||
| Blocksatz / Fontgrösse / Fontfarbe / Zeilenabstand | Per CSS-Anweisung erhält der Text Blocksatz, die Textfarbe wird festgelegt und die Schriftgrösse mit 110% angegeben. Der Zeilenabstand ist um 40% höher als bei den anderen Texten auf dieser Seite. |
|
| Fliesstext mit Einrückung
|
Dieser Fliesstext erhält einen Einrückung in der ersten Zeile, wodurch der Beginn eines neuen Absatzes schöner aussieht. Der Zeilenabstand ist um 50% erhöht, die Schrift 15% grösser als bei den anderen Texten dieser Seite. | |
| Farbige Trennlinien sind mit CSS leicht gemacht :-))) Drei verschiedenfarbige Trennlinien |
|
|
|
Textumfluss von Bildern |
|
|
Sie können das Bild vom Text, wie in diesem Fall links umfliessen lassen (mit float:left) oder auch rechts (float:right). Dies wird allerdings nur vom Internet-Explorer ausgeführt. Ansonsten wird der Text ganz normal unter das Bild geschrieben. Diese Funktion kann auch in anderen HTML-Elementen eingesetzt werden. Zum Beispiel in Tabellen, Textüberschriften, Textfeldern, Inputfeldern usw. Weitere Abstandsdefinitionen sind z.Bsp. mit margin-right:15px (Bildabstand-Rechts) margin-left:20px (Bildabstand-Links), margin-top:40px (Bildabstand-Oben)