Inhaltsverzeichnis

Aufbau
Selektoren
- Kombinationen
Definition
Eigenschaften
Größenangaben
Farben
Troubleshooting

Aufbau

Selector {Paramter1: Wert1 Wert2 Wert3; Parameter2: Wert2;}

Selector: Name oder HTML-Element für den dieser Style genutzt werden soll
Parameter: Eigenschaft die gesetzt werden soll.
Wert: Wert(e) der Eigenschaft. Werte werden ggf. durch Leerzeichen getrennt wenn mehrere.

Selektoren

Kann eine Name oder ein HTML-Element bzw. eine Menge von HTML-Elementen sein

Name	Format CSS	Format HTML	Beschreibung
Type-Selektor	Element	<Element>	Regel gilt für alle Elemente dieses Typs. h1 {text-align: right;}
Class-Selektor	.Class	<Element class=„Class“	Regel für alle Elemente dieser Klasse
ID-Selektor	#ID	<Element id=„ID“>	Regel für das Element (eine ID kann in einem Dokument nur einmal vergeben werden → identifziert ein Element eindeutig)
Pseudo-Klassen	Element:Pseudoklasse	<Element>	Regel wenn das Element in dem durch die Pseudo-Klasse beschriebenen Zustand ist oder ein bestimmtes Element ist. Z.B. a:hover → wenn man über einem a-Element ist, a:visited → Wenn man ein A-Element (also einen Link) besucht hat. Oder h2:last-of-type → letztes h2-Element im Dokument
Attribut-Selektoren	Element[Attribut=Value]	<Element attribut=value>	Gilt für bestimmte Elemente, die ein bestimmtes Attribut auf einen bestimmten Wert gesetzt haben

Kombinationen

Oder

Eine Regel kann mehrere Selektoren haben

h1, .myclass {text-align: center}

Mehrere Selektoren werden durch „,“ getrennt
- funktioniert wie „oder“ → Elemente die h1 sind oder „.myclass“ als Klasse haben
Selektoren können kaskadiert sein

Nachkommen

Gilt für Klassen/Elemente die Nachkomme (B befindet sich irgendwo innerhalb der Tags von A) - in beliebiger Tiefe - eines anderen Elements oder eines Elements mit einer bestimmten Klasse sind

div .myclass {text-align: center}

Gilt nur für Elemente in einem div (irgendwo, in beliebiger Tiefe) die die klasse „myclass“ haben

Direkte Nachkommen

Gilt für Klassen/Elemente die direkter Nachkomme eines anderen Elements oder Elements mit einer bestimmten Klasse ist

div > .myclass {text-align: center}

Gilt nur für ein Element mit der Klasse „myclass“ dessen Eltern-Element (also das Element in dem sie sich befinden) ein div ist

Element mit mehreren Klassen

ein Element kann mehrere Klassen haben

<div class="myclass anotherclass"></div>

div.myclass.anotherclass {text-align: center}

im html können per Aufzählung (per Leerzeichen getrennt) der anzuwendenden Klassen mehrere Klassen angegeben werden
in css werden die Klassen einfach hintereinander geschrieben (ohne Leerzeichen, die „.“ sind der Klassenindiktator) um anzuzeigen das ein Element alle genannten Klassen haben muss damit die Regel angewendet wird

Definition

In Tag

Direkte Definition im HTML-Tag für welches der Style benutzt werden soll
Gilt nur für das konkrete Element (nicht für die Klasse)

<HTML-Element style="Eigenschaft1:Wert1;Eigenschaft2:Wert"}>

Im Kopf

Definition befindet sich im <head>-Element der HTML-Datei
Gilt nur für die eine HTML-Datei

<head>
<style type="text/css">
  **Definition**
</style>

In Externer Datei

In seperater .css-Date definiert
- Dadurch verwendbar in vielen Dokumenten → Eine Style-Definiton für alle Seiten
wird im Kopf des Dokuments per Link eingebunden

Format der Datei:

