Du bist hier::--Gestalten mit CSS – Einheiten und Farben

Gestalten mit CSS – Einheiten und Farben

[imgr=CSS-cascading-style-sheets2-200.gif]CSS-cascading-style-sheets2.gif?nocache=1301906476107[/imgr]In dem folgendem Tipp geht es um die Verwendung von Einheiten und Farben beim Gestalten von Webseiten mit CSS.
Bei der Gestaltung von Webseiten mit CSS wird zwischen relativen und absoluten Angaben, sowie Zahlen unterschieden.

Relative Angaben

Zu den relativen Angaben gehören drei Arten:

    [*]Pixel: Ein Pixel auf Ihrer Webseite ist ein Pixel auf Ihrem Bildschirm. Die optimale Auflösung einer Webseite wird derzeit von vielen auf 1024×768 Pixel geschätzt. Die Abkürzung für Pixel in CSS lautet „px“.[/*]
    [*]Em: Die Einheit „em“ wird häufig bei Texten verwendet.

    1em

    entspricht der Schriftgröße des Elternelements. Das bedeutet, bei einer Angabe von

    1.5em

    ist die Schrift 1,5-mal größer als die des Elternelements.[/*]

    [*]Ex: Eine eher weniger verbreitete Angabe ist „ex“. Bei dieser Angabe wird sich an der Größe eines kleinen x orientiert. Die Schreibweise

    0.5ex

    bedeutet das Element hat eine Schriftgröße von einem halben x.[/*]

Absolute Angaben

Die absoluten Angaben werden primär im Druck verwendet, trotzdem besteht die Möglichkeit auch Webseiten mit diesen zu gestalten.

Die Schriftgröße wird im Druck mit „points“ (pt) angegeben. Diese Angaben finden Sie auch in Ihren Textverarbeitungsprogrammen. Eine zweite Möglichkeit zur Angabe ist das „pica“ (pc). Ein pica entspricht 12pt.

Farben

Bei der Angabe von Farben unterscheidet man ebenfalls zwischen drei Arten:

    [*]RGB: Ihr Monitor benutzt in der Regel drei Farben (Rot, Grün, Blau). Dies wird als RGB-Farbenmodell bezeichnet. Für jede Farbe kann ein Wert von 0-255 angegeben werden.

    Der Code

    color:rgb(0,255,0);

    drückt die Farbe Grün aus. Dagegen ist der Code

    color:rgb(0,0,0);

    die Farbe Schwarz und

    color:rgb(255,255,255);

    die Farbe Weiß.

    Ebenfalls erlaubt ist die Prozentschreibweise. In diesem Fall entsprechen 100% dem RGB-Wert 255.[/*]

    [*]Hexadezimale Schreibweise: Jede Farbe wird durch eine zweistellige Hexadezimalstelle beschrieben. Vor jeder Farbangabe wird ein Raute (#) Symbol gesetzt.

    #RRGGBB

    Jede dieser Stellen kann einen Wert von 0-15 annehmen. Diese Werte werden aufgeteilt in 0-9 und A(10) bis F(15).

    Der Code

    #FF0000;

    ist die Farbe Rot,

    #000000;

    ist die Farbe Schwarz und

    #FFFFFF;

    ist die Farbe Weiß. Bei gleichen Werten in der zweistelligen Dezimalstelle kann man eine verkürzte Schreibweise verwenden. So wird aus

    #FF9900;

    einfach

    #F90;

    [/*]

    [*]Farbnamen: Als dritte Möglichkeit kann man Farbnamen verwenden. Dieser Code liefert Ihnen die Farbe Schwarz:

    color:black;

    Eine ausführliche Tabelle zu den verschiedenen Farbnamen finden Sie hier.[/*]

Die Einheiten und Farben spielen bei der Gestaltung mit CSS eine große Rolle. Sie können fast alle Elemente auf Ihrer Webseite individuell anpassen.

zurück zur Übersicht: Themenübersicht – Webdesign mit CSS

Von |2018-07-25T14:32:50+00:00April 4th, 2011|Kategorien: Webseiten/HTML|2 Kommentare

Über den Autor:

2 Comments

  1. kicia 4. April 2011 um 13:40 Uhr

    Ich würde dazu noch ergänzen wollen:

    Pixel angaben können auch als absolut verstanden werden, weil die Anzahl der Pixel hier immer eindeutig und gleich ist.
    Relativ sind sie erst im Vergleich von verschieden dimensionierten Ausgabegeräten (verschiedene ppi).
    Damit ist aber eine andere Relation gemeint, nämlich von Pixel zu zB. Zentimeter, im Gegensatzt zu "em", wo dessen Relation zur übergeordneten definition gemeint ist (auch auf dem selben Ausgabegerät).

    Außerdem kleine Korrektur:
    Hexadezimale Werte gehen von 0-15, hexadezimal F entspricht dezimal 15.

  2. marwo 4. April 2011 um 20:13 Uhr

    @ kicia

    Danke fürs aufmerksame Lesen.

    Bei den Pixeln geht es meistens um Vergleich zum Ausgabegerät, darum relativ.

    [x] Hexadezimalwerte wurden korrigiert. Hab mich verrechnet.

Hinterlassen Sie einen Kommentar