Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Форматування Тексту | CSS для Тексту
Основи CSS
course content

Зміст курсу

Основи CSS

Основи CSS

2. CSS для Тексту
3. Бокс Модель та Відстань між Елементами
4. Флексбокс
5. Декоративні Ефекти

book
Форматування Тексту

line-height

The line-height property defines the height of a line and is often used to adjust the space between lines of text. By default, line-height depends on the text font and is determined by the browser.

css
  • multiplier is a value without units (e.g., 1.5). In this case, the line height will be the value that is 1.5 greater than the font-size value;
  • value in px is a specific value (e.g., 24px) to which the line height will be equal;
  • value in em is a value (e.g., 1.4em) that works similarly to the multiplier. The browser will check the font-size value, multiply that value by 1.4, and this result will be the line height;
  • percent is a value (e.g., 120%) that functions like a multiplier. The font-size value will be multiplied by 1.2, determining the line height value.
html

index.html

css

index.css

copy

letter-spacing

The letter-spacing property sets the horizontal spacing between text characters.

css
  • normal is the default spacing between characters;
  • value in px is a specific value that adds extra space between characters;
  • value in em works similarly to px, but the spacing is relative to the font-size.
html

index.html

css

index.css

copy

word-spacing

The word-spacing property defines the distance between words in the text. It increases the space between words. If there are any punctuation marks in the text, and they are written with words, then they will still be written together, as there is no space between them.

css
  • value is a specific value that sets the space between words;
  • inherit inherits the word spacing from the parent element;
  • normal is the default spacing between words.
html

index.html

css

index.css

copy

text-shadow

The text-shadow property adds a shadow to the text.

css
  • X set - adjusts the position of the shadow horizontally. A positive value moves the shadow to the right, while a negative value moves it to the left;
  • Y set - adjusts the position of the shadow vertically. A positive value moves the shadow downwards, while a negative value moves it upwards;
  • blur radius - If the value is increased, the shadow becomes more diffuse and lighter. By default, the value is 0 if not specified;
  • color - specifies the color in any format. By default, the value is the same as the text color.
html

index.html

css

index.css

copy

Примітка

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

1. Яка властивість CSS використовується для створення візуального ефекту, що додає тінь до тексту?

2. Яка властивість CSS регулює відстань між словами в тексті?

question mark

Яка властивість CSS використовується для створення візуального ефекту, що додає тінь до тексту?

Select the correct answer

question mark

Яка властивість CSS регулює відстань між словами в тексті?

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 2. Розділ 2
Ми дуже хвилюємося, що щось пішло не так. Що трапилося?
some-alt