Selector1 {Parameter1:Wert1; Parameter2:Wert2;}
Selector2 {Parameter1:Wert1; Parameter2:Wert2;}

Einbinden:

<head>
<link rel="stylesheet" type="text/css" href="file.css">
</head>

In Externer Datei per import

Ermöglicht einbinden externer CSS-Files
Gültig in allen Style-Bereichen
- also auch wenn Style im Tag benutzt wird
muss am Anfang eines Style-Bereichs stehen

<style type="text/css">
@import url("Dateiname");
</style>

Eigenschaften

divs können als Conatiner benutzt werden → siehe html

Eigenschaft

Beschreibung

position

Von wo aus Abstände aus berechnet werden.

* absolut → Abstände werden vom Eltern-Element bzw (wenn nicht vorhanden) vom Fensterrand
* relative → Abstände werden relativ zur normalen Position des Objektes berechnet (also von dort aus wo es normalerweise erscheinen würde → zum Beispiel unterhalb des letzten Textes oder Objektes)
* fixed → Abstände werden von der oberen Fensterkante aus berechnet und das Objekt scrollt nicht mit (es bleibt fest stehen)

width

Breite von Block-Elementen.
Per Default ist ein Block-Element so groß wie sein Inhalt

max-width

Maximale Breite eines Block-Elementes.
In der Regel in Pixel.

Sinnvoll wenn man eine width in Prozent angegeben hat, aber nicht will das Element auf großen Bildschirmen riesig wird und ggf. Elemente in ihm oder es selbst dann dadurch furchtbar aussehen → zum Beispiel Text sehr lang wird.

height

Höhe von Block-Elementen.
Per Default ist ein Block-Element so groß wie sein Inhalt

opacity

Deckung eines Elementes.
Niedrigere Werte machen das Element transparenter, höhere Werte verdecken Elemente hinter diesem stärker.

0% - 100% → 0% das Element ist unsichtbar und der Hintegrund komplett sichtbar. 100% das Element verdeckt ein dahinter liegendes Element komplett
0 - 1 → Komma-Werte zwischen 0 und 1 → 0,5 → 50% Deckkraft

display

Definiert Darstellung eines Elementes.

Wert	Beschreibung
inline-block	Element wird wie ein Block-Element behandelt (und Dinge wie width, height usw. können definiert werden), gleichzeitig erfolgt am Ende des Block-Elementes kein Zeilenumbruch (es wird dann wie ein Inline-Element behandelt). Man kann darüber auch Block-Element zu Pseudo-Inline-Elementen machen - um sie nebeneinander darzustellen

border-width

Bei Blockelementen die dicke der linken Grenze (Default: none)
Meist in px angegeben

border-style

Der Stil der Grenze.
Z.B. solid, dotted usw.

border-radius

Radius für abgerundete Ecken.
In der Regel in px angegeben

border-color

Farbe der Grenze

box-shadow

Schatten um ein Element.

box-shadow: <x-Achse-Versatz> <y-Achse-Versatz> <Blur-Radius> <Spread-Radius> <Farbe>

x-Achse-Versatz um wie viel der Schatten horizontal vom Element versetzt sein soll → in der Regel in Pixel
- positiver Wert → Versatz nach Rechts → Schatten steht nach Rechts über Element hinaus
- negative Wert → Versatz nach Links → Schatten steht nach Links über Element hinaus
- 0 → Schatten ist Links und Rechts gleich
y-Achse-Versatz um wie viel der Schatten senkrecht vom Element versetzt sein soll → in der Regel in Pixel
- positiver Wert → Versatz nach Unten → Schatten steht nach unten über
- negativer Wert → Versatz nach Oben → Schatten steht nach oben über
- 0 → Schatten ist Links und Rechts gleich
Optional Blur-Radius
- in der Regel in Pixel
- ist optional → wird es nicht angegeben wird der Schatten scharf dargestellt
- ist es angegeben verwischt er zum Rand
Optional Spread-Radius
- wie breit der Schatten sein soll
- in der Regel in Pixel
Farbe → die Farbei des Schattens

