Рейтинг@Mail.ru
УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS РЕКЛАМА

CSS Урок 6 Текст


« Назад Далее »

форматирование текста

Этот текст оформлен с помощью некоторых свойств форматирования. Заголовок использует свойства text-align, text-transform, и color. Параграф имеет отступ, выровнен, и указано пространство между символами. Подчеркивание удалено из этой ссылки.

Цвет Текста

Свойство color используется для установки цвета текста.

В CSS цвет обычно указывается с помощью:

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

Смотрите CSS Значения Цветов - полный список возможных цветовых значений.

Цвет текста по умолчанию для страницы определяется в селекторе body.

Пример

body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает

Замечание В W3C совместимом CSS: Если вы определяете свойство color, вы должны также определить и свойство background-color.


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

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

Текст может быть отцентрирован (center), или выровнен по левому краю (left), по правому краю (right), а также по левому и по правому краям одновременно (justify).

Когда свойство 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;}

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает


Выделение Абзацев - Отступы в Тексте

Свойство text-indentation используется, чтобы указать отступ первой строки в тексте.

Пример

p {text-indent:50px;}

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает


Примеры

Еще примеры

Установка расстояния между символами
Этот пример демонстрирует как увеличить или уменьшить пространство между символами.

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

Установить направление текста элемента
Этот пример демонстрирует как изменить направление текста элемента.

Увеличить расстояние между словами
Этот пример демонстрирует как увеличить пространство между словами в параграфе.

Запрет переноса слов внутри элемента
Этот пример демонстрирует как запретить перенос слов в элементе.

Вертикальное выравнивание изображения
Этот пример демонстрирует как установить вертикальное выравнивание изображения в тексте.


Все Текстовые Свойства CSS

СвойствоОписание
colorУстанавливает цвет текста
directionУстанавливает направление текста/направление при вводе текста
letter-spacingУвеличивает или уменьшает расстояние между символами в тексте
line-heightУстанавливает высоту строки
text-alignУказывает горизонтальное выравнивание текста
text-decorationУказывает декорации, добавляемые к тексту
text-indentУказывает отступ первой линии в текстовом блоке
text-shadowУстанавливает эффект тени, добавляемой к тексту
text-transformКонтролирует регистр текста
unicode-bidi 
vertical-alignУстанавливает вертикальное выравнивание элемента
white-spaceУказывает как будет обрабатываться пустое пространство в элементе
word-spacingУвеличивает или уменьшает расстояние между словами в тексте




« Назад Далее »
© 2011-2017 Уроки CSS
Рейтинг@Mail.ru