Schopnosť upravovať rôzne aspekty vašej stránky HTML je dôležitou zručnosťou pre webových dizajnérov a vývojárov. Ak chcete upraviť svoje HTML webové stránky pomocou farieb a veľkostí písma, musíte poznať CSS. Ak chcete konkrétne zacieliť na veľkosť písma, môžete použiť CSS veľkosť písma nehnuteľnosť.

Ak hľadáte spôsob, ako zmeniť veľkosť písma HTML pomocou CSS, máme to pre vás. Začnime úvodom do CSS veľkosť písma nehnuteľnosť.

Pochopenie vlastnosti veľkosti písma CSS

The veľkosť písma vlastnosť v CSS je užitočná, keď potrebujete zmeniť veľkosť HTML textu. Túto vlastnosť môžete použiť na zmenu veľkosti každej časti textu na stránke HTML alebo na zacielenie na konkrétne prvky, ktoré chcete zmeniť.

Zacielenie na konkrétne prvky sa zvyčajne odporúča, pretože zvyčajne nechcete, aby malo všetko rovnakú veľkosť. Text, ktorý sa neriadi vizuálnou hierarchiou, je ťažké naskenovať a odlíšiť nadpisy vyššej úrovne od nadpisov nižšej úrovne.

Zjednodušene povedané, nezneužívajte veľkosť písma nehnuteľnosť. Ak chcete, aby nadpis vynikol, existujú na to rôzne značky nadpisov HTML. Pozrite si naše

Základy HTML cheat sheet pre rôzne značky, atribúty a ďalšie spolu s vysvetleniami.

CSS veľkosť písma vlastnosť nadobúda dva typy hodnôt: absolútne a relatívne.

Hodnoty absolútnej dĺžky (t.j. px) sú pevné, zatiaľ čo relatívne (napr. em a napr) sú flexibilné. Napríklad pre jednotku relatívnu k písmu, ako je em, veľkosť je zvyčajne určená veľkosťou písma nadradeného prvku. Avšak jednotky relatívnej k fontu založené na koreňovom adresári majú rád rem sú ovplyvnené veľkosťou písma koreňového prvku ().

Každá má svoje klady a zápory, no v podstate sa o nich v tomto článku nebudeme venovať.

Ako zmeniť veľkosť písma prvku HTML v CSS

Veľkosť písma HTML textu môžete zmeniť pomocou niektorej štandardnej syntaxe CSS.

Najprv zadajte selektor (text, ktorý chcete upraviť) a otvorte niekoľko zložených zátvoriek. Ďalej zadajte veľkosť písma vlastnosť, za ktorou nasleduje dvojbodka, zadajte konkrétnu veľkosť, v ktorej sa má text HTML zobrazovať, a zatvorte ju bodkočiarkou.

Tu je syntax:

Selektor CSS {
 font-size: value;
}

Ak chcete lepšie pochopiť tento koncept, prečítajte si nasledujúci štandardný kód HTML, ktorý obsahuje niekoľko ďalších riadkov kódu (nadpis a odsek):

Toto je môj prvý 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 cvičenie ullamco laboris nisi ut aliquip ex ea commodo consequat.

Ak chcete zmeniť veľkosť písma prvku odseku, musíte ho vybrať (prostredníctvom triedy, značky alebo id) a pomocou CSS veľkosť písma vlastnosť, nastavte vlastnú hodnotu s preferovanými jednotkami. V našom príklade použijeme pixely (px).

p {
 veľkosť písma: 18px;
}

Aj keď sa inline CSS vo veľkých projektoch vo všeobecnosti neodporúča, môžete ho použiť aj na zmenu veľkosti textu HTML. Ak si vezmeme poznámky z vyššie uvedeného externého kódu CSS, môžeme implementovať to isté inline, ako napríklad:

Toto je môj prvý 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 cvičenie ullamco laboris nisi ut aliquip ex ea commodo consequat.

Text v p Značka HTML bude mať teraz novú vlastnú veľkosť.

Súvisiace: Základné tipy a triky CSS, ktoré by mal poznať každý vývojár

Riešenie problémov pri zmene veľkosti písma HTML v CSS

Aj keď sa celý proces zmeny veľkosti textu v CSS môže zdať jednoduchý, nemusí vždy dopadnúť presne tak, ako očakávate. Ak sa vyskytnú problémy, začnite tým, že skontrolujete, či ste zmeny uložili do súboru (tiež sa uistite, že ste prepojili svoj hárok CSS so súborom HTML). Ak áno, skúste použiť inline metódu a potom obnovte stránku.

Ak to funguje, môže sa vyskytnúť problém s kódom CSS. Skúste použiť !dôležité a ak to funguje, musí tam byť nejaký konfliktný kód. Analyzujte svoj kód CSS riadok po riadku, aby ste sa pokúsili zachytiť túto chybu.

10 jednoduchých príkladov kódu CSS, ktoré sa môžete naučiť za 10 minút

Potrebujete pomoc s CSS? Na začiatok vyskúšajte tieto základné príklady kódu CSS a potom ich aplikujte na svoje vlastné webové stránky.

Prečítajte si ďalej

O autorovi