CSS (Cascading Style Sheets)

Cascading Style Sheets (CSS) ist eine Stylesheet-Sprache für elektronische Dokumente und zusammen mit HTML eine der Kernsprachen des World Wide Webs. Sie wird vom World Wide Web Consortium (W3C) beständig weiterentwickelt. Mit CSS werden Gestaltungsanweisungen erstellt, die vor allem zusammen mit der Auszeichnungssprachen HTML eingesetzt werden.

Quelle: Wikipedia

Aufbau von Stylesheets

In CSS sind Properties innerhalb von Regeln organisiert. Eine Regel besteht aus einem Selektor, gefolgt von einem Bereich welcher durch geschweifte Klammern begrenzt wird ("{" und "}"). Innerhalb der geschweiften Klammern können beliebig viele (mindestens eine) Property-Wert-Zuweisungen vorgenommen werden. Jede Zuweisung muss durch einen Strichpunkt (";") beendet werden. Dasselbe Property darf innerhalb einer Regel nur einmal verwendet werden.

In CSS können mehrzeilige C-Style Kommentare verwendet werden. Alles was zwischen den Zeichenkombinationen "/*" und "*/" steht wird vom Browser ignoriert.

CSS-Dateien haben die Endung .css. 

/* Kommentar */

selektor {
        
    property1: WERT;
    
    property2: WERT;
    
    /* ... */
    
}
Stylesheets

Es gibt drei Möglichkeiten Stylesheets in eine HTML-Seite einzubinden. Über das Style-Attribut können Properties für jeden Tag einzeln gesetzt werden (inline). Der Style-Tag erlaubt es Properties über Selektoren für die Gesamte Seite zu definieren. Außerdem kann durch den Link-Tag eine externe CSS-Datei eingebunden werden. 

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <title>Seite</title>
    <link rel="stylesheet" href="stylesheet.css">
    <style>
        h1 {
            font-size: 24px;
        }
    </style>
</head>
<body>
    <h1>Kapitel</h1>
    <p style="font-size: 16px;">Text</p>
</body>
</html>
Einbindung von Stylesheets in HTML
Tag Beschreibung Attribut
Bezeichnung Beschreibung Werte
<link> Stellt eine Beziehung (Link) zu einer externen Datei her href Absolute oder Relative URL URL
integrity Checksumme für externe Ressourcen HASH
media Stylesheets auf ein bestimmtes Medium einschränken all, screen, print, MEDIAQUERIES
rel Art der Beziehung stylesheet
type Typ text/css
<style></style> Definiert Stylesheets für die gesamte Seite media Stylesheets auf ein bestimmtes Medium einschränken all, screen, print, MEDIAQUERIES
type Typ text/css
Tags zur Einbindung von Stylesheets

Selektoren

Mit dem Selektor wird bestimmt bei welchen Elementen betimmte Properties gesetzt werden sollen. Mehrere Selektoren können Gruppiert (,) bzw. miteinander verknüpft werden.

Selektor Beschreibung
* Universal-Selektor, alle Tags
ELEMENT Typ-Selektor, alle Tags des gleichen Typs
.CLASS Klassen-Selektor, alle Tags einer Klasse
#ID ID-Selektor, Tag mit einer spezifischen eindeutigen Id
SELEKTOR1, SELEKTOR2 Mehrere unterschiedliche Selektoren
ELEMENT1 ELEMENT2 Alle ELEMENT2-Tags die sich (direkt oder indirekt) in ELEMENT1-Tags befinden
ELEMENT1 > ELEMENT2 Alle ELEMENT2-Tags die sich direkt in ELEMENT1-Tags befinden
ELEMENT1 ~ ELEMENT2 Alle ELEMENT2-Tags die (direkt oder indirekt) einem ELEMENT1-Tag nachfolgen
ELEMENT1 + ELEMENT2 Alle ELEMENT2-Tags die direkt einem ELEMENT1-Tag nachfolgen
& SELEKTOR1 Parent-Selektor in nested Rules
Liste von einfachen Selektoren und Möglichkeiten der Gruppierung bzw. Verknüpfung
Selektor Beschreibung
[attr] Attribut-Selektor
[attr=value] Attribut-Selektor mit Wert
[attr~=value] Attribut-Selektor mit einer durch Leerzeichen getrennten Liste von Werten
[attr^=value] Attributwert beginnt mit value
[attr$=value] Attributwert endet mit value
[attr*=value] Attributwert enthält value
Liste von Attribut-Selektoren

