startseitekatalogpraxiswerkzeugeressourcenmagazingrammiweb

(Stand: 27.07.24, Adresse: http://www.grammiweb.de/uebersichten/masseinheiten.shtml)

 

CSS-Maßeinheiten

Die Cascading-Style-Sheets ("CSS") ermöglichen die exakte Layoutgestaltung mit von Ihnen frei wählbaren Maßeinheiten, so dass Sie Schriftausgaben, Rahmenbreiten oder auch Abstände recht genau definieren können. Dies wird von den meisten neueren Browsern unterstützt, wobei allerdings produktspezifische Unterschiede auftreten können. Ältere Browser (vor Version 4) können mit CSS meist gar nicht in der Anzeige beeinflusst werden, und selbst danach treten häufig Komplikationen bei einer browserübergreifenden Lösung auf (der Netscape Navigator der Version 4.7x akzeptiert zwar CSS-Anweisungen, wird jedoch die JavaScript-Option deaktiviert, werden alle Definitionen ignoriert).

Es werden relative und absolute Maßangaben unterschieden. Die absoluten beziehen sich auf fest vorgegebene Definitionen, so zum Beispiel auf eine Höhe in Zentimetern (die natürlich überall relativ gleich ausfallen sollte) oder in Punkten. Die relativen hingegen resultieren aus den Gegebenheiten des Systems, so dass beispielsweise ein Pixel bei einer Auflösung von 640x480 größer ist als bei 1024x768, was als Ergebnis eine kleinere Ausgabe in der größeren Auflösung mit sich bringt. Auch eine von "normal" ausgehende prozentuale Zuordnung ist möglich, bei der die Definition { font-size:+10%; } eine um zehn Prozent größere, { font-size:-10%; } wiederum eine zehn Prozent kleinere Ausgabe zur Folge hat.

Ein Beispiel, bei dem die normale Textausgabe mit einer Höhe von 24 Punkten definiert wird:

<style type="text/css">
p { font-size:24pt; }
</style>

Bei der Verwendung von numerischen Bruchzahlen wird statt des Kommas ein Punkt zur Trennung vorausgesetzt, so dass eineinhalb Zentimeter nicht 1,5cm sondern 1.5cm ergeben.

In der Definition der Maßangaben bergen sich einige Gefahren, die Sie aber mit ein wenig Sorgfalt leicht umgehen können:

• Bei Bruchzahlen Punkte statt Kommata verwenden (1.5 statt 1,5)
• Keine Leerzeichen zwischen Wert und Maßeinheit (24pt statt 24 pt)
• Auf die Allgemeinheit optimieren (siehe unten)
• Immer Maßeinheiten angeben (24pt statt 24)

Bildschirmausgaben werden nicht für Ihren Monitor, sondern für den Ihrer Besucher optimiert. Da Sie diese aber meist nicht kennen, sollten Sie von der Allgemeinheit ausgehen: Verwenden Sie die standardmäßig eingestellte Browserschriftart und -größe, um so zu verhindern, dass Ihre Besucher entweder mit der Lupe vor ihrem Rechner sitzen oder erst einmal vier Meter Abstand nehmen müssen, um das Wort "Hallo" in seiner Gesamtheit erkennen zu können. Das Endprodukt sollte nach Möglichkeit auf jedem verfügbaren Betriebssystem und jeder erreichbaren Plattform getestet werden, denn was auf einem Windows-PC noch recht ansehnlich wirkt, kann auf einem Mac- oder einem Linux-Rechner schnell für Unzufriedenheit sorgen.

Die CSS-Maßeinheiten
Maßeinheit	Zuordnung	Bedeutung
%	relativ	Prozent in Relation zur Elementnorm
cm	absolut	Zentimeter
em	relativ	Relativ zur elementeigenen Schrifthöhe
ex	relativ	Relativ zur elementeigenen Höhe des Buchstabens x
in	absolut	Inch (2,54cm)
mm	absolut	Millimeter
pc	absolut	Pica (12 Punkt [pt] entsprechen 1 Pica)
pt	absolut	Punkt (1 Punkt entspricht 1/72 Inch)
px	relativ	Pixel in Relation zur eingestellten Auflösung

Zurück zum Inhaltsverzeichnis

[an error occurred while processing this directive] [an error occurred while processing this directive]