Willkommen auf CSS-Roots

der Starthilfe für Webdesigner

Seht euch um und schaut euch unsere Beiträge an, für euch ist sicher was dabei,
für Themenanregungen und Ideen stehe ich gerne unter info@css-roots.de zur Verfügung.

Mitglieder-Login

Lost your password?

Registrierung ist geschlossen

Die Registrierung wurde gesperrt, möchtest du dich registrieren schreibe bitte eine E-Mail an info@css-roots.de



Größenangaben in CSS

Verfasst am Dezember 1, 2008 von admin in Kategorie Größeneinheiten

Wie der eine oder andere vielleicht schon bemerkt hat, gibt es in CSS mehr als eine Größeneinheit. Die Einheit die allen bekannt sein sollte sind Pixel (px). Jedoch gibt es noch weitere einheiten die ich kurz vorstellen möchte, um euch die Unterschiede aufzuzeigen.

Pixel:

Pixel ist die bekannteste einheit und verhält sich relativ in zur Bildschirmauflösung.

Ein Pixel = ein Pixel

Anwendungsbeispiel:

border: 5px;

em

Ex ist eine Einheit die auf eine bestehende Größe aufbaut, wie zum Beispiel bei der Schriftart. So wird aus einer Schriftgröße mit 10 Pixeln, beim Einsatz der Einheit em mit dem Wert 1.4 eine Schriftgröße mit 14 Pixeln

Bei 10 px und 1.4em = 14 Pixel

Anwendungsbeispiel:

body
{
font-size:10px;
}
#content
{
font-size: 1.4em;
}

Desweiteren gibt es noch einige absolute Längenangaben, welche ihr jedoch stets mit bedacht einsetzen solltet, denn ihr wisst nie welche Bildschirmauflösungen eure Besucher haben, wodurch ungewollte Scrollbalken entstehen können.

Inch:

In ist eine Einheit aus dem amerikanischem und steht für Inch. Ein Inch ist exakt 2,54cm lang, was diese Angabe für den normalen Gebraucht relativ unbrauchbar macht.

1in = 2,54cm

#content
{
height: 10in;
width: 5in;
}

Centimeter und Millimeter:

Ich glaube zu diesen beiden Angaben ist nicht viel zu sagen, daher hier nur das Anwendungsbeispiel:

#content
{
height: 5cm;
}
#footer
{
height: 23mm;
}

Punkte:

Punkte sind auch wieder eine amerikanische Einheit, ein pt ist 1 / 72 Inch groß. Hört sich etwas merkwürdig an deshalb hier mal die umrechnung in cm.

1pt = 1 / 72 Inch = 0,035277777777777777777777777777778 cm

Kurz gesagt ein pt ist seeeeehr klein und deshalb auch nur ein seeeehr kleines Anwendungsbeispiel

#content
{
font-size:10pt;
}

Das sind so die geläufigsten Größenangaben, jedenfalls meines Wissenstandes nach.