Вступ до форматування CSS тексту
У попередні дні ви мали обмеження представляти текст, використовуючи стару версію CSS. У вас був тег, щоб змінити відтінок і шрифт тексту, проте вимірювання було перешкоджене за допомогою попередньо охарактеризованих розмірів тексту. Різні впливи, такі як інтенсивність та наскрізність, були можливі лише у фундаментальних структурах за допомогою HTML-міток. Наразі користувач може використовувати різноманітні властивості форматування CSS для впорядкування тексту на веб-сторінках своїми способами.
У цій главі ви побачите численні властивості форматування CSS. Властивості форматування тексту CSS використовуються для проектування тексту, стилю тексту, опису пари стилів форматування тощо. Властивості забезпечують візуальне зображення символів, пробілів, слів, абзаців та багато іншого.
Список властивостей форматування CSS:
Деталі способів форматування тексту в CSS: -
1) Колір тексту
Цю властивість можна використовувати для зміни кольору тексту. Це можна визначити за допомогою властивості кольору.
Приклад : ілюстрація кольору тексту
CSS Text Color Property
Привіт Світ….
Вітаємо з EDUCBA …
Він покаже наступний вихід:
2) Вирівнювання тексту
Цю властивість можна використовувати для зміни горизонталі тексту. Його можна визначити, використовуючи властивості ліворуч, праворуч, центр, виправдати.
Приклад : ілюстрація вирівнювання тексту
Text Alignment Property
Привіт Світ…
Ласкаво просимо до EDUCBA …
Освітній консультант …
Він покаже наступний вихід:
3) Прикраса тексту
Цю властивість можна використовувати для прикраси тексту. Його можна визначити, використовуючи властивості підкреслення, накреслення, проходження рядків.
Приклад : ілюстрація тексту-прикраси
Text DecorationProperty
Привіт Світ…
Ласкаво просимо до EDUCBA …
Освітній консультант …
Він покаже наступний вихід:
4) Перетворення тексту
Цю властивість можна використовувати для зміни випадків тексту. Його можна визначити, використовуючи великі, великі та малі властивості.
Приклад : ілюстрація перетворення тексту
Text Transformation Property
Привіт Світ…
Ласкаво просимо в educba …
Освітній консультант …
Він покаже наступний вихід:
5) Відступ тексту
Цю властивість можна використовувати для відступу першого рядка тексту. Його можна визначити, використовуючи властивості px, cm, pt.
Приклад : Ілюстрація відступу тексту
Text Indentation Property
Привіт Світ…
Ласкаво просимо в Educba …
Освітній консультант …
Він покаже наступний вихід:
6) Інтервал між словами
Цю властивість можна використовувати для виділення місця між словами. Його можна визначити, використовуючи властивість інтервалу між словами.
Приклад : Ілюстрація проміжків слів
Word Spacing Property
Привіт Світ…
Ласкаво просимо в Educba …
Освітній консультант …
Він покаже наступний вихід:
7) Пробіли літер
Цю властивість можна використовувати для надання місця між символами. Його можна визначити, використовуючи властивість проміжків літер.
Приклад : Ілюстрація проміжків літер
Letter Spacing Property
Привіт Світ…
Ласкаво просимо в Educba …
Освітній консультант …
Він покаже наступний вихід:
8) Висота лінії
Цю властивість можна використовувати для надання місця між рядками. Його можна визначити, використовуючи властивість висоти лінії.
Приклад : Ілюстрація висоти лінії
Line Height Property
h3
(
line-height:2.5;
)
h4
(
line-height:150%;
)
EDUCBA (Корпоративне мостове консультування Pvt Ltd) - це
провідний світовий провайдер професійної освіти
В EduCBA нам є гордістю зробити роботу орієнтованою
курси, доступні кожному, у будь-який час та в будь-якому місці.
Він покаже наступний вихід:
9) Текстовий напрямок
Цю властивість можна використовувати для зміни напрямку тексту. Це можна визначити, використовуючи властивість rtl. Він задає напрям справа наліво.
Приклад : ілюстрація напрямку тексту
Text Direction Property
Привіт, світ … Ласкаво просимо в Educba …
Він покаже наступний вихід:
10) Текст-тінь
Цю властивість можна використовувати для надання тіні тексту. Визначити це можна за допомогою властивості text-shadow. Тут використовуються такі компоненти, як ліве положення, верхнє положення, розмір розмиття, назва кольору.
Приклад : ілюстрація тексту-тіні
Text Shadow Property
h3
(
text-shadow:3px 3px 2px lightblue;
)
h4
(
text-shadow:3px 3px 2px plum;
)
Привіт, світ … Ласкаво просимо до EDUCBA …
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) - це освіта, заснована на навичках
Він покаже наступний вихід:
11) Емс
Це масштабований блок для розмірів. Це властивість em можна використовувати для визначення розміру тексту відповідно до оточуючого тексту. Типовий розмір тексту - 1ем, що дорівнює 12пт. 2em дорівнює 24pt і так далі.
Приклад : Ілюстрація властивості ems
Ems Property
h3
(
font-size: 0.8em;
)
h4
(
font-size: 1.2em;
)
Привіт, світ … Ласкаво просимо до EDUCBA …
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) - це освіта, заснована на навичках
Він покаже наступний вихід:
12) Сімейство шрифтів
Ця властивість використовується для надання різних типів імен шрифтів для вибраного тексту. Наприклад, Helvetica, Calibri, Arial, Sans-serif, Times, Courier New тощо.
Приклад : ілюстрація властивості сімейства шрифтів
Font Family Property
Привіт Світ…
Ласкаво просимо в Educba …
Освітній консультант …
Він покаже наступний вихід:
Висновок
Поки ми вивчали способи форматування тексту в CSS. Ви могли бачити, що текст представлений різними типами властивостей форматування тексту. Ці властивості є дуже важливими аспектами CSS для відображення тексту на веб-сторінці, щоб користувачі чи читачі могли привернути увагу, побачивши ваш текст на веб-сайті. Використовуйте ці властивості тексту дуже легко та ефективно на веб-сторінках.
Рекомендовані статті
Це було керівництвом щодо форматування тексту CSS. Тут ми детально обговорили вступ та список властивостей форматування CSS тексту з прикладами зразкового коду та правильним висновком. Ви також можете ознайомитися з іншими запропонованими нами статтями, щоб дізнатися більше -
- Що таке CSS?
- SASS проти CSS
- Команди CSS
- Запитання щодо інтерв'ю CSS3