Pseudo-Klassen

Selektor Beschreibung
:active Element wurde angeklickt und Aktion wird ausgeführt
:empty Leere Elemente (auch kein Text/Whitespace)
:first-child Erstes Kindelement
:first-of-type Erstes Kindelement eines Typs
:hover Maus über Element
:lang() Sprache des Elements
:last-child Letztes Kindelement
:last-of-type Letztes Kindelement eines Typs
:link, :visited Nicht-Besuchte und Besuchte Links
:not() Negation eines Selektors
:nth-child(), :nth-last-child() N-tes Kindelement (even = gerade, odd = ungerade)
:nth-of-type(), :nth-last-of-type() N-tes Kindelement eines Typs (even = gerade, odd = ungerade)
:only-child Einziges Kindelement
:only-of-type Einziges Kindelement eines Typs
:root Root-Element
:target Element-ID in URL-Fragment (#id)
Liste von Pseudo-Klassen

Pseudo-Elemente

Selektor Beschreibung
::after, ::before Bereich vor oder nach einem Element
::cue Video-Untertitel
::first-letter, ::first-line Erste(s) Zeichen/Zeile eines Textes
::selection Ausgewählter Text
Liste von Pseudo-Elementen

Spezifität

Wenn ein CSS-Selektor mehrfach im Dokument steht gibt es einen Konflikt. In diesem Fall interpretiert der Browser immer die zuletzt notierte Regel. Eine im Stylesheet weiter unten notierte Regel überschreibt also alle zuvor notierten identischen Selektoren.

Eine CSS-Regel wird nur dann von einer weiter unten notierten Regel überschrieben, wenn beide Selektoren identisch sind und das gleiche "Gewicht" haben. Jede Art von Selektor hat ein über ein Punkte-System festgelegtes Gewicht das nicht verändert werden kann. Das Gewicht des gesamten CSS-Selektors wird über die addierten Punkte der einzelnen Bestandteile ermittelt. Der Browser wendet im Konfliktfall immer die Regel mit dem höchsten Gewicht, also der höchsten Punkte-Anzahl an, auch wenn diese Regel weiter oben im Quellcode steht. Dieses Verhalten nennt man Spezifität.

Selektor-Art Beispiel Punkte
Universal-Selektor * 0
einfacher Typ-Selektor p 1
Klasse .infobox 10
Attribut-Selektor [for] 10
Pseudo-Klasse :hover 10
Pseudo-Element ::first-letter 10
ID #abc123 100
inline Style-Attribut style="color: red;" 1000
Punkteverteilung nach CSS-Spezifikation

Farben

RGB- und HSL-Farbmodell
RGB- und HSL-Farbmodell

Im Web werden Farben entweder durch einen von 140 Farbenbezeichnungen oder durch einen 24-Bit Farbwert dargestellt. Der Farbwert beginnt mit einem "#"-Zeichen gefolgt von jeweils einer zweistelligen Hexadezimalzahl für die drei Bytes welche den Wert für Rot, Grün und Blau darstellen. Daraus ergeben sich über 16 Millionen Farben. Desweiteren gibt es eine CSS Funktion rgb() und eine CSS Funktion rgba() für 32-Bit Farbwerte (Rot, Grün, Blau + Alpha Transparenz). Alternativ können Farben durch die Funktionen hsl() und hsla() mit Farbton (0-360), Sättigung und Helligkeit angegeben werden. 

.colors {
    background-color: black;
    color: #FF0000;
}

.rgb {
    background-color: rgb(255, 0, 0);
    color: rgba(255, 0, 0, 0.5);
}

.hsl {
    background-color: hsl(180, 100%, 50%);
    color: hsla(180, 100%, 50%, 0.5);
}
Zusammensetzung von Farbwerten
  aliceblue   antiquewhite   aqua   aquamarine
  azure   beige   bisque   black
  blanchedalmond   blue   blueviolet   brown
  burlywood   cadetblue   chartreuse   chocolate
  coral   cornflowerblue   cornsilk   crimson
  cyan   darkblue   darkcyan   darkgoldenrod
  darkgray   darkgreen   darkgrey   darkkhaki
  darkmagenta   darkolivegreen   darkorange   darkorchid
  darkred   darksalmon   darkseagreen   darkslateblue
  darkslategray   darkslategrey   darkturquoise   darkviolet
  deeppink   deepskyblue   dimgray   dimgrey
  dodgerblue   firebrick   floralwhite   forestgreen
  fuchsia   gainsboro   ghostwhite   goldenrod
  gold   gray   green   greenyellow
  grey   honeydew   hotpink   indianred
  indigo   ivory   khaki   lavenderblush
  lavender   lawngreen   lemonchiffon   lightblue
  lightcoral   lightcyan   lightgoldenrodyellow   lightgray
  lightgreen   lightgrey   lightpink   lightsalmon
  lightseagreen   lightskyblue   lightslategray   lightslategrey
  lightsteelblue   lightyellow   lime   limegreen
  linen   magenta   maroon   mediumaquamarine
  mediumblue   mediumorchid   mediumpurple   mediumseagreen
  mediumslateblue   mediumspringgreen   mediumturquoise   mediumvioletred
  midnightblue   mintcream   mistyrose   moccasin
  navajowhite   navy   oldlace   olive
  olivedrab   orange   orangered   orchid
  palegoldenrod   palegreen   paleturquoise   palevioletred
  papayawhip   peachpuff   peru   pink
  plum   powderblue   purple   rebeccapurple
  red   rosybrown   royalblue   saddlebrown
  salmon   sandybrown   seagreen   seashell
  sienna   silver   skyblue   slateblue
  slategray   slategrey   snow   springgreen
  steelblue   tan   teal   thistle
  tomato   turquoise   violet   wheat
  white   whitesmoke   yellow   yellowgreen
  transparent   currentColor  
Farbnamen

Text

Property Beschreibung Wert
color Text-/Fordergrund-Farbe FARBWERT, FARBNAME, rgb(), rgba(), hsl(), hsla()
font Shorthand-Property für Schriften (Feste Reihenfolge: [STYLE] [WEIGHT] SIZE FAMILY) Bsp.: font: italic bold 10pt sans-serif;
font-family Schriftart Bsp.: font-family: Arial, sans-serif;
font-size Schriftgröße MASSEINHEIT
font-style Schriftstil normal, italic, oblique
font-weight Schriftdicke (normal = 400, bold = 700) normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900
line-height Zeilenhöhe MASSEINHEIT
letter-spacing Zeichenabstand MASSEINHEIT
text-align Textausrichtung left, center, right, justify
text-decoration Text unterstreichen, durchstreichen etc. none, underline, line-through
text-overflow Text welcher über das Element hinausgeht abschneiden (clip) oder mit "..." abkürzen (ellipsis) clip, ellipsis
text-transform Groß- und Kleinschreibung beeinflussen none, capitalize, uppercase, lowercase
vertical-align Vertikale Ausrichtung baseline, sub, super, text-top, text-bottom, middle, top, bottom
white-space Darstellung von Whitespaces normal, nowrap, pre, pre-wrap
Schriftproperties

Webschriften

Es gibt drei Standard-Schriftbezeichnungen: serif, sans-serif, monospace. Diese stehen jeweils für die Browsereinstellung des Systems für eine Schrift mit Serifen (Bsp.: Times New Roman), ohne Serifen (Bsp.: Arial) und mit fester Zeichenbreite (Bsp.: Courier New). Ihre Verwendung ist demnach unabhängig von den tatsächlich auf dem System installierten Schriften.

Die angegebene Schrift muss auf dem System des Browsers vorhanden sein. Es kann eine Liste von Schriftarten angegeben werden und der Browser verwendet, von links nach rechts, die erste auf dem System vorhandene Schriftart.

Mit der At-Regel @font-face lassen sich Schriftarten an den Browser ausliefern. Jede Variante (Bold, Italic, Regular, Bold+Italic) derselben Schriftart muss mit einer eigenen @font-face-Regel unter demselben Namen registriert werden. Es muss mindestens eine Datei mit dem entsprechenden Format angegeben werden. Mit local() kann auf eine bereits installierte Schriftart verwiesen werden. 

@font-face {
    font-family: 'Source Sans Pro';
    font-weight: 400;
    font-style: italic;
    src: local('Source Sans Pro'),
         url('SourceSansPro-It.woff') format('woff');
}
Einbindung von Webschriften
Format Dateiendung Beschreibung Browser
truetype (TrueType Font) .ttf Standard von Microsoft und Apple, nicht speziell für Webschriften
opentype (OpenType Font) .otf Erweiterung von TrueType von Microsoft und Adobe, nicht speziell für Webschriften
woff, woff2 (Web Open Font Format) .woff, .woff2 Komprimierendes Containerformat für Webschriften (W3C Standard)
Liste von Dateiformaten für Webschriften

Hintergründe und Farbverläufe

Property Beschreibung Wert
background Shorthand-Property für Hintergründe Bsp.: background: #000000 url('bg.jpg') repeat;
background-attachment Hintergrundbild mitscrollen (scroll) oder nicht (fixed) scroll, fixed
background-color Hintergrundfarbe FARBWERT, FARBNAME, rgb(), rgba(), hsl(), hsla()
background-image Hintergrundbild url(), linear-gradient(), radial-gradient(), conic-gradient()
background-position Position des Hintergrundbildes MASSEINHEIT, top, bottom, left, right, center
background-repeat Hintergundbild kacheln no-repeat, repeat, repeat-x, repeat-y
background-size Hintergrundbildgröße MASSEINHEIT, auto, contain, cover
Backgroundproperties
linear radial radial 
/* linear-gradient(<WINKEL>, <FARBWERT> [BEGINN], ...) */
background-image: linear-gradient(to bottom, white, dodgerblue);

/* radial-gradient(<FARBWERT> [BEGINN], ...) */
background-image: radial-gradient(gold, red);

/* conic-gradient([WINKEL], <FARBWERT> [WINKEL], ...) */
background-image: conic-gradient(red, orange, yellow, green);
Farbverläufe

Einheiten

Einheit Bezeichnung Vergleich
px Pixel ein Bildpunkt auf dem Display
in Zoll 1in = 96px
cm, mm Zentimeter, Millimeter 2.54cm = 25.4mm = 1in = 96px
pt Punkte 3pt = 4px
em, rem Schriftgröße 2em = Element-Schriftgröße × 2
3.5rem = Root-Element-Schriftgröße × 3,5
% Prozent ∅
deg Winkel in Grad Voller Kreis = 360deg
rad Winkel in Bogenmaß 1rad = 180/π
s, ms Sekunden, Millisekunden 1s = 1000ms
vh, vw Viewport-Höhe und Viewport-Breite 1/100
Liste von Maßeinheiten in CSS

Box-Model

box-model
Box-Model
Property Beschreibung Wert
clear Umfließen beenden none, left, right, both
box-sizing Legt die Bemessung der Breite und Höhe fest content-box, border-box
display Box-Typ festlegen none, inline, block, inline-block, flex, inline-flex
float Element umfließen lassen none, left, right
overflow, overflow-x, overflow-y Bestimmt das Verhalten wenn der inhalt nicht in das Element passt visible, hidden, scroll, auto
position Art der Positionierung absolute, fixed, relative, static, sticky
width, height Breite und Höhe MASSEINHEIT
max-width, max-height, min-width, min-height Maximale oder minimale Breite und Höhe MASSEINHEIT
bottom, left, right, top Absolute oder relative Position abhängig von position Property MASSEINHEIT
Box-Model-Properties
Property Beschreibung Wert
margin Shorthand-Property für Außenabstand MASSEINHEIT
margin-bottom, margin-left, margin-right, margin-top Außenabstand MASSEINHEIT
padding Shorthand-Property für Innenabstand MASSEINHEIT
padding-bottom, padding-left, padding-right, padding-top Innenabstand MASSEINHEIT
Abstand-Properties

Rahmen

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
Rahmen für Tabellen
Property Beschreibung Wert
border Shorthand-Property für Rahmen Bsp.: border: 1px solid black;
border-bottom, border-left, border-right, border-top Rahmen Bsp.: border-left: 1px dotted black;
border-color, border-bottom-color, border-left-color, border-right-color, border-top-color Rahmenfarbe FARBWERT, FARBNAME, rgb(), rgba(), hsl(), hsla()
border-radius, border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius Abgerundete Rahmen MASSEINHEIT
border-style, border-bottom-style, border-left-style, border-right-style, border-top-style Rahmenstil none, dotted, dashed, solid, double, groove, ridge, inset, outset
border-width, border-bottom-width, border-left-width, border-right-width, border-top-width Rahmenbreite MASSEINHEIT, thin, medium, thick
Rahmen-Properties

Tabellen

Property Beschreibung Wert
border-collapse Tabellenzellen mit eigenem Rahmen (separate) oder nur ein Rahmen zwischen den Zellen (collapse) collapse, separate
border-spacing Innerer Rahmenabstand zwischen Tabellenzellen MASSEINHEIT
caption-side Position des Tabellentitels bottom, top
table-layout Legt den Algorithmus zur Ermittlung der Zellenbreite von Tabellen fest auto, fixed
Tabellen-Properties

Listen

ol li {
    list-style-type: lower-roman;
}
Property zum Festlegen eines Listentyps
Property Beschreibung Wert
list-style Shorthand-Property für Listenstil Bsp.: list-style: square;
list-style-image Bild als Listenaufzählungszeichen url(), none
list-style-position Position des Listenaufzählungszeichens inside, outside
list-style-type Listenaufzählungszeichen TEXT, disc, circle, square, decimal, decimal-leading-zero, lower-alpha, upper-alpha, lower-roman, upper-roman, lower-latin, upper-latin, none
Listen-Properties

Cursor, Content und Counter

Property Beschreibung Wert
cursor Darstellung des Mauszeigers (Bildateien dürfen max. 32×32 Pixel groß sein und es muss eine Alternative als Fallback angegeben werden, Bsp.: cursor: url('hand.png'), pointer;) url(), auto, crosshair, default, move, text, wait, help, n-resize, e-resize, s-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize, pointer, progress, not-allowed, no-drop, vertical-text, all-scroll, col-resize, row-resize, alias, cell, copy, ew-resize, ns-resize, nesw-resize, nwse-resize, none, inherit
Cursor-Property
body {
    counter-reset: ebene1;
}
h1::before {
    content: counter(ebene1, upper-roman) " ";
    counter-increment: ebene1;
}
Content und Counter
Property Beschreibung Wert
counter-increment Counter hochzählen COUNTERNAME [WERT]
counter-reset Setzt einen Counter (zurück) COUNTERNAME [WERT]
content Fügt Inhalt vor (::before) oder nach (::after) einem Element TEXT, url(), counter(name, style), attr(name), open-quote, close-quote, no-open-quote, no-close-quote
quotes Legt die Zeichen für open-quote bzw. close-quote fest Bsp.: quotes: '\201e' '\201C' '‚' '‘';
Content-Properties

Flexbox

Wenn das display-Property eines Elementes auf flex oder inline-flex gesetzt wird, wird dieses Element zu einem Flex-Container. Die Elemente direkt in diesem Container werden zu Flex-Items.

RGB
Flexbox
#container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
    row-gap: 2em;
    & img {
        height: 160px;
    }
}
Flexbox CSS
<!DOCTYPE html>
<div id="container">
    <img src="images/WWW_logo_and_wordmark.svg" alt="WWW">
    <img src="images/HTML5_logo_and_wordmark.svg" alt="HTML5">
    <img src="images/CSS3_logo_and_wordmark.svg" alt="CSS3">
    <img src="images/JS_logo_and_wordmark.svg" alt="JS">
