Dies ist eine alte Version des Dokuments!

Inhaltsverzeichnis

Aufbau
Selektoren
Definition
Eigenschaften
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

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

div .myclass {text-align: center}

Gilt nur für Elemente in einem div die die klasse „myclass“ haben

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)

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

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

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

MyWiki

Benutzer-Werkzeuge

Webseiten-Werkzeuge