Přehled atributů stylu HTML
HTML kód potřebuje atribut stylu pro webové stránky, které mají být vykresleny ve webových prohlížečích, jako je Chrome, FireFox, IE, aby byly zobrazeny tak, jak mají vypadat. Značky HTML mohou obsahovat různé informace a atribut styl řídí vzhled informací obsažených v blocích HTML pomocí inline stylingu.
V tomto článku se dozvíme více o atributu stylu HTML, který není ničím jiným než sadou pravidel, která definují, jak bude stránka vykreslena ve webovém prohlížeči.
Seznam atributů stylu HTML
Zde je seznam všech vlastností stylu, které lze použít k ovlivnění a řízení návrhu prvků HTML, spolu s praktickým příkladem:
1. Barva pozadí
Pomocí této vlastnosti CSS můžeme nastavit barvu pozadí pro jakýkoli prvek HTML, jako je,
atd.
Příklad
My background is blue
Výstup:
2. Barva
Barva písma textu v prvku HTML lze řídit nastavením jeho atributu barvy na správný název barvy nebo HEX kód nebo RGB kód.
Příklad
My font color is blue
Výstup:
3. Barva okraje
Můžeme nastavit barvu ohraničení libovolného prvku HTML, pokud k němu chceme přidat ohraničení.
Příklad
Moje hranice je červená
Výstup:
Jak vidíte ve výše uvedeném kódu, vlastnost border přijímá 3 vlastnosti v následujícím pořadí: „Barva ohraničení ve stylu ohraničení na šířku hranice“.
4. Obrázek na pozadí
Můžeme také nastavit obrázek jako pozadí pomocí vlastnosti background-image takto:
Příklad:
Výstup:
5. Opakování pozadí
Jak vidíte ve výše uvedeném příkladu, když je obrázek nastaven jako pozadí pomocí vlastnosti background-image; ve výchozím nastavení opakuje obraz vodorovně i svisle. Některé obrázky však může být nutné opakovat svisle nebo vodorovně nebo nemusí být nutné opakovat. Toto chování lze ovládat nastavením požadované hodnoty proti vlastnosti opakování pozadí a lze ji použít pouze v případě, že se používá obrázek pozadí, jinak nepřidá žádnou hodnotu stylu, pokud je použit jako samostatná vlastnost.
Hodnota „opakovat-x“ se používá k umožnění opakování obrazu pouze vodorovně.
Hodnota „opakovat-y“ se používá k umožnění opakování obrazu pouze vertikálně.
Hodnota „neopakovat“ se používá k zastavení jakéhokoli opakování obrázku na pozadí.
Upravme výše uvedený příklad, abychom vylepšili obrázek na pozadí.
Příklad
Výstup:
Můžeme porovnat výše uvedené příklady a pochopit, že s obrázkem na pozadí můžeme přidat obrázek jako pozadí a s opakováním na pozadí můžeme ovládat opakování obrázku na pozadí.
6. Pozice na pozadí
Pomocí této vlastnosti můžeme definovat polohu obrázku na pozadí.
Příklad
Výstup:
7. Okraje
CSS nám poskytuje vlastnosti pro nastavení okrajů na všech čtyřech stranách prvku HTML, nebo bychom mohli přidat okraje na konkrétní stranu prvku.
S okrajem nahoře můžete přidat okraj na vrchol prvku, okraj-vpravo přidá okraj napravo od prvku, okraj-vlevo přidá okraj na levé straně prvku a okraj-dole přidá okraj na dno prvku. Místo použití těchto 4 vlastností můžeme také použít vlastnost margin a nastavit její hodnoty podle našich požadavků.
Příklad
p (
margin-top: 25px;
margin-bottom: 75px;
margin-right: 50px;
margin-left: 100px;
)
or
p
(
margin: 25px 50px 75px 100px;
)
8. Výplň
Vlastnost padding definuje mezeru mezi obsahem prvku a jeho hranicemi. Můžeme použít vlastnost „padding“ nebo jednotlivé vlastnosti padding jako padding-top, padding-bottom, padding-left, padding-right k nastavení výplně pro horní, dolní, levý nebo pravý obsah prvku.
p (
padding-top: 25px;
padding -bottom: 75px;
padding -right: 50px;
padding -left: 100px;
)
or
p
(
padding: 25px 50px 75px 100px;
)
9. Výška a šířka
Výška a šířka jsou nejzákladnější vlastnosti CSS používané k definování výšky a šířky jakéhokoli prvku HTML. Mohou být nastaveny na hodnotu pixelu jako 200px nebo procento jako 10%, 20% atd.
10. Zarovnání textu
Tato vlastnost se používá k nastavení vodorovného směru, ve kterém bychom chtěli zarovnat text prvku. Hodnotu lze nastavit na střed, doprava nebo doleva.
p (
text-align: center;
)
or
p (
text-align: left;
)
or
p (
text-align: right;
)
11. Textové dekorace
Vlastnost textové dekorace lze použít k nastavení dekorací, jako je podtržení, průnik nebo překrývání textu v HTML.
Příklad:
To je podtržení
Výstup:
12. Mezery mezi písmeny
Jak název napovídá, tato vlastnost se používá k definování mezery mezi písmeny / znaky ve slově. Může být přiřazena kladná nebo záporná hodnota pixelu pro zvětšení nebo zmenšení mezery mezi písmeny.
Příklad:
Moje slova se překrývají
Výstup:
13. Výška řádku
Výška čáry definuje vzdálenost mezi svislými čarami. Stejně jako mezery mezi písmeny lze i výšku řádku nastavit na kladnou nebo zápornou hodnotu pixelu. Podívejme se na příklad níže, abychom lépe porozuměli:
Příklad:
Tento odstavec má malou výšku řádku.
Tento odstavec má malou výšku řádku.
Výstup:
14. Směr textu
Někdy, pokud obsah webové stránky není v angličtině, ale nějaký jiný jazyk, jako je arabština, který dodržuje právo na levou konvenci, budeme muset změnit směr textu. V takových případech můžeme obrátit směr textu.
Příklad:
Jsem zleva
Výstup:
15. Textový stín
Tato vlastnost přidá do textu stín.
Příklad:
Mám šedý stín
Výstup:
16. Rodina písem
Můžeme definovat třídu písma pro text v prvku. Můžeme definovat více rodin písem oddělených čárkou jako záložní systém pro zpracování scénářů, kde nelze načíst preferovanou třídu písem.
- Styl písma: S vlastností stylu písma můžeme do textu přidat kurzívu nebo šikmý efekt.
Příklad:
To je šikmý styl.
Výstup:
- Hmotnost písma: Tato vlastnost definuje hmotnost písma.
Příklad:
Toto je odvážný odstavec
Výstup :
Atributy stylů představené nad našimi stavebními bloky s návrhem uživatelského rozhraní a UX. Po zavedení nových verzí CSS se nadále vyvíjejí.
Doporučené články
Toto je průvodce atributem HTML Style. Zde diskutujeme seznam všech vlastností stylů, které lze pomocí praktických příkladů ovlivnit a řídit návrh prvků HTML. Další informace naleznete také v následujících článcích -
- Styly písem HTML
- Styly seznamu HTML
- Základní značky HTML
- Výhody HTML
- Rámce HTML
- Reverzní JavaScript
- Bloky HTML
- Nastavte barvu pozadí v HTML s příkladem