Ramnips Homepage-Help      www.chathomepage.de  
CSS - Textstyling

« Zurück zur CSS-Auswahl

Grundausbildung:
Die Beispiele werden direkt am HTML-Tag "font" vorgestellt. Diese Technik ist auf den aktuellen vier bekanntesten Browsern valid. Es gibt jedoch auch die weit verbreitete Möglichkeit das HTML-Bereichszuweisungs-Tag "span" zu verwenden.
( Beispiel: <span style="color:yellow; background-color:red">Bereich für den Text</span> ).
Nachteil bei span ist, dass die verschiedenen Browser teilweise nur den Bereich, andere aber die gesamte Zeile als "gestylt" interpretieren.

Wer sich ein bisschen clever anstellt (und die Leistung von CSS erkannt hat), kann diese CSS-Anweisungen übrigens einmal auf sämtlichen ihm bekannten HTML-Tags anwenden. Ob nun Bildcode oder Hyperlinks... überraschen lassen!

Alle mit CSS gestylten HTML-Anweisungen sind natürlich auch wie bei HTML ineinander verschachtelbar. Bitte nicht vergessen, die einzelnen CSS-Parameter im Code mit dem ; zu trennen!
Ein Beispiel folgt weiter unten...
Beim Textsytling kann CSS das HTML übrigens ablösen. Einige Grundparameter, die in den folgenden und anderen Beispielen auf der Webseite teilweise bereits erläutert werden, stelle ich nachfolgend kurz vor:

font-family: Schriftype - Festlegen der Schritart (z.B. Verdana)
Das Attribut mit nur einer Schrifttype ist übrigens "unsauber", aber dennoch funktionierend. Normalerweise legt man die Hauptschrift gefolgt von einer Ersatzschrift (eben eine Familie), getrennt durch ein Komma, fest.
Beispiel: <font style="font-family: verdana,arial">Text</font>

color: Farbcode/Farbname - Festlegen der Farbe (wichtig: nicht font-color, sondern nur color als Parameter verwenden)
Beispiel: <font style="color: #FF007F">Guten Tag!</font>

font-size: ZAHLpt - Festlegen der Schritgröße (z.B. 20pt)
Beispiel: <font style="font-size: 20pt">Guten Tag!</font>

Beispiel für die Verschachtelung aller 3 Grundparameter:
<font style="font-family: times new roman; font-size: 20pt; color: red">Guten Tag!</font>



Farbmarkierung

    <font style="color:yellow; background-color:red">Gelb auf Rot</font>

Ergebnis: Gelb auf Rot


Erläuterungen: Anstatt der Farbnamen können natürlich auch die HEX-Codes verwendet werden.



Text durchstreichen / "über"streichen

    <font style="text-decoration:line-through">Hallo</font>
    <font style="text-decoration:overline">Hallo</font>

Ergebnis: Hallo       Hallo      



Text andersfarbig und/oder doppelt unterstreichen/überstreichen

    <font style="border-bottom: red double">Hallo</font>
    <font style="border-bottom: #FF7F00 double">Hallo</font>

Anstelle des Farbnamens (hier im Beispiel red), können natürlich auch die HEX-Farbwerte (hier ein Orange-Ton) mit # vorangestellt eingetragen werden.

Ergebnis: Hallo    Hallo


Funktioniert natürlich auch umgekehrt mit dem Überstreichen:

    <font style="border-top: yellow double">Hallo</font>
    <font style="border-top: #AF00FF double">Hallo</font>

Ergebnis: Hallo    Hallo


Wer ein bisschen mitgedacht hat, wird merken, dass man dem border-Parameter auch -left oder -right zuweisen könnte. Ob dies allerdings gestalterisch attraktiv wirkt, entscheidet jeder selbst.

    <font style="border-left: black double">Hallo</font>
    <font style="border-right: #008030 double">Hallo</font>

Ergebnis: Hallo    Hallo



Abstand zwischen Buchstaben ändern

    <font style="letter-spacing: -1px">Hallo</font>
    <font style="letter-spacing: 3px">Hallo</font>

Ergebnis: Hallo       Hallo



Abstand zwischen Wörtern ändern

    <font style="word-spacing: 10px">Hallo, wie geht es dir?</font>
    <font style="word-spacing: -1px">Hallo, wie geht es dir?</font>

Ergebnis: Hallo, wie geht es dir?      Hallo, wie geht es dir?



Textrahmen

    <font style="border: 1px #009F00 solid">Hallo</font>

Ergebnis: Hallo


