Всім доброго часу доби. На зв'язку Олексій Гулинін. У минулій статті ви дізналися трохи про оформлення тексту в CSS. У даній статті розберемо, як вирівнювати текст в CSS. як задати новий рядок. а також такі властивості як line-height, word-spacing, letter-spacing, text-transform. Вирівнювання тексту в CSS здійснюється за допомогою властивості text-align. Відразу скажу, що ця властивість зустрічається на кожному кроці. Існує 4 значення цієї властивості:
left - вирівнювання по лівому краю, значення за замовчуванням, яке використовує браузер,
center - вирівнювання по центру,
right - вирівнювання по правому краю,
justify - вирівнювання по ширині. Це означає, що браузер буде вирівнювати текст як по лівому, так і по правому краю, за рахунок збільшення відстані між словами.
Давайте створимо html-сторінку з inline-стилями для кожного елемента:
Скопіюйте цей код і подивіться, як він працює. Зверніть увагу на роботу властивості text-align із значенням justify.
Новий рядок або відступ створюється за допомогою властивості text-indent. Значення даного властивості можна задавати в різних величинах. Давайте додамо ця властивість для нашого найбільшого абзацу (який вирівнюються по ширині):
Після оновлення сторінки ви побачите, що з'явився відступ у абзацу.
Давайте тепер розберемося, як задавати міжрядковий інтервал. Робиться це за допомогою властивості line-height. Давайте додамо до нашого абзацу міжрядковий інтервал в 40px і подивимося, що вийде:
Після оновлення сторінки, ви побачите, що міжрядковий інтервал збільшився. За замовчуванням ця властивість варто багатозначно normal. Даний інтервал можна задавати у вигляді множника. Якщо у нас розмір шрифту варто 15px, а множник варто дорівнює трьом, то у нас межстрочное відстань буде 45px. В CSS це буде виглядати так:
На практиці зазвичай використовуються множники у даного властивості, замість фіксованого значення.
Також можна змінювати інтервал між словами. Робиться це за допомогою властивості word-spacing (word з англ. «Слово»). Давайте на прикладі покажу роботу даного властивості:
Після оновлення сторінки ви побачите, що відстань між словами стало 10px.
Також можна змінювати відстань між буквами. Робиться це за допомогою властивості letter-spacing (letter з англ. «Буква»). Простий приклад:
Після оновлення сторінки ви побачите, що відстань між буквами стало 10px.
Іноді необхідно буває змінити регістр букв. Робиться це за допомогою властивості text-transform. У даного властивості є наступні значення:
uppercase - робить всі букви тексту великими. Зазвичай робиться для заголовків.
lowercase - робить всі букви тексту малими.
capitalize - робить кожну першу букву слова великої.
Ви можете сказати, що можна і безпосередньо в HTML писати як потрібно текст (десь великі, десь маленькі). Однак, це порушує ідеологію, що html - це розмітка, CSS - це оформлення.
Домашнє завдання: створіть 3 заголовка 2 рівня. Кожному з них, за допомогою inline-стилів, задайте різне значення властивості text-transform.
У даній статті ви вивчили такі властивості оформлення тексту, як text-align, text-indent, line-height, word-spacing, letter-spacing, text-transform.
Ще статті.
- Псевдоселектори в CSS
- селектори CSS
- Оформлення тексту CSS (1 частина)
- Як задати шрифт в CSS
- підключення CSS
