Einfache Schriftformatierung im HTML-Objekt

  • Um das unliebsame CSS zu umgehen, wurden bisher mit einfachen Möglichkeiten die Schriftart, -farbe und -größe in HTML-Objekten formatiert:


    HTML
    1. <font face="courier" color="#ff0000" size="4">Das ist der Text in ROT.</font>




    In HTML5 wird zwar Schriftart und -farbe noch dargestellt, ergibt aber keinen Sinn, wenn die Schriftgröße aus der Voreinstellung von X5 angenommen wird.


    So müssen wir auf andere Möglichkeiten für den HTML-Code ausweichen:

    HTML
    1. <p style="color:#ff0000;font-size:22px;font-family:courier;">Das ist der Text in ROT.</p>



    CSS-Kurz-Referenz: Schrifteigenschaften

    CSS
    1. Schriftfamilie: font-family (Schriftart, Inherit)
    2. Schriftgröße: font-size (Längenangabe, Prozentangabe, xx-small, x-small, small, smaller, medium, large, x-large, xx-large, larger, Inherit)
    3. Schriftstil: font-style (italic, oblique, normal, Inherit)
    4. Kapitälchen: font-variant (small-caps, normal, Inherit)
    5. Schriftgewicht: font-weight (normal, bold, bolder, lighter, 100 - 900, Inherit)




    Und nun eine einfache Textformatierung mit CSS:


    CSS
    1. #example {
    2. background: #eef6e9;
    3. font-size: 22px;
    4. color: #000;
    5. font-family: Verdana, Arial, sans-serif;
    6. }


    HTML-Objekt:


    HTML
    1. <div id="example">
    2. Das ist der Text in SCHWARZ.
    3. </div>


    Hier wurde noch zusätzlich "background" genutzt, um die Farbe des Hintergrundes des DIV-Blockes zu ändern.
    Wie ihr erkennen könnt, ist das arbeiten mit CSS-Formatierungen doch nicht so schwer und es ergeben sich ganz andere Möglichkeiten in der gesamten Formatierung.

    Mario


    Der einzige Lohn für Helfer ist ein Feedback.