FrontendBook - Как изменить размер текста с помощью тега HTML

Как изменить размер текста с помощью тега HTML

Когда вы добавляете текст в свой HTML-файл с помощью HTML-тега, вы не всегда хотите, чтобы текст оставался размером по умолчанию. Вы захотите иметь возможность настроить отображение текста в браузере.

В этой статье вы узнаете, как изменить размер текста с помощью тега HTML.

Прежде чем продолжить, важно знать, что это можно сделать только одним способом: через font-size свойство CSS. Мы можем использовать font-size свойство через встроенный, внутренний или внешний стиль.

В прошлом мы могли регулировать размер текста в HTML-теге без использования CSS. Но это было до HTML5. Мы добавляли текст с помощью <font> тега, который может принимать атрибут размера, как показано ниже:


<font size="5">  
  FrontendColors.ru 
</font>

Этот атрибут размера может принимать значения от 1 до 7, в которых размер текста увеличивается от 1 до 7. Но, как я уже сказал, это уже давно обесценилось, и большинство людей даже не знают о его существовании.

Если вы спешите узнать, как можно изменить размер текста, то вот он:

         
// Строчный CSS код
<h1 style="font-size: value;"> FrontendGradients.ru </h1>

// Внутренний/Внешний CSS код
selector {
    font-size: значение;
}

Как изменить размер текста с помощью встроенного CSS

Встроенный CSS позволяет применять стили к определенным элементам HTML. Это означает, что мы помещаем CSS непосредственно в тег HTML. Мы используем атрибут стиля, который теперь содержит все наши стили.

 
<h1 style="...">FrontendColors.ru</h1>

Мы используем font-sizeсвойство вместе с нашим значением, чтобы изменить размер текста с помощью встроенного CSS. Это значение может использовать любую из ваших предпочтительных единиц CSS, таких как em, px, rem и так далее.

 
<h1 style="font-size:4em;">FrontendColors.ru</h1>
<p style="font-size:14px;">Любые цвета для вашего проекта!</p>

Идеальный синтаксис:

 
<ТЕГ style="font-size: значение">FrontendColors.ru</ТЕГ>

Как изменить размер текста с помощью внутреннего или внешнего CSS

Подход, который вы используете для изменения размера текста во внутренних и внешних стилях CSS, аналогичен, поскольку вы используете селектор. Общий синтаксис для этого:

 
selector {
    font-size: значение;
}

Селектор может быть либо нашим HTML-тегом, либо классом или идентификатором. Например:

 
// HTML
<p> Как менять размер шрифта </p>

// CSS
p {
    font-size: 14px;
}

Или мы могли бы использовать класс:

 
// HTML
<p class="my-paragraph" > Any text whose font we want to change </p>

// CSS
.my-paragraph {
    font-size: 14px;
}

Подведение итогов

В этой статье вы узнали, как изменить размер шрифта/текста элемента HTML с помощью CSS. Вы также видели, как это делали разработчики до появления HTML5.

Кроме того, имейте в виду, что всегда лучше стилизовать элементы HTML, используя внутренние или внешние стили, поскольку они обеспечивают большую гибкость по сравнению со встроенными стилями.

Например, вы можете использовать один класс CSS для всех ваших тегов p вместо того, чтобы добавлять встроенные стили ко всем вашим элементам тега p.