Могућност стилизовања различитих аспеката ваше ХТМЛ странице је важна вештина за веб дизајнере и програмере. Да бисте стилизирали своје ХТМЛ веб странице бојама и величинама фонта, морате бити упознати са ЦСС-ом. Да бисте посебно циљали величину фонта, можете користити ЦСС фонт-сизе својство.

Ако тражите начин да промените величину ХТМЛ фонта помоћу ЦСС-а, ми смо за вас. Хајде да се заронимо тако што ћемо почети са уводом у ЦСС фонт-сизе својство.

Разумевање својства ЦСС величине фонта

Тхе фонт-сизе својство у ЦСС-у је згодно када треба да промените величину ХТМЛ текста. Можете да користите ово својство да промените величину сваког дела текста на ХТМЛ страници или да циљате одређене елементе које желите да промените.

Обично се препоручује циљање одређених елемената јер обично не желите да све има исту величину. Текст који не прати визуелну хијерархију је тешко прегледати и разликовати наслове вишег нивоа од оних нижег нивоа.

Једноставније речено, немојте злоупотребљавати фонт-сизе својство. Ако желите да се наслов истиче, постоје различите ХТМЛ ознаке наслова за то. Погледајте наше

ХТМЛ основе за варање за различите ознаке, атрибуте и још много тога заједно са објашњењима.

ЦСС фонт-сизе својство поприма две врсте вредности: апсолутне и релативне.

Вредности апсолутне дужине (тј. пк) су фиксне, док су релативне (нпр. ем и пр) су флексибилни. На пример, за јединицу која се односи на фонт као ем, величина је обично одређена величином фонта родитељског елемента. Међутим, јединице које се односе на фонтове засноване на корену као што су рем на њих утиче величина фонта основног елемента ().

Сваки од њих има своје предности и недостатке, али у суштини фокусирања ствари, нећемо о њима расправљати у овом чланку.

Како променити величину фонта ХТМЛ елемента у ЦСС-у

Можете променити величину фонта ХТМЛ текста користећи неку стандардну ЦСС синтаксу.

Прво наведите селектор (текст који желите да измените) и отворите неке витичасте заграде. Затим унесите фонт-сизе својство праћено двотачком, наведите одређену величину у којој желите да се прикаже ваш ХТМЛ текст и затворите га тачком и зарезом.

Ево синтаксе:

ЦСС селектор {
 фонт-сизе: вредност;
}

Да бисте боље разумели концепт, прегледајте следећи ХТМЛ шаблон који има неколико додатних линија кода (наслов и пасус):

Ово је мој први наслов

Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит, сед до еиусмод темпор инцидидунт ут лаборе ет долоре магна аликуа. Ут еним ад миним вениам, куис ноструд екерцитатион улламцо лаборис ниси ут аликуип ек еа цоммодо цонсекуат.

Ако желите да промените величину фонта елемента пасуса, потребно је да га изаберете (преко класе, ознаке или ид-а) и, користећи ЦСС фонт-сизе својство, поставите прилагођену вредност са вашим жељеним јединицама. У нашем примеру користићемо пикселе (пк).

п {
 фонт-сизе: 18пк;
}

Иако се инлине ЦСС генерално не препоручује у великим пројектима, можете га користити и за промену величине ХТМЛ текста. Узимајући белешке из спољашњег ЦСС кода изнад, можемо да имплементирамо исту ствар инлине овако:

Ово је мој први наслов

Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит, сед до еиусмод темпор инцидидунт ут лаборе ет долоре магна аликуа. Ут еним ад миним вениам, куис ноструд екерцитатион улламцо лаборис ниси ут аликуип ек еа цоммодо цонсекуат.

Текст у стр ХТМЛ ознака ће сада имати нову прилагођену величину.

Повезан: Основни ЦСС савети и трикови које сваки програмер треба да зна

Решавање грешака приликом промене величине ХТМЛ фонта у ЦСС-у

Иако цео процес промене величине текста у ЦСС-у може изгледати лак, можда неће увек испасти баш онако како очекујете. Ако наиђете на проблеме, почните тако што ћете проверити да ли сте сачували промене у датотеци (такође, уверите се да сте повезали свој ЦСС лист са својом ХТМЛ датотеком). Ако јесте, покушајте да користите инлине метод, а затим освежите страницу.

Ако ради, можда постоји проблем са вашим ЦСС кодом. Покушајте да користите !важно таг, и ако ради, мора постојати неки конфликтни код. Парсирајте свој ЦСС код ред по ред да покушате да ухватите ту грешку.

10 једноставних примера ЦСС кода које можете научити за 10 минута

Треба вам помоћ са ЦСС-ом? За почетак испробајте ове основне примере ЦСС кода, а затим их примените на сопствене веб странице.

Реад Нект

О аутору