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: Beispiele: |
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: Beispiele: |
background-position | Stellt die Position des Hintergrundbildes ein. Wird der Wert nicht gesetzt, so wird das Bild links oben in der Ecke positioniert.
Werte:
Beispiele: |
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: Beispiele: |
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:
Beispiele: |
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:
Beispiele: |
color | Einstellen der Textfarbe für das selektierte Element.
Werte: Beispiele: |
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: Beispiele: |
font-size | Einstellen der Schriftgröße in Pixeln (px), Punkt (pt), Prozent (%) oder em
Beispiele: |
font-style | Wird hauptsächlich dazu verwendet, zwischen nicht-kursiv und kursiv für die Schriftdarstellung zu wählen.
Beispiele: |
font-weight | Stellt die "Dicke" der Schrift ein.
Wert: Beispiele: |
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: |
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: |
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):
Beispiele: |
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: Beispiele: |
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-top, padding-right, padding-bottom und padding-left.
Werte: Beispiele: |
text-align | Ausrichtung des Textes innerhalb des ausgewählten Elementes.
Werte:
Beispiel: |
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:
Beispiele: |
text-transform | Damit kann ein normal geschriebener Text "im Nachhinein" in Klein- oder Großbuchstaben dargestellt werden.
Beispiele: |
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: |
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-radius, border-top-right-radius, border-bottom-left-radius und border-bottom-right-radius.
Werte: Beispiele: |
cursor | Einstellen der Mauszeigers, wenn die Mausposition über einem Element liegt.
Werte: Beispiel: |
display | Diese Eigenschaft hat entscheidenden Einfluss darauf, wie ein Element im Browser angezeigt wird und sich im Layout verhält.
Werte:
Beispiele: |
@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":
Werte für "Medieneigenschaften":
Beispiel: |
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: Beispiel: |
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 scrollen, können über position auch andere Verhaltensweisen festgelegt werden.
Werte:
Beispiel für einen Button (mit der Klasse "infobtn"), der fest am Browser-Rand positioniert wird: |
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:
Beispiel: |
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:
Beispiele: |