3.3 CSS-Eigenschaften

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

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-bottom: 2.5em;
  • 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, keine
Eigenschafts­werte:
  • underline
  • overline
  • line-through
  • none
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

Längenmaße

Einigen dieser Eigenschaften können Längenmaße zugewiesen werden. Im Unterricht verwenden wir die Einheiten px (Pixel, Bildpunkt) und em.

Exkurs: Pixel

Flachbildschirme (LCD, OLED, Plasma, ...) besitzen ein Raster von Pixeln (Bildpunkten). Diese legen die native Bildschirmauflösung des Geräts fest. Bei Geräten mit einer nativen Full HD-Auflösung (1920x1080) sind dies horizontal 1920 und vertikal 1080 Pixel.

Bildschirme mit der gleichen nativen Auflösung sind jedoch nicht unbedingt gleich groß. Zum Beispiel gibt es Fernsehgeräte mit einer Bildschirmdiagonalen von 46 Zoll und Geräte mit 55 Zoll, die beide eine native Auflösung von 1920x1080 Pixeln (Full HD) besitzen. Die Anzahl der Pixel ist bei beiden Geräten gleich, aufgrund der größeren Bilddigonalen des zweiten Geräts, sind dessen Pixel jedoch größer als die des kleineren Geräts.

Viele mobilen Geräte besitzen heute hochauflösende Displays. Ihre Bildschirmdiagonalen sind jedoch meist deutlich kleiner als die herkömmlicher Monitore. Würde der Browser die Größe von Elementen genauso darstellen wie auf einem herkömmlichen Bildschirm, wären sie sehr klein und nur schwer erkennbar. Geräte mit hochauflösenden Displays skalieren daher die Auflösung. Zum Beispiel skaliert das Samsung Galaxy S20 seine native Auflösung von 1440x3200 Gerätepixeln auf 360x800 sichtbare Pixel (CSS-Pixel). Eine Tabelle, für die mittels CSS eine Breite von 100px vorgesehen ist, wird in diesem Fall auf dem Gerät automatisch mit einer Breite von 400 Gerätepixeln dargestellt.

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

Merke: Längeneinheit px

em ist eine relative Längeneinheit. Sie gibt die Länge in Relation zu einem anderen Wert an. Dieser andere Wert ist in der Regel die für das jeweilige Element festgelegte Schriftgröße.

Beispiele
  • Eine Tabelle mit einer Breite von 10em ist ungefähr so breit wie zehn aufeinanderfolgende M, wenn diese in der für das Tabellenelement festgelegten Schriftgröße angezeigt werden.
  • Wird für den Abstand eines Elements zu seinem Nachfolger ein Wert von 0.5em vorgegeben, würde der Abstand der halben Breite eines M entsprechen, wenn dieses in der für das betroffene Element festgelegten Schriftgröße angezeigt wird.

Eine Tabelle mit einer Breite von 10em ist daher ungefähr so breit wie zehn aufeinanderfolgende M, wenn diese in der für das Tabellenelement festgelegten Schriftgröße angezeigt werden. Wird für den Abstand eines Elements zu seinem Nachfolger ein Wert von 0.5em vorgegeben, würde der Abstand der halben Breite eines M entsprechen, wenn dieses in der für das betroffene Element festgelegten Schriftgröße angezeigt wird.

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.

Merke: Längeneinheit em
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 unterhalb des Elements: 10 Pixel
h2
  • Textausrichtung: zentriert
  • Text: kursiv und unterstrichen
  • Abstand oberhalb des Elements: 20 Pixel
  • Abstand unterhalb 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: 20px;
    margin-bottom: 20px;
}

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)