(Stand: 09.12.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 |
© Grammiweb.de Internetlösungen. Alle Rechte vorbehalten. Stand: 09.12.2024
Seitenanfang - Sponsor werden - Datenschutz - Medien - Impressum - Werbung - Hilfe - Kontakt