LINUXSOFT.cz Přeskoč levou lištu
Uživatel: Heslo:  
   CZUKPL

> CSS (3.) - Barvy

V dnešním díle se seznámíme se způsoby zadávání barev v kaskádových stylech.

2.8.2004 13:00 | Vasek | Články autora | přečteno 21754×

Pomocí stylu lze samozřejmě určit i barvu elementu. Barvy používané v CSS jsou z RGB barevného prostoru a jsou uzpůsobeny možnostem koncových zobrazovacích zařízení. K nastavení barvy slouží atribut color. Hodnotou tohoto atributu lze zadat několika způsoby.

  • Jménem v angličtině
  • Číselně v RGB
    • desítkově
    • procentuálně
    • hexadecimálně
    • hexadecimálně zkráceně

Jménem v angličtině

Barvu lze definovat jejím anglickým jménem. Existuje 140 pojmenovaných barev, které lze rozdělit do dvou skupin: základní barvy, barvy X11. Při zadávání jména barvy se nerozlišují velká a malá písmena.

Základní barvy

Základních barev je 16 a jsou uvedeny v dokumentaci W3C. Výhoda používání těchto barev tkví v jejich snadné zapamatovatelnosti.

 black  white  green  maroon
 olive  navy  purple  gray
 yellow  lime  aqua  fuchsia
 silver  red  blue  teal

Barvy X11

Jedná se o sadu 124 barev. Tyto barvy naleznete často na webu pod označením Pojmenované barvy nebo Barvy X11.

 ivory  lightyellow  snow  floralwhite
 lemonchiffon  cornsilk  seashell  lavenderblush
 papayawhip  blanchedalmond  mistyrose  bisque
 moccasin  peachpuff  navajowhite  gold
 pink  lightpink  lightsalmon  orange
 darkorange  coral  hotpink  tomato
 orangered  deeppink  magenta  oldlace
 lightgoldenrodyellow  linen  antiquewhite  salmon
 ghostwhite  mintcream  whitesmoke  beige
 wheat  sandybrown  aliceblue  azure
 honeydew  khaki  lightcoral  palegoldenrod
 violet  darksalmon  lavender  lightcyan
 burlywood  plum  gainsboro  crimson
 goldenrod  orchid  thistle  palevioletred
 lightgrey  tan  chocolate  peru
 indianred  mediumvioletred  darkkhaki  rosybrown
 mediumorchid  darkgoldenrod  firebrick  powderblue
 lightsteelblue  paleturquoise  greenyellow  lightblue
 darkgray  brown  sienna  yellowgreen
 darkorchid  palegreen  darkviolet  mediumpurple
 lightgreen  darkseagreen  saddlebrown  darkmagenta
 darkred  blueviolet  lightskyblue  skyblue
 mediumslateblue  aquamarine  chartreuse  lawngreen
 lightslategray  slategray  slateblue  dimgray
 olivedrab  mediumauquamarine  cornflowerblue  cadetblue
 darkolivegreen  indigo  mediumturquoise  darkslateblue
 steelblue  royalblue  turquoise  mediumseagreen
 limegreen  darkslategray  seagreen  forestgreen
 lightseagreen  dodgerblue  midnightblue  springgreen
 mediumspringgreen  darkturquoise  deepskyblue  darkcyan
 darkgreen  mediumblue  darkblue  cyan

Systémové barvy

Sada 28 barev, které lze uvést v definování stylu. Nejde však o barvy, které bychom předem jednoznačně stanovovali. Jejich skutečná hodnota bude nastavena až při zpracování prohlížečem nebo převaděčem HTML a to podle barev, které jsou nastaveny v systému. Srozumitelněji řečeno, převezmou se barvy nastaveného pozadí, textu, oken atd. na konkrétním PC. Systémové barvy jsou obsaženy v dokumentaci k CSS 2 a jedná se o tyto barvy: ActiveBorder, ActiveCaption, AppWorkspace, Background, ButtonFace, ButtonHighlight, ButtonShadow, ButtonText, CaptionText, GrayText, Highlight, HighlightText, InactiveBorder, InactiveCaption, InactiveCaptionText, InfoBackground, InfoText, Menu, MenuText, Scrollbar, ThreeDDarkShadow, ThreeDFace, ThreeDHighlight, ThreeDLightShadow, ThreeDShadow, Window, WindowFrame, WindowText.

Příklady:
h1 {color: red;}
.test {background-color: Mediumslateblue;}
#prac {color: HighlightText;}

Číselně v RGB

V tomto modelu používáme k vytvoření barvy tří základních barev - červenou (Red), zelenou (Green) a modrou (Blue). Každá složka je ve výsledné barvě zastoupena určitým podílem. Při míchání barev ve schématu RGB vlastně specifikujeme kolik dílů dílčí barvy bude zastoupeno v barvě cílové.

Desítkově

