Zde vám přinášíme kompletní seznam stylů z normy CSS I, které jsou použitelné v HTML stránkách. Veškeré vlastnosti stylů jsou rozděleny do skupin podle svého významu. Možné hodnoty - zde je zapsán seznam hodnot, které je možné použít u dané vlastnosti. jedna svislá čárka | - znamená, že můžete použít jenom jednu z vypsaných hodnot. Například zápis scroll | fixed znamená, že můžete použít buď hodnotu scroll, nebo hodnotu fixed. dvě svislé čárky || - můžete použít jakoukoli hodnotu i více hodnot najednou. otazník za hodnotou - říká, že hodnota je nepovinná.
Blokové značky - vytváří blok textu, jako jsou odstavce, tabulky, apod. Nahrazované značky - vytváří blok, který něčím nahrazen, třeba obrázkem, Java appletem. Značky v řádce - to jsou značky, které ovlivňují formátování textu, ale nevytvářejí žádný blok. Dále je potřeba si uvědomit, že výjimkou ze všech značek je
. Tato značka nepatří do žádné skupiny, a je tak trochu černou ovcí. A ještě poznámku pro pochopení. Kaskádovými styly CSS nastavujete vlastnosti všeho, co je uvnitř dané značky (pokud se vlastnost stylu dědí, jinak jenom pokud není uvnitř jiná značka).
Takže třeba můžete nastavit font pomocí font-family na jakoukoli značku. Význam je ten, že platí pro všechny texty uvnitř této značky. Dědí se? - ukazuje, zda se vlastnost dědí. Popis - zde je velice stručný popis významu. [‚font-style‘ || ‚font-variant‘ || ‚font-weight‘]? ‚font-size‘ [/’line-height‘]? U vlastnosti font-family je možné určit seznam písem. Prohlížeč potom tento seznam prochází a použije první písmo v seznamu, které má k dispozici.
Jedna z nejdůležitějších věcí je jednotný zápis barev. Teoreticky je nejjednodušší zápis barvy v CSS: číselné hodnoty RGB a HEX. Dále existují 6- a 3-znakové HEX hodnoty a zápisy s alfa kanálem rgba/hsla. V dalších částech si ukážeme základní příklady a jejich kontext použití.
Základní zápisy barev a demoeskóre
Vlastnost color ukazuje, jakou barvu má text. Uvažujme jednoduchý příklad: Teal, white a yellow. Tyto barvy se používají pro nadpisy
a a pro řádky textu. V následujících bodech upozorníme na barevné komponenty obrazu a jejich význam v kontextu webu.
Souvislost s RGB: červená, zelená a modrá (Red, Green, Blue). Často hovoříme o tom, že obrazovka je složena z různě intenzivních světel těchto tří barev. Modrá složka má maximální hodnotu v některých zápisech, zelená a červená doplňují obraz dle požadavků. Dostáváme se k poslednímu způsobu zápisu barev, nejjednodušší zápis, který používá i písmena A-F pro hexadecimální zápis. Příklad: 2a2b3c, #2a2b3c nebo rgb(42, 43, 60).
HTML zápis barev může být použit v editoru (např. HTML zápis). Aurora zobrazení navazuje na CSS pravidla a barvy se aplikují na text. Obrázky a SVG mohou využívat barvy definované v CSS, aby se zajistila konzistence napříč prvky stránky.
Přehled praktických zápisů a souvislostí
Pro pochopení zápisu barev a jejich použití je užitečné sledovat typy zápisů: hex, rgb(a), hsl(a). Každý z nich má své výhody v různých kontextech, například při dynamickém změně barvy pomocí JS nebo při definici témat v CSS.
Přehled kuriózních aplikací a odporúčané postupy
V textu pokračujeme ohledem na praktické aplikace. Při tvorbě CSS je důležité myslet na čitelnost a kontrast, aby text zůstal čitelný na různých pozadích. U nadpisů a titulů je vhodné používat odlišné odstíny, aby se vizuálně oddělily sekce.
V další části uvedeme stručný přehled, jak regulovat barvy prvků tabulek a obrazovek: tabulky často vyžadují jasnou hierarchii barev, střídání barev řádků pro lepší orientaci, a zvýraznění řádků při najetí myší. Tyto techniky jsou časté v CSS3 a mohou se implementovat s opatrností - zejména v prohlížečích, které plně nepodporují některé starší vlastnosti.
Chcete-li mít jistotu, že barvy a vzhled prvků jsou konzistentní napříč prvky a stranami, zvažte použití proměnných CSS (custom properties) a fallbacků pro starší prohlížeče. Jak je vidět z následujících příkladů, deklarace CSS proměnných může vyžadovat konverzi do RGB formátu pro kompatibilitu s IE11. PostCSS pluginy jako postcss-css-variables usnadní práci se změnami proměnných v širokém spektru prohlížečů.
V praxi se doporučuje, aby designér při práci s barvami zvažoval konzistenci a znovupoužitelnost. Ideální je používat ikony a části, které lze snadno přebarvovat pomocí currentColor hodnoty atributů fill a stroke. Také je vhodné sledovat, aby kombinace barev vyvolávala dostatečný kontrast a nebyla rušivá pro čtení obsahu.
Tabulka základních pravidel pro barvy a styly
| Vlastnost | Příklady hodnot | Poznámka |
|---|---|---|
| color | red, #ff0000, rgb(255,0,0), rgba(255,0,0,0.5) | barva textu |
| background-color | #333, rgb(51,51,51) | barva pozadí |
| border-color | #ccc, rgba(0,0,0,0.2) | barva rámečku |
| color-scheme | light dark | kolorit podle vzhledu |
| var(--barva-primarni) | kontejnery proměnných | fallbacky pro starší prohlížeče |
Ukázková ukázka, jak se mění barva textu: vlastnost color. 1. konstanty teal, white a yellow. používat. nadpisy
a . řádky. 2. (Red, Green, Blue). Cože? zelenou a modrou. obrazovce je složen z různě intenzivních světel těchto barev. poslední, že modrá složka má maximální hodnotu. 3. Dostáváme se k poslednímu způsobu zápisu barev. nejjednodušší zápis. zápis, který již známe. 9 používá i písmena A - F.