box-shadow: -5px 10px 5px green

Schatten ragt links außen über das Element
Schatten ragt nach unten über das Element
Schatten hat einen Blur-Radius von 5px (wird also zu den Rändern schwächer)
Schatten hat Farbe grün

margin

Abstände eines Block-Elements zum beinhaltenden Element.

Häufig:

margin-left → Linker Abstand
margin-right → Rechter Abstand
margin-top → Abstand nach oben
margin-bottom → Abstand nach unten

Wert auto → setzt den Abstand automatisch
- wenn man gegenüberliegende Margins auf auto setzt (top und bottom oder left und right) dann wird das Element innerhalb des übergeordneten Elements zentriert

padding

Abstand zwischen dem Element und den Elementen die es beinhalten (also den Kind-Elementen).
Wie margin, nur nach Innen gerichtet.

Details siehe margin

background-image

Hintegrund-Bild.

  background-image: url(http://somewhere.de/something.png)

text-align

Text-Ausrichtung

font-family

Schriftart.

Es können mehrere Schriftarten angegeben werden, die der Reihe nach gesucht werden (nicht alle Schriftarten sind auf allen Systemen vorhanden).

font-family: impact, serif

.
Die Schriftarten müssen durch Komma getrennt werden (Liste)

font-style

Stile für Schriften, wie italic (Kursiv)

Horizontal Ruler
Horizontale Linie um Inhalte voneinander zu trennen.

Es handelt sich um ein Block-Element, entsprechend kann die Hintergrundfarbe, die Farbe der Grenzen (border-color), Breite und Höhe verändert werden

Größenangaben

Name	Medium	Relativ/Absolut	Beschreibung
cm	Druck	Absolut	Maß in Zentimetern
mm	Druck	Absolut	Maß in Milimetern
pt	Druck	Absolut	Points
px	Bildschirm	Absolut	Pixel - wobei Pixel nicht echte Bildschirmpixel sind, sondern abhängig von der Auflösung des Displays 1px auch mehrere Pixel umfassen kann. Die Größe von 1px hängt also vom Gerät ab. 1px ist bei einer Linie die dünnste darstellbare Linie
em	Bildschirm	Relativ	Relativ zur Schriftgröße im aktuellen Element. 2em = 2x so groß wie die aktuelle Schriftgröße. Ergibt eine harmonische Darstellung, da die Elemente ihre Größe parallel zur Schriftgröße haben und Schriftgrößen zueinander. Bleibt auch harmonisch wenn das Fenster vergrößert oder verkleinert wird
rem	Bildschirm	Relativ	Relativ zur Schriftgröße des Root-Elements
vh	Bildschirm	Relativ	Relativ zur Höhe des Viewports (Browserfensters). 100vh = 100% der höhe des Browserfensters
vw	Bildschirm	Relativ	Relativ zur Breite des Viewports (Browserfenster). Analog zu vh, nur für die Breite

Farben

es gibt 2 Farbmodelle:
- RGB → für Bildschirmdarstellung
  - RGB → Rot Grün Blau/Red Green Blue
- additives Modell
  - alle Farben auf Maximum ergibt Schwarz
  - auf Minimum Weiß
CMYK → Cyan Magenta Yellow Black (Key)
- im Druckbereich benutzt
  - reduktives/subtraktives Farmodell
    - alle Farben auf Maximum ergibt Weiß
    - auf Minium Schwarz

Deklaration RGB

Per RGB-Funktion

rgb(255,255,255)

Wobei die Werte jeweils für Rot, Grün, Blau stehen und 255 der Maximalwert der jeweiligen Farbe ist. 255,255,255 = weiß, 0,0,0 = schwarz → additives Farbmodell

per RGBA-Funktion
- a = alpha-Kanal; Deckkraft

rgba(0,0,0,60%)

Deckkraft wäre hier bei 60%
0% → unsichtbar, absolute Transparenz
100% → volle Deckkraft, kein Hintergrund sichtbar

per Hexadezimalwert

#2A3CFF

Jeweils 2 Hexadezimalzahlen bilden eine Farbe ab, die ersten 2 Rot, die nächsten 2 Grün und die letzten 2 Blau.
„FF“ ist jeweils der Maximalwert für eine Farbe

per hsl-Funktion - Hue, Saturation (Sättigung), Light (Helligkeit)

shl(120, 50%, 50%)

erster Wert ist die Gradposition auf dem Farbrad der gewünschten Farbe
- 0 = Rot
- 120 = Grün
- 240 = Blau
zweiter Wert ist Sättigung in Prozent (0=Schwarz, 100% absolute Sättigung)
dritter Wert Helligkeit in Prozent (0=Grau, 100% weiß)

Gestaltung/Farbenlehre

1 Grundfarbe
- Komplementärfarbe (also das Gegenteil dazu im Farbkreis) dazu sparsam für Hervorhebungen nutzen

Es gibt 3 Grundarten von Farben
- Grundfarben → Rot, Grün, Blau
- Sekundärfarben → Mischungen aus 2 Grundfarben
- Tertiärfarben → Mischungen aus Halbwerten von 2 Grundfarben (wenn man 2 Grundfarben auf 175 setzt im RGB)

Farbverläufe

können nur auf Attribute angewendet werden die Bilder akzeptieren, nicht auf Farb-Attribute
- anstatt background-color also auf background
- liegt daran das die Funktionen ein Bild generieren

h1 {
background: linear-gradient(90deg, rgb(255,0,0) 30%, rgb(0,255,0), rgb(0,0,255))
}

linear-gradient ist eine Funktion
das erste Argument ist entlang welcher Achse der Farbverlauf sein soll
- 90deg senkrecht
- 180deg horizontal
die nachfolgenden Argumente sind die Farben und optional ab wie viel Prozent der Fläche die Farbe angewendet werden soll (33% wäre nach 1/3 der Fläche) % der Fläche die Farbe einnehmen soll

Troubleshooting

Problem	Lösung
DIV mit Hintergrundfarbe wird nur teilweise gefüllt - ein Teil des DIVs hat keien Hintergrundfarbe (bzw. die der dahinter liegenden Seite)	Wahrscheinlich wurde die Länge (Parameter length) des DIV fest definiert. Der Text im DIV ist aber länger als diese Angabe. Es wird nur in length angegebene Teil eingefärbt. Zweite Möglichkeit: Es wurde kein display:block angegeben. Notwendig da DIV ein inline-Element ist und somit an sich keine Breite und Höhe haben kann (und damit auch keine Farbe, weil das eine Eigenschaft eines Bereiches/Block ist)
DIV wird gar nicht mit Farbe gefüllt	display:block und/oder width und height nicht angegeben. display:block ist notwendig um aus dem Inline-Element DIV ein Block-Element zu machen. height und width müssen angegeben werden, können aber auf auto gesetzt werden

Problem

Lösung

DIV mit Hintergrundfarbe wird nur teilweise gefüllt - ein Teil des DIVs hat keien Hintergrundfarbe (bzw. die der dahinter liegenden Seite)

Wahrscheinlich wurde die Länge (Parameter length) des DIV fest definiert. Der Text im DIV ist aber länger als diese Angabe.

Es wird nur in length angegebene Teil eingefärbt.

Zweite Möglichkeit: Es wurde kein display:block angegeben.
Notwendig da DIV ein inline-Element ist und somit an sich keine Breite und Höhe haben kann (und damit auch keine Farbe, weil das eine Eigenschaft eines Bereiches/Block ist)

DIV wird gar nicht mit Farbe gefüllt

display:block und/oder width und height nicht angegeben.

display:block ist notwendig um aus dem Inline-Element DIV ein Block-Element zu machen.
height und width müssen angegeben werden, können aber auf auto gesetzt werden