Schwarzcode

Nachschlagewerk zur Ergänzung des Unterrichts in Frontend Development – und für mich. Sehr subjektiv gefärbt und ohne Anspruch auf Vollständigkeit.


Übersicht der CSS-Eigenschaften

Nicht alle, aber alle, die ich in der Praxis brauche. Dort wo es mehrere Möglichkeiten gibt, stehen diese in eckigen Klammern. Dort wo es mehrere gibt, darunter aber solche, die ich nie brauche, sind sie mit Auslassungspunkten angedeutet. Wenn Zahlenwerte in Pixeln, Em oder Prozenten als Wert definiert werden müssen/können, steht einfach irgend ein Wert als Platzhalter

Typo

Details: siehe Seiten Typo: Basics, Typo: Absätze, Farbesysteme und Listen in CSS

font-family: "Name der Schriftfamilie";
font-size: 2em;
font-weight: [normal/bold];
font-style: [normal/italic];
color: (Farbwert);
line-height: 2em;
letter-spacing: 2em;
word-spacing: 2em;
text-align: [left/right/center/justify];
text-decoration: [none/underline/line-trough/overline];
text-transform: [none/lowercase/uppercase/capitalize]; 
text-indent: 2em;
list-style: [none/…];
white-space: [nowrap/pre/…];

OpenType-Features, CSS3

Details siehe Seite OpenType-Features

font-feature-settings: (grosse Auswahl);

Dimensionen

width: 2em;
height: 2em;
max-width: 2em;
max-height: 2em;
min-width: 2em;
min-height: 2em;

Aussenabstände

margin-top: 2em;
margin-right: 5em;
margin-bottom: 1em;
margin-left: 5em;
margin: 2em 5em 1em 5em; /* Kurzform: im Uhrzeigersinn, Start oben */
margin: 20px 5%;         /* Kurzform: oben und unten, links und rechts */

Innenabstände

padding-top: 2em;
padding-right: 5em;
padding-bottom: 1em;
padding-left: 5em;
padding: 2em 5em 1em 5em; /* Kurzform: im Uhrzeigersinn, Start oben */
padding: 20px 5%;         /* Kurzform: oben und unten, links und rechts */

Kontur

border-color: (Farbwert); 
border-style: [solid/dotted/dashed/double/groove/ridge/inset/outset];
border-width: 2px;

Drei Border-Eigenschaften – Farbe, Stil und Stärke – können je mit allen 4 Himmelsrichtungen kombiniert werden: border-bottom-color, border-left-style, border-top-width usw. Das ist aber selten sinnvoll und auch nicht platzsparend.

/* Empfohlene Kurzformen (Reihenfolge innerhalb egal): */
border: 1px solid black; 
border-top: 2px solid red;
border-right: 2px solid red;
border-bottom: 1px solid orange;
border-right: 1px solid #FF0000;
/* Border ausschalten: */
border: none;
border-top: none;
border-right: none;
/* … usw. */

Anzeige

display: [block/none/inline/inline-block];
visibility: [visible/hidden];
opacity: [0/0.1/0.2/0.3/0.4/0.5/0.6/0.7/0.8/0.9/1]; /* 0.5 = 50 % */

Position, Koordinaten, Ebenen

position: [static/relative/absolute/fixed];
top: 2em;
right: 2em;
bottom: 2em;
left: 2em;
z-index: (Ganzzahl); /* Ebenenlage, auch Negativwerte erlaubt */

Floating

Details siehe Seiten Bilder im Textumfluss und Spaltenlayout mit Floating

float: [left/right];
clear: [both/…];

Hintergrund

Details siehe Seite Hintergrund

background-image: url("Platzhalter.png");
background-size: [auto/cover] 
background-size: 100px 200px; /* Breite mal Höhe – em und % auch möglich */
background-repeat: [repeat/no-repeat/repeat-y/repeat-x]; /* Standard: repeat */
background-position: (grosse Auswahl); /* Standard: right top */
background-attachement: [scroll/fixed]; /* Standard: scroll */

Tabellen

Details siehe Seite Tabellen

border-collapse: [separate/collapse]; /* für das Element <table>, durchgehende Linien oder Rahmen pro Zelle */
border-spacing: 0.3em;                /* für das Element <table>, aussenabstand der Zellen */
vertical-align: [middle/bottom/top];  /* für <td> und <th> */

Übersatz und Scrollbalken

overflow: visible;  /* Standardwert */
overflow: scroll;   /* Alle Scrollbalken erzwingen */
overflow-y: scroll; /* Scrollbalken rechts erzwingen */
overflow-x: scroll; /* Scrollbalken unten erzwingen */
overflow: hidden;   /* alle Scrollbalken ausschalten */
overflow-y: hidden; /* Scrollbalken rechts ausschalten */
overflow-x: hidden; /* Scrollbalken unten ausschalten */

Mauszeiger

cursor: default;    /* Standardwert */
cursor: pointer;    /* «Zeiger», Standard für Links */
cursor: crosshair;  /* Fadenkreuz */
cursor: help;       /* Fragezeichen */
cursor: wait;       /* «Sanduhr» */
cursor: move;       /* Bewegungszeiger */
cursor: text;       /* Text-Cursor, Standard für Text */
cursor: n-resize;   /* Skalierungs-Cursor Nord */
cursor: ne-resize;  /* Skalierungs-Cursor Nordost */
cursor: e-resize;   /* Skalierungs-Cursor Ost */
cursor: se-resize;  /* Skalierungs-Cursor Südost */
cursor: s-resize;   /* Skalierungs-Cursor Süd */
cursor: e-resize;   /* Skalierungs-Cursor Ost */
cursor: w-resize;   /* Skalierungs-Cursor West */
cursor: nw-resize;  /* Skalierungs-Cursor Nordwest */

Verantwortlich:
Jürgen Wössner
E-Mail

Schwarzcode

Nachschlagewerk zur Ergänzung des Unterrichts in Frontend Development – und für mich. Sehr subjektiv gefärbt und ohne Anspruch auf Vollständigkeit.

Aber mit so einem kleinen Bildschirm hier ist das ganze echt nutzlos. Geh mal rüber an einen grösseren Bildschirm.