Angabe von Größe und Position mit CSS - Dummys

In einer CSS-Stildefinition (oder -Regel ) können Sie Positionen und Größen in vielerlei Hinsicht beschreiben. unter Verwendung verschiedener Maßeinheiten. Sie können oft wählen, welche Einheit Sie wollen, obwohl bestimmte Messungen in bestimmten Situationen am besten funktionieren.

Zum Beispiel werden viele Designer, die mit Papier und Tinte arbeiten, verwendet, um Schriften in Punkten zu spezifizieren. Ein Punkt ist eine absolute Länge: 1/72 Zoll. Die Verwendung von absoluten Größenangaben für ein Magazin oder Buch funktioniert gut - schließlich kann der Benutzer das Seitenverhältnis einer Seite in einem Buch nicht verkleinern, dehnen oder ändern. ( Seitenverhältnis ist das Verhältnis zwischen Höhe und Breite.) Browser können jedoch beliebig angepasst werden. Wenn Sie eine Seite eines Browsers ziehen, ändern Sie sie, sodass sie dünner oder dicker wird. Mit anderen Worten, Sie verändern seine Form, sein Seitenverhältnis, zum Beispiel von einem Quadrat zu einem Rechteck.

Für Schriften, die in einem Browser angezeigt werden, ist eine relative Maßeinheit den traditionellen Punkten überlegen. Im Gegensatz zu absoluten Messwerten wie Punkten oder Zoll skaliert eine relative Einheit mit Schriftgrößen. Als Ergebnis erhalten Sie besser vorhersagbare Ergebnisse in Webseiten mit relativen Maßeinheiten, die die Schriftgröße angeben. Eine nützliche relative Maßeinheit für einen Webdesigner ist der em . Obwohl em praktisch ist, verwenden die meisten Designer bei der Angabe der Schriftgröße immer noch Punkte oder Pixel. Vielleicht ist es nur Gewohnheit, aber auf jeden Fall sehen die Ergebnisse in den meisten Browsern meist gut aus.

Messlänge

Hier sind sie auf den Punkt gebracht … alle Einheiten, die Länge messen:

• px (Pixel): Pixel sind die kleinste Einheit auf einem Display - die Punkte Sie können manchmal sehen, ob Sie nahe genug an einen Fernseher herankommen. Wenn Sie beispielsweise eine Monitorauflösung von 800 × 600 festlegen, bedeutet dies, dass diese 800 Pixel breit und 600 Pixel hoch ist.
Pixel können eine nützliche Methode zum Festlegen der Schriftgröße sein. Der Nachteil ist jedoch, dass bei Angabe von Pixeln die Option für die benutzerdefinierte Schriftgröße in Internet Explorer überschrieben wird. Benutzer können also nicht von "groß" auf "am größten" usw… Sie sollten jedoch immer px verwenden, um Bildgrößen zu beschreiben. Bilder, die bereits in Pixeln messbar sind (Sie können die Messungen sehen, indem Sie das Bild in eine beliebige Grafikanwendung laden).

• pt (Punkte): Ein Punkt entspricht 1/72 Zoll. Punkte (und Pica) sind klassische Schriftarten. Die meisten Browser verwenden standardmäßig eine 12-Punkt-Serifenschrift.
• pc (picas): Ein Pica entspricht 12 Punkten.
• mm (Millimeter): Ein Millimeter ist.0394 Zoll, also ein Zoll enthält rund 26 Millimeter. Ein Zentimeter enthält 10 Millimeter. Ein Großteil der Welt verwendet dieses System metrisch .

• cm (Zentimeter): Ein Zentimeter ist. 3937 Zoll, also ein Zoll enthält etwa 2 1/2 Zentimeter.
• in (Zoll): Zoll ist eine Einheit im englischen oder imperialen System, die in den Vereinigten Staaten verwendet wird. England und einige Überbleibsel der Kolonialzeit blieben ebenfalls lange Zeit im imperialen System, stürzten aber vor kurzem ein. Die britische Regierung hat im Jahr 2000 der europäischen Metrik entsprochen, und es ist jetzt eine strafbare Handlung, überall im Reich Ihrer Majestät mit dem Pfund zu verkaufen. Ein Mann in Cornwall musste zum Beispiel Gerichtskosten zahlen, nachdem er beim Verkauf von Makrelen für 1 £ erwischt worden war. 50 Pfund.

