Урок 2 із 104

Регістр тексту в CSS

Вивчаємо властивості text-transform і font-variant для зміни регістру символів та відображення малих великих літер.

Регістр тексту в CSS

CSS дозволяє змінювати регістр символів без редагування HTML. Для цього використовується властивість text-transform. Також існує властивість font-variant, яка дозволяє відображати малі літери як зменшені великі.

text-transform: uppercase — усі літери стають великими.
text-transform: lowercase — усі літери стають малими.
text-transform: capitalize — кожне слово починається з великої літери.
text-transform: none — без змін.
font-variant: small-caps — малі літери відображаються як зменшені великі.

Властивість text-transform

Найчастіше використовується для зміни регістру тексту без зміни самого вмісту HTML.


/* Усі літери великі */
p {
  text-transform: uppercase;
 }

/* Усі літери малі */
p {
  text-transform: lowercase;
 }

/* Перша літера кожного слова велика */
p {
  text-transform: capitalize;
 }

Властивість font-variant

Властивість font-variant: small-caps відображає малі літери як зменшені великі. Якщо шрифт підтримує Small Caps, результат буде виглядати професійніше.


p {
  font-variant: small-caps;
 }

❗ Важливо:

Властивість text-transform змінює лише відображення тексту. Сам текст у HTML залишається без змін.

Практичні завдання

📌 Завдання:

№1. Перетворіть увесь текст у верхній регістр.
№2. Помістіть кілька слів у тег span і зробіть лише їх великими літерами.
№3. Зробіть так, щоб кожне слово у ПІБ починалося з великої літери.

💡 Показати підказку

Для всього тексту використовуйте uppercase, для окремих слів — застосуйте стиль до span, а для ПІБ — capitalize.

✅ Показати відповідь


/* №1 */
p {
  text-transform: uppercase;
}

/* №2 */
span {
  text-transform: uppercase;
}

/* №3 */
p {
  text-transform: capitalize;
}