3.3 CSS-Eigenschaften

In Abbildung 3-7 sind die CSS-Eigenschaften aufgeführt, die wir im Unterricht verwenden.

Einigen dieser Eigenschaften können Längenmaße zugewiesen werden. Im Unterricht verwenden wir in diesen Fällen in der Regel die Einheit px (Pixel, Bildpunkt), falls eine absolute Längenangabe benötigt wird, und die Einheit em, falls eine Angabe relativ zur Länge eines anderen Wertes gewünscht wird.

Die Bildschirmauflösung gibt an, aus wie vielen Pixeln (Bildpunkten) die Bilddarstellung besteht. Eine Auflösung von 1920x1200 bedeutet zum Beispiel, dass die Bilddarstellung mit horizontal 1920 Pixeln und vertikal mit 1200 Pixeln erfolgt.

Wird einer CSS-Eigenschaft ein Längenwert mit der Einheit px zugewiesen, erstreckt sich das jeweilige Element auf entsprechend viele Pixel.

Ändert sich die Bildschirmauflösung, ändert sich damit auch die Größe der Fläche, die ein Pixel auf dem Bildschirm belegt. Wird die Auflösung vergrößert (mehr Bildpunkte), nimmt 1 Pixel nun weniger Bildschirmfläche ein, wird die Auflösung verringert (weniger Bildpunkte), nimmt 1 Pixel mehr Bildschirmfläche ein.

Merke: Längeneinheit px

Wird der Eigenschaft font-size ein Wert mit der Einheit em zugewiesen, legt dieser die Schriftgröße des Elements relativ zur Schriftgröße seines Elternelements fest. 1em bedeutet in diesem Fall, dass das Element die gleiche Schriftgröße hat, wie sein Elternelement. Entsprechend bedeutet 0.5em, dass es die halbe Schriftgröße seines Elternelements besitzt.

Wird die Einheit em bei anderen Eigenschaften verwendet, wird die jeweilige Länge relativ zur Schriftgröße des Elements festgelegt. 2em bedeutet in diesem Fall, dass die jeweilige Länge doppelt so groß ist, wie die Schriftgröße des Elements.

Merke: Längeneinheit em
CSS-Eigenschaft Erläuterung
background-color
Beschreibung:
Hintergrundfarbe
Eigenschafts­werte:
Beispiele:
  • background-color: #FFA500;
  • background-color: Orange;
border-collapse
Beschreibung:
Legt fest, ob die Rahmen benachbarter Tabellenzellen voneinander getrennt oder zusammenfallend dargestellt werden.
Eigenschafts­werte:
  • separate
    Jede Zelle hat einen eigenen, von der Nachbarzelle getrennten Rahmen.
  • collapse
    Die Rahmen benachbarter Tabellenzellen fallen zusammen.
Beispiele:
  • border-collapse: collapse;
border-color
Beschreibung:
Rahmenfarbe
Eigenschafts­werte:
Beispiele:
  • border-color: #006400;
  • border-color: DarkGreen;
Hinweis:
Die Hinweise zur Eigenschaft border-style gelten für border-color analog.
border-radius
Beschreibung:
Legt den Radius fest, mit dem Ecken abgerundet werden.
Eigenschafts­werte:
Längenmaße
Beispiel:
border-radius: 15px;
border-style
Beschreibung:
Rahmentyp
Eigenschafts­werte:
  • none (keine Rahmenlinie)
  • dotted (gepunktet)
  • dashed (gestrichtelt)
  • solid (durchgezogen)
  • double (Rahmenlinie doppelt)
  • inset (3D-Effekt)
  • outset (3D-Effekt)
Beispiele:
  • border-style: solid;
  • border-top-style: none;
  • border-bottom-style: dashed;
  • border-style: none solid dashed;
