HTML CSS Cheatsheet

HTML-Elemente

Element Attribute Beschreibung
Text
<p></p> id, class Ausgabe von Text
<span></span> id, class Horizontale Ausgabe
<em></em> id, class Ausgabe von kursivem Text
<strong></strong> id, class Ausgabe von fettem Text
<br> NONE Neue Zeile
Grundgerüst
<!DOCTYPE html> NONE Angabe des Dokumenten-Typs
<html></html> lang Grundelement wird benötigt
<head></head> NONE Angabe der Metaelement
<body></body> NONE Ausgabe für Webseite
Head
<meta> name, content Metadaten der html-Datei
<title></title> NONE Titel für Tab
<link> href, type, rel Link zu Stylesheet und Web-Fonts
<script></script> src, type, defer, async Link zu JavaScript-Datei oder direkte Eingabe von js-Code
Überschriften
<h1></h1> id, class Höchste Überschrift
<h2></h2> id, class Zweit höchste Überschrift
<h3></h3> id, class Dritt höchste Überschrift
<h4></h4> id, class Viert höchste Überschrift
<h5></h5> id, class Fünft höchste Überschrift
<h6></h6> id, class Tiefste Überschrift
<hr> NONE Horizontale Linie
Formular
<form></from> id, class, action, method Definiert ein Formular
<label><label> id, class, for Beschriftung für <input> und <select>
<input> id, class, list, type, name, value, min, max, step, minlength, maxlength, required, pattern, placeholder Definiert ein input-Feld
<datalist></datalist> id, class Definiert eine Datenliste, braucht <option>, Geschwister von <input>
<select></select> id, class, name Definiert eine Liste, braucht <option>
<option></option> id, class Ausgabe von Text für <datalist> und <select>
<textarea></textarea> id, class, name, rows, cols, placeholder Definiert eine Textbox
Tabellen
<table></table> id, class Definiert eine Tabelle
<thead></thead> id, class Definiert den Kopf der Tabelle
<tbody></tbody> id, class Definiert den Körper der Tabelle
<tfoot></tfoot> id, class Definiert den Fuss der Tabelle
<tr></tr> id, class Definiert eine Zeile, braucht <th> oder <td>
<th></th> id, class, scope, colspan, rowspan Definiert Tabellen-Überschrift
<td></td> id, class, colspan, rowspan Definiert Tabellen-Inhalt
Link
<a></a> id, class, href, target Linkt Abschnitte oder andere Seiten
Medien
<video></video> id, class, src, type, controls Spielt Video-Datei
<audio></audio> id, class, src, type, controls Spielt Audio-Datei
<img> id, class, src, alt Gibt ein Bild aus
Container
<div></div> id, class Container-Element
<header></header> id, class Kopfinhalt
<nav></nav> id, class Navigation
<main></main> id, class Hauptinhalt
<section></section> id, class Abschnitt
<footer></footer> id, class Fussinhalt
Listen
<ul></ul> id, class Ungeordnete Liste, braucht <li> als Kind
<ol></ol> id, class Geordnete Liste, braucht <li> als Kind
<li></li> id, class Definiert Listen-Inhalt, ist Kind-Element von <ul> oder <ol>

CSS-Selektoren

Beispiel Name Beschreibung Spezifität
Einfache Selektoren
* Universalselektor Wählt das ganze Dokument für den Regelsatz 000
p Typenselektor Wählt ein Element für den Regelsatz 001
.class Klassenselektor Wählt eine Klasse für den Regelsatz 010
#id ID-Selektor Wählt einen ID für den Regelsatz 100
Komplexe Selektoren
p.class Verbundener Selektor Wählt ein Element mit Klasse für den Regelsatz 011
ul li Kindselektor Wählt ein Kind-Element für den Regelsatz 002
p, h1, h2 Selektorenliste Wählt alle aufgeführten Elemente für den Regelsatz 001
Pseudoklassen
:hover hover Selektiert ein Element, wenn der Mauszeiger darüber steht 010
:visited visited Selektiert ein Element, wenn darauf geklickt wurde 010
:before before Setzt etwas vor ein Element 010
Formatierungen
@font-face Schriftformatierung Steht am Anfang einer CSS-Datei; Formatierung für eine Schriftart -
@media Medien-Abfrage Fragt die Bildschirmgrösse ab|@media only screen and (max-width: <zahl>px) -
Eigenschaften Medien-Abfrage min-width, max-width, orientation: landscape | protrait, resolution: <zahl>dpi -

Spezifität berechnen

Die Spezifität eines Selektors wird mit drei Ziffern 000 dargestellt.

Berechnen der Spezifität:
Anzahl der ID-Selektoren
in Selektor
Anzahl der Klassen-, Attribut- und Pseudoklassenselektoren
in Selektor
Anzahl der Typenselektoren
in Selektor
Für |div.my-class #my-id #another-id {} gilt:
2 1 1

CSS-Eigenschaften

