Barvy HTML. Tabulka 147 názvů barev pro HTML a CSS.

V tomto tutoriálu se podíváme na některé skvělé funkce, které poskytují vlastnosti pozadí a ohraničení v CSS. Přidání přechodů, obrázků na pozadí a zaoblených rohů odpovědělo na mnoho otázek týkajících se stylingu v CSS.

Stylování pozadí v CSS

Vlastnost pozadí CSS je zkratka pro řadu úplných vlastností pozadí, o kterých se dozvíme v tomto tutoriálu. Pokud v šabloně stylů najdete komplexní vlastnost pozadí, může se to zdát obtížné pochopit, protože může být předáno tolik hodnot najednou.

K tomu, jak zkracování funguje, se vrátíme později, ale nyní se pojďme podívat na různé věci, které můžete s pozadím v CSS dělat, když se podíváme na jednotlivé vlastnosti pozadí.

Barva pozadí

Vlastnost background-color určuje barvu pozadí pro jakýkoli prvek v CSS. Nemovitost přijímá jakoukoli platnou barvu. background-color se vztahuje na samotný obsah a jeho výplň.

V níže uvedeném příkladu jsme použili různé hodnoty barev k přidání barvy pozadí k bloku, záhlaví a prvku.

Hrajte s nimi pomocí jakékoli dostupné hodnoty .

Obrázek na pozadí

Vlastnost background-image umožňuje zobrazit obrázek jako pozadí prvku. V příkladu níže máme dva bloky – jeden s obrázkem na pozadí větším, než je velikost bloku, a druhý s obrázkem malé hvězdy.

Tento příklad ukazuje dvě funkce obrázků na pozadí. Ve výchozím nastavení není velký obrázek upraven tak, aby se vešel do bloku, takže vidíme pouze jeho malý roh, zatímco malý obrázek se opakuje, aby vyplnil celý blok. V našem případě jsme vlastně použili obrázek jedné malé hvězdy.

Poznámka: Pokud jste kromě obrázku na pozadí přidali i barvu pozadí, obrázek se zobrazí nad barvou. Zkuste přidat vlastnost background-color do výše uvedeného příkladu, abyste to viděli v akci.

vlastnost opakování pozadí

Vlastnost background-repeat se používá k řízení opakování obrázku na pozadí. Dostupné hodnoty:

• no-repeat – Zastaví se opakování obrázku na pozadí ve všech směrech.
• repeat-x – zopakuje obrázek na pozadí vodorovně.
• repeat-y — zopakuje obrázek na pozadí svisle.
• opakovat – opakování obrázku na pozadí v obou směrech. Ve výchozím nastavení nainstalováno.

Vyzkoušejte tyto hodnoty v příkladu níže. Nastavili jsme to tak, aby se neopakovalo, takže uvidíte pouze jednu hvězdu. Zkuste jiné hodnoty – opakovat-x и opakovat-y – abyste viděli, jaké mají účinky.

Změňte velikost obrázku na pozadí

Ve výše uvedeném příkladu máme velký obrázek, který byl nakonec oříznut, protože je větší než prvek, jehož je pozadím. V tomto případě bychom mohli použít vlastnost background-size, která může mít délku nebo procentuální hodnoty, aby velikost obrázku odpovídala velikosti pozadí.

Můžete také použít klíčová slova:

• obal – Prohlížeč udělá obrázek dostatečně velký, aby zcela vyplnil blok, při zachování poměru stran. V tomto případě bude část obrázku s největší pravděpodobností mimo blok.
• obsahovat – prohlížeč vytvoří obrázek ve správné velikosti, aby se vešel do bloku. V tomto případě se mohou na obou stranách nebo v horní a spodní části obrazu objevit mezery, pokud se poměr stran obrazu liší od poměru stran bloku.

Níže jsem použil hodnoty délky na rozměry obrázku. Podívejte se, jak to zkreslilo obraz.

V níže uvedeném příkladu jsem použil velký obrázek z předchozího příkladu a poskytl hodnoty délky k určení jeho velikosti v rámci bloku. Můžete vidět, jak to zkreslilo obraz.