</div>
Flexbox HTML
Property Beschreibung Wert
align-content Ausrichtung von umgebrochenen Flex-Items (cross axis) stretch, center, flex-start, flex-end, start, end, space-between, space-around, space-evenly
align-items Ausrichtung der Flex-Items (cross axis) stretch, center, flex-start, flex-end, start, end
flex Shorthand-Property für flex-grow, flex-shrink und flex-basis 0 1 auto
flex-basis Basisgröße eines Flex-Items MASSEINHEIT, auto
flex-direction Ausrichtung des Flex-Containers row, row-reverse, column, column-reverse
flex-grow Vergrößerung von Flex-Items 0, 1, 2, 3, ...
flex-shrink Verkleinerung von Flex-Items 0, 1, 2, 3, ...
flex-wrap Flex-Items umbrechen wenn nicht genug Platz vorhanden nowrap, wrap
gap Shorthand-Property für Zeilen- und Spaltenabstände MASSEINHEIT
column-gap Spaltenabstand MASSEINHEIT
row-gap Zeilenabstand MASSEINHEIT
justify-content Ausrichtung der Flex-Items (main axis) flex-start, flex-end, center, space-between, space-around, space-evenly, start, end, left, right
order Reihenfolge der Flex-Items ..., -1, 0, 1, 2, 3, ...
Flexbox-Properties