Hinweise:
  • Soll sich die Eigenschaft nur auf eine bestimmte Rahmenkante (oben, rechts, unten, links) beziehen, wird zwischen border und style der Name der jeweiligen Kante (top, right, bottom, left) eingefügt.
  • Für die Eigenschaft border-style können ein bis vier durch ein Leerzeichen getrennte Werte angegeben werden. Dies hat folgende Auswirkungen:
    • ein Wert: gilt für alle vier Seiten
    • zwei Werte: der erste Wert gilt für die obere und untere, der zweite für die rechte und linke Seite
    • drei Werte: der erste Wert gilt für die obere, der zweite für die rechte und linke und der dritte für die untere Seite
    • vier Werte: der erste Wert gilt für die obere, der zweite für die rechte, der dritte für die untere und der vierte für die linke Seite
  • Formatierungen werden in der Reihenfolge angewandt, in der sie angegeben sind. Nachfolgende Formatierungen ersetzen dabei gegebenenfalls vorausgegangene. Würde eine CSS-Regel die ersten drei der oben genannten Beispiele in dieser Reihenfolge enthalten, würde das entsprechende Element rechts und links eine durchgezogene, oben keine und unten eine gestrichelte Rahmenlinie erhalten. Der gleiche Effekt würde auch allein durch das vierte Beispiel erreicht.
border-width
Beschreibung:
Rahmenbreite
Eigenschafts­werte:
  • thin
  • medium
  • thick
  • Längenmaße
Beispiele:
  • border-width: thin;
  • border-top-width: thick;
  • border-bottom-width: 1px;
  • border-width: 1px 2px;
Hinweis:
Die Hinweise zur Eigenschaft border-style gelten für border-width analog.
box-shadow
Beschreibung:
Schatteneffekte
Eigenschafts­werte:
Die Eigenschaft erfordert die Angabe folgender Werte:
  • Längenangabe für die horizontale Verschiebung des Schattens
  • Längenangabe für die vertikale Verschiebung des Schattens
  • Längenangabe für den Bereich, in dem der Schatten von der angegebenen Farbe ins Transparente verschwimmt.
  • Farbe des Schattens
Beispiel:
box-shadow: 10px 10px 15px black;
Hinweis:
Die Hinweise zur Eigenschaft border-style gelten für border-color analog.
clear
Beschreibung:
Umfluss aufheben
Eigenschafts­werte:
  • left
  • right
  • both
  • none
Beispiele:
clear: both;
Hinweise:
  • Ein Element, dessen Eigenschaft clear den Wert both besitzt, darf nicht von einem „floatenden“ Element verdeckt werden. Die Werte left bzw. right beschränken dies auf die entsprechende Seite.
  • Würde ein Element, dessen Eigenschaft clear einen anderen Wert als none besitzt, durch ein „floatendes“ Element überlagert, wird es soweit nach unten geschoben, dass seine obere Rahmenkante an der unteren Außenkante des vorherigen „floatenden“ Elements angrenzt. Die Außenabstände (margin) fallen in diesem Fall zusammen. Ist das Element selbst auch ein „floatendes“ Element, fallen die Außenabstände (margin) nicht zusammen.
color
Beschreibung:
Vordergrundfarbe
Eigenschafts­werte:
Beispiele:
  • color: #0000FF;
  • color: Blue;
display
Beschreibung:
Dient der Layoutgestaltung, in dem es festlegt, auf welche Art das betreffende Element angezeigt werden soll.
Eigenschafts­werte:
  • none
    Das Element wird nicht angezeigt.
  • block
    Block-Elemente erzeugen eine neue Zeile im Textfluß und können zum vorherigen und zum nachfolgenden Element einen größeren Abstand aufweisen.
  • inline
    Inline-Elemente erzeugen keine neue Zeile und sind im normalen Textfluß immer nebeneinander angeordnet. Es sei denn, sie sind zusammen breiter als das übergeordnete Element. Dann wird eine weitere Zeile eingefügt.
  • inline-block
    Wird als Block-Element formatiert, fließt aber wie ein Inline-Element in der Zeile.
  • table
    Das Element enthält tabellarisch angeordnete Kindelemente und erzeugt eine neue Zeile. Dient der Gliederung des Layouts einer Webseite und nicht der tabellarischen Darstellung von Daten.
  • table-row
    Das Element enthält nebeneinander angeordnete Kindelemente.
  • table-cell
    Das Element hat innerhalb eines tabellarischen Layouts die Funktion einer Tabellenzelle.
Beispiel:
display: inline-block;
float
Beschreibung:
Umfließen
Eigenschafts­werte:
  • left
  • right
  • none
