CSS handleiding

CSS TUIS CSS Inleiding CSS-sintaksis CSS-keurders CSS Hoe om CSS Kommentaar CSS kleure CSS agtergronde CSS-grense CSS-marges CSS Opvulling CSS Hoogte/Breedte CSS Box Model CSS uiteensetting CSS teks CSS lettertipes CSS-ikone CSS skakels CSS-lyste CSS-tabelle CSS vertoon CSS maksimum breedte CSS posisie CSS Z-indeks CSS oorloop CSS Float CSS Inline-blok CSS Belyn CSS-kombineerders CSS Pseudo-klas CSS Pseudo-element CSS Deursigtigheid CSS-navigasiebalk CSS-aftrekkies CSS Beeldgalery CSS Beeld Sprites CSS Attr keurders CSS-vorms CSS-tellers CSS-webwerfuitleg CSS-eenhede CSS Spesifisiteit CSS !belangrik CSS Wiskunde funksies

CSS Gevorderd

CSS afgeronde hoeke CSS-randbeelde CSS agtergronde CSS kleure CSS-kleur sleutelwoorde CSS Gradiënte CSS Shadows CSS-tekseffekte CSS Web Fonts CSS 2D-transformasies CSS 3D-transformasies CSS-oorgange CSS-animasies CSS Tooltips CSS-stylbeelde CSS-beeldrefleksie CSS-objekpas CSS voorwerp-posisie CSS-maskering CSS-knoppies CSS-paginering CSS veelvuldige kolomme CSS-gebruikerskoppelvlak CSS veranderlikes CSS-boksgrootte CSS-medianavrae CSS MQ Voorbeelde CSS Flexbox

CSS reageer

RWD Inleiding RWD Uitsigpoort RWD-roosteraansig RWD Media Navrae RWD beelde RWD-video's RWD-raamwerke RWD-sjablone

CSS -rooster

Grid Intro Roosterhouer Rooster item

CSS SASS

SASS Tutoriaal

CSS voorbeelde

CSS-sjablone CSS voorbeelde css vasvra CSS Oefeninge CSS-sertifikaat

CSS Verwysings

CSS Verwysing CSS-keurders CSS-funksies CSS Verwysing Gehoor CSS Web veilige lettertipes CSS Animateerbaar CSS-eenhede CSS PX-EM-omskakelaar CSS kleure CSS-kleurwaardes CSS verstekwaardes CSS-blaaierondersteuning

CSS kleure


CSS ondersteun 140+ kleurname, HEX waardes, RGB waardes , RGBA waardes, HSL waardes, HSLA waardes en ondeursigtigheid.


RGBA kleure

RGBA-kleurwaardes is 'n uitbreiding van RGB-kleurwaardes met 'n alfakanaal - wat die ondeursigtigheid vir 'n kleur spesifiseer.

'n RGBA-kleurwaarde word gespesifiseer met: rgba(rooi, groen, blou, alfa). Die alfa-parameter is 'n getal tussen 0.0 (ten volle deursigtig) en 1.0 (ten volle ondeursigtig).

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

Die volgende voorbeeld definieer verskillende RGBA-kleure:

Voorbeeld

#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 Kleure

HSL staan ​​vir Hue, Saturation and Lightness.

'n HSL-kleurwaarde word gespesifiseer met: hsl(kleur, versadiging, ligheid).

  1. Tint is 'n graad op die kleurwiel (van 0 tot 360):
    • 0 (of 360) is rooi
    • 120 is groen
    • 240 is blou
  2. Versadiging is 'n persentasiewaarde: 100% is die volkleur.
  3. Ligte is ook 'n persentasie; 0% is donker (swart) en 100% is wit.
hsl(0, 100%, 30%);
hsl(0, 100%, 50%);
hsl(0, 100%, 70%);
hsl(0, 100%, 90%);

Die volgende voorbeeld definieer verskillende HSL-kleure:

Voorbeeld

#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 kleure

HSLA-kleurwaardes is 'n uitbreiding van HSL-kleurwaardes met 'n alfakanaal - wat die ondeursigtigheid vir 'n kleur spesifiseer.

'n HSLA-kleurwaarde word gespesifiseer met: hsla(hue, saturation, lightness, alpha), waar die alfa-parameter die ondeursigtigheid definieer. Die alfa-parameter is 'n getal tussen 0.0 (ten volle deursigtig) en 1.0 (ten volle ondeursigtig).

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

Die volgende voorbeeld definieer verskillende HSLA-kleure:

Voorbeeld

#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 */

Ondeursigtigheid

Die CSS opacity-eienskap stel die ondeursigtigheid vir die hele element (beide agtergrondkleur en teks sal ondeursigtig/deursigtig wees).

Die opacityeiendomswaarde moet 'n getal tussen 0.0 (ten volle deursigtig) en 1.0 (ten volle ondeursigtig) wees.

rgb(255, 0, 0); ondeursigtigheid:0.2;
rgb(255, 0, 0); ondeursigtigheid:0.4;
rgb(255, 0, 0); ondeursigtigheid:0.6;
rgb(255, 0, 0); ondeursigtigheid:0.8;

Let daarop dat die teks hierbo ook deursigtig/ondeursigtig sal wees!

Die volgende voorbeeld toon verskillende elemente met ondeursigtigheid:

Voorbeeld

#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 */

Toets jouself met oefeninge

Oefening:

Voeg die RGBA-kleurwaarde in vir 'n volle rooi agtergrondkleur van die <h1>-element, sonder deursigtigheid.

<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>