Свойства текста | htmlbook.ru
С помощью CSS можно определять стиль и вид текста. Аналогично тому, что используется тег <font>, задающий свойства шрифта, но стили обладают большими возможностями и позволяют сократить код HTML.
Свойства шрифта
Изменение начертания шрифта и его размера происходит через свойства CSS, которые описаны в табл. 1.
| Свойство | Значение | Описание | Пример |
|---|---|---|---|
| font-family | имя шрифта | Задает список шрифтов | P {font-family: Arial, serif} |
| font-style | normal italic oblique | Нормальный шрифт Курсив Наклонный шрифт | P {font-style: italic} |
| font-variant | normal small-caps | Капитель (особые прописные буквы) | P {font-variant: small-caps} |
| font-weight | normal lighter bold 100–900 | Нормальная жирность Светлое начертание Полужирный Жирный 100 — светлый шрифт, 900 — самый жирный | P {font-weight: bold} |
| font-size | normal pt px % | нормальный размер пункты пикселы проценты | font-size: normal font-size: 12pt font-size: 12px font-size: 120% |
В примере 1 показано использование параметров при работе со шрифтами.
Пример 1. Задание свойств шрифта с помощью CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Шрифт</title>
<style type="text/css">
h2 {
font-family: Arial, Helvetica, Verdana, sans-serif; /* Гарнитура шрифта */
font-size: 150%; /* Размер текста */
font-weight: lighter; /* Светлое начертание */
}
</style>
</head>
<body>
<h2>Заголовок</h2>
<p>Обычный текст</p>
</body>
</html> Ниже приведен результат данного примера (рис. 1).
Рис. 1. Вид текста после применения стилей
В табл. 2 приведены некоторые стилевые параметры для работы с текстом и результат их применения.
| Пример | Пример | Пример | Пример | Пример |
| font-family: Verdana, sans-serif; font-size: 120%; font-weight: light | font-size: large; font-weight: bold | font-family: Arial, sans-serif; font-size: x-small; font-weight: bold | font-variant: small-caps | font-style: italic; font-weight: bold |
Свойства текста
Кроме изменения параметров шрифтов, можно управлять и свойствами всего текста.
| Свойство | Значение | Описание | Пример |
|---|---|---|---|
| line-height | normal множитель значение % | Интерлиньяж (межстрочный интервал) | line-height: normal line-height: 1.5 line-height: 12px line-height: 120% |
| text-decoration | none underline overline line-through blink | Убрать все оформление Подчеркивание Линия над текстом Перечеркивание Мигание текста | text-decoration: none |
| text-transform | none capitalize uppercase lowercase | Убрать все эффекты Начинать С Прописных ВСЕ ПРОПИСНЫЕ все строчные | text-transform: capitalize |
| text-align | left right center justify | Выравнивание текста | text-align: justify |
| text-indent | значение % | Отступ первой строки | text-indent: 15px; text-indent: 10% |
Ниже, в табл.
4 приведены некоторые параметры текста и результат их применения.
| Пример: и это все о нем | Пример: текст по центру | Пример: Это не ссылка, а просто текст | Пример: отступ первой строки | Пример: полуторный межстрочный интервал |
| text-transform: capitalize | text-align:center | text-decoration: underline | text-indent: 20px | line-height: 1.5 |
текст
CSS по теме
- font-family
- font-size
- font-style
- font-variant
- font-weight
- text-align
- text-decoration
- text-transform
Форматирование текста в CSS
Замечание: как правило, CSS-свойства, связанные с работой с текстом, являются наследуемыми.
Выравниванием текста внутри блока управляет свойство text-align (left, right, center, justify).
Свойство white-space устанавливает, как отображать пробелы между словами и переводы строк:
По умолчанию длинные слова выходят за пределы блоков, если только внутри слова не используется элемент wbr. Если у свойства word-wrap установить значение break-word, то слово разрывается, чтобы уместиться в блок (по умолчанию значение normal). Свойство word-break выполняет перенос «жёстче» (возможные значения: normal, break-all, keep-all):
Свойство text-overflow управляет видом обрезанного текста в блоке. Если text-overflow:ellipsis, то к концу обрезанного текста будет добавляться многоточие (обычное поведение соответствует значению clip). Свойство работает для блоков, у которых свойство overflow установлено в auto или scroll или hidden.
Для настройки расстояний в тексте служат свойства letter-spacing, word-spacing и line-height.
Значением всех свойств может быть размер или normal(задает интервал как обычный). У line-height, кроме размера и normal, значением могут быть проценты или число (множитель от размера шрифта текущего текста).
Размер красной строки задаётся свойством
Свойство text-transform управляет преобразованием текста в заглавные или прописные символы:
Свойство color задаёт цвет переднего плана (foreground color). Однако color определяет и цвет границы для блока или изображения (если не установлено border-color), и цвет (некоторых) элементов управления.
Свойство text-decoration даёт тексту эффекты подчёркивания или мигания. Значения свойства: underline, overline, line-through, blink и none. Все значения, кроме none, можно комбинировать (через пробел). Планируется закрепить в стандарте свойства для настройки линии: text-decoration-color, text-decoration-line, text-decoration-style.
Добавить тень к тексту и установить её параметры можно при помощи свойства text-shadow. Параметры тени задаются через пробел:
- сдвиг тени по горизонтали относительно текста
- сдвиг тени по вертикали относительно текста
- радиус размытия тени (необязательный параметр)
- цвет тени (необязательный параметр)
Следующие свойства управляют параметрами шрифта:
font-family
В качестве значения свойства font-family обычно используют список названий, разделённых запятой. font-family: Georgia, 'Times New Roman', serif;
Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере. Если шрифта нет, берётся следующее имя из списка. Обычно список заканчивают ключевым словом для типа шрифта – serif, sans-serif, cursive, fantasy, monospace.
font-size
Размер может быть установлен несколькими способами:
xx-small, x-small, small, medium, large, x-large, xx-largeзадают абсолютные размеры шрифта.
larger, smallerустанавливает размеры шрифта относительно шрифта родительского элемента.
Можно использовать единицы размера и проценты.
font-weight
Значение устанавливается от 100 до 900 с шагом 100.
Можно использовать ключевые слова bold (полужирное начертание, 700), normal (нормальное начертание, 400).
Значения bolder и lighter изменяют жирность относительно насыщенности родителя, соответственно, в большую и меньшую сторону.
font
Универсальное свойство font позволяет одновременно задать несколько характеристик шрифта.
font: [font-style||font-variant||font-weight] font-size [/line-height] font-family
В качестве обязательных значений указывается размер шрифта и его семейство.
@font-face
@font-face { свойства шрифта }
Свойства шрифта – это обычные font-family, font-size, font-style и др.
, а также ссылка на шрифтовой файл в виде src: url(URI).
Внимание: значение font-family будет использоваться для ссылки на шрифт в таблице стилей!
Форматирование текста с помощью CSS — Учебное пособие Республика
Реклама
В этом учебном пособии вы узнаете, как стилизовать текст на своих веб-страницах с помощью CSS.
Форматирование текста с помощью CSS
CSS предоставляет несколько свойств, которые позволяют очень легко и эффективно определять различные стили текста, такие как цвет, выравнивание, интервалы, оформление, преобразование и т. д.
Обычно используемые свойства текста: text-align , text-decoration , text-transform , text-indent , line-height , letter-spacing , word-spacing и многое другое. Эти свойства дают вам точный контроль над внешним видом символов , слов , пробелов и так далее.
Давайте посмотрим, как установить эти текстовые свойства для элемента более подробно.
Цвет текста
Цвет текста определяется свойством CSS color .
Правило стиля в следующем примере определяет цвет текста по умолчанию для страницы
Пример
Попробуйте этот код » body {
цвет: #434343;
} Хотя кажется, что свойство цвета должно быть частью текста CSS, на самом деле это отдельное свойство в CSS. См. учебник по цвету CSS, чтобы узнать больше о свойстве цвета.
Выравнивание текста
Свойство text-align используется для установки горизонтального выравнивания текста.
Текст можно выравнивать четырьмя способами: по левому краю, по правому краю, по центру или по ширине (прямо по левому и правому краю).
Давайте рассмотрим пример, чтобы понять, как работает это свойство.
Пример
Попробуйте этот код » h2 {
выравнивание текста: по центру;
}
п {
выравнивание текста: по ширине;
} Примечание: Когда для text-align установлено значение justify , каждая строка растягивается так, что каждая строка имеет одинаковую ширину (кроме последней строки), а левое и правое поля прямые.
Это выравнивание обычно используется в таких публикациях, как журналы и газеты.
Давайте посмотрим на следующую иллюстрацию, чтобы понять, что на самом деле означают эти значения.
Оформление текста
Свойство text-decoration используется для установки или удаления оформления текста.
Это свойство обычно принимает одно из следующих значений: подчеркивание , надчеркивание , сквозное и нет . Вы должны избегать подчеркивания текста, который не является ссылкой, так как это может запутать посетителя.
Давайте попробуем следующий пример, чтобы понять, как это в основном работает:
Пример
Попробуйте этот код » h2 {
оформление текста: надчеркивание;
}
h3 {
оформление текста: сквозное;
}
h4 {
оформление текста: подчеркивание;
} Удаление подчеркивания по умолчанию из ссылок
Свойство text-decoration широко используется для удаления подчеркивания по умолчанию из гиперссылок HTML.
Вы также можете предоставить некоторые другие визуальные подсказки, чтобы выделить его среди обычного текста, например, используя пунктирную рамку вместо сплошного подчеркивания.
Давайте рассмотрим следующий пример, чтобы понять, как это работает:
Пример
Попробуйте этот код » a {
текстовое оформление: нет;
нижняя граница: 1px пунктирная;
} Примечание: Когда вы создаете HTML-ссылку, браузеры, встроенные в таблицу стилей, автоматически подчеркивают ее и применяют синий цвет, чтобы читатели могли четко видеть, какой текст можно щелкнуть.
Преобразование текста
Свойство text-transform используется для установки регистров текста.
Текст часто пишется в смешанном регистре. Однако в некоторых ситуациях вы можете захотеть отобразить текст в совершенно другом регистре. Используя это свойство, вы можете изменить текстовое содержимое элемента на прописные или строчные буквы или сделать заглавной первую букву каждого слова без изменения исходного текста.
Давайте попробуем следующий пример, чтобы понять, как это работает:
Пример
Попробуйте этот код » h2 {
преобразование текста: верхний регистр;
}
h3 {
преобразование текста: использовать заглавные буквы;
}
h4 {
преобразование текста: нижний регистр;
} Отступ текста
Свойство text-indent используется для задания отступа первой строки текста в текстовом блоке. Обычно это делается путем вставки пустого места перед первой строкой текста.
Размер отступа может быть указан в процентах (%), значениях длины в пикселях, ems и т. д.
Следующее правило стиля устанавливает отступ первой строки абзаца на 100 пикселей.
Пример
Попробуйте этот код » р {
отступ текста: 100px;
} Примечание: Отступ текста direction .
Межбуквенный интервал
Свойство letter-spacing используется для установки дополнительного интервала между символами текста.
Это свойство может принимать значение длины в пикселях, ems и т. д. Оно также может принимать отрицательные значения. При настройке межбуквенного интервала значение длины указывает интервал в дополнение к межсимвольному интервалу по умолчанию.
Давайте рассмотрим следующий пример, чтобы понять, как это работает на самом деле:
Пример
Попробуйте этот код » h2 {
межбуквенный интервал: -3px;
}
п {
межбуквенный интервал: 10px;
} Интервал между словами
Свойство word-spacing используется для указания дополнительного интервала между словами.
Это свойство может принимать значение длины в пикселях, ems и т. д. Допускаются также отрицательные значения.
Давайте рассмотрим следующий пример, чтобы понять, как работает это свойство:
Пример
Попробуйте этот код »p.
normal {
интервал между словами: 20px;
}
п.оправдано {
интервал между словами: 20px;
выравнивание текста: по ширине;
}
p.preformatted {
интервал между словами: 20px;
пробел: предварительно;
} Примечание: Расстояние между словами может зависеть от выравнивания текста. Кроме того, несмотря на сохранение пробелов, на пробелы между словами влияет свойство word-spacing .
Высота строки
Свойство line-height используется для установки высоты текстовой строки.
Также называется интерлиньяж и обычно используется для установки расстояния между строками текста.
Значением этого свойства может быть число, процент (%) или длина в пикселях, ems и т. д.
Пример
Попробуйте этот код » p {
высота строки: 1,2;
} Если значение является числом, высота строки вычисляется путем умножения размера шрифта элемента на число. В то время как процентные значения относятся к размеру шрифта элемента.
Примечание. Отрицательные значения свойства line-height не допускаются. Это свойство также является компонентом сокращенного свойства шрифта CSS.
Если значение свойства line-height больше, чем значение font-size для элемента, эта разница (называемая «ведущей» ) сокращается вдвое (называется «половина -ведущий» ) и равномерно распределить сверху и снизу рядного ящика. Давайте рассмотрим пример:
Пример
Попробуйте этот код » p {
размер шрифта: 14px;
высота строки: 20 пикселей;
цвет фона: #f0e68c;
} См. руководство по переполнению текста CSS3 в расширенном разделе, чтобы узнать, как обрабатывать переполнение текста. Также см. раздел «Тень текста CSS3», чтобы узнать, как применить эффект тени к тексту.
Предыдущая страница Следующая страница
Форматирование текста CSS | 12 лучших свойств форматирования текста CSS
В предыдущие дни вы были вынуждены представлять текст с помощью старой версии CSS.
У вас был тег для изменения оттенка и шрифта содержимого, однако измерение было затруднено из-за использования предварительно характеризованных размеров текста. Различные воздействия, такие как интенсивность и зачеркивание, можно было представить только в основных структурах с помощью меток HTML. В настоящее время пользователь может использовать различные свойства форматирования текста CSS, чтобы расположить текст на веб-страницах по-своему.
В этой главе вы увидите многочисленные свойства форматирования текста CSS. Свойства форматирования текста CSS используются для оформления текста, оформления текста, описания нескольких стилей форматирования и т. д. Свойства обеспечивают визуальное представление символов, пробелов, слов, абзацев и многого другого.
Список свойств форматирования текста CSS
Ниже приведен список свойств форматирования текста CSS.
Подробная информация о способах форматирования текста в CSS: —
1) Цвет текста
Это свойство можно использовать для изменения цвета текста.
Его можно определить с помощью свойства цвета.
Пример : Иллюстрация цвета текста
Код:
<голова>Свойство цвета текста CSS <тело>Привет, мир….
Добро пожаловать в EDUCBA…
Вывод:
2) Выравнивание текста
Это свойство можно использовать для изменения горизонтальности текста. Его можно определить, используя свойства «слева», «справа», «по центру», «выравнивание».
Пример : Иллюстрация выравнивания текста
Код:
<голова>Свойство выравнивания текста <тело>Привет, мир...
Добро пожаловать в EDUCBA...
Консультант по вопросам образования...
Вывод:
3) Оформление текста
Это свойство можно использовать для украшения текста.
Его можно определить с помощью свойств подчеркивания, надчеркивания, сквозной линии.
Пример : Иллюстрация оформления текста
Код:
<голова>Свойство оформления текста <тело>Привет, мир...
Добро пожаловать в EDUCBA...
Консультант по вопросам образования...
Вывод:
4) Преобразование текста
Это свойство можно использовать для изменения регистра текста. Его можно определить с помощью свойств «capital», «uppercase», «lowercase».
Пример : Иллюстрация преобразования текста
Код:
<голова>Свойство преобразования текста <тело>привет, мир...
Добро пожаловать в образовательную...
Консультант по вопросам образования...
Вывод:
5) Отступ текста
Это свойство можно использовать для отступа первой строки текста.
Его можно определить с помощью свойств px, cm, pt.
Пример : Иллюстрация отступа текста
Код:
<голова>Свойство отступа текста <тело>Привет, мир...
Добро пожаловать в Educba...
Консультант по вопросам образования...
Вывод:
6) Интервал между словами
Это свойство можно использовать для создания интервала между словами. Его можно определить с помощью свойства word-spacing.
Пример : Иллюстрация межсловного интервала
Код:
<голова>Свойство межсловного интервала <тело>Привет, мир...
Добро пожаловать в Educba...
Консультант по вопросам образования...
Вывод:
7) Интервал между буквами
Это свойство можно использовать для добавления пробела между символами.
Его можно определить с помощью свойства letter-spacing.
Пример : Иллюстрация межбуквенного интервала
Код:
<голова>Свойство межбуквенного интервала <тело>Привет, мир...
Добро пожаловать в Educba...
Консультант по вопросам образования...
Вывод:
8) Высота строки
Это свойство можно использовать для создания пространства между строками. Его можно определить с помощью свойства line-height.
Пример : Иллюстрация высоты строки
Код:
<голова>Свойство высоты строки <стиль> h4 { высота строки: 2,5; } h5 { высота строки: 150%; } <тело>EDUCBA (Corporate Bridge Consultancy Pvt Ltd) – ведущий мировой поставщик образовательных услуг, основанных на навыках.
В eduCBA мы гордимся тем, что делаем практические курсы
ориентированными на работу, доступными для всех, в любое время и в любом месте.
Вывод:
9) Text-directionЭто свойство можно использовать для изменения направления текста. Его можно определить с помощью свойства rtl. Он задает направление справа налево.
Пример : Иллюстрация направления текста
Код:
<голова>Свойство направления текста <тело>Привет, мир... Добро пожаловать в Educba...
Вывод:
10) Text-shadow
Это свойство можно использовать для создания тени для текста. Его можно определить с помощью свойства text-shadow. Он использует такие компоненты, как левое положение, верхнее положение, размер размытия, название цвета.
Пример : Иллюстрация text-shadow
Код:
<голова>Свойство тени текста <стиль> h4 { text-shadow:3px 3px 2px голубой; } h5 { text-shadow:3px 3px 2px слива; } <тело>Привет, мир... Добро пожаловать в EDUCBA...
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) — это обучение, основанное на навыках.
Вывод:
11) Ems
Это масштабируемая единица измерения. Это свойство em можно использовать для определения размера текста в соответствии с окружающим текстом. Размер текста по умолчанию — 1em, что равно 12pt. 2em равно 24pt и так далее.
Пример : Иллюстрация свойства ems
Код:
<голова>Свойство Эмс <стиль> h4 { размер шрифта: 0.8em; } h5 { размер шрифта: 1.Привет, мир... Добро пожаловать в EDUCBA...
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) — это обучение, основанное на навыках.
2em;
}
<тело>
Вывод:
12) Семейство шрифтов
Это свойство используется для предоставления различных типов имен семейств шрифтов для выбранного текста. Например, Helvetica, Calibri, Arial, Sans-serif, Times, Courier New и т. д. <голова>
Привет, мир…
Добро пожаловать в Educba…
Консультант по вопросам образования…
Вывод:
Заключение
До сих пор мы изучали способы форматирования текста в CSS. Вы могли видеть, что текст представлен с различными типами свойств форматирования текста. Эти свойства являются очень важными аспектами CSS для отображения текста на веб-странице, чтобы пользователи или читатели могли привлечь внимание, увидев ваш текст на веб-сайте.