Форматирование текста в CSS [Урок 3]

[GM`ka]

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

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

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

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

Например красный

.red { color: red }

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

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

div.d1{
direction : ltr;
}

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

div.d2{
direction : rtl;
}

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

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

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

div.c
{
letter – spacing : normal;
}

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

div.c
{
letter – spacing : 7px;
}

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

Left – выравнивает текст слева
Right – выравнивает текст справа
Center – выравнивает текст по центру
Justify – выравнивает текст по ширине

Например:

div.e1{
text – align : left;  /* Left – выравнивает текст слева */
}

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

None – обычный текст
Underline – подчеркнутый снизу текст
Overline – подчеркнутый сверху текст
Line – through – зачеркнутый текст
Blink – мигающий текст

Например:

div.f2 {
text – decoration : underline;  /*Underline – подчеркнутый снизу текст*/
}

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

div.g
{
text – indent : 25px;  /*         Отступ равен 25 пикселем*/
}

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

None – обычный текст
Capitalize – каждое слово начинается с заглавной буквы.
Uppercase – только большие буквы
Lowercase – маленькие буквы

Например:

div.h2 {
text – transform : capitalize; /*Capitalize – каждое слово начинается с заглавной буквы.*/
}

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

normal – допускается только один пробел.
pre – вся структура документа, с неограниченным количеством пробелов сохраняется.
nowrap – текст не будет переноситься , пока не встретит тег


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

div.i {
word – spacing : 15px;  /* Интервал между словами 15 px*/
}

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

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

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

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

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

xx – small – наименьший
x – small – очень маленький
small – маленький
medium – средний
large – большой
x – large – очень большой
xx – large – наибольший
smaller – меньше, чем у порождающего элемента
larger – больше, чем у порождающего элемента
length – задает фиксированное значение шрифта
% – размер шрифта в % от размера шрифта порождающего элемента

Пример:

div.j1 {
font – size : xx – small;  /*xx – small – наименьший*/
}

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

normal – нормальный шрифт.
italic – курсив.

Пример:

div.l2{
font – style : italic;  /*italic – курсив*/
}

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

normal – обычные символы
bold – жирные символы

Пример:

div.n2 {
font – weight : bolder;  /*bold – жирные символы*/
}