HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

CSS -Tutorial

CSS-Startseite CSS-Einführung CSS-Syntax CSS-Selektoren CSS-Anleitung CSS-Kommentare CSS-Farben
Farben RGB VERHEXEN HSL
CSS-Hintergründe
Hintergrundfarbe Hintergrundbild Hintergrund Wiederholung Hintergrundanhang Hintergrund Kurzschrift
CSS-Grenzen
Grenzen Rahmenbreite Randfarbe Grenzseiten Grenzkurzschrift Abgerundete Ränder
CSS-Ränder
Ränder Margin Collapse
CSS-Padding CSS-Höhe/Breite CSS-Box-Modell CSS-Gliederung
Outline Outline Width Outline Color Outline Shorthand Outline Offset
CSS-Text
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
CSS-Schriftarten
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
CSS-Icons CSS-Links CSS-Listen CSS-Tabellen
Table Borders Table Size Table Alignment Table Style Table Responsive
CSS-Anzeige CSS Max-Breite CSS-Position CSS Z-Index CSS-Überlauf CSS-Float
Float Clear Float Examples
CSS Inline-Block CSS-Ausrichtung CSS-Kombinatoren CSS Pseudo-Klasse CSS Pseudo-Element CSS-Opazität CSS-Navigationsleiste
Navbar Vertical Navbar Horizontal Navbar
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
Linear Gradients Radial Gradients Conic Gradients
CSS-Schatten
Shadow Effects Box Shadow
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
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
Größe von CSS-Boxen CSS-Medienabfragen CSS MQ-Beispiele CSS-Flexbox
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

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

❮ Vorherige Nächste ❯

CSS unterstützt mehr als 140 Farbnamen, HEX-Werte, RGB-Werte , RGBA-Werte, HSL-Werte, HSLA-Werte und Deckkraft.

RGBA-Farben

RGBA-Farbwerte sind eine Erweiterung von RGB-Farbwerten mit einem Alphakanal, der die Deckkraft einer Farbe angibt.

Ein RGBA-Farbwert wird angegeben mit: rgba(red, green, blue, alpha). Der Alpha-Parameter ist eine Zahl zwischen 0,0 (vollständig transparent) und 1,0 (vollständig undurchsichtig).

rgba (255, 0, 0, 0,2);
rgba (255, 0, 0, 0,4);
rgba (255, 0, 0, 0,6);
rgba (255, 0, 0, 0,8);

Das folgende Beispiel definiert verschiedene RGBA-Farben:

Beispiel

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* blue with opacity */

HSL-Farben

HSL steht für Farbton, Sättigung und Helligkeit.

Ein HSL-Farbwert wird angegeben mit: hsl(Farbton, Sättigung, Helligkeit).

  1. Der Farbton ist ein Grad auf dem Farbrad (von 0 bis 360):
    • 0 (oder 360) ist rot
    • 120 ist grün
    • 240 ist blau
  2. Die Sättigung ist ein Prozentwert: 100 % ist die volle Farbe.
  3. Helligkeit ist auch ein Prozentsatz; 0 % ist dunkel (schwarz) und 100 % ist weiß.
hsl(0, 100 %, 30 %);
hsl(0, 100 %, 50 %);
hsl(0, 100 %, 70 %);
hsl(0, 100 %, 90 %);

Das folgende Beispiel definiert verschiedene HSL-Farben:

Beispiel

#p1 {background-color: hsl(120, 100%, 50%);}  /* green */
#p2 {background-color: hsl(120, 100%, 75%);}  /* light green */
#p3 {background-color: hsl(120, 100%, 25%);}  /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);}   /* pastel green */

HSLA-Farben

HSLA-Farbwerte sind eine Erweiterung von HSL-Farbwerten mit einem Alphakanal, der die Deckkraft einer Farbe angibt.

Ein HSLA-Farbwert wird angegeben mit: hsla(Farbton, Sättigung, Helligkeit, Alpha), wobei der Alpha-Parameter die Deckkraft definiert. Der Alpha-Parameter ist eine Zahl zwischen 0,0 (vollständig transparent) und 1,0 (vollständig undurchsichtig).

hsla (0, 100 %, 30 %, 0,3);
hsla (0, 100 %, 50 %, 0,3);
hsla (0, 100 %, 70 %, 0,3);
hsla (0, 100 %, 90 %, 0,3);

Das folgende Beispiel definiert verschiedene HSLA-Farben:

Beispiel

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* pastel green with opacity */

Opazität

Die CSS opacity-Eigenschaft legt die Deckkraft für das gesamte Element fest (sowohl Hintergrundfarbe als auch Text sind undurchsichtig/transparent).

Der opacityEigenschaftswert muss eine Zahl zwischen 0,0 (vollständig transparent) und 1,0 (vollständig undurchsichtig) sein.

RGB (255, 0, 0); Deckkraft: 0,2;
RGB (255, 0, 0); Deckkraft: 0,4;
RGB (255, 0, 0); Deckkraft: 0,6;
RGB (255, 0, 0); Deckkraft: 0,8;

Beachten Sie, dass der obige Text auch transparent/undurchsichtig ist!

Das folgende Beispiel zeigt verschiedene Elemente mit Opazität:

Beispiel

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* red with opacity */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* green with opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* blue with opacity */

Testen Sie sich mit Übungen

Übung:

Fügen Sie den RGBA-Farbwert für eine volle rote Hintergrundfarbe des <h1>-Elements ohne Transparenz ein.

<style>
h1 {
  background-color: ;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>


❮ Vorherige Nächste ❯