Cascading Stylesheets
Stil mit <Stil>
Cascading Stylesheets
Stil mit <Stil>
Eigenschaften, die die horizontale und vertikale Abmessung eines Elements bestimmen, z.B. die Höhe und Breite eines Absatzes, einer Tabelle, eines <div>-Containers und außerdem auch die Zeilenhöhe. Acht Eigenschaften sind insgesamt für die Dimensionierung von Elementen spezifiziert.
height • width • line-height • max-height • max-width • min-height • min-width • vertical-align
| IE4+ M1 N6 O5+ Version: CSS1 Erblich: Nein |
height bestimmt die Höhe eines Text- oder Bildelements. Wenn die Höhe eines Bildes auf einen Wert gesetzt ist und die Breite als auto angegeben wird, wird das Bild proportional skaliert (das Seitenverhältnis bleibt erhalten). | length | percentage | auto |
length kann in einer der folgenden Maßeinheiten angegeben werden:
| Maßeinheit | Abkürzung | Maßeinheit | Abkürzung |
| Zentimeter | cm | Millimeter | mm |
| ems | em | Pica | pc |
| x-Höhe | ex | Pixel | px |
| Inch | in | Point | pt |
percentage (Prozentsatz) basiert auf der vollen Elementhöhe, die als 100% definiert ist.
auto ist die Voreinstellung und weist den Browser an, die Höhe automatisch zu berechnen. Wenn sowohl Höhe als auch Breite auf auto gesetzt werden, bleiben die Dimensionen des Text- oder Bildelements unverändert. Durch die Angabe von auto wird auch sichergestellt, dass keine vorangegangenen Deklarationen die Höhe des Elements beeinflussen.
img { height: 150mm; }
img { height: 2.85in; }
img { height: 45pc; }
img { height: 36pt; }
img { height: 50%; }
img { height: auto; }
img { height: 3.0in; width: auto }
oder
<img src="css_beispiele/fliege.gif">
<img src="css_beispiele/fliege.gif" style="height:80px; width:auto;">
Beispiel 2
<p style="height: 200px; width: 50%;
background-color: #949C94">
Hier steht ein 200 Pixel hoher Absatz
vor einem grünen Hintergrund.
Wird die Breite hier in Prozent angegeben,
bezieht sie sich nicht auf die Breite
des Textelements, sondern auf die Breite
des umfassenden Blocks.</p>
Hier steht ein 200 Pixel hoher Absatz vor einem grünen Hintergrund. Wird die Breite hier in Prozent angegeben, bezieht sie sich nicht auf die Höhe des Textelements, sondern auf die Breite des umfassenden Blocks.
| IE4+ M1 N6 O5+ Version: CSS1 Erblich: Nein |
width gibt die Breite eines Elements an. Wird die Breite eines Elements angegeben und die Höhe durch auto spezifiziert, wird das Element proportional skaliert (das Seitenverhältnis bleibt erhalten). | length | percentage | auto |
length kann in einer der folgenden Maßeinheiten angegeben werden:
| Maßeinheit | Abkürzung | Maßeinheit | Abkürzung |
| Zentimeter | cm | Millimeter | mm |
| ems | em | Pica | pc |
| x-Höhe | ex | Pixel | px |
| Inch | in | Point | pt |
percentage (Prozentsatz) basiert auf der vollen Elementbreite, die als 100% definiert ist.
auto ist die Voreinstellung und weist den Browser an, die Breite automatisch zu berechnen. Wenn sowohl Breite als auch Höhe auf auto gesetzt sind, bleiben die Abmessungen eines Textes oder Bildes unverändert. Durch die Deklaration von auto kann sichergestellt werden, dass keine vorangegangenen Deklarationen die Breite des Elements beeinflussen.
img { width: 150mm; }
img { width: 2.85in; }
img { width: 45pc; }
img { width: 36pt; }
img { width: 140%; }
img { width: auto; }
img { width: 3.0in;
height: auto } oder
<img src="css_beispiele/fliege.gif">
<img src="css_beispiele/fliege.gif"
style="width: 55px; height: auto;">
Das zweite Bild wird mit einer kleineren Breite eingesetzt. Da die Höhe durch "auto" deklariert ist, bleibt das Seitenverhältnis erhalten.
| IE4+ M1 N4+ O5+ Version: CSS1 Erblich: Ja |
line-height beschreibt den Abstand zwischen aufeinander folgenden Zeilen. Der Abstand hängt von der Schriftgröße ab. | normal | number | length | percentage |
normal ist die Voreinstellung. Die Deklaration von normal stellt sicher, dass vorangegangene Deklarationen die Zeilenhöhe nicht beeinflussen.
number ist ein Faktor, mit dem die Schriftgröße multipliziert wird, um die Zeilenhöhe zu berechnen.
length kann in einer der folgenden Maßeinheiten angegeben werden:
| Maßeinheit | Abkürzung | Maßeinheit | Abkürzung |
| Zentimeter | cm | Millimeter | mm |
| ems | em | Pica | pc |
| x-Höhe | ex | Pixel | px |
| Inch | in | Point | pt |
percentage basiert auf der normalen Zeilenhöhe, die als 100% angesetzt wird. Ein Prozentwert, der kleiner ist als 100%, verringert die Zeilenhöhe, die Angabe von 100% bewirkt keine Änderung und ein Wert, der größer als 100% ist, erhöht die Zeilenhöhe.
p { line-height: normal; } p { line-height: 1.25; }
br { line-height: 1.5in; }
blockquote { line-height: 85%; } oder
<span style="line-height: 60px;">
Hier ist <br>
richtig viel Platz!
</span>
Hier ist
richtig viel Platz!
| Zurzeit von keinem Browser unterstützt Version: CSS2 Erblich: Nein |
max-height bestimmt die maximale Höhe eines Elements. max-height gehört zu einer Gruppe von Eigenschaften, mit denen Höhe, Breite, maximale Höhe, maximale Breite, minimale Höhe und minimale Breite bestimmt werden. | none | length | percentage |
Wenn ein Wert für max-height angegeben wird, der kleiner als eine vorangegangene Angabe für min-height für das Element ist, wird max-height auf den gleichen Wert wie min-height gesetzt. Wenn der angegebene Wert für min-height größer als der Wert für height des gleichen Elements ist, wird die Höhe des Elementes auf min-height gesetzt.
none ist die Voreinstellung und gibt an, dass keine Einschränkungen bezüglich der Höhe des Elements gelten.
length kann in einer der folgenden Maßeinheiten angegeben werden:
| Maßeinheit | Abkürzung | Maßeinheit | Abkürzung |
| Zentimeter | cm | Millimeter | mm |
| ems | em | Pica | pc |
| x-Höhe | ex | Pixel | px |
| Inch | in | Point | pt |
percentage (Prozentsatz) gibt die Elementhöhe als Prozentsatz der Höhe des umfassenden Blocks an, in dem das Element liegt, und ist eine positive ganze Zahl. Das Prozentzeichen ist zwingend erforderlich.
p {max-height: 20px;}
p {max-height: 200%;}
Dieser Absatz soll
höchstens 20 Pixel hoch sein!
Eine zweite Zeile sollte nicht mehr in den Absatz passen.
Eine dritte Zeile auch nicht.
| Zurzeit von keinem Browser unterstützt Version: CSS2 Erblich: Nein |
max-width gibt die maximale Breite eines Elements an. max-width gehört zu einer Gruppe von Eigenschaften, mit denen Höhe, Breite, maximale Höhe, maximale Breite, minimale Höhe und minimale Breite bestimmt werden. | none | length | percentage |
Wenn max-width kleiner als ein zuvor spezifizierter Wert für min-width ist, wird max-width auf den Wert von min-width gesetzt. Wenn min-width größer als der Wert width für das gleiche Element ist, wird width auf den Wert von min-width gesetzt.
none bestimmt, dass keine Beschränkung für width besteht.
length kann in einer der folgenden Maßeinheiten angegeben werden:
| Maßeinheit | Abkürzung | Maßeinheit | Abkürzung |
| Zentimeter | cm | Millimeter | mm |
| ems | em | Pica | pc |
| x-Höhe | ex | Pixel | px |
| Inch | in | Point | pt |
percentage (Prozentsatz) gibt die Elementhöhe als Prozentsatz der Breite des umfassenden Blocks an, in dem das Element liegt, und ist eine positive ganze Zahl. Das Prozentzeichen ist zwingend erforderlich.
p {max-width: 210px;}
p {max-width: 200%;}
| Zurzeit von keinem Browser unterstützt Version: CSS2 Erblich: Nein |
min-height gibt die minimale Höhe eines Elements an. min-height gehört zu einer Gruppe von Eigenschaften, mit denen Höhe, Breite, maximale Höhe, maximale Breite, minimale Höhe und minimale Breite bestimmt werden. | length | percentage |
Wenn max-height kleiner als ein zuvor definierter Wert für min-height ist, wird max-height auf den Wert von min-height gesetzt. Wenn der Wert für min-height größer als der aktuelle Wert für height ist, wird height auf den Wert von min-height gesetzt.
length kann in einer der folgenden Maßeinheiten angegeben werden (Voreinstellung ist 0):
| Maßeinheit | Abkürzung | Maßeinheit | Abkürzung |
| Zentimeter | cm | Millimeter | mm |
| ems | em | Pica | pc |
| x-Höhe | ex | Pixel | px |
| Inch | in | Point | pt |
percentage (Prozentsatz) gibt die Elementhöhe als Prozentsatz der Höhe des umfassenden Blocks an, in dem das Element liegt, und ist eine positive ganze Zahl. Das Prozentzeichen ist zwingend erforderlich.
p {min-height: 175px;}
p {min-height: 200%;}
| Zurzeit von keinem Browser unterstützt Version: CSS2 Erblich: Nein |
min-width gibt die minimale Breite eines Elements an. max-height gehört zu einer Gruppe von Eigenschaften, mit denen Höhe, Breite, maximale Höhe, maximale Breite, minimale Höhe und minimale Breite bestimmt werden. | length | percentage |
Wenn max-width kleiner als ein zuvor definierter Wert für min-width ist, wird max-width auf den Wert von min-width gesetzt. Wenn der Wert für min-width größer als der aktuelle Wert für width ist, wird width auf den Wert von min-width gesetzt.
length kann in einer der folgenden Maßeinheiten angegeben werden (Voreinstellung ist 0):
| Maßeinheit | Abkürzung | Maßeinheit | Abkürzung |
| Zentimeter | cm | Millimeter | mm |
| ems | em | Pica | pc |
| x-Höhe | ex | Pixel | px |
| Inch | in | Point | pt |
percentage (Prozentsatz) gibt die Elementhöhe als Prozentsatz der Breite des umfassenden Blocks an, in dem das Element liegt, und ist eine positive ganze Zahl. Das Prozentzeichen ist zwingend erforderlich.
p {min-width: 94px;}
p {min-width: 150%;}
| IE4+ M1 N4+ O5+ Version: CSS1 mit Erweiterungen in CSS2 Erblich: Nein |
vertical-align richtet Buchstaben, Wörter, Bilder und Texte an einer Grundlinie aus, die anhand eines Buchstabens, eines Wortes oder Textes bestimmt wird. | baseline | sub | super | top | text-top | middle | bottom | text-bottom | percentage | length |
length kann in einer der folgenden Maßeinheiten angegeben werden:
| Maßeinheit | Abkürzung | Maßeinheit | Abkürzung |
| Zentimeter | cm | Millimeter | mm |
| ems | em | Pica | pc |
| x-Höhe | ex | Pixel | px |
| Inch | in | Point | pt |
.ibaseline {vertical-align: baseline;}
.ibottom {vertical-align: bottom;}
.imiddle {vertical-align: middle;}
.isub { vertical-align: sub; }
.isuper { vertical-align: super; }
.itext-bottom { vertical-align: text-bottom; }
.itext-top { vertical-align: text-top; }
.itop { vertical-align: top; }
.prozent { vertical-align: -15%; }
.minuspix { vertical-align: -10px; }
.plusem { vertical-align: 0.5em; }
.plusmm { vertical-align: 1mm; }
...
<body>
<p>Die Fliege <img src="css_beispiele/fliege.jpg"
width="28" height="33" class="ibaseline">
auf der Zeile</p>
...