K zápisu barvy je použito funkce rgb, která má tři parametry oddělené čárkou, udávající po řadě složky R, G a B. Rozsah hodnot parametrů je v intervalu 0 až 255. Proč je maximum zrovna 255? Pro intenzitu pixelu mají počítače (v hi color) vyhrazeno 8 bitů, což znamená 28 = 256 možností, jelikož je použita i 0, je maximální hodnota 255. Pokud tedy v RGB schématu je zastoupeno 255 dílů červené, 0 dílů zelené a 0 dílů modré, pak je výsledná barva červená.

Příklady:
h1 {color: rgb(255,0,0);}
.test {background-color: rgb(0,255,0);}
#prac {color: rgb(255,255,255);}

Procentuálně

Procentuální zápis barvy opět využívá funkci rgb se třemi parametry. Místo dekadické zápisu jednotlivých složek se používá procentuální vyjádření (255 - 100%, 0 - 0%).

Příklady:
h1 {color: rgb(100%,0%,0%);}
.test {background-color: rgb(0%,100%,0%);}
#prac {color: rgb(100%,100%,100%);}

Hexadecimálně

Zapisují se ve tvaru #RRGGBB, kde RR, GG a BB jsou po řadě hodnoty červené, zelené resp. modré složky barvy (255 - FF, 0 - 0).

