Міняємо розмір тексту css-стилями

Вітаю вас на сайті Impuls-Web!

Додаючи на сторінки сайту якийсь текст, ми обов'язково стикаємося з необхідністю оформлення тексту відповідно до загального дизайну. Одним з основних параметрів, що впливають на Новомосковскбельность і сприйняття тексту, є його розмір.

У цій статті я хочу з вами поговорити про те, як можна змінити розмір тексту css-властивостями, і які одиниці вимірювання можна для цього використовувати.

Навігація по статті:

Як змінити розмір тексту CSS-стилями

Для зміни параметрів в таблиці стилів css існує спеціалізоване властивість font-size, використовуючи яке можна задати розмір тексту css-стилями в будь-яких, зручних для вас одиницях виміру. При цьому можна використовувати абсолютні і відносні одиницю виміру.

При вказівці параметра в абсолютних одиницях, його величина не буде змінюватися відносно значення батьківського елемента.

До таких одиницях виміру відносяться:

Крім цього можна використовувати ключові слова:

Найбільш поширеною абсолютної одиницею виміру шрифту є піксель (px). Всі інші одиниці використовуються рідко, але при бажанні ви можете використовувати і їх.

При використанні відносних одиниць, таких як:%. em. rem. розмір шрифту в CSS буде розраховуватися щодо батьківського елементу.

Тобто при зміні шрифту батьківського елементу шрифт в блоці буде так само збільшуватися або зменшуватися.

Для цього можна скористатися такими одиницями виміру як:

Крім того, так само можна вказати розмір шрифту CSS ключовим словом у відносному вираженні: larger, smaller.

При використанні такого CSS-властивості шрифт буде більшим ніж в батьківському блоці.

При використанні smaller - шрифт буде менше ніж батьківському блоці.

Як змінити розмір тексту в HTML

Якщо вам потрібно виділити одне слово або фрагмент тексту, то, звичайно ж, це найпростіше зробити в html-коді, використовуючи атрибут style.

Ось так це буде виглядати на прикладі:

Міняємо розмір шрифту в CSS

Тепер, знаючи можливості даного css-властивості, ви можете використовувати його в залежності від ситуації, і домогтися саме того результату, який вам потрібен.

Наприклад, відносними одиницями можна скористатися при адаптації під мобільні пристрої, і текст буде зменшуватися при зменшенні ширини екрану. Це набагато зручніше, ніж для різних дозволів задавати розмір шрифту css-властивості в пікселях.