A A A

CSS - ein Spickzettel

Vorbemerkung

Media-Queries und medienspezifische Style-Sheets

Farben und Transparenz

Hintergrundgrafiken für Elemente – Größe beeinflussen

CSS und Bewegung

Selektoren

Pseudo-Klassen und Pseudo-Elemente

CSS-Eigenschaft: display

Abstände verschmelzen

Eigenschaften für CSS-Boxen

CSS-Eigenschaft: position

Vorbemerkung

Die Informationen zu CSS wurden von mir schon vor Jahren zusammengestellt, um mir als Spickzettel zu dienen, wenn bestimmte Effekte mit CSS erzeugt werden sollen. Daher fehlt eine generelle Einführung in den Aufbau von CSS-Anweisungen. Auch fehlen Aspekte zu CSS, die für mich bislang nicht relevant waren.

Einige Hinweise zu den CSS-Anweisungen sind sehr kurz gehalten. Manche Stichworte sind nur der Vollständigkeit halber enthalten, werden aber nicht näher erläutert, da auch diese bislang für mich keine Relevanz besaßen.

Im Internet sind ausführlichere Dokumentationen verfügbar (z.B. www.w3schools.com (englisch), wiki.selfhtml.org (deutsch) ).

Sehr hilfreich ist auch die Seite www.caniuse.com, wenn man ermitteln möchte, wie gut CSS-Eigenschaften von den verschiedenen Browsern umgesetzt werden.

		Wertebereich	Wirkung
%	relative Breite oder Höhe des Elements in Bezug auf das Elternelement	positive Zahl	ermöglicht innerhalb eines Containers die Anpassung der Elemente, abhängig von der Größe des Containers auch geeignet, um Schriften prozentual zu verkleinern
em	ähnlich wie px (Pixel)
rem	relative Größe in Bezug auf die Standardgröße des Browsers		der Nutzer kann diese Größe selber verändern => er erhält die Seite dann in der von ihm gewünschten Schriftgröße => mit px-Angaben fixe Größen, Positionen von Elementen (z.B. Schaltern) können dazu führen, dass nicht der gesamte Text angezeigt wird/Texte sich überlappen

		Wertebereich	für	Wirkung
