CSS unterstützt mehrere Längeneinheiten. Sie können in zwei Hauptkategorien unterteilt werden: absolute Längeneinheiten (definieren die Länge in absoluten Maßen unabhängig vom Anzeigegerät); relative Längeneinheiten (definieren die Länge relativ zu anderen dem Browser bekannten Einheiten).
Absolute Längenmaße können in fünf Einheiten gemessen werden: Zoll (in), Zentimeter (cm), Millimeter (mm), Punkt (Punkt, geschrieben als pt) und Zeichenhöhe (Pica, geschrieben als pc). Als typografische Einheiten werden üblicherweise Punkt und Schrifthöhe verwendet, wobei 1Pica = 12pt. CSS definiert 1pica als 1/72in, also 72pica=1in. Dies ist auch die Definition, die von der Postscript-Sprache von Adobe verwendet wird, die häufig von hochwertigen Druckern verwendet wird.
CSS unterstützt auch „absolute“ Längen in Pixeln – Pixel sind ein Punkt auf einem Computerbildschirm. Aufgrund der Unterschiede in der Pixeldichte und der vom Benutzer gewählten Bildschirmauflösung (derselbe Bildschirm kann eine Auflösung von 640 x 480 oder eine Auflösung von 1024 x 768 unterstützen) variiert die absolute Größe der Pixel jedoch auf verschiedenen Bildschirmen . Somit ist die Länge in Pixel tatsächlich anzeigeabhängig. Der Vorteil der Verwendung von Pixeln als Computeranzeigeeinheiten besteht darin, dass Pixel streng definierte Einheiten sind. Allerdings können Pixeleinheiten beim Drucken von Webdokumenten zu Problemen führen.
Absolute Längeneinheiten wie Zoll und Zentimeter sind im Drucklayout sehr nützlich, da sie die absolute Positionierung liefern, die zum Layouten eines Dokuments auf einem Papier mit fester Größe erforderlich ist. Aus diesem Grund sollte in elektronischen Anzeigedokumenten keine absolute Länge verwendet werden. Dies liegt daran, dass die Anzeige zwischen 6 Zoll x 4 Zoll und 21 Zoll Diagonalen unterschiedlich ist und es keine Garantie dafür gibt, dass der Browser auf einem bestimmten Bildschirm dieselbe Länge anzeigt Die Anzeige von Dokumenten kann über einen festen Fensterbereich erfolgen (die Größe des Fensters ist vom Benutzer wählbar). Unter Berücksichtigung dieser Unterschiede ist es sinnvoll, Einheiten zu verwenden, die sich automatisch an die Größe des Anzeigebereichs oder die Schriftgröße des Textes anpassen. Glücklicherweise gibt es drei CSS-Längeneinheiten, die dieses Verhalten ermöglichen.
Relative Längenmessungen können in drei Formen vorliegen: em-Einheiten, ex-Einheiten und Prozent. Die Einheiten em und ex definieren die Länge im Verhältnis zur Schriftgröße. Die em-Einheit definiert die Länge relativ zur tatsächlichen Punktgröße der Schriftart: Wenn die aktuelle Schriftgröße also 12pt beträgt, dann ist 1,5em = 18pt. Im Gegensatz dazu definieren ex-Einheiten die Länge relativ zur x-Höhe der Schriftart, also relativ zur Höhe des Buchstabens „x“ in der aktuellen Schriftart. Auf diese Weise hängt die Ex-Größe einer Einheit sowohl von der Schriftgröße als auch vom Schriftfamilientyp ab, da die tatsächliche x-Höhe bei einer bestimmten Punktgröße von Schriftfamilie zu Schriftfamilie unterschiedlich sein kann.
Derzeit sind EM-Einheiten zuverlässiger als Ex-Einheiten: Für die beste Kompatibilität zwischen verschiedenen Browsern ist es am besten, EM-Einheiten zu verwenden. Beachten Sie jedoch, dass sowohl EM- als auch Ex-Geräte Druckprobleme verursachen können.
Die Prozenteinheit ist die dritte relative Einheit. Diese Einheit definiert die Länge als Prozentsatz der relativen Länge. Gemäß der CSS-Spezifikation ist die relevante Länge entweder die Schriftgröße der übergeordneten Einheit oder die Breite der übergeordneten Formateinheit – jeder Fall variiert je nach den Merkmalen der Frage. Es gibt einen äußerst wichtigen Vorbehalt: Bestehende Browser berechnen keine Prozentwerte relativ zur Zellenbreite und setzen daher Prozentlängen nicht korrekt um. Stattdessen berechnen alle Browser die schriftartunabhängige prozentuale Länge als Prozentsatz der gesamten Browserfensterbreite.
Das Format des Längenwerts besteht aus einem Zeichen („+“ oder „-“, der Standardwert ist „+“), gefolgt von einer Zahl und einer Einheitenkennung (einer zweistelligen Abkürzung). Es gibt zwei Formen von Längeneinheiten: relative und absolute Einheiten. Stylesheets verwenden relative Einheiten, um die Skalierung von einem Medium auf ein anderes (z. B. von einem Computer auf einen Laserdrucker) einfacher steuern zu können. Prozenteinheiten und Schlüsselwerte (z. B. „x-large“) haben die gleichen Vorteile. wie folgt:
H1 { margin: 0.5em } Elementschrifthöhe
H1 { margin: 1ex } Die Höhe des Buchstabens „x“
in Pixeleinheiten relativ zur Grafikauflösung des Bildschirms. Wenn die Pixeldichte des Ausgabegeräts erheblich von der eines Standard-Computerbildschirms abweicht, skaliert der Benutzer die Pixelwerte neu. Der empfohlene Pixelwert beträgt 90 dpi bei einer Armlänge vom Lesegerät entfernt. Untergeordnete Elemente erben den berechneten Ergebniswert anstelle des relativen Werts, wie zum Beispiel:
BODY {
Schriftgröße: 12pt;
Texteinzug: 3em;
}
H1 { Schriftgröße: 15pt }
Im obigen Beispiel beträgt der „text-indent“-Wert von „H1“ 36pt, nicht 45pt.
=================================
em-Tag – Hervorhebungs-Tag
* em-Tags erscheinen paarweise mit <em >Beginnen Sie mit</em>
* Eigenschaften:
* Allgemein – allgemeine Eigenschaften
* em ist die Abkürzung für „Hervorhebung“.