CSS-CheatSheet

Ein Spickzettel mit den wichtigsten CSS-Eigenschaften

CSS-Basics (1. Semester MKD)

Eigenschaft Funktion/Attribute/Beispiel
background-color Hiermit kann man die Hintergrundfarbe eines Elementes (<body>, <p>, <header>, <h1> ..) einstellen. Wird diese Eigenschaft nicht gesetzt, so ist der Hintergrund transparent, d.h. durchsichtig.

Wert:
Die Farbangabe erfolgt in einem der verfügbaren CSS-Farbsysteme (siehe color).

Beispiele:
background-color: blue;
background-color: rgba(0, 0, 255, 0.5); /* Blauer Hintergrund mit 50% Deckkraft */

background-image Einstellen eines Hintergrundbildes für das selektierte Element. In der Regel handelt es sich bei dem Bild um eine externe Bilddatei als jpg-, png- oder svg-Datei (möglich sind aber auch per CSS generierte Verläufe),

Wert:
Die Bildquelle wird über den Parameter url('Pfad/Dateiname') eingestellt. Hierfür kann (wie beim <img>-Tag) ein relativer Pfad zur Bilddatei ausgehend vom Stylesheet oder ein absoluter Pfad verwendet werden.

Beispiele:
background-image: url('bilder/see.jpg');
background-image: url('https://webdev.raphael-rossmann.de/test.jpg');

background-position Stellt die Position des Hintergrundbildes ein. Wird der Wert nicht gesetzt, so wird das Bild links oben in der Ecke positioniert.

Werte:

  • Angabe der horizontalen und vertikalen Position als Textwert (left, right, center, top, bottom, center), Standard: "left top"
  • Angabe einer festen Position in Pixeln oder Punkt (horizontal und vertikal)
  • Angabe einer prozentualen Position (horizontal und vertikal)

Beispiele:
background-position: center top;
background-position: center -50px;
background-position: 25% 33%;

background-repeat Standardmäßig werden Hintergrundbilder, die den Hintergrund eines Elementes nicht ausfüllen horizontal und vertikal wiederholt ("gekachelt"). Dieses Verhalten lässt sich aber anpassen.

Werte:
repeat (horizontale und vertikale Wiederholung - Standardwert)
repeat-x (horizontale Wiederholung)
repeat-y (vertikale Wiederholung)
no-repeat (keine Wiederholung)

Beispiele:
background-repeat: repeat-x; /* nur horizontales Kacheln */
background-repeat: no-repeat; /* kein Kacheln */

background-size Hiermit kann die Größe des per background-image eingestellten Hintergrundbildes eingestellt werden. Wird hier kein Wert gesetzt, so wird das Bild in seiner physischen Größe in Pixeln dargestellt (und ev. wiederholt/"gekachelt").