• Změňte hodnoty délky používané ke změně velikosti pozadí.
• Změňte hodnotu délky na background-size: cover nebo background-size: include .
• Pokud je váš obrázek menší než rozměry bloku, můžete změnit hodnotu vlastnosti background-repeat a obrázek opakovat.

Umístění obrázku na pozadí

Vlastnost background-position umožňuje změnit pozici, na které se obrázek pozadí v bloku objeví. V tomto případě se používá souřadnicový systém, ve kterém levý horní roh blok je roven (0,0) a samotný blok je umístěn podél horizontální (x) a vertikální (y) osy.

Poznámka: Ve výchozím nastavení je pozice pozadí (0,0) .

Vlastnost background-position je obvykle specifikována jako dvě po sobě jdoucí hodnoty – horizontální hodnota následovaná vertikální hodnotou.

Můžete použít klíčová slova jako nahoře a vpravo (ostatní můžete vidět na stránce s pozicí na pozadí):

Platné hodnoty délky a procenta jsou:

Můžete také kombinovat hodnoty klíčových slov s délkami nebo procenty, například takto:

Nakonec můžete také použít čtyřhodnotovou syntaxi k určení vzdálenosti od určitých hran bloku – jednotkou délky je v tomto případě posun od hodnoty klíčového slova. V níže uvedeném CSS jsme tedy posunuli pozadí o 20 pixelů shora a 10 pixelů zprava:

Pomocí níže uvedeného příkladu můžete experimentovat s těmito hodnotami a posouvat hvězdu v rámci bloku.

Poznámka: background-position je zkratka pro background-position-x a background-position-y , které umožňují individuálně nastavit různé hodnoty polohy os.

Přechod jako pozadí

Přechod – při použití pro pozadí – se chová stejným způsobem jako obrázek, a je tedy určen vlastností background-image.

Další informace o různých typech přechodů a o tom, co s nimi můžete dělat, si můžete přečíst na stránce MDN pro datový typ. S přechody si můžete hrát pomocí jednoho z mnoha generátorů přechodů CSS dostupných na internetu, jako je tento. Můžete vytvořit přechod a poté jej zkopírovat a vložit do kódu.

Zkuste použít různé přechody v příkladu níže. Ve dvou blocích máme lineární gradient, který se táhne přes celý blok, a radiální gradient o dané velikosti, který se tedy opakuje.

Více obrázků na pozadí

Je také možné vytvořit více obrázků na pozadí pouhým oddělením hodnot vlastnosti background-image čárkami.

Pokud zadáte více hodnot, obrázky na pozadí se budou překrývat. Obrázky na pozadí budou vrstveny, přičemž každý další obrázek uvedený v kódu bude pod dříve zadaným obrázkem.

Poznámka: Přechody lze snadno smíchat s běžnými obrázky na pozadí.

Ostatní vlastnosti background- * mohou mít také hodnoty oddělené čárkou, stejně jako background-image :

background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png); background-repeat: no-repeat, repeat-x, repeat; background-position: 10px 20px, top right; 

Každá hodnota různých vlastností bude odpovídat hodnotám na stejné pozici v jiných vlastnostech. Výše například hodnota opakování pozadí pro obrázek1 bude no-repeat . Co se však stane, když různé vlastnosti mají různý počet hodnot? Odpověď zní, že se bude procházet méně hodnot – ve výše uvedeném příkladu jsou čtyři obrázky na pozadí, ale pouze dvě hodnoty pozice na pozadí. První dvě hodnoty pozice se použijí na první dva snímky, pak se budou znovu cyklovat – snímku 3 bude přiřazena hodnota první pozice a snímku4 bude přiřazena hodnota druhé pozice.

Zahrajeme si? V níže uvedeném příkladu jsem přidal dva obrázky. Chcete-li předvést pořadí překrývání, zkuste změnit pořadí obrázků na pozadí v seznamu. Nebo si pohrajte s jinými vlastnostmi a změňte polohu, velikost nebo opakovatelnost hodnot.

Zamkněte pozadí

Další možností, kterou můžete použít na pozadí, je určit, jak se bude posouvat při procházení obsahem. To je řízeno pomocí vlastnosti background-attachment, která může nabývat následujících hodnot:

• scroll : Způsobí, že se prvky pozadí posouvají při rolování stránky. Pokud se obsah prvku posune, pozadí se nepohne. Ve skutečnosti je pozadí na stránce pevně na stejné pozici, takže se posouvá při posouvání stránky.
• Fixed : Opraví prvky pozadí ve výřezu, aby se neposouval při posouvání obsahu stránky nebo prvku. Pozadí zůstane na obrazovce vždy na stejném místě.
• local : Tato hodnota byla přidána později (je podporována pouze v Internet Exploreru 9+, zatímco ostatní jsou podporovány v IE4+), protože hodnota posuvníku je značně matoucí a v mnoha případech ve skutečnosti nedělá to, co chcete. Místní hodnota fixuje pozadí prvku, na který je aplikována, takže když prvek posouváte, pozadí se posouvá s ním.

Vlastnost background-attachment se projeví pouze tehdy, když je obsah k posouvání, takže jsme vytvořili příklad, který demonstruje rozdíly mezi těmito třemi hodnotami – podívejte se na background-attachment.html (zde se také podívejte na zdrojový kód) .

Použití vlastnosti těsnopisu na pozadí

Jak jsem zmínil na začátku tohoto tutoriálu, často uvidíte sadu pozadí pomocí vlastnosti background. Tato zkratka umožňuje nastavit všechny různé vlastnosti najednou.

Při použití více pozadí musíte zadat všechny vlastnosti pro první pozadí a poté přidat další pozadí za čárku. V níže uvedeném příkladu máme přechod s velikostí a pozicí, pak obrázek na pozadí s neopakováním a pozicí a pak barvu.

Při psaní zkratek pro obrázky na pozadí je třeba dodržovat několik pravidel, například:

• barvu pozadí lze zadat pouze za poslední čárkou.
• Hodnoty velikosti pozadí lze zahrnout pouze bezprostředně za position-position , oddělené znakem ‚/‘, například: střed/80 % .

Úplný popis vlastnosti pozadí naleznete na stránce MDN.

Zobrazení dostupnosti

Když umístíte text na obrázek nebo barvu pozadí, musíte zajistit dostatečný kontrast, aby byl text čitelný pro návštěvníky vašeho webu. Pokud je zadán obrázek a text bude umístěn na tento obrázek, musíte také určit barvu pozadí, která umožní, aby byl text čitelný, pokud se obrázek nenačte.

Čtečky obrazovky nemohou analyzovat obrázky na pozadí, takže musí být čistě dekorativní; jakýkoli důležitý obsah by měl být součástí stránky HTML, nikoli na pozadí.

Hranice

Při studiu Blokového modelu jsme zjistili, jak hranice ovlivňují velikost našeho bloku. V tomto tutoriálu se podíváme na to, jak kreativně používat hranice. Obvykle, když přidáváme ohraničení k prvku pomocí CSS, používáme zkrácenou vlastnost, která nastavuje barvu, šířku a styl ohraničení v jednom řádku CSS.

Můžeme nastavit ohraničení pro všechny čtyři strany bloku pomocí border :

Nebo můžeme cílit na jeden okraj bloku, takto:

Tato stránka představuje speciální klíčová slova, která lze použít k označení konkrétní barvy na internetových stránkách a při vývoji v programovacích jazycích pro web, jako je HTML, CSS, JavaScript, Flash atd.

V prvních specifikacích W3C bylo definováno pouze 16 klíčových barev. Pozdější specifikace dále definovaly 130 různých názvů barev. Následující tabulka obsahuje názvy a příklady barev, které jsou s těmito názvy spojeny.

Tabulka barev HTML

Názvy barev v HTML nerozlišují velká a malá písmena a mohou být zapsány v jakékoli formě

Za zmínku také stojí, že se 147 různými klíčovými slovy (17 starých a 130 nových) nejsou všechny barvy v tomto seznamu jedinečné. Některá jména odkazují na stejnou barvu. Tak například Grey, a Gray znamená 50% šedou barvu #808080 a Magenta je pouze synonymem pro HTML barvu Fuchsia a odkazuje na hexadecimální kód barvy #FF00FF.