HTML (z angl. HyperText Markup Language je standardní značkovací jazyk webových stránek, který se používá k vytváření a strukturování obsahu webových stránek. Jedním z hlavních prvků, který umožňuje dát designu stránky jedinečnost a osobitost, je zadání barvy pozadí.
Barvu pozadí stránky v HTML můžete nastavit pomocí atributu bgcolor v Tegu body. Chcete-li to provést, musíte zadat hodnotu barvy v hexadecimálním formátu, jako je #ff0000 pro červenou. Lze také použít názvy barev, jako je červená pro červenou barvu. V důsledku toho bude HTML kód vypadat přibližně takto:
Počínaje HTML5 se však doporučuje tento atribut vyměnit za styly. K zadání barvy pozadí stránky se v HTML5 používá vlastnost background-color v CSS. Chcete-li nastavit barvu pozadí, musíte zadat volič stránky (obvykle se jedná o značku body) a použít styl pomocí vlastnosti background-color, například:
Nyní znáte dva způsoby, jak nastavit barvu pozadí stránky v HTML – pomocí atributu bgcolor a prostřednictvím CSS pomocí vlastnosti background-color. Volba metody závisí na verzi HTML, kterou používáte, a na dostupnosti dalších stylových pravidel na stránce.
Možnosti barevného pozadí v HTML
V HTML existuje několik způsobů, jak nastavit barvu pozadí stránky. Zde se podíváme na několik z nich:
- Použití atributu style u položky je nejjednodušší způsob, jak nastavit barvu pozadí. Stačí přidat atribut style ke značce a zadejte požadovanou barvu ve formátu CSS. Například, nastaví červené pozadí pro celou stránku.
- Použití stylového bloku - pro složitější styly pozadí můžete použít Stylový blok uvnitř značky . Vytvořte nový blok stylů pomocí značky
- Použití tříd - pokud chcete nastavit různé barvy pozadí pro různé části stránky, můžete použít třídy. Vytvořte Stylový blok pomocí značky ZáhlavíObsah
- Použití obrázku jako pozadí - k vytvoření složitějšího pozadí můžete použít obrázek. Chcete-li to provést, musíte nastavit adresu URL obrázku pomocí vlastnosti background-image a definovat další styly pozadí, jako jsou rozměry, opakování a zarovnání. Například:
To je jen několik příkladů způsobů, jak nastavit barevné pozadí v HTML. Můžete kombinovat různé metody, abyste dosáhli výsledku, který potřebujete. Mějte na paměti, že používání obrázků jako pozadí může vést k dalším nákladům na načítání stránky, proto se doporučuje optimalizovat jejich velikost a kvalitu.
Použití atributu style
Atribut style v HTML umožňuje aplikovat styly na prvky webové stránky. Pomocí něj můžete změnit barvu pozadí stránky nebo jejích úryvků.
Pro změnu barvy pozadí stránky můžete použít atribut style ve značce body:
style >
Kde barva - je to hodnota barvy, která je uvedena ve formátu HEX nebo RGB.
Chcete-li například nastavit barvu pozadí stránky na červenou (HEX kód #ff0000), použijte následující kód:
style="background-color: #FF0000;">
Názvy barev lze také použít, například k nastavení barvy pozadí stránky na zelenou:
style="background-color: green;">
Pokud chcete nastavit barvu pouze pro konkrétní část stránky, nikoli pro celou stránku, můžete použít podobný atribut style ve štítku, který popisuje daný úryvek.
Například pro nastavení barvy pozadí pouze pro položku označenou p:
style >
Kde barva - to je hodnota barvy, stejně jako v předchozím případě.
Atribut style tak usnadňuje změnu barvy pozadí stránky nebo jejích fragmentů, což umožňuje dosáhnout zajímavého vizuálního efektu a zvýšit čitelnost obsahu na webu.
Použití tříd
Pro přidání barevného pozadí na stránku v HTML lze použít třídy. Pomocí následujících kroků použijte barevné pozadí:
-
1. Definujte třídu v CSS zadáním požadované barvy ve vlastnostech background-color. Například:
Некоторый текст или контент страницы
Po použití třídy "colorful-bg" na prvku bude pozadí stránky barevné. Tento přístup můžete použít pro jakýkoli jiný prvek HTML přidáním třídy, kterou chcete.
Použití pseudoklasů
V HTML je možné měnit styl prvků podle jejich stavu nebo polohy v dokumentu pomocí pseudoklasů. Pseudoklasy jsou přidány do selektorů v CSS a umožňují vytvářet zajímavé a dynamické efekty na webové stránce.
Jeden z nejpoužívanějších pseudoklasů - :hover, který vám umožní změnit styl prvku, když je nad ním kurzor myši. Můžete například změnit barvu pozadí tlačítka, když na něj najedete:
button:hoverDalší užitečný pseudoklas - :nth-child, který umožňuje vybrat položky podle jejich polohy v nadřazené položce. Můžete například změnit styl každého druhého odstavce na stránce:
p:nth-child(2n)Existují také pseudoklasy pro práci s odkazy. Například pseudoklasse :link vztahuje se na neuvedené odkazy a :visited - k navštíveným. Pomocí těchto pseudoklasů můžete například změnit barvu odkazů při navádění nebo návštěvě:
a:link a:visited a:hoverKromě těchto hlavních pseudoklasů má CSS také mnoho dalších, které vám umožňují vytvářet složitější efekty a animace. Použití pseudoklasů je mocný nástroj pro vytváření interaktivních a krásných webových stránek.
Použití obrázků jako pozadí
V HTML lze použít obrázky jako pozadí stránky. K tomu je třeba využít CSS vlastnosti background-image .
Níže je uveden příklad kódu, který ukazuje použití obrázku jako pozadí:
body
Zde je bodový volič, který ukazuje na prvek . Funkce background-image přenáší cestu k souboru obrázku, který určuje pozadí stránky.
Chcete-li, aby obrázek zabíral celou dostupnou plochu Pozadí, Můžete přidat vlastnosti CSS background-size a background-repeat :
body
V tomto příkladu background-size: cover říká prohlížeči, aby zmenšil obrázek tak, aby zcela zakryl pozadí, aniž by zkreslil proporce. Vlastnost background-repeat: no-repeat označuje, že by se obrázek neměl opakovat na pozadí.
Použití obrázku jako pozadí může vytvořit efektivní design pro Vaši webovou stránku a posílit vzhled webu.