Werte:

  • Angabe einer festen Größe in Pixeln oder Punkt (Breite und Höhe)
  • Angabe einer prozentualen Größe (Breite und Höhe)
  • "contain": Das Hintergrundbild wird so skaliert, dass es sowohl von der Breite als auch von der Höhe her in das Element passt
  • "cover": Das Hintergrundbild wird so skaliert und angeschnitten, dass der Hintergrund des Elementes immer durch das Bild abgedeckt wird (dieser Parameter wird oft verwendet, wenn z.B. der gesamte Hintergrund des Browsers (<body>) mit einem Hintergrundbild ausgefüllt werden soll

Beispiele:
background-size: 300px 200px;
background-size: 100% 100%;
background-size: cover;

border Einen Rahmen für ein Element anzeigen (ist ein Teil des CSS-Boxmodells). Der Rahmen kann für alle vier Seiten des Elementes separat definiert werden oder für alle vier Seiten gleichzeitig. Die Eigenschaft border ist eine CSS-Kurzschreibweise ("CSS shorthand"). Diese Eigenschaften können auch separat per border-style, border-width, border-color bzw. border-left-width etc. eingestellt werden.

Werte:

  • border-width: Einstellung der Rahmenbreite (z.B. in Pixeln); (border-top-width, border-right-width, border-bottom-width, border-left-width)
  • border-color: Einstellung der Rahmenfarbe mit den CSS-Farbsystemen (siehe color)
  • border-style: Art des Rahmens, z.B. durchgezogene Linie ("solid"), gestrichelte ("dashed") oder gepunktete Linie ("dotted")

Beispiele:
border: 2px solid red; /* 2-Pixel-Rahmen in rot */
border-bottom: 1px dashed #000;

 color  Einstellen der Textfarbe für das selektierte Element.

Werte:
Der Farbwert kann als Farbname, hexadezimaler RGB-Wert, RGB- oder RGBA-Wert oder HSL-/HSLA-Wert angegeben werden.

Beispiele:
color: blue;
color: #0000FF; /* gleiche Farbe wie "blue" */
color: rgb(0, 0, 255); /* gleiche Farbe wie "blue" */
color: rgba(0, 0, 255, 0.5); /* Blau mit 50% Deckkraft */
color: hsl(240, 100%, 50%); /* gleiche Farbe wie "blue" */
color: hsla(240, 100%, 50%, 0.5); /* Blau mit 50% Deckkraft */

font-family Einstellen der Schriftart ("Font") für das selektiere Element. Es kann eine der auf üblichen Computersystemen und Geräten verfügbaren "Systemschriften", wie Arial, Verdana, Georgia, Times, Courier verwendet werden. Außerdem kann eine Webfont, z.B. aus den Google Fonts, geladen und angesprochen werden.

Wert:
Namen der Schriftaren (getrennt durch Komma). Die erste auf dem Gerät verfügbare Schriftart wird für die Darstellung im Browser verwendet. An letzter Stelle dieser Kaskade kann "serif", "sans-serif" verwendet werden, um eine beliebige Schrift mit oder ohne Serifen auszuwählen.

Beispiele: 
font-family: 'Lato', Arial, sans-serif;

font-size Einstellen der Schriftgröße in Pixeln (px), Punkt (pt), Prozent (%) oder em

Beispiele: 
font-size: 22px;
font-size: 120%; /* Größe relativ zum Eltern-Element */

font-style Wird hauptsächlich dazu verwendet, zwischen nicht-kursiv und kursiv für die Schriftdarstellung zu wählen.

Beispiele:
font-style: italic;

font-weight Stellt die "Dicke" der Schrift ein.

Wert:
Die Dicke kann grob mit "lighter", "normal", "bold", "bolder" oder mit numerischen Werten von 100 bis 900 eingestellt werden. Achtung: Nicht alle Schriftarten enthalten auch alle Schriftschnitte, um die unterschiedlichen Dicken zu erzeugen. Bei Webfonts sollten die benötigt Schnitte - soweit für eine Schriftart vorhanden - bewusst geladen werden und können dann im CSS angesprochen werden.

Beispiele:
font-weight: normal;
font-weight: 400; /* entspricht "normal" */
font-weight: bold;
font-weight: 700; /* entspricht "bold" */

height Stellt die Höhe eines Elementes in Pixeln (px), Punkt (pt), Prozent (%) ein. Die Voreinstellung ist "auto", d.h. die Höhe des Elementes passt sich dem Inhalt an.

Beispiele:
height: 50px;
height: 50%;

line-height  Stellt den Zeilenabstand (die Zeilenhöhe) ein. Möglich ist eine Angabe als absoluter Wert, z.B. in Pixeln. Eleganter ist aber eine Angabe als relativer Wert: hier können Prozent (der aktuellen Schriftgröße) gewählt werden oder ein mehrfacher Zeilenabstand, wie man ihn auch aus Textverarbeitungsprogrammen kennt (1.0 wäre einfacher und 2.0 zweifacher Abstand).

Beispiele:
line-height: 15px; /* absoluter Wert */
line-height: 150%; /* relativer Wert in % */
line-height: 1.4; /* relativer Wert als mehrfaches der Schriftgröße */

list-style-type Definiert den Typ des Aufzählungszeichens oder das Ziffernformat für Listen (<li>-Elemente innerhalb eines <ul>-Elements oder eines <ol>-Elements). Standard für ungeordnete Listen ist ein Bullet-Point ("disc") und für geordnete Listen eine arabische Zahl mit Dezimalpunkt ("decimal")

Werte (Auswahl):

  • disc (ungeordnete Listen, Standard)
  • square (ungeordnete Listen, Quadrat)
  • circle (ungeordnete Listen, Kreis)
  • decimal (geordnete Listen, Standard, 1./2./3.)
  • lower-latin (geordnete Listen, Standard, a./b./c.)
  • upper-roman (geordnete Listen, Standard, I./II./III.)
  • none (kein Aufzählungszeichen)

Beispiele:
list-style-type: square;
list-style-type: upper-roman;

margin Definiert den Außenabstand des ausgewählten Elementes (ist ein Teil des CSS-Boxmodells). Liegt außerhalb des Rahmens und schiebt das Element von anderen weg (Achtung! Außenabstände, die aufeinander treffen summieren sich nicht, sondern der größere Abstand setzt sich durch). Die Eigenschaft margin ist eine CSS-Kurzschreibweise ("CSS shorthand") für: margin-top, margin-right, margin-bottom und margin-left.

Werte:
Angabe des Abstandes in Pixeln (px), Punkt (pt), Prozent (%) oder em. Die Kurzschreibweise beginnt oben und folgt im Uhrzeigersinn den restlichen Seiten des Elementes.
Besonderheit: der Wert "auto" zentriert ein Element im Elterncontainer.

Beispiele:
margin-bottom: 10px;
margin: 10px 20px 10px 20px; /* 10 Pixel nach oben und unten, 20 Pixel nach rechts und links */
margin: 0; /* 0 Pixel in alle Richtungen, weggelassene Werte werden wiederholt! */
margin: 0 auto; /* Element im Elternelement zentrieren */

padding Definiert den Innenabstand des ausgewählten Elementes (ist ein Teil des CSS-Boxmodells). Liegt zwischen Rahmen und Text/Inhalt und schiebt den Rand des Elementes vom Inhalt weg (Vergrößert also die Fläche des Elementes). Die Eigenschaft padding ist eine CSS-Kurzschreibweise ("CSS shorthand") für: padding-toppadding-rightpadding-bottom und padding-left.

Werte:
Angabe des Abstandes in Pixeln (px), Punkt (pt), Prozent (%) oder em. Die Kurzschreibweise beginnt oben und folgt im Uhrzeigersinn den restlichen Seiten des Elementes.

Beispiele:
padding-bottom: 10px;
padding: 10px 20px 10px 20px; /* 10 Pixel nach oben und unten, 20 Pixel nach rechts und links */
padding: 0; /* 0 Pixel in alle Richtungen, weggelassene Werte werden wiederholt! */
padding: 0 20px; /* Kein Innenabstand nach oben und unten, 20 Pixel nach rechts und links */

text-align Ausrichtung des Textes innerhalb des ausgewählten Elementes.

Werte:

  • "left" (Voreinstellung): Text ist links ausgerichtet
  • "right": Text ist links ausgerichtet
  • "center": Text ist zentriert
  • "justify": Blocksatz (Verwendung derzeit noch eher selten; Silbentrennung muss aktiviert werden)

Beispiel:
text-align: center;

text-decoration Einstellen, ob ein Text unterstrichen ist (dies ist für Links voreingestellt) oder durchgestrichen. Unterstreichungen sollten im Web nur für Links verwendet werden, da die Nutzer sonst verwirrt werden könnten.

Werte:

  • "underline": Text unterstreichen
  • "overline": Linie über dem Text
  • "line-through": Text durchstreichen
  • "none": keine Unterstreichung

Beispiele:
text-decoration: underline; /* Text unterstreichen */
text-decoration: none; /* keine Unterstreichung */

text-transform Damit kann ein normal geschriebener Text "im Nachhinein" in Klein- oder Großbuchstaben dargestellt werden.

Beispiele:
text-transform: uppercase; /* Anzeige in Großbuchstaben */
text-transform: lowercase; /* Anzeige in Kleinbuchstaben */

 width Stellt die Breite eines Elementes in Pixeln (px), Punkt (pt), Prozent (%) ein. Die Voreinstellung ist "auto", d.h. das Element passt sich automatisch der Breite des Inhalts an.

Beispiele:
width: 50px;
width: 50%;

CSS für Fortgeschrittene (3. Semester MKD)

Eigenschaft Funktion/Attribute/Beispiel
border-radius Mit dieser Eigenschaft kann man die Ecken eines Elementes (Containers) abrunden. Dies funktioniert, wenn ein Rahmen vorhanden ist, aber auch, wenn nur eine Hintergrundfarbe und kein Rahmen definiert wurde. Die Rundung kann für alle vier Ecken gleich eingestellt oder separat gesetzt werden per: border-top-left-radiusborder-top-right-radiusborder-bottom-left-radius und border-bottom-right-radius.

Werte:
Der Radius wird meist in Pixeln angegeben. Auch eine Angabe in Prozent ist möglich, ein Radius von 50% führt dazu, dass aus einem quadratischen Container ein Kreis wird.

Beispiele:
border-radius: 10px;
border-bottom: 1px dashed #000;
border-top-left-radius: 10px; /* nur linke obere Ecke abrunden */

cursor Einstellen der Mauszeigers, wenn die Mausposition über einem Element liegt.

Werte:
Hilfreich ist der Wert "pointer", der eine Hand als Cursor anzeigt, wie dies für Links Standard ist. Dies kann z.B. für interaktive Elemente verwendet werden, die nicht verlinkt sind, aber über JavaScript interaktive Verhaltensweisen erhalten.
Eine komplette Liste erhalten Sie bei w3schools.

Beispiel:
cursor: pointer;

display Diese Eigenschaft hat entscheidenden Einfluss darauf, wie ein Element im Browser angezeigt wird und sich im Layout verhält.

Werte:

  • "inline": Das Element fügt sich nahtlos in den Textfluss ein. Dies ist die Voreinstellung etwa für <em>, <strong>, <a>, <span>. Es wird durch den Tag keine neue "Zeile" erzeugt, Inline-Elemente können also im Layout nebeneinander stehen.
  • "block": Das Element steht immer in einer eigenen "Zeile", es streckt sich auf die volle Breite des Elternelementes. Dies ist die Voreinstellung etwa für <p>, <div>, <header>, <article>- Block-Elemente können daher nicht nebeneinander stehen (außer man verwendet "float", was hier aber zu weit führen würde). Block-Elemente sind für die Strukturierung des Layouts von oben nach unten sehr wichtig und werden dann mit Breiten, Höhen, Rahmen und Abständen versehen.
  • "inline-block": Ein Hybrid aus "inline" und "block" - die Elemente können wie Block-Elemente, z.B. mit Höhen und Breiten versehen werden, gleichzeitig können Sie aber nebeneinander (in einer Zeile) angezeigt werden, wenn die Breite der Elemente das zulässt.
  • "none": Das Element wird nicht dargestellt und nimmt keinen Platz auf der Seite und im Layout ein. Dies wird oftmals in der Mobiloptimierung eingesetzt, um Elemente nur auf bestimmten Bildschirmgrößen anzuzeigen.
  • weitere Werte, die hier nicht weiter vertieft werden, sind "table","table-cell", "flex". Eine Übersicht finden Sie bei w3schools.

Beispiele:
display: block;
display: inline;
display: inline-block;
display: none;

@media Mit dieser Eigenschaft erstellt man sogenannte "Media Queries". Diese sind zentral für die Mobiloptimierung per Reponsive Web Design (RWD). Man kann innerhalb des Stylesheets dadurch Eigenschaften des Browser und des ausführendes Gerätes abfragen und darauf durch zusätzliche CSS-Regeln reagieren.
So kann man u. a. feststellen, ob es sich um einen Drucker oder eine Gerät mit Bildschirm handelt, wie breit der Bildschirm des Gerätes (in Pixeln) ist und ob eine Mobilgerät im Hoch- oder Querformat gehalten wird.Allgemeines Format der Media Query:
@media Medientyp and (Medieneigenschaften) {
CSS-Regeln;
}

Werte für "Medientyp":

  • "all": alle Geräte
  • "screen": Alle Computer mit Bildschirmen: Desktops. Laptops, Smartphones, Tablets
  • "print": nur Drucker
  • "speech": Screenreader, die Texte vorlesen

Werte für "Medieneigenschaften":

  • "max-width": Maximale Breite des Browserfensters (bei Smartphones ist das gleichzeitig die Breite des Screens)
  • "min-width": Minimale Breite des Browserfensters (bei Smartphones ist das gleichzeitig die Breite des Screens)
  • "orientation": Mobilgerät wird im Hochformat ("portrait") oder Querformat ("landscape") gehalten
  • "max-resolution": Maximale Auflösung in dpi (ist das Display hochauflösend?)
  • eine komplette Auflistung finden Sie auf w3schools.

Beispiel:
@media screen and (max-width: 768px) {
/* diese Regel gilt nur für Geräte mit Bildschirmen und Browserfenster mit kleiner/gleich 786 Pixel Breite */
body {
background-color: lightgreen;
}
}

opacity Mit dieser Eigenschaft kann man die Deckkraft bzw. Transparenz eines Elementes einstellen. Dies spielt vor allem eine Rolle, wenn Elemente auf einer Seite übereinander positioniert werden.

Wert:
Die Deckkraft wird mit einem dezimalen Wert zwischen 0.0 und 1.0 eingestellt. 1.0 entspricht einer Deckkraft von 100 Prozent bzw. 0 Prozent Transparenz.

Beispiel:
opacity: 0.5; /* 50 Prozent Deckkraft */

position Mit der Eigenschaft position lässt sich die Art und Weise kontrollieren, wie ein Element auf der Seite positioniert wird. Während normalerweise die Elemente wie auf einer gedruckten Seite nacheinander oder übereinander platziert werden (u. U. beeinflusst durch die Eigenschaft display) und dann mit der Seite scrollenkönnen über position auch andere Verhaltensweisen festgelegt werden.

Werte:

  • "static": Dies ist die Voreinstellung für alle Elemente, sie werden nacheinander auf der Seite platziert
  • "fixed": Damit kann man Elemente an einer festen Position ausgehend vom Rand des Browsers fixieren, d.h. "festkleben", das Element scrollt nicht mit der Seite mit.
    Die Position kann mit den zusätzlichen Positions-Parametern "top" oder "bottom" bzw. "left" oder "right" etwa in Prozent oder Pixeln festgelegt werden.
    Die Ebenenreihenfolge kann dabei mit der Eigenschaft "z-index" eingestellt werden (Ebenen mit höheren Werten werden über Ebenen mit niedrigeren Werten angezeigt)
  • "absolute": Damit kann man ein Element mit den oben genannten Parametern "top", "bottom", "left", "right" frei in Relation zu einem Elternelement platzieren, das die Eigenschaft "position: relative;" hat. Damit kann man etwa über einem Bild in der rechten oberen Ecke eine Lupe mit einem Link auf eine Lightbox platzieren oder eine Beschriftung.
  • "relative": Wird vor allem im Zusammenspiel mit "position: absolute" verwendet, um dasjenige Elternelement zu bestimmen, an dem das absolut zu positionierende Element ausgerichtet werden soll.

Beispiel für einen Button (mit der Klasse "infobtn"), der fest am Browser-Rand positioniert wird:
div.infobtn {
position: fixed;
bottom: 10px;
right: 10px;
z-index: 9;
}

transform Mit CSS-Transforms lassen sich Elemente per CSS im zwei- und dreidimensionalen Raum bewegen und transformieren. Kombiniert mit den unten beschriebenen CSS-Transitions lassen sich dadurch interessante Animationseffekte erzeugen.

Werte:

  • "translate(x,y)": Element horizontal und vertikal verschieben um einen Pixelwert
  • "scale(x,y)": Element horizontal und vertikal skalieren (um einen Faktor von 0.0 bis X; 1.0 entspricht keiner Skalierung)
  • "rotate(winkel)": Element drehen (der Winkel wird in Xdeg angegeben)
  • "rotateY(winkel)": Element um die y-Achse im 3D-Raum drehen (der Winkel wird in Xdeg angegeben)
  • Weitere Werte auf w3schools

Beispiel:
transform: scale(1.5, 1.5) rotate(45deg);

transition Mit CSS-Transitions lassen sich Veränderungen an Elementen mit weichen Übergängen (Animationen) versehen. Dies kann man z.B. verwenden, um die Größe oder die Farbe eines Buttons mittels einer sanften Überblendung zu verändern, wenn man mit dem Mauszeiger darüber fährt (über den Pseudo-Selektor :hover).

Werte:
CSS-Transitions bestehen aus den folgenden Eigenschaften, die aber meist mit der Kurzschreibweise "transition" zusammengefasst werden.

  • transition-property: Hiermit kann angegeben werden, welche Eigenschaft (z.B. width, color, font-size) animiert werden soll. Meist ist es hier ausreichend, alle Eigenschaften zu animieren mit dem Wert "all"
  • transition-durationDauer des Übergangs in Sekunden, z.B. "2s"
  • transition-timing-functionDie voreingestellte Timing-Funktion, die beschleunigt und abbremst, kann meist beibehalten werden, die Eigenschaft muss dann nicht eingestellt werden
  • transition-delayEine Verzögerung ist meistens nicht notwendig und kann daher in der Regel weggelassen werden

Beispiele:
transition: color 1s ease-out;
transition: all 2s;