Inhalt
Die Inhalte der bisherigen Webseiten nach und nach übernommen. Mit einem * gekennzeichnete Bereiche sind noch nicht übernommen worden.
ÜBERBLICK
CSS | Vorbemerkungen
CSS ist ein W3C Standard wie HTML, XML und andere Sprachen im Web auch. CSS wird oftmals in einem Atemzug mit HTML und Webdesign genannt, aber der wirkliche Wert von CSS beschränkt sich nicht nur auf HTML: Es funktioniert auch mit SVG Grafiken.
Hinzukommt aber, dass CSS Selektoren eine immense Bedeutung für JavaScript im DOM Document Object Model von HTML5 haben und auch dann genutzt werden, wenn man das Format von Elementen nicht anhübschen will. Wenn es um das Lernen, Einsetzen und das Verstehen von CSS geht, gibt es immer zwei Aspekte: Selektoren auf der eine Seite und die Vielzahl von Style-Attributen von HTML und SVG kennenlernen.
CSS Mindestwissen
Funktionsweise von CSS
CSS hat eine Reihe von Einsatzwecken. Die Formatierung von HTML- und SVG-Elementen ist im Grunde genommen schnell zu erklären, denn wenn man einmal die Selektoren verstanden hat muss man für viele Formate nur noch wissen, wie diese Style-Eigenschaft in CSS benannt ist.
Der für Einsteiger komplexeste und für erfahrene Entwickler der weiterhin frustrierenste Part von CSS sind die Selektoren in CSS. Der Einsteiger hat diese oftmals nicht richtig verstanden und ungünstig programmiert, und der erfahrene Entwickler soll's dann bekanntlich richten.
CSS Syntax
.rot { color: red }; ist eine der einfachen Varianten der Syntax von CSS, um mit der CSS Klasse "rot" ergänzte Elemente den color-Wert auf "red" zu setzen.
CSS Selector Syntax
Der Selektor .rot ist allerdings nur eine Variante von einer ganzen Reihe weiter Varianten, wie man Selektoren in CSS formulieren kann.
CSS Compiling mit LESS/SASS
Das sogenannte CSS-Compiling mit LESS/SASS ist KEIN W3C Standard sondern basiert auf Programmen, mit deren Hilfe ein Dialekt von CSS mit Variablen und weiteren Funktionen geschrieben werden kann weil CSS selbst über diese nicht verfügt.
Das, was Entwickler eigentlich bei CSS vermissen, hat das W3C World Wide WebConsortium eigentlich einst mit XSL, der Extensible Stylesheet Language, geschaffen, aber diese wurde nach dem Einsatz bei Softwarelösungen ab 2001 im Webbrowser durch JavaScript verdrängt.
CSS Einsatzbereiche
CSS und HTML
Der häufigste Einsatzbereich von CSS erfordert im Zusatzhang mit HTML Code von Webseiten oder webbasierten Softwarelösungen, dh. Formularoberflächen auch in Apps.
CSS und SVG
SVG ist ein Grafikformat im Web in XML- oder HTML-ähnlicher Syntax. Auch SVG Grafiken für Piktogramme, Icons oder auch Animationen lassen sich mit CSS formatieren.
Selektoren für JS, JAVA, PHP, C#
CSS Selektoren dienen aber von der Gestaltung von HTML oder SVG unabhängig auch für die Selektion von Elementen und Knoten in DOM Documents in JS, JAVA, PHP oder auch C# seit der querySelector und querySelectorAll im DOM unterstützt wird.
Damit ist es möglich, dass Elemente im DOM von Dokumenten nicht mehr nur über XPATH Syntax sondern auch über die Syntax von CSS Selektoren definiert werden können.
CSS Einführung und Referenz
Grundlagen
In Bezug auf die Grundlagen von CSS verweisen wir auf die Vielzahl anderer Quellen im Internet.
Gültigkeit von CSS
Die Gültigkeit von CSS selbst lässt sich zwar über Validatoren im Web testen, aber der maßgebende Aspekt ist auch zuerst einmal der: Welcher Browser unterstützt welchen CSS Befehl? Diese Frage lässt sich über caniuse.com beantworten.
CSS-Befehle in der Übersicht
font-size
Der Befehl font-size legt die Schriftgröße eines Textes fest.
Gängige Werte sind absolute Maße wie 16px oder relative
Maße wie 1rem.
Ein Beispiel: font-size: 1.25rem;. Nutzt relative Größen
für bessere Skalierung zwischen Breakpoints.
line-height
Mit line-height wird der Abstand zwischen den Grundlinien
der Textzeilen festgelegt. Werte können Zahlen wie 1.5
oder Maße wie 24px sein.
Empfohlen ist ein Wert von 1.5 für Lesefreundlichkeit: line-height: 1.5;.
letter-spacing
Der CSS-Befehl letter-spacing bestimmt den Abstand zwischen den Buchstaben.
Nutzt positive Werte wie 2px, um den Abstand zu vergrößern,
oder negative, um ihn zu reduzieren.
Beispiel: letter-spacing: 1px;.
Ideal für Headlines oder Layouts, wo Buchstabenabstand das Gesamtbild beeinflusst.
text-transform
Mit text-transform lässt sich die Groß-/Kleinschreibung von Text steuern.
Gängige Werte sind uppercase, lowercase und
capitalize.
Beispiel: text-transform: uppercase;.
Praktisch für Button-Labels oder Überschriften.
color
Der Befehl color definiert die Schriftfarbe eines Elements.
Werte können Farbnamen wie red,
Hexadezimalwerte wie #ff0000,
oder RGB-Farben wie rgb(255, 0, 0) sein.
Beispiel: color: #333;.
Ideal, um visuelle Hierarchien in Texten zu betonen.
visibility
Mit visibility wird gesteuert, ob ein Element sichtbar ist.
Werte wie visible, hidden
und collapse stehen zur Auswahl.
Beispiel: visibility: hidden;.
Das Element bleibt im Layout, aber ist unsichtbar.
text-align
Der CSS-Befehl text-align legt die horizontale Ausrichtung
von Text fest. Werte wie left,
center, right
und justify können verwendet werden.
Beispiel: text-align: center;.
Ideal für Überschriften oder besondere Inhalte.
box-sizing
Der Befehl box-sizing definiert, wie die Gesamtgröße eines Elements
berechnet wird. Werte wie content-box (Standard) oder
border-box können gewählt werden.
Beispiel: box-sizing: border-box;.
Das Padding und der Rand werden in die Gesamtgröße einbezogen, was die Layoutsteuerung erleichtert.
overflow
Mit overflow wird gesteuert, was passiert, wenn Inhalt die Größe
seines Containers überschreitet. Werte wie visible,
hidden, scroll,
oder auto sind möglich.
Beispiel: overflow: hidden;.
Nützlich, um ungewollte Inhalte im Layout auszublenden.
white-space
Der Befehl white-space legt fest, wie Leerzeichen und Zeilenumbrüche
im Text gehandhabt werden. Werte wie normal,
nowrap oder pre
können verwendet werden.
Beispiel: white-space: nowrap;.
Praktisch, um Zeilenumbrüche in Buttons oder Überschriften zu verhindern.
Positionierung
float
Der Befehl float wird verwendet, um ein Element nach
links oder rechts innerhalb seines Containers zu verschieben.
Gängige Werte sind left,
right, und
none.
Beispiel: float: left;.
Praktisch, um Text neben Bildern zu platzieren.
clear
Der CSS-Befehl clear wird genutzt, um zu verhindern,
dass ein Element neben einem gefloateten Element platziert wird.
Gängige Werte sind left,
right, und
both.
Beispiel: clear: both;.
Nützlich, um Layout-Probleme bei gefloateten Elementen zu beheben.
position
Mit position wird festgelegt, wie ein Element
im Dokument platziert wird. Gängige Werte sind
static,
relative,
absolute, und
fixed.
Beispiel: position: absolute;.
Praktisch für gezielte Platzierungen von Elementen im Layout.
display
Der Befehl display bestimmt den Anzeigemodus eines Elements.
Gängige Werte sind block,
inline,
inline-block, und
none.
Beispiel: display: block;.
Wird verwendet, um ein Element als Block darzustellen, das den gesamten verfügbaren Platz einnimmt.
flex
Der Befehl flex ist Teil des flexiblen Box-Modells (Flexbox). Er erlaubt die einfache Anordnung von Elementen in einer Zeile oder Spalte mit automatischer Anpassung.
Beispiel: display: flex;.
Praktisch, um Inhalte gleichmäßig oder dynamisch im Layout auszurichten.
grid
Mit grid wird das Grid-Layout-Modell definiert. Es ermöglicht die Erstellung komplexer, mehrspaltiger Layouts.
Beispiel: display: grid;.
Ideal für strukturierte Layouts mit festen oder flexiblen Spalten und Zeilen.
absolute + relative
Um ein Element absolut zu positionieren, setzt man position: absolute;.
Das Element wird dann relativ zu seinem nächsthöheren übergeordneten Container
mit position: relative; ausgerichtet. Fehlt ein
solcher Container, wird relativ zum Viewport (also dem sichtbaren Bereich) ausgerichtet.
Beispiel: Platzieren eines Dialogfensters relativ zu seinem Container.
<div style="
position: relative;
width: 400px;
height: 300px;
border: 1px solid #333;
">
<p style="
position: absolute;
top: 50px;
left: 20px;
background-color: lightblue;
">
Ich bin absolut positioniert!
</p>
</div>
Hier definiert der äußere <div> mit
position: relative; einen Bezugspunkt,
sodass das innere <p> absolut relativ zu diesem Container positioniert wird.
A-F
align-content: center;
align-items: flex-start;
align-self: auto;
animation: slide-in 2s ease-in-out;
animation-delay: 1s;
animation-direction: alternate;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: fade-in;
animation-timing-function: linear;
accent-color: auto;
align-content: stretch;
align-items: baseline;
aspect-ratio: 16 /
background: #f0f0f0;
background-attachment: fixed;
background-blend-mode: multiply;
background-clip: border-box;
background-color: #ffcc00;
background-image: url('image.jpg');
background-origin: padding-box;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border: 2px solid #000;
border-bottom: 4px dashed #555;
border-collapse: collapse;
border-color: #333;
border-image: url('border.png') 30 round;
border-radius: 8px;
border-spacing: 12px;
border-style: dotted;
border-width: 5px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
background-attachment: local;
background-blend-mode: lighten;
block-size: 50%;
border-block: 2px solid red;
border-block-end: thick dashed green;
border-block-start: medium dotted blue;
border-end-end-radius: 10px;
border-end-start-radius: 15px;
border-image-repeat: stretch;
border-image-slice: 10;
border-image-source: url('pattern.png');
border-image-width: 5px;
border-inline: 3px double black;
border-inline-end: 4px ridge #333;
border-inline-start: 6px groove grey;
break-after: avoid-page;
break-before: left;
break-inside: box-sizing: border-box;
clear: both;
clip-path: circle(50%);
color: #333333;
column-count: 3;
column-gap: 20px;
content: "Hello!";
cursor: pointer;
color-scheme: dark light;
column-fill: balance;
column-rule: 1px solid #000;
column-rule-color: #666;
column-rule-style: solid;
column-rule-width: thin;
contain: layout;
container: container-name / inline-size;
container-type: size;
content-visibility: auto;
counter-increment: section;
counter-reset: chapter;
display: flex;
filter: grayscale(100%);
flex: 1 1 auto;
flex-basis: 50%;
flex-direction: column;
flex-flow: row nowrap;
flex-grow: 2;
flex-shrink: 0;
float: left;
font-family: Arial, sans-serif;
font-size: 16px;
font-feature-settings: "liga" on;
font-language-override: "JAP ";
font-optical-sizing: auto;
font-palette: light;
font-synthesis: weight;
font-kerning: normal;
font-size-adjust: 0.5;
font-stretch: condensed;
font-style: italic;
font-variant: small-caps;
font-variant-caps: all-small-caps;
font-variant-east-asian: ruby;
font-variant-ligatures: common-ligatures;
font-variant-numeric: lining-nums;
font-variation-settings: 'wdth' 200;
G-M
gap: 10px;
grid: auto-flow / 100px;
grid-area: header;
grid-auto-columns: min-content;
grid-auto-flow: row dense;
grid-auto-rows: max-content;
grid-column: 1 / span 2;
grid-column-end: -1;
grid-column-gap: 15px;
grid-column-start: auto;
grid-gap: 20px;
grid-row: 2 / span 3;
grid-row-end: auto;
grid-row-gap: 10px;
grid-row-start: 1;
grid-template: "a b" auto "c d" auto;
grid-template-areas: "header header" "main sidebar";
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 50px auto 50px;
height: 100vh;
isolation: isolate;
inset: 20px 15px auto auto;
inset-block: 10px;
inset-inline: auto;
justify-content: space-around;
justify-items: start;
justify-self: center;
letter-spacing: 2px;
line-height: 1.5;
list-style: square inside;
list-style-image: url('bullet.png');
list-style-position: outside;
list-style-type: lower-roman;
margin: 10px 20px 30px 40px;
margin-block: 1em;
margin-inline: 2rem;
mask: url('mask.svg');
mask-clip: border-box;
mask-composite: add;
mask-image: linear-gradient(to right, red, blue);
mask-mode: luminance;
mask-origin: padding-box;
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
margin-trim: all;
M
margin: 10px;
margin-block: 1em;
margin-inline: 2rem;
margin-left: auto;
margin-right: 15px;
margin-top: 0;
margin-bottom: 5px;
mask: url('mask.svg');
mask-clip: border-box;
mask-composite: add;
mask-image: linear-gradient(to right, red, blue);
mask-mode: luminance;
mask-origin: padding-box;
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
max-height: 300px;
max-height: 500px;
max-width: 80%;
max-width: 100%;
min-height: 150px;
min-height: 300px;
min-width: 40%;
min-width: 50%;
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;
Dieser CSS-Befehl bestimmt, wie ein Element mit seinem Hintergrund bzw.
seinen Nachbarelementen visuell überblendet wird. Es funktioniert ähnlich
wie die Blend-Modi in Grafikbearbeitungsprogrammen wie Photoshop.
Der Wert multiply beispielsweise multipliziert die Farbwerte des aktuellen
Elements mit denen des Hintergrundes, was zu einem dunkleren Ergebnis führt.
<div style="background-color: lightblue; width: 300px; height: 300px;">
<img src="image.jpg" style="mix-blend-mode: multiply; width: 100%;">
</div>
M
object-fit: cover;
object-position: top center;
offset: 10px;
offset-anchor: 50% 50%;
offset-distance: 25px;
offset-path: path('M10,80 C40,10 65,10 95,80');
offset-rotate: 45deg;
opacity: 0.8;
order: 1;
outline: 2px dotted blue;
outline-color: red;
outline-offset: 4px;
outline-style: dashed;
outline-width: thin;
overflow: hidden;
overflow-anchor: auto;
overflow-wrap: break-word;
overflow-x: scroll;
overflow-y: auto;
/* 1. object-fit */
/* Definiert, wie ein Ersatzinhalt innerhalb eines Containers skaliert wird. */
object-fit: fill; /* Inhalt füllt den Container aus */
object-fit: contain; /* Inhalt wird skaliert, um in den Container zu passen */
object-fit: cover; /* Inhalt wird so skaliert, dass er den Container ausfüllt */
object-fit: none; /* Keine Skalierung des Inhalts */
object-fit: scale-down; /* Skaliert auf die kleinste Größe zwischen `none` und `contain` */
/* 2. object-position */
/* Positioniert den Inhalt innerhalb des Containers. */
object-position: left top; /* Obere linke Ecke */
object-position: center; /* Zentriert */
object-position: bottom right; /* Untere rechte Ecke */
object-position: 50% 50%; /* Relative Positionierung in Prozent */
/* 3. offset */
/* Kombiniert verschiedene Offset-Eigenschaften, um ein Pfad-Layout für Elemente zu erstellen. */
offset: <offset-anchor> <offset-distance> <offset-path> <offset-rotate>; /* Kombination */
/* 4. offset-anchor */
/* Definiert den Referenzpunkt des Offsets. */
offset-anchor: auto; /* Automatischer Referenzpunkt */
offset-anchor: 50% 50%; /* Zentriert */
offset-anchor: left top; /* Oben links */
/* 5. offset-distance */
/* Gibt die Distanz entlang eines Offset-Pfads an. */
offset-distance: 0px; /* Kein Abstand */
offset-distance: 25px; /* Abstand in Pixel */
/* 6. offset-path */
/* Definiert den Pfad, dem das Objekt folgt. */
offset-path: none; /* Kein Pfad */
offset-path: path('...'); /* Benutzerdefinierter SVG-Pfad */
offset-path: inset(); /* Rechteck-Pfad */
offset-path: circle(); /* Kreisförmiger Pfad */
offset-path: polygon(); /* Polygonaler Pfad */
/* 7. offset-rotate */
/* Kontrolliert die Drehung eines Objekts entlang des Pfads. */
offset-rotate: auto; /* Automatische Rotation entlang des Pfads */
offset-rotate: 0deg; /* Keine Rotation */
offset-rotate: 45deg; /* Manuell definierte Rotation */
/* 8. opacity */
/* Bestimmt die Durchsichtigkeit eines Elements. */
opacity: 0; /* Unsichtbar */
opacity: 0.5; /* Halb-transparent */
opacity: 1; /* Nicht durchscheinend */
/* 9. order */
/* Definiert die Reihenfolge eines Elements in einem flexiblen Container. */
order: 0; /* Standardreihenfolge */
order: -1; /* Negativer Index */
order: 1; /* Positiver Index */
/* 10. outline */
/* Kombiniert verschiedene Outline-Eigenschaften (Stil, Breite, Farbe). */
outline: none; /* Keine Kontur */
outline: 2px solid blue; /* Umriss mit fester Breite und Farbe */
/* 11. outline-color */
/* Legt die Farbe des Umrisses fest. */
outline-color: transparent; /* Unsichtbar */
outline-color: red; /* Rot */
outline-color: blue; /* Blau */
/* 12. outline-offset */
/* Bestimmt den Abstand zwischen dem Element und dem Umriss. */
outline-offset: 0px; /* Kein Abstand */
outline-offset: 4px; /* Abstand in Pixeln */
/* 13. outline-style */
/* Definiert den Stil des Umrisses. */
outline-style: none; /* Kein Umriss */
outline-style: dotted; /* Gepunktet */
outline-style: dashed; /* Gestrichelt */
outline-style: solid; /* Durchgezogene Linie */
/* 14. outline-width */
/* Gibt die Breite des Umrisses an. */
outline-width: thin; /* Dünn */
outline-width: medium; /* Mittel */
outline-width: thick; /* Dick */
/* 15. overflow */
/* Steuerung, wie Inhalte, die den Container überschreiten, dargestellt werden. */
overflow: visible; /* Inhalt wird angezeigt */
overflow: hidden; /* Inhalt wird ausgeblendet */
overflow: scroll; /* Scroll-Leisten werden hinzugefügt */
overflow: auto; /* Automatische Scroll-Leisten */
/* 16. overflow-anchor */
/* Verhindert unerwünschte Layout-Verschiebungen bei Änderungen. */
overflow-anchor: auto; /* Standardverhalten */
overflow-anchor: none; /* Kein Andockpunkt */
/* 17. overflow-wrap */
/* Kontrolliert den Zeilenumbruch von Text. */
overflow-wrap: normal; /* Kein automatischer Umbruch */
overflow-wrap: break-word; /* Umbruch bei langen Wörtern */
/* 18. overflow-x */
/* Steuert das horizontale Überlaufen des Inhalts. */
overflow-x: visible; /* Sichtbar */
overflow-x: hidden; /* Versteckt */
overflow-x: scroll; /* Scroll-Leiste */
overflow-x: auto; /* Automatisch */
/* 19. overflow-y */
/* Steuert das vertikale Überlaufen des Inhalts. */
overflow-y: visible; /* Sichtbar */
overflow-y: hidden; /* Versteckt */
overflow-y: scroll; /* Scroll-Leiste */
overflow-y: auto; /* Automatisch */
/* 1. offset-inline */
/* Definiert das Offset des Inline-Bereichs eines Elements. */
offset-inline: auto;
offset-inline: 10px;
/* 2. offset-block */
/* Definiert das Offset des Block-Bereichs eines Elements. */
offset-block: auto;
offset-block: 15px;
/* 3. overflow-clip-margin */
/* Gibt den inneren Rand an, der für das Clipping verwendet wird. */
overflow-clip-margin: 0px;
overflow-clip-margin: content-box;
/* 4. overscroll-behavior */
/* Kontrolliert, wie ein Überziehen einer Scroll-Leiste behandelt wird. */
overscroll-behavior: auto;
overscroll-behavior: contain;
overscroll-behavior: none;
/* 5. overscroll-behavior-x */
/* Kontrolliert das Verhalten nur für die horizontale Scrollrichtung. */
overscroll-behavior-x: auto;
overscroll-behavior-x: contain;
overscroll-behavior-x: none;
/* 6. overscroll-behavior-y */
/* Kontrolliert das Verhalten nur für die vertikale Scrollrichtung. */
overscroll-behavior-y: auto;
overscroll-behavior-y: contain;
overscroll-behavior-y: none;
P, Q
padding: 10px;
padding-block: 1rem;
padding-bottom: 15px;
padding-inline: 0.5em;
padding-left: 20px;
padding-right: 25px;
padding-top: 10px;
paint-order: fill;
paint-order: markers;
paint-order: stroke;
page-break-after: always;
page-break-before: avoid;
page-break-inside: auto;
perspective: 1000px;
perspective-origin: top left;
perspective-origin-x: 20%;
perspective-origin-y: 10%;
place-content: space-between center;
place-items: end;
place-self: center auto;
place-self: start center;
pointer-events: none;
position: absolute;
position: fixed;
position: relative;
position: sticky;
print-color-adjust: economy;
print-color-adjust: exact;
quotes: "«" "»";
R
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
right: 0;
right: 20px;
right: auto;
rotate: 0deg;
rotate: 45deg;
rotate: -90deg;
row-gap: 0;
row-gap: 1.5em;
row-gap: 20px;
S
scale: 1;
scale: 1.2;
scale: 0.8;
scroll-behavior: auto;
scroll-behavior: smooth;
scroll-margin: 0px;
scroll-margin: 20px;
scroll-margin-block: 0px;
scroll-margin-block: 1em;
scroll-margin-inline: 0px;
scroll-margin-inline: 0.5em;
scroll-padding: 0px;
scroll-padding: 15px;
scroll-padding-block: 0px;
scroll-padding-block: 0.5em;
scroll-padding-inline: 0px;
scroll-padding-inline: 10px;
scroll-snap-align: none;
scroll-snap-align: start;
scroll-snap-align: center;
scroll-snap-align: end;
scroll-snap-stop: normal;
scroll-snap-stop: always;
scroll-snap-type: none;
scroll-snap-type: x mandatory;
scroll-snap-type: y proximity;
scroll-snap-type: block;
scrollbar-color: auto;
scrollbar-color: #f0f0f0 #333;
scrollbar-color: dark grey;
scrollbar-width: auto;
scrollbar-width: thin;
scrollbar-width: none;
shape-image-threshold: 0.0;
shape-image-threshold: 0.5;
shape-image-threshold: 1.0;
shape-margin: 0;
shape-margin: 10px;
shape-outside: none;
shape-outside: circle(50%);
shape-outside: margin-box;
shape-outside: inset(10%);
shape-outside: polygon(0 0, 100% 0, 50% 100%);
T
tab-size: 2;
tab-size: 4;
table-layout: auto;
table-layout: fixed;
text-align: center;
text-align: justify;
text-align: left;
text-align: right;
text-align-last: auto;
text-align-last: start;
text-align-last: end;
text-combine-upright: none;
text-combine-upright: all;
text-decoration: none;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-decoration-color: red;
text-decoration-color: blue;
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline underline;
text-decoration-line: line-through;
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;
text-emphasis: none;
text-emphasis: filled;
text-emphasis: open;
text-emphasis-color: orange;
text-emphasis-color: black;
text-emphasis-position: over right;
text-emphasis-position: under right;
text-emphasis-position: under left;
text-emphasis-style: dot;
text-emphasis-style: circle;
text-emphasis-style: sesame;
text-indent: 0;
text-indent: 20px;
text-indent: 10%;
text-justify: none;
text-justify: auto;
text-justify: inter-word;
text-justify: distribute;
text-orientation: mixed;
text-orientation: upright;
text-orientation: sideways;
text-orientation: sideways-right;
text-overflow: clip;
text-overflow: ellipsis;
text-rendering: auto;
text-rendering: optimizeSpeed;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
text-shadow: none;
text-shadow: 1px 1px 2px black;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-underline-offset: 1px;
text-underline-offset: 2px;
top: 0;
top: 10px;
top: 50%;
top: auto;
transform: none;
transform: translateX(50%);
transform: rotate(45deg);
transform: scale(1.2);
transform-box: content-box;
transform-box: border-box;
transform-box: fill-box;
transform-origin: center;
transform-origin: top left;
transform-origin: 50% 50%;
transform-style: flat;
transform-style: preserve-3d;
transition: none;
transition: all 0.3s ease-in-out;
transition: background-color 0.5s ease-in;
transition-delay: 0s;
transition-delay: 0.5s;
transition-delay: 1s;
transition-duration: 0s;
transition-duration: 1s;
transition-duration: 2s;
transition-property: none;
transition-property: all;
transition-property: background-color;
transition-timing-function: linear;
transition-timing-function: ease;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
U, V, W
unicode-bidi: normal;
unicode-bidi: embed;
unicode-bidi: isolate;
unicode-bidi: bidi-override;
user-select: none;
user-select: text;
user-select: all;
user-select: auto;
vertical-align: baseline;
vertical-align: middle;
vertical-align: sub;
vertical-align: super;
vertical-align: top;
vertical-align: bottom;
visibility: visible;
visibility: hidden;
visibility: collapse;
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-line;
white-space: pre-wrap;
widows: 1;
widows: 2;
width: auto;
width: 80%;
width: 100vw;
will-change: auto;
will-change: scroll-position;
will-change: transform;
will-change: opacity;
word-break: normal;
word-break: break-all;
word-break: break-word;
word-break: keep-all;
word-spacing: normal;
word-spacing: 0px;
word-spacing: 5px;
word-wrap: normal;
word-wrap: break-word;
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;
X, Y, Z
z-index: -1;
z-index: 0;
z-index: 10;
z-index: auto;
zoom: 1;
zoom: 1.2;
zoom: 0.8;
Kontakt
Fehler gefunden?
Wenn Sie Fehler gefunden haben: Nehmen Sie einfach Kontakt auf und erwähnen Sie "Fehler auf Webseite" im Betreff. Natürlich freuen wir uns, wenn im Betreff mehr steht, um die Mail gleich besser zuordnen zu können.
Redaktion
Unsere eigenen Dokumentationen für CSS beziehen sich im Schwerpunkt auf Komponenten von webbasierten Softwarelösungen.
Fußnoten
font-size, line-height, letter-spacing, text-transform, color, visibility, text-align, box-sizing, overflow, white-space, float, clear, position, display, flex, grid Viewport
2
Animation:
UIO3 Es ist einfacher als Du denkst.
Stelle noch heute Deine Anfrage.