HTML, CSS, PHP, MySQL

html-php.de

HTML & CSS Stylesheets Referenz JavaScript PHP MySQL Sonstiges Gästebuch Inhalt Impressum

[ Schriftart ] [ Schriftgröße ] [ Schriftfarbe ] [ Text formatieren ] [ Überschrift ]

Schriftart

In den nachfolgenden Befehl wird der Text in Times New Roman angezeigt, ist diese nicht vorhanden, dann in Arial. Bei Schriftarten mit Leerzeichen wird die Schriftart in einfachen Gänsefüße eingeschlossen.

  <p style="font-family:'Times New Roman',Arial;">
  Text in Times oder Arial</p>

Schriftgröße

Die Schriftgröße kann in verschiedenen Maßeinheiten angegeben werden: pt für Punkte, px für Pixel oder % Prozent bzw. em (beide relativ zum Elterenelement).

  <div style="font-size: 16px; font-family: Arial, Helvetica, sans-serif;>
  <p style="font-size: 16px;">
  Text in einer Schriftgröße von 16 Pixel</p>
  <p style="font-size: 14pt;">
  Text in einer Schriftgröße von 14 Punkte</p>
  <p style="font-size: 80%;">
  Text in einer Schriftgröße von 80% gegenüber des Elternelementes</p>
  <p style="font-size: 1.2em;">
  Text in einer Schriftgröße von 1.2 gegenüber des Elterenlementes</p>
  </div>
Das ganze sieht so aus

Schriftfarbe

Die Schriftfarbe wird in Hexadezimal, Name oder RGB angeben. Mehr zum Thema Farben erhalten Sie im Kapitel Farben definieren.

  <p><span style="color:#0000FF;">blauer Text;</span>
  <span style="color:red;">roter Text;</span>
  <span style="color:rgb(0,128,0);">grüner Text;</span></p>
Das ganze sieht so aus

Textformatierung

Um die Schrift zu formatieren, können Sie die Elemente <b> </b> (b=bold=fett) für Fettschrift und <i> </i> für Kursive Schrift benutzen. Des weiteren gibt es <sub> für tiefergestellt, <sup> für hochgestellt.

Statt diesen Elementen können Sie auch CSS-Stylesheets einsetzten.

<span style="font-style:italic;"> = kursiv </span>
<span style="font-weight:bold;"> = fett </span>
<span style="font-weight:bolder;"> = extra fett</span>
<span style="font-weight:lighter;"> = dünner</span>
<span style="text-decoration:underline;"> = unterstrichen</span>
<span style="text-decoration:overline;"> = überstrichen</span>
<span style="text-decoration:blink;"> = blinkender Text</span>

blink und overline werden nicht von allen Browsern unterstützt.

Überschriften

Überschriften werden mit <h..> (h = heading = Überschrift) definiert:

CodeSchriftgröße
<h1>größte Überschrift</h1>

größte Überschrift

<h2>zweitgrößte Überschrift<h2>

zweitgrößte Überschrift

<h3>drittgrößte Überschrift<h3>

drittgrößte Überschrift

<h4>viertgrößte Überschrift<h4>

viertgrößte Überschrift

<h5>zweitkleinste Überschrift<h5>
zweitkleinste Überschrift
<h6>kleinste Überschrift<h6>
kleinste Überschrift

Benutzen Sie diese Elemente nur für Überschriften, und nicht um irgendwelche Texte größer darzustellen. Wir wollen uns ja an die Richtlinien halten.

back top next