Cookies

Na naší webové stránce používáme soubory cookies pro její správné fungování, přizpůsobení analytických dat a dynamiky obsahu pro uživatele. Více informací o cookies.

Potvrzením zároveň ukládáte souhlas se zpracováním osobních údajů v rámci nařízení GDPR.

Stylování HTML

Aneb jak obarvit, zvětšit nebo jinak modifikovat text
Předchozí Následující

#1 Styly

Webstránka postavená pouze s HTML prvky by nevypadala dobře. Proto existuje stylování webových stránek.

Stylování se nejčastěji provádí pomocí CSS stylů, o kterých píšeme v další kapitole, zde se naučíte jak „inline“ stylovat – stylovat přímo dané prvky pomocí atributu style.

#2 Atribut style

Aby se dali prvky stylovat přímo, takzvaně inline, používá se k tomu atribut style, jehož obsah funguje téměř totožně jako CSS – a to ve formátu vlastnost: hodnota;. Například:

<h1 style="color: red;">Červený nadpis</h1>
<p style="background-color: orange;">Odstavec textu s oranžovým pozadím</p>

#3 Časté inline styly

I když se většina stylů píše do externího CSS souboru, někdy potřebuje developer umístit stylování přímo do prvku – z jednoduchosti nebo kvůli testování atd.

Barva pozadí a textu

Častým inline stylování je změna barvy textu nebo pozadí. Barvení textu se provádí pomocí vlastnosti color, pozadí s vlastností background-color.

<div style="background-color: green;">
 <h2>Nadpis</h2>
 <p style="color: white;">Bílý odstavec textu</p>
</div>

Modifikace textu

Mezi nejčastější modifikace textu se řadí změna velikosti, změna fontu a zarovnání. Změna velikosti textu se provádí pomocí vlastnosti font-size, změna fontu s font-family a zarovnání s vlastností text-align.

<p style="font-size: 25px; font-family: Monospace;">Odstavec textu</p>
<p style="text-align: center;">Odstavec textu zarovnaný na střed</p>