Schopnost stylovat různé aspekty vaší HTML stránky je důležitou dovedností pro webové designéry a vývojáře. Chcete-li upravit své webové stránky HTML pomocí barev a velikostí písma, musíte znát CSS. Chcete-li cílit konkrétně na velikost písma, můžete použít CSS velikost písma vlastnictví.

Pokud hledáte způsob, jak změnit velikost HTML písma pomocí CSS, máme pro vás jasno. Pojďme se ponořit do úvodu do CSS velikost písma vlastnictví.

Pochopení vlastnosti CSS velikosti písma

The velikost písma vlastnost v CSS je užitečná, když potřebujete změnit velikost HTML textu. Tuto vlastnost můžete použít ke změně velikosti každého kusu textu na stránce HTML nebo cílení na konkrétní prvky, které chcete změnit.

Obvykle se doporučuje cílení na konkrétní prvky, protože obvykle nechcete, aby mělo vše stejnou velikost. Text, který nedodržuje vizuální hierarchii, je těžké prohledat a odlišit nadpisy vyšší úrovně od nadpisů nízké úrovně.

Jednodušeji řečeno, nezneužívejte velikost písma vlastnictví. Pokud chcete, aby nadpis vynikl, existují pro to různé značky nadpisů HTML. Podívejte se na naše

cheat se základy HTML pro různé značky, atributy a další spolu s vysvětlením.

CSS velikost písma vlastnost nabývá dvou typů hodnot: absolutní a relativní.

Hodnoty absolutní délky (tj. px) jsou pevné, zatímco relativní (např. em a např) jsou flexibilní. Například pro jednotku relativní k písmu, jako je em, velikost je obvykle určena velikostí písma nadřazeného prvku. Nicméně jednotky relativní k fontům založené na kořenech mají rády rem jsou ovlivněny velikostí písma kořenového prvku ().

Každý z nich má své klady a zápory, ale v podstatě se o nich v tomto článku nebudeme věnovat.

Jak změnit velikost písma prvku HTML v CSS

Velikost písma HTML textu můžete změnit pomocí některé standardní syntaxe CSS.

Nejprve zadejte selektor (text, který chcete upravit) a otevřete nějaké složené závorky. Dále zadejte velikost písma vlastnost následovaná dvojtečkou, určete konkrétní velikost, ve které se má váš text HTML zobrazovat, a uzavřete ji středníkem.

Zde je syntaxe:

Selektor CSS {
 font-size: value;
}

Chcete-li koncepci lépe porozumět, projděte si následující šablonu HTML, která obsahuje několik dalších řádků kódu (nadpis a odstavec):

Toto je můj první nadpis

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Pokud chcete změnit velikost písma prvku odstavce, musíte jej vybrat (prostřednictvím třídy, značky nebo id) a pomocí CSS velikost písma vlastnost, nastavte vlastní hodnotu s preferovanými jednotkami. V našem příkladu použijeme pixely (px).

p {
 velikost písma: 18px;
}

I když se inline CSS ve velkých projektech obecně nedoporučuje, můžete je použít také ke změně velikosti HTML textu. Když si uděláme poznámky z výše uvedeného externího kódu CSS, můžeme totéž implementovat inline takto:

Toto je můj první nadpis

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Text v p Značka HTML bude mít nyní novou vlastní velikost.

Příbuzný: Základní CSS tipy a triky, které by měl znát každý vývojář

Odstraňování problémů při změně velikosti písma HTML v CSS

I když se celý proces změny velikosti textu v CSS může zdát snadný, nemusí vždy dopadnout přesně tak, jak očekáváte. Pokud se setkáte s problémy, začněte tím, že zkontrolujete, zda jste změny uložili do souboru (také se ujistěte, že jste propojili svůj list CSS se souborem HTML). Pokud ano, zkuste použít inline metodu a poté stránku obnovte.

Pokud to funguje, může být problém s vaším kódem CSS. Zkuste použít !Důležité a pokud to funguje, musí tam být nějaký konfliktní kód. Analyzujte svůj kód CSS řádek po řádku, abyste se pokusili zachytit tuto chybu.

10 jednoduchých příkladů kódu CSS, které se můžete naučit za 10 minut

Potřebujete pomoci s CSS? Pro začátek vyzkoušejte tyto základní příklady kódu CSS a poté je aplikujte na své vlastní webové stránky.

Přečtěte si další

O autorovi