|
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 используется, чтобы указать отступ первой строки в тексте.
Пример
Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает |
 |
Еще примеры |
Установка расстояния между символами
Этот пример демонстрирует как увеличить или уменьшить пространство между символами.
Установка расстояния между строками
Этот пример демонстрирует как указать расстояние между строками в параграфе.
Установить направление текста элемента
Этот пример демонстрирует как изменить направление текста элемента.
Увеличить расстояние между словами
Этот пример демонстрирует как увеличить пространство между словами в параграфе.
Запрет переноса слов внутри элемента
Этот пример демонстрирует как запретить перенос слов в элементе.
Вертикальное выравнивание изображения
Этот пример демонстрирует как установить вертикальное выравнивание изображения в тексте.
Все Текстовые Свойства 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 | Увеличивает или уменьшает расстояние между словами в тексте |
|