Erläuterungen: 1px legt die Rahmenstärke fest (hier 1 Pixel, der Farbwert kann im HEX oder ihm Farbnamensmodus definiert werden und "solid" bedeutet hier soviel "durchgehend".
Außer "solid" könnte man z.B. noch dashed für gestrichelt verwenden.



Sehr große Schrift

    <font style="font-size:100pt">It's big</font>

Ergebnis: It's big


Erläuterungen: Die Schriftgröße bezieht sich hier auf 100 pt.



Beispiel für die Verschachtelung der speziellen Textstyling-Parameter

    <font style="border-bottom: #AF00FF double; letter-spacing: -5px; word-spacing: +2px; font-size: 23pt">Hallo, wie geht es Dir?</font>

Ergebnis: Hallo, wie geht es Dir?



Overlapping Text (überlappender Text) - der Homepage-Trend seit dem Jahr 2007

Der Code besteht genaugenommen aus zwei Font-Bereichen und einem Zeilenumbruchtrenner in der Mitte. Extrem wichtig ist, dass die gesamte Codestruktur in einer Zeile (also hintereinander weg) eingebaut wird.
Zwei Beispiele müssen reichen! Unten erkläre ich noch die Parameter. Und dann mir bitte nur einen Gefallen tun: Nicht fragen sondern testen, testen und probieren! Ändert die Attribute und verwendet verschiedene Schriftypen, Größen, Farben ... funktioniert alles auf dem gleichen Prinzip wie hier bereits mehrfach vorgestellt.

    <font style="font-weight: bold; font-size: 30pt; color: #FF6A6A; line-height: 10px; font-family: arial; letter-spacing: -2px">Weil es ja so beliebt ist...</font><br><font style="font-weight: bold; font-size: 25pt; color: #CD5555; line-height: 15px; font-family: arial; letter-spacing: -2px">stelle ich es hier auch vor!</font>

Ergebnis:

Weil es ja so beliebt ist...
stelle ich es hier auch vor!


    <font style="font-weight: bold; font-size: 20pt; color: #00BF00; line-height: 10px; font-family: arial; letter-spacing: -2px">Man kann die Werte ändern,... </font><br><font style="font-weight: bold; font-size: 25pt; color: #FF9F00; line-height: 5px; font-family: times new roman; letter-spacing: -1px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;und den Text auch einrücken!</font>

Ergebnis:

Man kann die Werte ändern,...
      und den Text auch einrücken!


Parameter-Erläuterungen:
font-weight: bold; - eigentlich auch eine CSS-Standardanweisung (oben nicht erläutert), erzeugt Fettschrift, bei Unbelieben den Parameter einfach entfernen
line-height: ZAHLpx - das eigentliche Geheimnis, sorgt bis zu einem gewissen Teil für das Überlappen
&nbsp; - erzeugt jeweils ein Leerzeichen zum Einrücken des Textes

Die restlichen Parameter wurden in anderen Beispielen schon erklärt.



 

Folgende, stylerischen Elemente berufen sich auf die MS-Filtertransistoren und sind NUR im Internet-Explorer anzeigbar!

 



glühender Text (nur Internet-Explorer)

    <font style="width:100%;font-size:20pt;filter:glow(color=#FF7F00, strength=5)">Hallo</font>

Ergebnis: Hallo


Erläuterungen:
width:100% - bitte nicht weglassen
font-size:xx pt - hiermit die Schriftgröße festlegen
color sollte ein Gelbton sein, natürlich kann man jeden anderen Farbwert auch verwenden!
strength liegt das "Glühausmaß" fest.



Wellentext (nur Internet-Explorer)

    <font style="width:100%;font-size:50pt;filter:progid:DXImageTransform.Microsoft.Wave(freq=3,LightStrength=50,Phase=40,Strength=5)">Hallo</font>

Ergebnis: Hallo Erläuterungen:
width:100% - bitte nicht weglassen
font-size:xx pt - hiermit die Schriftgröße festlegen
Mit freq=xx,LightStrength=xx,Phase=xx,Strength=x einfach ein wenig herumprobieren.



Transparenter Text (nur Internet-Explorer)

    <font style="width:100%;font-size:50pt;filter:alpha(style=0,opacity=50)">Hallo</font>

Ergebnis: Hallo Erläuterungen:
width:100% - bitte nicht weglassen
font-size:xx pt - hiermit die Schriftgröße festlegen

Effekt wird bei einem Hintergrundbild besser erzielt.



Textschatten (nur Internet-Explorer)

    <font style="width:100%;font-size:50pt;filter:progid:DXImageTransform.Microsoft.Shadow(direction=45,color=#00005F,strength=12)">Hallo</font>

Ergebnis: Hallo Erläuterungen:
width:100% - bitte nicht weglassen
font-size:xx pt - hiermit die Schriftgröße festlegen
color - Farbe des Schattens
strength - Stärke des Schattens