Schatteneffekte

Property Beschreibung Wert
box-shadow Schatten Bsp.: box-shadow: inset 0 0 8px darkgray;
text-shadow Textschatten Bsp.: text-shadow: 2px 2px 2px #333333;
Schatten-Properties
box-shadow
box-shadow inset
text-shadow
/* box-shadow: [inset] <OFFSETX> <OFFSETY> [BLUR] [FARBWERT] */
   box-shadow: inset   5em       1em              gold;
   box-shadow:         12px      12px      4px    black;

/* text-shadow: <OFFSETX> <OFFSETY> [BLUR] [FARBWERT] */
   text-shadow: 2px       2px       2px    #333333;
   text-shadow: 3px       3px              rgb(255, 0, 0);
Schatten

Filter-Effekte und Transformationen

Property Beschreibung Wert
filter Wendet eine oder mehrere Filterfunktionen an blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), saturate(), sepia()
transform Mit Whitespace getrennte Liste von Transformationsfunktionen matrix(), translate(), scale(), rotate(), skew(), none
transform-origin Ausgangspunkt der Transformation XOFFSET, YOFFSET, left, right, top, bottom, center
Filter-/Transform-Properties

Transitionen

.box {
    display: block;
    width: 100px;
    height: 100px;
    background-color: #0000ff;
    transition: width 2s, height 2s, background-color 2s;
}