Beispiele:
float: left;
Hinweise:
  • Wird der Eigenschaft float der Wert left bzw. right zugewiesen, wird das betreffende Element zu einem Block-Element (vgl. display). Anschließend wird es soweit nach links (left) bzw. rechts (right) verschoben, bis es entweder an die Kante seines Elternelements oder eines anderen Elements anstößt, dessen Eigenschaft float ebenfalls den Wert left bzw. right besitzt. Elemente, deren Eigenschaft float einen anderen Wert als none besitzt, werden „floatende“ Elemente genannt.
  • Block-Elemente, die neben einem „floatendem“ Element dargestellt werden, nehmen die volle Breite ihres Elternelements ein. Sie werden also teilweise von dem „floatendem“ Element verdeckt. Enthält das Block-Element einen Text, wird dieser nicht verdeckt, sondern um die Breite des „floatenden“ Elements verschoben. Auf diese Weise fließt er er um das „floatende“ Element herum.
  • Ein „floatendes“ Element wird teilweise aus dem Elementfluss herausgelöst. Dadurch hat es keinerlei Einfluss auf sein Elternelement oder nachfolgende Blockelemente besitzt. Es kann also zum Beispiel aus seinem Elternelement nach unten herausragen.
font-family
Beschreibung:
Schriftart bzw. Schriftfklasse
Beispiel:
font-family: 'Times New Roman', Georgia, Serif;
Hinweise:
  • Es können mehrere durch Kommas getrennte Alternativen angegeben werden. Ist die erste angegebene Schriftart nicht verfügbar, wird geprüft, ob die zweite verwendet werden kann usw.
  • Zur Sicherheit sollte als letzter Eintrag stets eine allgemeine Schriftklasse (serif, sans-serif, cursive, fantasy, monospace) angegeben werden. Falls keine der angegebenen Schriftarten verfügbar sind, wird dann zumindest eine Schriftart der angegebenen Schriftklasse ausgewählt.
  • Kommen im Namen einer Schriftart Leerzeichen vor, muss der gesamte Name in Anführungszeichen eingeschlossen werden. Wird diese CSS-Eigenschaft im style-Attribut eines Elements festgelegt, dürfen dabei nur einfach Anführungszeichen verwendet werden.
font-size
Beschreibung:
Schriftgröße
Eigenschafts­werte:
  • absolut
    • xx-small
    • small
    • medium
    • large
    • x-large
    • xx-large
  • relativ zur Schriftgröße des Elternelements
    • smaller
    • larger
    • Größenangabe in em (1em ≙ Schriftgröße des Elternelements)
Beispiele:
  • font-size: medium;
  • font-size: smaller;
  • font-size: 0.5em;
font-style
Beschreibung:
Schriftstil
Eigenschafts­werte:
  • normal
  • italic (kursiv)
Beispiel:
font-style: italic;
font-weight
Beschreibung:
Schriftstärke
Eigenschafts­werte:
  • normal
  • bold (dick)
Beispiel:
font-weight: bold;
height
min-height
max-height
Beschreibung:
Bestimmt die gewünschte (height), minimale (min-height) bzw. maximale (max-height) Höhe des Inhaltsbereiches eines Elements.
Eigenschafts­werte:
  • Längenmaße
  • Prozentwerte
  • auto
Beispiele:
  • height: 2em;
  • height: 100%;
  • min-height: 5em;
  • max-height: 10em;
Hinweis:
Die Höhe die margin, border und padding in Anspruch nehmen, zählen nicht zur height des Elements.
line-height
Beschreibung:
Zeilenhöhe
Eigenschafts­werte:
  • Zahlen
  • Längenmaße
  • Prozentwerte
Beispiele:
  • line-height: 1.5
  • line-height: 150%
  • line-height: 1.5em
Hinweise:
Eine Zahl bzw. ein Prozentwert bestimmt die Zeilenhöhe als Vielfaches der Schriftgröße. Werte von 1.5, 150% bzw. 1.5em bewirken somit jeweils eine Zeilenhöhe, die anderthalb mal so groß ist, wie die Schriftgröße des Elements.
list-style-type
Beschreibung:
Legt fest, welches Aufzählungszeichen bzw. welche Art der Nummerierung bei einer Liste verwendet werden soll.
Eigenschafts­werte:
  • unordered list (ul)
    • disc (gefüllter Kreis)
    • circle (leerer Kreis)
    • square (Quadrat)
    • none
  • ordered list (ol)
    • decimal (1., 2., 3., ...)
    • decimal-leading-zero (01., 02., 03., ...)
    • lower-roman (i., ii., iii., ...)
    • upper-roman (I., II., III., ...)
    • lower-latin (a., b., c., ...)
    • upper-latin (A., B., C., ...)
    • none
Beispiele:
  • list-style-type: disc;
  • list-style-type: upper-roman;
  • list-style-type: none;
