CSS -Tutorial

CSS-Startseite CSS-Einführung CSS-Syntax CSS-Selektoren CSS-Anleitung CSS-Kommentare CSS-Farben CSS-Hintergründe CSS-Grenzen CSS-Ränder CSS-Padding CSS-Höhe/Breite CSS-Box-Modell CSS-Gliederung CSS-Text CSS-Schriftarten CSS-Icons CSS-Links CSS-Listen CSS-Tabellen CSS-Anzeige CSS Max-Breite CSS-Position CSS Z-Index CSS-Überlauf CSS-Float CSS Inline-Block CSS-Ausrichtung CSS-Kombinatoren CSS Pseudo-Klasse CSS Pseudo-Element CSS-Opazität CSS-Navigationsleiste CSS-Dropdowns CSS-Bildergalerie CSS-Bild-Sprites CSS-Attribut-Selektoren CSS-Formulare CSS-Zähler CSS-Website-Layout CSS-Einheiten CSS-Spezifität CSS !wichtig CSS-Mathematikfunktionen

CSS-Erweitert

Abgerundete CSS-Ecken CSS-Randbilder CSS-Hintergründe CSS-Farben CSS-Farbschlüsselwörter CSS-Verläufe CSS-Schatten CSS-Texteffekte CSS-Webfonts CSS-2D-Transformationen CSS-3D-Transformationen CSS-Übergänge CSS-Animationen CSS-Tooltips Bilder im CSS-Stil CSS-Bildreflexion CSS-Objektanpassung CSS-Objektposition CSS-Maskierung CSS-Schaltflächen CSS-Paginierung CSS mehrere Spalten CSS-Benutzeroberfläche CSS-Variablen Größe von CSS-Boxen CSS-Medienabfragen CSS MQ-Beispiele CSS-Flexbox

CSS- responsiv

RWD-Einführung RWD-Ansichtsfenster RWD-Rasteransicht RWD-Medienabfragen RWD-Bilder RWD-Videos RWD-Frameworks RWD-Vorlagen

CSS -Raster

Grid-Einführung Grid-Container Rasterelement

CSS -SASS

SASS-Tutorial

CSS- Beispiele

CSS-Vorlagen CSS-Beispiele CSS-Quiz CSS-Übungen CSS-Zertifikat

CSS- Referenzen

CSS-Referenz CSS-Selektoren CSS-Funktionen CSS-Referenz Aural CSS-websichere Schriftarten CSS animierbar CSS-Einheiten CSS PX-EM-Konverter CSS-Farben CSS-Farbwerte CSS-Standardwerte CSS-Browser-Unterstützung

CSS- Farben


Farben werden mit vordefinierten Farbnamen oder RGB-, HEX-, HSL-, RGBA-, HSLA-Werten angegeben.


CSS-Farbnamen

In CSS kann eine Farbe durch Verwendung eines vordefinierten Farbnamens angegeben werden:

Tomate
Orange
DodgerBlau
MediumSeaGreen
Grau
Schieferblau
Violett
Hellgrau

CSS/HTML unterstützt 140 Standardfarbnamen .


CSS-Hintergrundfarbe

Sie können die Hintergrundfarbe für HTML-Elemente festlegen:

Hallo Welt


Der Schmerz selbst ist die Liebe Deshalb kommt es auf die Geringsten an, die unsere normale Praxis erträgt, um die Konsequenzen zu nutzen

Beispiel

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>


CSS-Textfarbe

Sie können die Textfarbe festlegen:

Hallo Welt

Der Schmerz selbst ist die Liebe

Deshalb kommt es auf die Geringsten an, die unsere normale Praxis erträgt, um die Konsequenzen zu nutzen

Beispiel

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

CSS-Rahmenfarbe

Sie können die Farbe der Ränder festlegen:

Hallo Welt

Hallo Welt

Hallo Welt

Beispiel

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

CSS-Farbwerte

In CSS können Farben auch mit RGB-Werten, HEX-Werten, HSL-Werten, RGBA-Werten und HSLA-Werten angegeben werden:

Gleich wie Farbname "Tomate":

RGB(255, 99, 71)
#ff6347
hsl(9, 100 %, 64 %)

Gleich wie Farbname "Tomate", aber 50% transparent:

RGBA (255, 99, 71, 0,5)
HSLA (9, 100 %, 64 %, 0,5)

Beispiel

<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

Erfahren Sie mehr über Farbwerte

In den nächsten Kapiteln erfahren Sie mehr über RGB , HEX und HSL .