Възможността да стилизирате различни аспекти на вашата HTML страница е важно умение за уеб дизайнери и разработчици. За да стилизирате своите HTML уеб страници с цветове и размери на шрифта, ще трябва да сте запознати с CSS. За да насочите конкретно към размера на шрифта, можете да използвате CSS размер на шрифта Имот.

Ако търсите начин да промените размера на HTML шрифта с помощта на CSS, ние сме ви покрили. Нека се потопим, като започнем с въведение в CSS размер на шрифта Имот.

Разбиране на свойството за размер на шрифта в CSS

В размер на шрифта свойството в CSS е удобно, когато трябва да промените размера на HTML текста. Можете да използвате това свойство, за да промените размера на всяко парче текст на HTML страница или да насочите към конкретни елементи, които да промените.

Обикновено се препоръчва насочване към конкретни елементи, тъй като обикновено не искате всичко да има същия размер. Текст, който не следва визуална йерархия, е труден за сканиране и разграничаване на заглавия от по-високо ниво от тези на ниско ниво.

По-просто казано, не злоупотребявайте с размер на шрифта Имот. Ако искате заглавие да се откроява, има различни HTML тагове за заглавия за това. Разгледайте нашите Таблица с основните HTML кодове за различни тагове, атрибути и други, заедно с обяснения.

CSS размер на шрифта свойството приема два вида стойности: абсолютни и относителни.

Стойности на абсолютната дължина (т.е. px) са фиксирани, докато относителните (напр. ем и напр) са гъвкави. Например за единица, свързана с шрифта, като ем, размерът обикновено се определя от размера на шрифта на родителския елемент. Въпреки това, базирани на корен единици, свързани с шрифтове, като рем се влияят от размера на шрифта на основния елемент ().

Всеки има своите плюсове и минуси, но в същността на фокусирането на нещата, няма да ги обсъждаме в тази статия.

Как да промените размера на шрифта на HTML елемент в CSS

Можете да промените размера на шрифта на HTML текста, като използвате някакъв стандартен CSS синтаксис.

Първо посочете селектора (текстът, който искате да промените) и отворете няколко къдрави скоби. След това въведете размер на шрифта свойство, последвано от двоеточие, посочете конкретния размер, в който искате да бъде представен вашият HTML текст, и го затворете с точка и запетая.

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

CSS селектор {
 размер на шрифта: стойност;
}

За да разберете по-добре концепцията, прегледайте следния HTML шаблон, който има няколко допълнителни реда код (заглавие и параграф):

Това е първото ми заглавие

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.

Ако искате да промените размера на шрифта на абзаца, трябва да го изберете (чрез клас, маркер или идентификатор) и, като използвате CSS размер на шрифта свойство, задайте персонализирана стойност с предпочитаните от вас единици. В нашия пример ще използваме пиксели (px).

p {
 размер на шрифта: 18px;
}

Въпреки че вграденият CSS обикновено не се препоръчва в големи проекти, можете също да го използвате, за да промените размера на HTML текста. Като си правим бележки от външния CSS код по-горе, можем да внедрим същото нещо вградено по следния начин:

Това е първото ми заглавие

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.

Текст в стр HTML маркерът вече ще има нов персонализиран размер.

Свързани: Основни CSS съвети и трикове, които всеки разработчик трябва да знае

Отстраняване на грешки при промяна на размера на HTML шрифта в CSS

Въпреки че целият процес на промяна на размера на текста в CSS може да изглежда лесен, може да не винаги е точно както очаквате. Ако имате проблеми, започнете, като проверите дали сте запазили промените във вашия файл (също не забравяйте да свържете своя CSS лист с вашия HTML файл). Ако сте го направили, опитайте да използвате вградения метод, след което опреснете страницата.

Ако работи, може да има проблем с вашия CSS код. Опитайте да използвате !важно таг и ако работи, трябва да има някакъв конфликтен код. Анализирайте своя CSS код ред по ред, за да опитате да уловите тази грешка.

10 прости примера за CSS код, които можете да научите за 10 минути

Нуждаете се от помощ с CSS? Изпробвайте тези основни примери за CSS код, за да започнете, след което ги приложете към вашите собствени уеб страници.

Прочетете Следващото

За автора