Příklady:
h1 {color: #FF0000;}
.test {background-color: #00FF00;}
#prac {color: #FFFFFF;}

Hexadecimálně zkráceně

Pro barvy, jejichž složky jsou zapsány vždy dvěma stejnými číslicemi (např #FF00000), můžeme použít zkrácený zápis #RGB (např. #F00).

Příklady:
h1 {color: #F00;}
.test {background-color: #0F0;}
#prac {color: #FFF;}

Paleta bezpečných barev

Paleta bezpečných barev (Web Save Palet) je soubor 216 barev, které by se měly zobrazit na libovolném zobrazovacím zařízení stejně. Tyto barvy mají v šestnáctkovém zápisu pro každou barvu pouze šest možných hodnot: 00, 33, 66, 99, CC nebo FF. V procentuálním zápisu se mohou používat násobky 20%, což odpovídá násobkům čísla 51 v zápisu desítkovém.

 #ffffff  #000033  #000066  #000099
 #0000cc  #0000ff  #003333  #003366
 #003399  #0033cc  #0033ff  #006633
 #006666  #006699  #0066cc  #0066ff
 #009933  #009966  #009999  #0099cc
 #0099ff  #00cc33  #00cc66  #00cc99
 #00cccc  #00ccff  #00ff33  #00ff66
 #00ff99  #00ffcc  #00ffff  #330033
 #330066  #330099  #3300cc  #3300ff
 #333333  #333366  #333399  #3333cc
 #3333ff  #336633  #336666  #336699
 #3366cc  #3366ff  #339933  #339966
 #339999  #3399cc  #3399ff  #33cc33
 #33cc66  #33cc99  #33cccc  #33ccff
 #33ff33  #33ff66  #33ff99  #33ffcc
 #33ffff  #660033  #660066  #660099
 #6600cc  #6600ff  #663333  #663366
 #663399  #6633cc  #6633ff  #666633
 #666666  #666699  #6666cc  #6666ff
 #669933  #669966  #669999  #6699cc
 #6699ff  #66cc33  #66cc66  #66cc99
 #66cccc  #66ccff  #66ff33  #66ff66
 #66ff99  #66ffcc  #66ffff  #990033
 #990066  #990099  #9900cc  #9900ff
 #993333  #993366  #993399  #9933cc
 #9933ff  #996633  #996666  #996699
 #9966cc  #9966ff  #999933  #999966
 #999999  #9999cc  #9999ff  #99cc33
 #99cc66  #99cc99  #99cccc  #99ccff
 #99ff33  #99ff66  #99ff99  #99ffcc
 #99ffff  #cc0033  #cc0066  #cc0099
 #cc00cc  #cc00ff  #cc3333  #cc3366
 #cc3399  #cc33cc  #cc33ff  #cc6633
 #cc6666  #cc6699  #cc66cc  #cc66ff
 #cc9933  #cc9966  #cc9999  #cc99cc
 #cc99ff  #cccc33  #cccc66  #cccc99
 #cccccc  #ccccff  #ccff33  #ccff66
 #ccff99  #ccffcc  #ccffff  #ff0033
 #ff0066  #ff0099  #ff00cc  #ff00ff
 #ff3333  #ff3366  #ff3399  #ff33cc
 #ff33ff  #ff6633  #ff6666  #ff6699
 #ff66cc  #ff66ff  #ff9933  #ff9966
 #ff9999  #ff99cc  #ff99ff  #ffcc33
 #ffcc66  #ffcc99  #ffcccc  #ffccff
 #ffff33  #ffff66  #ffff99  #ffffcc

Závěr

Jak je zřejmé z předcházejících řádků, způsobů jak zadat v CSS konkretní barvu je více, a je jen na vás, který se naučíte a budete používat. Nejčastěji se používá hexadecimální zápis.

Verze pro tisk

pridej.cz

 

DISKUZE

:-) 4.8.2004 21:07 Martin Kysela




Příspívat do diskuze mohou pouze registrovaní uživatelé.
> Vyhledávání software
> Vyhledávání článků

17.4.2018 0:46 /František Kučera
Dubnový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 19. 4. 2018 od 18:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tématem tohoto srazu bude OpenStreetMap (OSM) aneb svobodné mapy.
Přidat komentář

16.3.2018 22:01 /František Kučera
Kulatý OpenAlt sraz v Praze oslavíme klasicky: u limonády a piva! Přijďte si posedět, dát si dobré jídlo a vybrat z mnoha piv do restaurace Kulový blesk, který najdete v centru Prahy nedaleko metra I. P. Pavlova na adrese Sokolská 13, Praha 2. Sraz se koná ve čtvrtek 22. března a začínáme v 18:00. Heslo: OpenAlt. Vezměte s sebou svoje hračky! Uvítáme, když si s sebou na sraz vezmete svoje oblíbené hračky. Jestli máte nějaký drobný projekt postavený na Arduinu, nějakou zajímavou elektronickou součástku, či třeba i pěkný úlovek z crowdfundingové akce, neváhejte. Oslníte ostatní a o zábavu bude postaráno.
Přidat komentář

13.2.2018 0:41 /František Kučera
Únorový pražský sraz OpenAltu se koná 15. 2. 2018 a tentokrát se vydáme na návštěvu do jednoho pražského datacentra. Sejdeme se v 17:50 v severovýchodní části nástupiště tramvajové zastávky Koh-I-Noor. Po exkurzi se přesuneme do restaurace U Pštrosa (Moskevská 49), kde probereme tradiční témata (svobodný software a hardware, DIY, CNC, SDR, 3D tisk…) a tentokrát bude k vidění i IoT brána od The Things Network.
Přidat komentář

11.2.2018 23:11 /Petr Ježek
Hledáte lehký a rychlý prolížeč PDF souborů? Pokud vás již omrzelo čekat na načítání stránek či jiné nešvary, zkuste xreader.
Přidat komentář

11.2.2018 20:35 /Redakce Linuxsoft.cz
Třetí ročník odborné IT konference na téma Cloud computing v praxi proběhne ve čtvrtek 1. března 2018 v konferenčním centru Vavruška, v paláci Charitas, Karlovo náměstí 5, Praha 2 (u metra Karlovo náměstí) od 9:00 hod. dopoledne do cca 16 hod. odpoledne. Konference o trendech v oblasti cloud computingu nabídne i informace o konkrétních možnostech využívání cloudů a řešení vybraných otázek souvisejících s provozem IT infrastruktury.
Přidat komentář

15.1.2018 0:51 /František Kučera
První letošní pražský sraz se koná již tento čtvrtek 18. ledna od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5). Vítáni jsou všichni příznivci svobodného softwaru a hardwaru, ESP32, DIY, CNC, SDR nebo dobrého piva. Prvních deset účastníků srazu obdrží samolepku There Is No Cloud… just other people's computers. od Free Software Foundation.
Přidat komentář

14.11.2017 16:56 /František Kučera
Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě DIY, CNC, SDR nebo morseovka? Přijď na sraz spolku OpenAlt – tradičně první čtvrtek před třetím pátkem v měsíci: 16. listopadu od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).
Přidat komentář

12.11.2017 11:06 /Redakce Linuxsoft.cz
PR: 4. ročník odborné IT konference na téma Datová centra pro business proběhne již ve čtvrtek 23. listopadu 2017 v konferenčním centru Vavruška, v paláci Charitas, Karlovo náměstí 5, Praha 2 (u metra Karlovo náměstí) od 9:00. Konference o návrhu, budování, správě a efektivním využívání datových center nabídne odpovědi na aktuální a často řešené otázky, např Jaké jsou aktuální trendy v oblasti datových center a jak je využít pro vlastní prospěch? Jak zajistit pro firmu či jinou organizaci odpovídající služby datových center? Podle jakých kritérií vybrat dodavatele služeb? Jak volit součásti infrastruktury při budování či rozšiřování vlastního datového centra? Jak efektivně spravovat datové centrum? Jak eliminovat možná rizika? apod.
Přidat komentář

   Více ...   Přidat zprávičku

> Poslední diskuze

20.2.2018 18:48 / Ivan Majer
portal

20.2.2018 15:57 / Jan Havel
Jak využíváte služby cloudu v podnikání?

16.1.2018 1:08 / Ivan Pittner
verejna ip od o2 ubuntu

15.1.2018 17:26 / Mira Harvalik
Re: Jak udělat HTML/Javascript swiping gallery do mobilu?

30.12.2017 20:16 / Michal Knoll
odmocnina

Více ...

ISSN 1801-3805 | Provozovatel: Pavel Kysilka, IČ: 72868490 (2003-2018) | mail at linuxsoft dot cz | Design: www.megadesign.cz | Textová verze