CSS tutoriál

DOMŮ CSS Úvod do CSS Syntaxe CSS Selektory CSS CSS Jak na to Komentáře CSS CSS barvy CSS pozadí Hranice CSS Okraje CSS CSS padding Výška/šířka CSS CSS Box Model obrys CSS Text CSS CSS písma Ikony CSS CSS odkazy CSS seznamy CSS tabulky Zobrazení CSS CSS Max-šířka Pozice CSS CSS Z-index Přetečení CSS CSS Float CSS Inline-block CSS zarovnat CSS kombinátory Pseudotřída CSS Pseudoprvek CSS Neprůhlednost CSS Navigační lišta CSS Rozbalovací seznamy CSS Galerie obrázků CSS CSS obrázkoví skřítci CSS Attr Selectory CSS formuláře Počítadla CSS Rozvržení webu CSS Jednotky CSS Specifičnost CSS CSS !důležité Matematické funkce CSS

Pokročilé CSS

CSS zaoblené rohy Obrázky ohraničení CSS CSS pozadí CSS barvy Klíčová slova barev CSS Přechody CSS CSS Shadows Textové efekty CSS Webová písma CSS CSS 2D transformace CSS 3D transformace Přechody CSS CSS animace CSS Tooltips Obrázky ve stylu CSS CSS obrazový odraz Přizpůsobení objektu CSS CSS objekt-pozice CSS maskování Tlačítka CSS Stránkování CSS Více sloupců CSS Uživatelské rozhraní CSS CSS proměnné Velikost CSS boxu CSS mediální dotazy Příklady CSS MQ CSS Flexbox

CSS responzivní

Úvod RWD Výhled RWD Zobrazení mřížky RWD Dotazy na média RWD Obrázky RWD Videa RWD Rámce RWD Šablony RWD

CSS mřížka

Úvod do mřížky Mřížkový kontejner Položka mřížky

CSS SASS

Výukový program SASS

Příklady CSS

CSS šablony Příklady CSS css kvíz Cvičení CSS CSS certifikát

CSS reference

Reference CSS Selektory CSS Funkce CSS CSS Reference Aural Webová bezpečná písma CSS CSS animovatelné Jednotky CSS Převodník CSS PX-EM CSS barvy Hodnoty barev CSS Výchozí hodnoty CSS Podpora prohlížeče CSS

CSS barvy


CSS podporuje více než 140 názvů barev, hodnoty HEX, hodnoty RGB , hodnoty RGBA, hodnoty HSL, hodnoty HSLA a neprůhlednost.


Barvy RGBA

Hodnoty barev RGBA jsou rozšířením hodnot barev RGB o alfa kanál – který určuje krytí pro barvu.

Hodnota barvy RGBA je specifikována pomocí: rgba (červená, zelená, modrá, alfa). Parametr alfa je číslo mezi 0,0 (plně průhledné) a 1,0 (plně neprůhledné).

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

Následující příklad definuje různé barvy RGBA:

Příklad

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


Barvy HSL

HSL je zkratka pro Hue, Saturation and Lightness.

Hodnota barvy HSL je specifikována pomocí: hsl (odstín, sytost, světlost).

  1. Odstín je stupeň na barevném kole (od 0 do 360):
    • 0 (nebo 360) je červená
    • 120 je zelená
    • 240 je modrá
  2. Sytost je procentuální hodnota: 100 % je plná barva.
  3. Lehkost je také procentuální; 0 % je tmavá (černá) a 100 % je bílá.
hsl(0, 100 %, 30 %);
hsl(0, 100 %, 50 %);
hsl(0, 100 %, 70 %);
hsl(0, 100 %, 90 %);

Následující příklad definuje různé barvy HSL:

Příklad

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

Barvy HSLA

Barevné hodnoty HSLA jsou rozšířením hodnot barev HSL o alfa kanál – který určuje krytí pro barvu.

Hodnota barvy HSLA je specifikována pomocí: hsla(odstín, sytost, světlost, alfa), kde parametr alpha definuje krytí. Parametr alfa je číslo mezi 0,0 (plně průhledné) a 1,0 (plně neprůhledné).

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

Následující příklad definuje různé barvy HSLA:

Příklad

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

Neprůhlednost

Vlastnost CSS opacitynastavuje neprůhlednost pro celý prvek (barva pozadí i text budou neprůhledné/průhledné).

Hodnota opacityvlastnosti musí být číslo mezi 0,0 (plně průhledné) a 1,0 (plně neprůhledné).

rgb(255, 0, 0);opacity:0,2;
rgb(255, 0, 0);opacity:0,4;
rgb(255, 0, 0);opacity:0,6;
rgb(255, 0, 0);opacity:0,8;

Všimněte si, že výše uvedený text bude také průhledný/neprůhledný!

Následující příklad ukazuje různé prvky s neprůhledností:

Příklad

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

Otestujte se pomocí cvičení

Cvičení:

Vložte hodnotu barvy RGBA pro plně červenou barvu pozadí prvku <h1> bez průhlednosti.

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