margin
Beschreibung:
Abstand zu angrenzenden Elementen
Eigenschafts­werte:
  • Längenmaße
  • auto
Beispiele:
  • margin: 5px;
  • margin-top: 2em;
  • margin-left: auto;
    margin-right: auto;
  • margin: 3px 6px;
Hinweise:
  • Der Wert auto weist den Browser an, den Abstand automatisch zu berechnen. Wird bei einem Block-Element (vgl. display) margin-left und margin-right der Wert auto zugewiesen, wird das Element horizontal zentriert.
  • Die Hinweise zur Eigenschaft border-style gelten für margin analog.
padding
Beschreibung:
Als Innenabstand wird der Leerraum zwischen dem Inhalt eines Elements und seinem eigenen Elementrand bezeichnet.
Eigenschafts­werte:
Längenmaße
Beispiele:
  • padding: 1em;
  • padding: 3px 6px;
  • padding-top: 2px;
Hinweise:
  • Die Hinweise zur Eigenschaft border-style gelten für padding analog.
text-align
Beschreibung:
Horizontale Ausrichtung des Inhalts eines Block-Elements.
Eigenschafts­werte:
  • left
  • center
  • right
  • justify (Blocksatz)
Beispiel:
text-align: justify;
text-decoration
Beschreibung:
Unterstrich, Überstrich, Durchstreichen
Eigenschafts­werte:
  • underline
  • overline
  • line-through
Beispiel:
text-decoration: underline;
vertical-align
Beschreibung:
Vertikale Ausrichtung
Eigenschafts­werte:
  • top
  • middle
  • bottom
Beispiel:
vertical-align: middle;
Hinweise:
  • Die vertical-align-Eigenschaft eines Inline-Elements bestimmt dessen vertikale Ausrichtung innerhalb eines Block-Elements.
  • Die vertical-align-Eigenschaft einer Tabellenzelle bestimmt die vertikale Ausrichtung des Zelleninhalts.
width
min-width
max-width
Beschreibung:
Bestimmt die gewünschte (width), minimale (min-width) bzw. maximale (max-width) Breite des Inhaltsbereiches eines Elements.
Eigenschafts­werte:
  • Längenmaße
  • Prozentwerte
  • auto
Beispiele:
  • width: 2em;
  • width: 100%;
  • min-width: 5em;
  • max-width: 10em;
Hinweis:
Die Breite die margin, border und padding in Anspruch nehmen, zählen nicht zur width des Elements.
Abb. 3-7: CSS-Eigenschaften
Aufgabe

Aufgabe 3-1: Formatieren der Startseite index.html mit CSS

Formatierungsvorgaben

Die folgenden Formatierungsvorgaben sollen für alle Webseiten unseres Webauftritts gelten. Die CSS-Regeln sollen daher in eine externe CSS-Datei namens styles.css ausgelagert werden.

HTML-Element Formatierung
body
  • Hintergrundfarbe: #DDF9CC
  • Schriftart Arial, falls diese nicht vorhanden ist, eine andere Schriftart der Schriftklasse sans-serif
h1
  • Textausrichtung: zentriert
  • Abstand oberhalb des Elements: 10 Pixel
  • Abstand unterhalbhalb des Elements: 10 Pixel
h2
  • Textausrichtung: zentriert
  • Text: kursiv und unterstrichen
  • Abstand oberhalb des Elements: 20 Pixel
  • Abstand unterhalbhalb des Elements: 20 Pixel
p
  • Textausrichtung: zentriert
  • Zeilenhöhe: 1,5-fache Schriftgröße
img Bilder sollen horizontal zentriert werden.
Abb. 3-8: Vorgaben zur Formatierung der jeweiligen Elemente mit CSS
Vorschau
Abb. 3-9: Startseite index.html (Zwischenstand Kapitel 3-3)
Lösung
Lösung
HTML
<head>
    ...
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
Abb. 3-10: Startseite index.html (Zwischenstand Kapitel 3-3)
CSS
body {
    background-color: #DDF9CC;
    font-family: Arial, sans-serif;
}

h1 {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

h2 {
    text-align: center;
    font-style: italic;
    text-decoration: underline;
    margin-top: 10px;
    margin-bottom: 10px;
}

p {
    text-align: center;
    line-height: 1.5;
}

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
Abb. 3-11: CSS-Datei styles.css (Zwischenstand Kapitel 3-3)