.box:hover {
    background-color: #ffcccc;
    width: 200px;
    height: 200px;
}
Transition-Property
Property Beschreibung Wert
transition Shorthand-Property für Transitions Bsp.: transition: width 2s, height 2s, background-color 2s;
transition-delay Zeitverzögerung der Transition ZEITEINHEIT
transition-duration Zeitlänge der Transition ZEITEINHEIT
transition-property Transition auf bestimmte Properties einschränken PROPERTY, all
transition-timing-function Beschleunigungskurve der Transition ease, ease-in, ease-out, ease-in-out, linear, step-start, step-end
Transition-Properties

Animationen

@keyframes jump {
    from { top: 180px; }
    50% { top: 0; }
    to { top: 180px; }
}
#thing {
    animation-name: jump;
    animation-duration: 3s;
}
CSS-Animation
Property Beschreibung Wert
animation Shorthand-Property für Animationen Bsp.: animation: jumping 3s linear infinite alternate;
animation-delay Zeitverzögerung bis zum Start der Animation ZEITEINHEIT
animation-direction Richtung der Animation normal, reverse, alternate, alternate-reverse
animation-duration Zeitlänge der Animationen ZEITEINHEIT
animation-iteration-count Anzahl der Wiederholungen infinite, 1, 2, 3, ...
animation-name Namen einer oder mehrerer Animationssequenzen NAME
animation-play-state Animation anhalten/fortsetzen running, paused
animation-timing-function Beschleunigungskurve der Animation ease, ease-in, ease-out, ease-in-out, linear, step-start, step-end
Animation-Properties

