Разработка магазинов с гарантией попадания в ТОП поисковых систем

Узнать подробнее
Eltisbook > CSS учебник > Форматирование текста в CSS

Форматирование текста в CSS

«Форматирование текста в CSS» – третий урок учебника CSS. Здесь мы поговорим об основных способах форматирования текста средствами CSS.

CSS предоставляют вебмастеру отличную возможность управления отображением текста. Изменение расстояния между символами, всевозможные отступы, стиль символов и управление шрифтами – это и многое другое позволяют изменять таблицы стилей.

Свойства, позволяющие форматировать текст в CSS.

Color – позволяет задает цвет элемента. В качестве параметра может выступать как шестнадцатиричное, так и буквенное значение цвета.

.red { color: red }
красный цвет

Direction – позволяет изменить направление текста.

ltr – слева направо

rtl – справа налево.

div.d1{
direction : ltr;
}
div.d2{
direction : rtl;
}
Я текст, написанный слева – направо
Я текст, написанный справа – налево

К сожалению не во всех браузерах этот параметр будет отображаться правильно.

Letter – spacingзадает интервал между символами.

normalобычные интервалы

length пользовательский интервал.

div.c
{
letter – spacing : 7px;
}
Я текст, интервал между моими символами равен 5 пикселей.

Text – align задает выравнивание текста внутри элемента и может принимать значения:

div.e1{
text – align : left;
}
div.e2{
text – align : right;
}
div.e3{
text – align : center;
}
div.e4{
text – align : justify;
}
Left – выравнивает текст слева
Right – выравнивает текст справа
Center – выравнивает текст по центру
Justify – выравнивает текст по ширине

Text – decoration оформление текста. Может принимать значения:

div.f1 {
text – decoration : none;
}
div.f2 {
text – decoration : underline;
}
div.f3 {
text – decoration : overline;
}
div.f4 {
text – decoration : line – through;
}
div.f5 {
text – decoration : blink;
}

None – определяет обычный текст

Underline – подчеркивает текст снизу

Overline – подчеркивает текст сверху

Line – through – зачеркивает текст

Blink – создает мигающий текст

Text – indentзадает отступ для первой строки текста.

div.g
{
text – indent : 25px;
}
Отступ первой строки этого текста равен 25 пикселей.

Text – transformуправляет размером символов и может принимать следующие значения:

div.h1 {
text – transform : none;
}
div.h2 {
text – transform : capitalize;
}
div.h3 {
text – transform : uppercase;
}
div.h4 {
text – transform : lowercase;
}

определяет обычный текст.

Каждое Слово Начинается С Заглавной Буквы.

ОПРЕДЕЛЯЕТ ТОЛЬКО ЗАГЛАВНЫЕ БУКВЫ.

только строчные символы.

White – spaceзадает способ отображения пробелов и может принимать следующие значения:

Word – spacingзадает интервал между словами.

div.i {
word – spacing : 15px;
}
Я текст, расстояние между словами которого равно 15 пикселей.

Используя данные свойства вы без труда сможете отформатировать текст любой сложности надлежащим образом средствами CSS.

Работа со шрифтами в CSS.

Font – familyопределяет список допустимых имен шрифтов для элемента. Использован будет первый, распознанный браузером шрифт.

h1 {
font – family : «Comic Sans MS», «Times New Roman»;
}
текст шрифта comic sans , если его нет в системе, то шрифта times new roman

Font – sizeзадает размер шрифта и может принимать значения:

div.j1 {
font – size : xx – small;
}
div.j2 {
font – size : medium;
}
div.j3 {
font – size : xx – large;
}
div.j4 {
font – size : 130%;
}

Наименьший текст

Средний текст

Наибольший текст

130% от размера порождающего элемента

Font – size – adjustзадает значение аспекта шрифта. Аспект шрифта – отношение между размерами маленькой буквыx и размером шрифта. Чем выше это значение, тем лучше шрифт будет читаться при уменьшении размера.

Font – stretchпозволяет задать интервал между символами внутри шрифта. Принимает значения:

div.k1 {
font – stretch : wider;
}
div.k2 {
font – stretch : narrower;
}
div.k3 {
font – stretch : ultra – condensed;
}
div.k4 {
font – stretch : ultra – expanded;
}

следующее расширенное значение

следующее сжатое значение

максимальный масштаб сжатия

максимальный масштаб расширения

Font – styleзадает стиль шрифта.

normalнормальный шрифт.

italicкурсив.

obliqueнаклонный шрифт.

div.l1{
font – style : normal;
}
div.l2{
font – style : italic;
}
div.l3{
font – style : oblique;
}

выводит обычный шрифт

выводит курсивный шрифт

наклонный шрифт

Font – variantиспользуется для создания шрифта – капители (все маленькие символы преобразуются в большие).

normalобычный шрифт

small – capsшрифт – капиель.

div.m1 {
font – variant : normal;
}
div.m2 {
font – variant : small – caps;
}

normal – обычный шрифт

small – caps – Выводит шрифт – капиель

Font – weightпозволяет задать толщину символов:

div.n1 {
font – weight : normal;
}
div.n2 {
font – weight : bolder;
}
div.n3 {
font – weight : lighter;
}
div.n4{
font – weight : 800;
}

normal – Определяет обычные символы

bolder – Определяет более жирные символы

lighter – Определяет более тонкие символы

Толщина задана численно

Параметры размеров элементов CSS

Параметры, приведенные в таблице ниже позволяют управлять всеми возможными размерами элементов.

Параметр Описание Значения
height Задает высоту элемента auto
length
%
line – height Задает интервал между строками normal
number
length
%
max – height Задает максимальную высоту элемента none
length
%
max – width Задает максимальную ширину элемента none
length
%
min – height Задает минимальную высоту элемента length
%
min – width Задает минимальную ширину элемента length
%
width Задает ширину элемента auto
%
length

Сегодня мы разобрались с форматированием текста в CSS. Данный урок получился достаточно объемным, но он действительно важен для понимания основ работы с CSS. Теперь вы можете самостоятельно настроить отображение текстов средствами CSS, которые сильно опережают функционал HTML.

Правильно подобранный фон — неотъемлемый атрибут для любого качественного сайта и в следующем уроке мы поговорим о возможностях работы с фоном в CSS.