vw vh	relative Breite (vw) bzw. Höhe (vh) in Bezug auf den viewport (Anzeigebereich des Browsers)	natürliche Zahl zwischen 1 und 100	Container (HTML-Elemente wie <div>, die andere HTML-Elemente enthalten können	ermöglicht eine Anpassung des Elements (Containers) an die Breite/Höhe des Bildschirmfensters
px	fixe Größe	Ganze Zahlen – positive und negative – allerdings können negative Zahlen u.U. zu ungewünschtem Verhalten der Browser führen		nur durch explizites Überschreiben der Elementwerte können die so formatierten Elemente vom Nutzer in der Größe verändert werden. px ist eine sinnvolle Größeneinheit für margin/padding und border, um diese unabhängig vom viewport oder der vom Nutzer eingestellten Schriftgröße darstellen zu können. Nachteil: diese Einheit kann aufgrund des borderbox-Modells zu ungewünschten Zeilenumbrüchen führen bei anderen Breiten des Browserfensters

Notationsform	Hinweise
color: blue;	es gibt nur eine geringe Anzahl von Farbbezeichnungen.
color: #56f2a0;	dies ist die Hexadezimal-Schreibweise. Die Buchstaben a, b, c, d, e und f können sowohl als Kleinbuchstaben als auch als Großbuchstaben notiert werden. Nach der Raute# geben die ersten zwei Zeichen die „absolute Menge“ an Rot in der gewählten Farbe an, die nächsten zwei Zeichen die „absolute Menge“ an (Hell-)Grün und die letzten beiden Zeichen die „absolute Menge“ an Blau. Für jede Farbe kann der Wert zwischen 00 (gar nicht) und ff (=255, ganz viel)liegen. Wenn von allen Farben gleichmäßig viel verwendet wird, resultiert daraus ein Grauwert, wobei der Grauwert umso heller ist, je mehr Farbe eingesetzt wird (#ffffff ist weiß) und umgekehrt umso dunkler ist, je weniger Farbe eingesetzt wird (#000000). Wird von zwei Farben gar nichts (also 00) und von der anderen ganz viel (ff) eingesetzt, so ist die Grundfarbe kräftig. Um von einer Grundfarbe einen Pastellton zu erzeugen, muss von dieser Grundfarbe sehr viel (z.B. ff) und von den anderen beiden Grundfarben ziemlich viel (z.B. cc) eingesetzt werden.
color: rgb(132,5,255);	Diese Farbcodierung ist identisch wie bei der hexadezimalen Schreibweise, nur dass hier die dezimalen Farbwerte eingetragen werden, also die Zahlen zwischen 0 und 255 für die Farbwerte rot (r), grün (g) und blau (b), und die Zahlen durch Kommata getrennt werden.
color: rgba(132,5,255,0.8);	Dies ist eine Erweiterung der rgb-Farbdefinition um den sogenannten Alpha-Kanal, der die Transparenz der Farbe beeinflusst. Für die Angabe zum Alpha-Kanal sind alle Dezimalzahlen zwischen 0 und 1 zulässig sind. Ein Wert von 0 bedeutet die gewählte Farbe ist vollkommen durchsichtig, ein Wert von 1 dagegen, dass die gewählte Farbe vollkommen undurchsichtig sein soll.
color: hsl(360,70%,50%);	Dies ist die von Druckern bevorzugte Farbdefinition. Der erste Wert gibt die Farbe an (die in einem Kreis angeordnet sind), der zweite Wert die Sättigung und der dritte Wert die Helligkeit. Für den ersten Wert sind Werte zwischen 0 und 360 möglich (höhere Werte werden automatisch modulo 360 gerechnet). Die Werte 0 und 360 entprechen dem reinen Rot, der Wert 120 entspricht dem (Hell-)Grün, und der Wert 240 dem Blau-Wert. Bei Werten zwischen 0 und 120 wechselt die Farbe von rot über organge und gelb zu hellgrün, bei Werten zwischen 120 und 240 von hellgrün über türkis und hellblau zu dem reinen Blauton, und bei Werten zwischen 240 und 360 von dem reinen Blauton über lila und pink zu dem reinen Rot. Ist der Wert für die Sättigung bei 0% bedeutet dieses, dass keine Farbe vorhanden ist (also schwarz), und ein Wert von 100%, dass viel von der Farbe enthalten ist. Ein Wert dazwischen ergibt einen „Grauton“. Ist der Wert für die Helligkeit sehr hoch (maximal 100%), so ist die Farbe sehr hell bis weiß, bei einem Wert von 0% wird die Farbe immer dunkler bis hin zu schwarz. Bei einem Wert von 50% wird die reinste Farbe angezeigt.
color: hsla(0,100%,50%,0.8);	Dies ist eine Erweiterung der hsl-Farbdefinition um den sogenannten Alpha-Kanal, der die Transparenz der Farbe beeinflusst. Auch hier sind für die Angabe zum Alpha-Kanal alle Dezimalzahlen zwischen 0 und 1 zulässig. Ein Wert von 0 bedeutet, die Farbe ist vollkommen durchsichtig, ein Wert von 1 dagegen, die Farbe ist vollkommen undurchsichtig.

background-size: 100px 200px;	Diese Angabe erzwingt, dass die Grafik genau 100px breit und 200px hoch ist, auch wenn dadurch die Grafik verzerrt wird.
background-size: 100% 100%;	Diese Angabe erzwingt, dass die Grafik genau das Element ausfüllt, auch wenn die Grafik dadurch verzerrt wird.
background-size: contain;	Die Grafik wird so groß wie möglich angezeigt. Weicht das Breiten/Höhen-Verhältnis des Container-Elements von dem des Hintergundbildes ab, wird nicht der gesamte Container mit der Grafik gefüllt.
background-size: cover;	Die Grafik füllt immer das Container-Element aus und wird nicht verzerrt. Stattdessen werden Teile der Grafik abgeschnitten, wenn das Breiten/Höhen-Verhältnis des Container-Elements von dem des Hintergundbildes abweicht.

transform: rotate(valuedeg);	value kann eine beliebige Zahl sein, die Einheit muss deg sein für Grad und ohne Leerzeichen auf die Zahl folgen.
transform:translate(valueEinheit,valueEinheit);	value ist eine beliebige positive oder negative Zahl, die Einheit ist eine zugelassene Größeneinheit wie pixel. Der erste Wert verschiebt das Element horizontal, der zweite Wert vertikal
transform: scale(value);	value ist eine beliebige positive Dezimalzahl. Ein Wert größer als 1 führt zur Vergrößerung, ein Wert kleiner als 1 zur Verkleinerung.
transition (value1 value2 value3);	dieser Befehl ermöglicht fließende Übergänge für ein Element. Dabei bezeichnet value1 die Eigenschaft für die transition gelten soll (all => alle, width => nur Breite, …). value2 gibt an, wie schnell der Effekt sein soll. Die Einheit von value2 ist s (für Sekunde). Also könnte für value2 z.B. 1.2s notiert werden. value3 gibt die Art der Beschleunigung für den Übergang an. Zulässige Werte sind: ease, easein, ease-out, ease-in-out und linear. value2 und value3 sind optional. Dabei werden value1, value2 und value3 innerhalb der Anweisung nur durch Leerzeichen getrennt.

Beispiele	Wirkung
* {attrX:valueX;}	Allen Elementen, die das Attribut attrX besitzen können, wird der Wert valueX für dieses Attribut zugeordnet.
#main * {attrX:valueX;}	Nur alle HTML-Elemente innerhalb des Abschnitts mit dem Attribut id="main" werden entsprechend formatiert.

Beispiele	Wirkung
#main>p {attrX:valueX;}	Alle direkten Kinder des Abschnitts mit dem Attribut id="main", die vom Elementtyp p sind werden entsprechend formatiert, aber nicht die weiteren Abkömmlinge, also z.B. nicht #main header p.
#main p {attrX:valueX;}	Neben den direkten Kindern vom Typ p des Abschnitts mit id="main" werden auch alle weiteren Abkömmlinge vom Typ p innerhalb des Abschnitts mit id="main" entsprechend formatiert, die Anweisung gilt daher z.B. auch für #main header p .

Beispiele	Wirkung
h1+p {attrX:valueX;}	Sofern p direkt auf h1 folgt, erhält sein Attribut attrX den Wert valueX, sonst nicht.
h1#id1~p {attrX:valueX;}	Alle p, die mit h1#id1 auf der gleichen Hierarchie-Ebene stehen (also das gleiche Elternelement besitzen) und die auf dieses h1 mit id=“id1“ folgen, erhalten für das Attribut attrX den Wert valueX.

Beispiele	Wirkung
h1[attrY] {attrX:valueX;}	Sofern für h1 für das Attribut attrY irgendein Wert gesetzt wurde, erhält sein Attribut attrX den Wert valueX.
h1[attrY=”valueY”] {attrX:valueX;}	Sofern h1 für das Attribut attrY genau den Wert valueY besitzt, erhält sein Attribut attrX den Wert valueX.
p[attrY~=”valueY”] {attrX:valueX;}	Sofern p für das Attribut attrY den Wert valueY als einzelnes Wort besitzt (es dürfen also auch noch andere Wörter zugewiesen sein, wie z.B. bei class=“valueA valueY valueZ“), erhält sein Attribut attrX den Wert valueX.
#main[attrY\|=”valueY”] {attrX:valueX;}	Sofern für den Abschnitt mit id="main" für das Attribut attrY der Wert valueY am Anfang einer durch Bindestrich getrennten Zeichenfolge steht (z.B. valueY=“en“ und attrY=“en-US“), erhält sein Attribut attrX den Wert valueX.
a[attrY^=”valueY”] {attrX:valueX;}	Sofern für a für das Attribut attrY der Wert mit der Zeichenkette valueY beginnt, erhält sein Attribut attrX den Wert valueX.
a[attrY$=”valueY”] {attrX:valueX;}	Sofern für a für das Attribut attrY der Wert mit der Zeichenkette valueY endet, erhält sein Attribut attrX den Wert valueX.
a[attrY*=”valueY”] {attrX:valueX;}	Sofern für a für das Attribut attrY der Wert die Zeichenkette valueY enthält, erhält sein Attribut attrX den Wert valueX.

seit CSS 1	seit CSS 2	seit CSS 3	für HTMLElement	Bemerkungen
:link :visited :hover :focus :active			a	werden Ankerklassen genannt, damit kann die Darstellung von links gesteuert werden. Die Pseudoklassen sind hier nach ihrer Stärke geordnet. :link ist am stärksten, :active am schwächsten. Es müssen nicht für alle Ankerklassen Style-Anweisungen notiert werden. Die Reihenfolge der Ankerklassen für ein konkretes HTML-Element sollte innerhalb der Style-Anweisungen wie hier in der Tabelle sein, damit die schwächeren nicht von den stärkeren überschrieben werden. Nur :hover und :focus könnten getauscht werden, da :hover sich auf ein Maus-Ereignis bezieht und :focus auf ein vergleichbares Tastatur-Ereignis.
	:lang
		:target		markiert ein Element, das gerade durch einen Link angesprochen wird. Es ist sinnvoll in Verbindung als a:hover:target und a:focus:target
		:not(irgendwas)		Die Style-Anweisung gilt für alle HTML-Elemente, die vor dem Doppelpunkt genannt sind, aber nicht die Eigenschaft (irgendwas) besitzen. Dabei kann „irgendwas“ ein HTML-Element sein, ein Attribut oder ein Attribut-Wert, jeder Selektor ist also möglich.
	:first-child :last-child :nth-child(zahl) :nth-last-child(zahl) :only-child			Unmittelbar vor dem Doppelpunkt wird der Element-Typ notiert, auf den sich der Selektor bezieht, davor steht das Elternelement. first-child wirkt sich auf das erste Kind-Element aus, last, auf das letzte, only, dann wenn es nur ein einziges davon gibt, bei nth-child(zahl) wird von vorne gezählt, bei nth-lastchild(zahl) von hinten. Zahl kann eine Zahl wie 3 sein, dann wird genau das dritte Element gezählt, Zahl kann aber auch ein Ausdruck wie 2n+1 sein, dann wird jedes ungerade Kind-Element ausgewählt.
		:first-of-type :last-of-type :nth-of-type(zahl) :nth-last-of-type(zahl) :only-of-type		Vor dem Doppelpunkt wird der Element-Typ notiert, auf den sich der Selektor bezieht. Die einzelnen Angaben funktionieren ähnlich wie die –child-Selektoren, nur beziehen sie sich nicht auf Kind-Elemente eines Elternelements, sondern auf die Elemente innerhalb der jeweiligen HTML-Seite
		:root
		:empty		Damit werden alle Elemente selektiert, die keine Kind-Elemente besitzen, die also leer sind. Sobald ein Element ein Zeichen beinhalten, ist es nicht mehr leer, egal, welches Zeichen das ist.
	:checked			für Formular-Elemente
		:default
		:enabled :disabled
		:required :optional
		:read-only :read-write
		:valid :invalid :out-of-range		wahrscheinlich auch für Formular-Elemente

CSS 2	CSS 3	Wirkung
:before {content: ...;} :after {content: ...;)	::before {conten: ...;} ::after {content: ...;}	Damit ist es möglich, vor (before) oder nach (after) dem entsprechenden HTML-Element vom Browser das einzufügen, was durch das Attribut content definiert ist. Außerdem können für den content in der geschweiften Klammer Formatierungshinweise notiert werden.
:first-line	::first-child	bezieht sich nur auf die erste Zeile des HTML-Elements in dem Browserfenster. Wenn das Fenster breiter ist, ist die Zeile länger, wenn das Fenster schmal ist, also kürzer.
:first-letter	::first-letter	ermöglicht, den ersten Buchstaben eines HTML-Elements besonders zu formatieren, so wie es auch im Buchdruck teilweise durchgeführt wird, das Zeichen besonders groß darzustellen und den nachfolgenden Text darum herum fließen zu lassen.
	::selection

	Vorgabewert für	Eigenschaften
block	div, p, h_X	definiert einen Kasten, der einen Absatz erzeugt, falls nicht durch float die Eigenschaft gemildert wird
inline	a, strong, i, b, em, span, img, br	stehen in dem normalen Textfluss, erzeugen keine neuen Zeilen, Angaben zu margin-top, margin-bottom, height und width werden nicht wirksam
inline-block		erzeugt keinen Absatz, fließen im Text mit, können aber Werte für die Eigenschaften height, margin, padding, und border erhalten.
list	li	definieren zwar einen rechteckigen Kasten, der einen Absatz erzeugt, aber bestimmte Teile wie das Aufzählungszeichen, können daraus hervorragen
table		ermöglicht optisch gute und flexible Spalten, für Kindelemente muss das Attribut display: table-cell gesetzt werden
flex		ermöglicht sehr flexible Darstellungen. Die Kind-Elemente können verschiedene Attribute, die mit "flex" beginnen, erhalten.

CSS-Eigenschaft	Wirkungsweise
display: table; / display:table-cell	ermöglicht optisch gleich-lange Spalten, z.B. wird die Hintergrundfarbe einer Spalte so lange wiederholt, bis die längste der Nachbarspalte zu Ende ist. Auch kann die Breite von Nachbarspalten auf diese Weise variabel gestaltet werden
display: flex; / flex:; flex-flow:; flex-direction:	ermöglicht sehr flexibles Layout

box-sizing: content-box	Default-Wert Die Angaben width und height beziehen sich nur auf den Inhalt der Box, vorhandene Werte für padding und border müssen zu den Werten für width und height addiert werden, um den tatsächlich von dem Element eingenommenen Platz zu ermitteln.
box-sizing: border-box	Es entspricht dem „normalen“ Verständnis für eine Box, bei dem in der Angabe für die Breite einer Box (width) auch die Breitenangaben für padding und border enthalten sind.
box-sizing: inherit	übernimmt das Box-Modell des Elternelements.

static	Default-Wert Anordung der Elemente wie im Dokumentenfluss. Die Angaben top und left für das Element wirken sich nicht aus.
relative	Wenn Positions-Angaben vorhanden sind, dann gelten diese immer relativ zur linken oberen Ecke des Elternelements. Durch Positionsangaben, können relativ zum Elternelement verschobene Elemente, Geschwisterelemente überlagern, da die Positionsangaben für das eine Kind-Element keine Auswirkung auf die Positionsangaben für die anderen Kind-Elemente des gemeinsamen Elternelements haben. Durch den Wert für das Attribut z-index kann bestimmt werden, welches Element im Vordergrund ist, wenn sich (zwei oder mehr) Elemente überlappen. Das Element mit dem höchsten z-index steht im Vordergrund.
absolute	Die Positionsangaben beziehen sich immer auf die linke obere Ecke des nächstgelegenen Elternelements, das relative, absolute oder fixed positioniert ist. Sind alle übergeordneten Elemente static, bezieht sich die Angabe auf das Browserfenster, den viewport.
fixed	Die Angabe bezieht sich immer auf den viewport, Angaben wie bottom und right sind neben top und left möglich. Damit durch Elemente die an einer Kante des Browserfensters fixiert sind, nicht Inhalte unzugänglich werden, müssen für die Elemente, deren Inhalte durch das fixierte Element verdeckt wird, durch passende Werte für die Eigenschaft margin Freiräume im gemeinsamen Elternelement body geschaffen werden.