Nesting

/* ohne Nesting */
a.fancy-link { color: lime; }
a.fancy-link:hover { color: yellow; }
/* mit Nesting */
a.fancy-link {
    color: lime;
    &:hover { color: yellow; }
}
Verschachtelung von Rules (Nesting)

Weitere At-Rules

@charset "UTF-8";

@import url("base.css");
@import url("screen.css") screen;

@media print {
    a { text-decoration: none; }
    a::after { content: ' (' attr(href) ')'; }
}
At-Regeln
At-Regel Beschreibung
@charset WERT; Definiert den Zeichensatz einer CSS-Datei, der Wert muss in Anführungszeichen geschrieben werden (Bsp.: "UTF-8").
@import url(URL) <MEDIAQUERIES> supports(<MEDIAQUERIES>); Bindet eine CSS-Datei in eine andere externe CSS-Datei ein
@media MEDIAQUERIES { } Schränkt CSS-Regeln durch Media Queries ein
@supports FEATURE { } Prüft ob bestimmte Feature vom Browser unterstützt werden
At-Regeln

Custom Properties

Mit Custom Properties lassen sich für Werte von CSS-Eigenschaften Variablen festlegen und später mit der Funktion var() verwenden. Sie müssen mit zwei Minus-Zeichen beginnen (--). 

