Веб-школа



Этот текст отформатирован с помощью текстовых свойств CSS. Заголовок выровнен по центру, строчные буквы заголовка заменены на заглавные, изменен цвет букв.

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

Свойство color используется для определения цвета текста. Цвет может быть задан с помощью:

• названия, например, «red»
• кода RGB, например, «rgb(255,0,0)»
• шестнадцатиричного кода, например, «#ff0000»

Цвет текста для всей страницы задается в селекторе body.

body {color:blue;} h1 {color:#00ff00;}

h2 {color:rgb(255,0,0);}

Посмотреть

Совет: в соответствии со стандартами W3C если вы указали цвет текста, вы должны указать также цвет фона.

Выравнивание текста

Свойсто text-align отвечает за выравнивание текста по горизонтали.

Текст можно выровнять по центру, по правому/левому краю или по ширине.

Когда текст выровнен по ширине (text-align:justify), каждая строка имеет одинаковую длину (как в журналах и газетах), а выравнивание текста достигается изменением пробелов между словами:

h1 {text-align:center;} p.date {text-align:right;}

p.main {text-align:justify;}

Посмотреть

Оформление текста

Свойство text-decoration используется для настройки оформления текста.

Обычно свойство text-decoration используют для удаления подчеркивания ссылок:

a {text-decoration:none;}

Посмотреть

Кроме того, это свойство может быть использовано для оформления простого текста:

h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;}

h4 {text-decoration:blink;}

Посмотреть

Совет: не рекомендуется подчеркивать текст, не являющийся ссылкой, так как это вводит в заблуждение пользователей сайта.

Преобразование текста

Свойство text-transform используется для преобразования текста в строчные или заглавные буквы.

Это свойство можно использовать для того, чтобы преобразовать все буквы текста в заглавные/строчные буквы, или изменить первые буквы каждого слова на заглавные (капитализация):

p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;}

p.capitalize {text-transform:capitalize;}

Посмотреть

Красная строка

В CSS есть свойство, которое может автоматически выводить красную строку в параграфах. Это свойство называется text-indent:

p {text-indent:50px;}

Посмотреть

Примеры

Расстояние между символами

Пример демонстрирует изменение расстояния между символами.

Расстояние между строками

Пример демонстрирует, как вы можете задать расстояние между строками в параграфе.

Направление текста

Демонстрация изменения направления текста в элементе.

Все свойства текста — справка CSS

Число в столбце «CSS» указывает на то, в какой версии CSS появилось соответствующее свойство (CSS1 или CSS2).