*** CSS - Textformatierung mit StyleSheets ***   Inhaltsverzeichnis


In dieser Web-Seite wurden einige StyleSheets aus den Beispielen der vorhergehenden Seite als "interne Stylesheets" im <head> eingetragen und somit das Layout der Web-Seite basismäßig definiert:

      <style type="text/css" media="all"/>
          body  {margin-left: 20px;
                 background-color: #E8FF88;
                 font-family: arial;
                 font-size: medium;
                 color:green;}
         h1,h2  {font-family: Arial, sans-serif;
                 color: limegreen;}
         p      {margin: 0;}
         p:first-letter {font-size: large;} ... (stört bei den Schriftgrößen!)
      </style>

*** StyleSheets zur Textformatierung ***   Inhaltsverzeichnis

StyleSheet Darstellung Beschreibung
{font-family: Georgia,Times,serif;}
{font-family: "Trebuchet MS",Arial;}

{font-family: "Comic sans MS";}
{font-family: serif;}
{font-family: sans-serif;}

{font-family: cursive;}
{font-family: fantasy;}
{font-family: monospace;}

{font-family: "Almonte Snow";}
{font-family: wingdings;}
{font-family: xyz;}
{font-family: xyz,fantasy;"}
      

Schriftart Georgia etc.

Schriftart Trebuchet MS etc.

Schriftart Comic sans MS

(Ersatz-)Schriftart serif

(Ersatz-)Schriftart sans-serif

(Ersatz-)Schriftart cursive

(Ersatz-)Schriftart fantasy

(Ersatz) monospace


Schriftart Almonte Snow

Wingdings

Schriftart unbekannt

Schriftart xyz unbekannt

Schriftart:

Im Prinzip kann man jede beliebige Schriftart angeben - dargestellt werden kann jedoch nur eine Schriftart, die auf dem Computer, der die Webseite aufruft, auch installiert ist.

Deshalb sollte man möglichst Standard-Schriftarten verwenden - oder zumindest eine (allgemeine) "Ersatz-Schriftart" mit angeben:

serif = Schriftart mit Serifen
sans serif = Schriftart ohne Serifen
cursive = Schriftart Cursive
fantasy = Schriftart Fantasy
monospace = Schriftart MonoSpace
 
{font-size: 16px;}
{font-size: 3mm;}
{font-size: 0.24in}

{font-size: 1em;}
{font-size: 80%;}
{font-size: 3.5ex;}


{font-size: xx-small}
{font-size: x-small}
{font-size: small}
{font-size: medium}
{font-size: large}
{font-size: x-large}
{font-size: xx-large}


{font-size: larger}
{font-size: smaller}

      

Schriftgröße 16 Pixel

Schriftgröße 3 mm

Schriftgröße 0.24 Inch

Schriftgröße: 1 em

Schriftgröße: 80%

Schriftgröße 3.5ex


Schriftgröße xx-small

Schriftgröße x-small

Schriftgröße small

Schriftgröße medium

Schriftgröße large

Schriftgröße x-large

Größe xx-large

Schriftgröße larger

Schriftgröße smaller

Schriftgröße:

Die Schriftgröße kann in vielen Einheiten angegeben werden:
Punkt(pt), Pica(pc), Pixel(px),
Zentimeter(cm), Millimeter(mm), Inch(in),
iX der aktuellen SChrift(ex), Ems(em), Prozent(%).


Die absoluten Einheiten wie Pixel und Millimeter eignen sich dazu, den Text an Bildgrößen anzupassen. Sie haben jedoch den Nachteil, daß bei manchen Browsern dann die Schriftgröße vom Leser nicht angepaßt werden kann.


Deshalb sollte man als Einheit Ems oder % oder eines der in den Beispielen verwendeten Schlüsselwörter angeben.

{text-align: left;}
{text-align: center;}
{text-align: right;}
{text-align: justify;}
      

Ausrichtung left

Ausrichtung center

Ausrichtung rigth

Ausrichtung justify

Ausrichtung:

Die Ausrichtung via Style-Sheet macht nur im Head Sinn - in einzelnen Absätzen ist die HTML-Angabe einfacher.

{color: white; background: black;}
{color: blue; border-bottom:2px solid red;}
{color: RGB(90%,30%,70%);}
{color: RGB(0,255,40);}
{color: #824C2A;}
      

Weiß auf Schwarz ...

Schriftfarbe blau mit rotem Abschlußstrich ...

RGB in Prozent

RGB in Dezimalwerten

RGB als Hexacode

Farben:

Mit Style-Sheets kann die Farbe von Text, Hintergrund und Rahmen bestimmt werden. Die Farben werden als RGB-Code definiert, für viele Farben gibt es auch ein Schlüsselwort.


Jedes HTML-Element besteht aus einem Rahmen, einem Hintergrund, dem darin enthaltenen Text und Abständen - und all diese Parameter kann man via CSS-StyleSheet beeinflussen.
Dafür gibt es eine Vielzahl von Parametern und Attributen, die in den StyleSheets angegeben werden können ...
Die Web-Site self-html bietet eine schöne Übersicht dazu.





---------------------------------------------------------------------------
weiter: StyleSheets - Klassen und IDs
zurück: StyleSheets - Grundlagen