:root {
    --primary-color: blue;
    --btn-padding: 10px;
}

button {
    background-color: var(--primary-color);
    padding: var(--btn-padding);
    width: calc(120px + var(--btn-padding))
}
Custom Properties

Vendor Prefixes

Nicht standardisierte Properties, Funktionen und Selektoren werden von den Browserherstellern mit einem Prefix beginnend mit einem Minus-Zeichen (-) versehen um diese zu kennzeichnen. Sollten die Properties, Funktionen oder Selektoren später in den Standard aufgenommen werden, wird das Prefix entfernt. 

img:-webkit-full-screen, img:-moz-full-screen, img:fullscreen {
    -webkit-border-radius: 0;
       -moz-border-radius: 0;
            border-radius: 0;
}
Vendor Prefixes
Webbrowser Prefix
Google Chrome, Apple Safari, Microsoft Edge -webkit-*
Mozilla Firefox -moz-*
Microsoft Edge, Microsoft Internet Explorer -ms-*
Vendor Prefixes

Berechnungen

Funktion Beschreibung Beispiel
calc() Rechenausdruck mit +, -, *, /; Konstanten wie e oder pi können verwendet werden; Vor und nach + oder- muss zwingend ein Leerzeichen geschrieben werden! height: calc(100vh - 20px - var(--foot-height));
clamp() Wert auf eine Ober- und Untergrnze beschränken font-size: clamp(1rem, 2.5vw, 2rem);
max() Größten absoluten Wert ermitteln width: max(20vw, 100px);
min() Kleinsten (auch negativen) absoluten Wert ermitteln width: min(50vw, 200px);
Mathematikfunktionen

Links