Введение в форматирование текста CSS
В предыдущие дни вы были вынуждены представлять текст, используя старую версию CSS. У вас был тег для изменения затенения и гарнитуры содержимого, однако измерение было затруднено с использованием предварительно охарактеризованных размеров текста. Различные воздействия, такие как интенсивность и проницаемость, были возможны только в фундаментальных структурах с помощью HTML-меток. В настоящее время пользователь может использовать различные свойства форматирования текста CSS для упорядочивания текста на веб-страницах по-своему.
В этой главе вы увидите множество свойств форматирования текста CSS. Свойства форматирования текста CSS используются для оформления текста, стилизации текста, описания пары стилей форматирования и т. Д. Свойства предоставляют вам визуальное представление символов, пробелов, слов, абзацев и многого другого.
Список свойств форматирования текста CSS:
Детали способов форматирования текста в CSS: -
1) Цвет текста
Это свойство можно использовать для изменения цвета текста. Это можно определить с помощью свойства цвета.
Пример : иллюстрация цвета текста
CSS Text Color Property
Привет, мир….
Добро пожаловать в EDUCBA …
Он будет отображать следующий вывод:
2) Выравнивание текста
Это свойство можно использовать для изменения горизонтали текста. Его можно определить с помощью свойств left, right, center, justify.
Пример : иллюстрация выравнивания текста
Text Alignment Property
Привет, мир…
Добро пожаловать в EDUCBA …
Образовательный консультант …
Он будет отображать следующий вывод:
3) Текстовое оформление
Это свойство можно использовать для оформления текста. Это может быть определено с помощью подчеркивания, наложения, сквозных свойств.
Пример : иллюстрация оформления текста
Text DecorationProperty
Привет, мир…
Добро пожаловать в EDUCBA …
Образовательный консультант …
Он будет отображать следующий вывод:
4) Преобразование текста
Это свойство можно использовать для изменения регистра текста. Это может быть определено с помощью прописных, прописных и строчных букв.
Пример : иллюстрация преобразования текста
Text Transformation Property
Привет, мир…
Добро пожаловать в образовательные …
Образовательный консультант …
Он будет отображать следующий вывод:
5) Отступ текста
Это свойство может использоваться для отступа первой строки текста. Его можно определить с помощью свойств px, cm, pt.
Пример : иллюстрация отступа текста
Text Indentation Property
Привет, мир…
Добро пожаловать в Educba …
Образовательный консультант …
Он будет отображать следующий вывод:
6) Интервал между словами
Это свойство может быть использовано для пробела между словами. Это можно определить с помощью свойства word-spacing.
Пример : иллюстрация расстояния между словами
Word Spacing Property
Привет, мир…
Добро пожаловать в Educba …
Образовательный консультант …
Он будет отображать следующий вывод:
7) Интервал между буквами
Это свойство можно использовать для предоставления пробела между символами. Это можно определить с помощью свойства межбуквенного интервала.
Пример : Иллюстрация расстояния между буквами
Letter Spacing Property
Привет, мир…
Добро пожаловать в Educba …
Образовательный консультант …
Он будет отображать следующий вывод:
8) Высота линии
Это свойство может быть использовано для предоставления пространства между строками. Это можно определить с помощью свойства line-height.
Пример : Иллюстрация line-height
Line Height Property
h3
(
line-height:2.5;
)
h4
(
line-height:150%;
)
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) является
ведущий мировой поставщик основанного на навыках образования
В eduCBA мы гордимся тем, что ориентируемся на работу
Курсы доступны для всех, в любое время и в любом месте.
Он будет отображать следующий вывод:
9) Текст-направление
Это свойство может быть использовано для изменения направления текста. Это можно определить с помощью свойства rtl. Устанавливает направление справа налево.
Пример : иллюстрация направления текста
Text Direction Property
Hello World … Добро пожаловать в 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 может использоваться для определения размера текста в соответствии с окружающим текстом. Размер текста по умолчанию - 1em, что равно 12pt. 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
Font Family Property
Привет, мир…
Добро пожаловать в Educba …
Образовательный консультант …
Он будет отображать следующий вывод:
Вывод
До сих пор мы изучали способы форматирования текста в CSS. Вы могли видеть, что текст представлен с различными типами свойств форматирования текста. Эти свойства являются очень важными аспектами CSS для отображения текста на веб-странице, чтобы пользователи или читатели могли привлечь внимание, увидев ваш текст на веб-сайте. Используйте эти свойства текста очень легко и эффективно на веб-страницах.
Рекомендуемые статьи
Это было руководство по форматированию текста CSS. Здесь мы подробно обсудим введение и список свойств форматирования текста CSS с примерами кода и правильным выводом. Вы также можете просмотреть наши другие предлагаемые статьи, чтобы узнать больше -
- Что такое CSS?
- SASS против CSS
- CSS команды
- CSS3 Интервью Вопросы