Стилізація тексту

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

За допомогою властивості text-align можна встановити вирівнювання тексту в блоці. Нижче вказані можливі значення цієї властивості. Першим вказане те, яке використовується за замовчанням.

text-align: left | right | center | justify

У веб розробці використання значення justify - погана практика. Текст гарно розтягається по боках, але його читабельність знижується через ширні пробіли між словами.

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

Властивість text-decoration встановлює декорації тексту, такі як підкреслення.

text-decoration: none | underline | line-through | overline

За замовчанням у більшості елементів ця властивість має значення none. Утім у посилань за замовчанням ця властивість - underline. Тому часто для посилань її скасовують задавши none.

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

Властивість text-transform робить перетворення тексту, таке як переведення великих літер в маленькі або навпаки.

text-transform: none | uppercase | lowercase | capitalize

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

text-indent - це властивість, яка встановлює відступ першого рядка тексту від лівого (або правого, у залежності від напрямку тексту) краю його батьківського блоку. Вона може бути вказана в пікселях, відсотках або інших одиницях вимірювання.

text-indent: значення | відсотки | inherit

Властивість line-height

line-height - це властивість, яка встановлює висоту рядка тексту. Вона вказує відстань між базовими лініями тексту (включаючи текст, символи, та інші елементи) всередині блоку або елемента. Аналог інтерліньяжу в типографіці.

Ця властивість може бути вказана в різних одиницях вимірювання, таких як пікселі, відсотки або безрозмірна одиниця (наприклад, 1.5). За замовчуванням ця властивість визначається браузером автоматично в залежності від виду і розміру шрифту.

line-height: множник | значення | відсотки | normal | inherit

Правилом хорошого тону задавати line-height у відносних одиницях. Тому що при зміні шрифту чи інших параметрів збережеться пропорція і не буде порушено зовнішній вигляд.

Знаючи розмір шрифту та інтерліньяж у пікселях легко вирахувати відносний відповідник. Достатньо просто інтерліньяж поділити на розмір шрифту.

line-height = line-height(px) / font-size(px)

В CSS це буде мати такий вигляд

p {
  font-size: 16px;
  line-height: 1.5; // що відповідає 24px
}

Властивість letter-spacing

letter-spacing - це властивість, яка встановлює відстань між символами тексту. Вона дозволяє збільшувати чи зменшувати проміжок між буквами та іншими символами в тексті.

Можна вказати letter-spacing в пікселях, відсотках, em або інших одиницях вимірювання. Позитивні значення збільшують відстань між символами, що призводить до більшого інтервалу, тоді як негативні значення зменшують відстань, приносячи символи ближче один до одного.

letter-spacing: значення | normal | inherit

Властивість word-spacing

word-spacing - це властивість, яка встановлює відстань між словами в тексті. Вона працює аналогічно до letter-spacing, але вміщує в себе відстань між словами, а не символами всередині слова.

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

word-spacing: значення | normal | inherit

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

text-shadow - це властивість, яка дозволяє додавати тінь до тексту. Вона дозволяє встановлювати одну чи більше тіней для тексту, вказуючи зміщення по горизонталі та вертикалі, радіус розмиття і колір тіні.

text-shadow: горизонтальне-зміщення вертикальне-зміщення радіус колір;

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

• радіус вказує на розмір розмиття тіні. Чим більше значення, тим більш розмита буде тінь.

• колір вказує на колір тіні. Задається в будь-якому форматі.

h1 {
  text-shadow: 2px 2px 3px #000000;
}

Багатошарова тінь

Тексту можна задавати кілька тіней, вказавши їх через кому. Вони ніби накладатимуться одна на одну і вище буде та, яка вказана першою.

h1 {
    text-shadow: 2px 2px 3px #0000FF, -2px -2px 3px #000000;
}

Властивість white-space

white-space - це властивість, яка вказує, як простори та символи пробілу обробляються всередині елемента. Ця властивість визначає, чи має браузер враховувати пробіли та переноси рядка в тексті.

white-space: normal | nowrap | pre | pre-wrap | pre-line

1. normal (за замовчуванням): Пробіли та переноси рядка обробляються як одиничні пробіли, а послідовності пробілів зменшуються до одного пробілу. Рядок тексту обрізається, якщо не поміщається всередині контейнера.

2. nowrap: Текст не переноситься на новий рядок, і буде обрізаний, якщо не поміщається всередині контейнера.

3. pre: Пробіли та переноси рядка відображаються точно так, як вихідний код. Це означає, що пробіли та переноси рядка в тексті будуть відображатися як їх написали у вихідному коді.

4. pre-wrap: Пробіли зберігаються, але переноси рядка діють, як в pre.

5. pre-line: Поведінка пробілів відповідає normal, але переноси рядка відображаються як в pre.