Eigenschaft Beschreibung Werte
Text
font-family Definiert die Schriftart monospace, serif, sans-serif(default), <schriftart>
font-size Definiert die Schriftgrösse <zahl>px
font-weight Definiert die Schriftdicke bold, bolder, normal(default), <zahl>
font-style Definiert die Schriftform italic
word-spacing Definiert den Abstand zwischen zwei Wörtern <zahl>em
letter-spacing Definiert den Abstand zwischen zwei Buchstaben <zahl>em
line-height Definiert den Abstand zwischen den Zeilen <zahl>, <zahl>px
color Definiert die Schriftfarbe, Vordergrundfarbe transparent, <farben>, #hex-Wert, rgba(160, 70, 10, .5), hsla(240, 70%, 50%, .6)
text-align Definiert die Ausrichtung des Textes center, right, left(default)
text-transform Definiert, ob ein Wort gross oder klein geschrieben ist uppercase, lowercase
text-decoration Definiert die Dekoration eines Wortes oder Liste underline, none
Liste
list-style Definiert die Dekoration einer Liste none, inside
Container
background-color Definiert die Hintergrundfarbe transparent, <farben>, #hex-Wert, rgba(160, 70, 10, .5), hsla(240, 70%, 50%, .6)
background-image Definiert ein Hintergrundbild url('Pfad/zu/Bild')
background-position Definiert die Position des Bildes im Container top, bottom, left, right, center
background-size Definiert, wie das Bild dargestellt wird cover, <zahl>%, ...
backgroud-repeat Definiert, ob sich das Hintergrundbild wiederholen soll no-repeat, repeat, ...
opacity Definiert die Transparenz des Containers 0, ..., 1
Box Model
height Definiert die Höhe eines Elements <zahl>px
width Definiert die Breite eines Elements <zahl>px
border Definiert den Rand eines Elements 1px solid red
border-width Definiert die Dicke des Randes <zahl>px
border-style Definiert den Style des Randes solid, dotted, ..., none(default)
border-color Definiert die Farbe des Randes red, <farben>
border-radius Definiert Radien in den Ecken eines Elements; 100% ergibt einen Kreis, wenn height und width gesetzt <zahl>%
padding Definiert den inneren Abstand <zahl>px <zahl>px <zahl>px <zahl>px [oben, rechts, unten, links]
margin Definiert den äusseren Abstand <zahl>px <zahl>px [oben/unten, rechts/links]
max-height Definiert die max. Höhe <zahl>px
min-height Definiert die min. Höhe <zahl>px
max-width Definiert die max. Breite <zahl>px
min-width Definiert die min. Breite <zahl>px
overflow Definiert wie sich ein Eltern-Element zu einem Kind-Element in vertikaler Richtung verhält scroll, hidden, visible(default)
visibility Setzt Element auf sichtbar und nicht sichtbar hidden, visible(default)
box-sizing Bestimmt die Berechnung einer Box im Box-Model border-box, content-box(default)
Layout
position Positioniert einen Container absolute, relative, fixed, static(default)
top Schiebt einen Container nach unten <zahl>px
bottom Schiebt einen Container nach oben <zahl>px
left Schiebt einen Container nach rechts <zahl>px
right Schiebt einen Container nach links <zahl>px
z-index Positioniert einen Container in der z-Achse <zahl>
display Positioniert einen Container zu in umgebenden Elementen inline, block, inline-block, none, flex, inline-flex
float Fügt Elemente aneinander right, left
clear Unterbindet das Anfügen der Elemente right, left, both, none
Flex-Box
justify-content Richtet die Elemente im Container in der Major-Achse aus flex-start, flex-end, center, space-around, space-between
align-items Richtet die Elemente im Container in der Cross-Achse aus flex-start, flex-end, center, baseline, stretch(default > min-height!)
flex-grow Lässt ein Element wachsen <zahl>
flex-shrink Lässt ein Element schrumpfen <zahl>
flex-basis Gibt die Grösse eines Elements an <zahl>px
flex Kombiniert flex-grow, flex-shrink, flex-basis <flex-grow> <flex-shrink> <flex-basis>px
flex-wrap Umfasst die Elemente in einem Container; untereinander oder nebeneinander wrap, wrap-reverse, nowrap(default)
align-content Richtet die Elemente im Container aus; nur mit flex-wrap flex-start, flex-end, center, space-around, space-between, stretch
flex-direction Gibt die Ausrichtung der Elemente im Container an row, row-reverse, column, column-reverse
flex-flow Kombiniert flex-wrap flex-direction <flex-direction> <flex-wrap>

Einheiten in CSS

Einheit Name Beschreibung
px Pixel Fester Wert
em Abhängig von M Wert ist abhängig von font-size des Eltern-Elements
rem Abhängig von Root-M Wert ist abhängig von font-size des html-Elements
% Prozent Wert ist abhängig von Eltern-Element

© Rolf Karlen 2021