Ein Zoll bezieht sich auf den Abstand zwischen dem ersten Knöchel und dem Ende eines jetzt vergessenen Königsdoms. Seit 50 Jahren sind hartnäckige Bemühungen, das imperiale System zugunsten der Metrik zu erziehen und zu legalisieren, in den USA versagt.
• em: Em ist eine Maßeinheit, die sich aus der ungefähren Breite des Buchstabens < m einer Schriftart. Dies wird allgemein als die beste Möglichkeit angesehen, die Schriftgröße in CSS anzugeben, obwohl nur wenige Designer diesem Rat folgen. ex (die x-Höhe):
• Ex ist die x-Höhe oder die Höhe des Kleinbuchstabens x der Schriftart des aktuellen Elements.) Browser unterteilen sie normalerweise um die Hälfte um die ex-Höhe zu bekommen. Diese Maßeinheit ist derzeit nicht so nützlich wie die em, da sie nicht für alle Schriftarten als durchschnittlich vorhersehbar ist.

% (Prozent):

• Prozentwerte eignen sich hervorragend für die Angabe der relativen Größe (sie kann relativ zu einem Vorfahren, dem Elternteil usw. sein). Die Maßeinheiten unterscheiden nicht zwischen Groß- und Kleinschreibung. Sie können sie kapitalisieren oder nicht, wie Sie es wünschen. Ebenso können Sie im IE einen Leerraum zwischen der Zahl und ihrer Einheit einfügen. Beispiel: 2 Zoll entspricht 2 Zoll. Andere Browser mögen das Leerzeichen nicht. Der Einfachheit halber ist die Verwendung von Kleinbuchstaben und das Vermeiden unnötiger Leerzeichen im Allgemeinen eine gute Idee bei der Arbeit mit CSS. Gewöhnen Sie sich einfach an das 2in oder 24px Format und es wird Ihnen gut gehen, es sei denn, die CSS Komitees beschließen, sich in Zukunft umzukehren.

Kleine em verstehen

Da Experten empfehlen, em beim Entwerfen einer Webseite zu verwenden, die genau so aussehen soll, lohnt es sich, genauer hinzuschauen, was diese Einheit eigentlich bedeutet. Traditionell war das em die Breite des Buchstabens

m . Vielleicht haben Sie den Ausdruck

m-dash oder em-dash gehört. Dies ist der Bindestrich, der normalerweise beim Veröffentlichen verwendet wird. Es handelt sich um eine horizontale Linie - wie diese -, die der Breite des Buchstabens m der Schrift entspricht (dies ist in vielen Schriftarten nicht genau äquivalent). Es gibt auch einen en-dash. Rate mal, worauf es basiert.

Em und ex Einheiten sind

relativ zu jeder Schriftart. Dies ist nützlich, weil es bedeutet, dass sich die von em angegebene Größe auf präzise Weise ändert, basierend auf der Monitorauflösung des Benutzers, den Voreinstellungen und anderen Faktoren.Mit anderen Worten können Sie mit em festlegen, was relativ zur Schriftart geschieht. Das Ergebnis ist proportional zu den anderen Eigenschaften der Schrift und des umgebenden Textes. Relative Spezifikationen wie em erlauben es Menschen mit Handicaps, die Schriftart im Browser nach Bedarf zu vergrößern. Feste Spezifikationen wie px oder pt bieten dem Benutzer diese Option nicht. Em und ex sind die Maßeinheit des traditionellen Schriftsetzers, aber ihre Bedeutung in CSS ist leicht modifiziert. Zum einen berechnen Computer ex, indem sie em halbieren. Dies ist einfacher zu berechnen, aber nur eine Annäherung für die meisten Schriften. Em in CSS ist die Schriftgröße in Pixeln. Dies ist nützlich, da Sie em-Einheiten angeben und sich darauf verlassen können, dass sie relativ zur Schriftart des übergeordneten (oder anderen) Elements sind.

Hier ist ein Experiment, um herauszufinden, wie em

relativ zu einem anderen Element ist. In diesem Code ist der Text innerhalb des Elements als 26px definiert, aber der Text innerhalb des Absatzelements ist als 1. 5em definiert, oder, anders ausgedrückt, anderthalb Mal so groß wie der Elternteil. Später im HTML-Code wird das Absatzelement vom body-Element eingeschlossen (übergeordnet). Daher wird der Absatztext mit 1,5 × 26 Pixel (oder 39 Pixel) gerendert. Körper {Schriftgröße: 26px;}

p {Schriftgröße: 1. 5em;}

p. abs {font-size: 39px;}

etwas Text

etwas Text (1. 5 em des Elternteils).

etwas Text (39 Pixel).

Der Text in der abs-Klassenversion von

wird genauso groß wie der gewöhnliche

gerendert. Das Element ist ein übergeordnetes Element von

, und

ist als 1. 5em seines übergeordneten Elements definiert. Der übergeordnete Körper verwendet 26 Pixel als Textgröße, also 26 × 1. 5 ergibt 39 Pixel.