Последние учебники веб-разработки
×

CSS Руководство

CSS ГЛАВНАЯ CSS Введение CSS Синтаксис CSS Как CSS Цвета CSS Фон CSS Границы CSS Маржа CSS набивка CSS Высота ширина CSS Текст CSS шрифты CSS связи CSS Списки CSS таблицы CSS Модель Бокса CSS Outline CSS Дисплей CSS Максимальная ширина CSS Позиция CSS терка CSS Inline-block CSS выравнивать CSS Комбинаторы CSS Псевдо-класс CSS Псевдо-элемент CSS Панель навигации CSS Dropdowns CSS Всплывающие CSS Галерея CSS изображение Непрозрачность CSS спрайтов CSS Attr селекторы CSS Формы CSS Счетчики

CSS3

CSS3 Введение CSS3 Закругленные углы CSS3 Пограничные изображения CSS3 Фон CSS3 Цвета CSS3 Градиенты CSS3 Тени CSS3 Текст CSS3 шрифты CSS3 2D Трансформации CSS3 3D Трансформации CSS3 Переходы CSS3 Анимации CSS3 Изображений CSS3 Кнопки CSS3 пагинация CSS3 Несколько столбцов CSS3 Пользовательский интерфейс CSS3 Box Определение размеров CSS3 Flexbox CSS3 Медиа-запросы CSS3 Примеры MQ

CSS Адаптивный веб-дизайн

Адаптивный веб-дизайн вступление Адаптивный веб-дизайн Viewport Адаптивный веб-дизайн Вид сетки Адаптивный веб-дизайн Медиа-запросы Адаптивный веб-дизайн Изображений Адаптивный веб-дизайн Видео Адаптивный веб-дизайн Каркасы

CSS Examples

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

CSS References

CSS Справка CSS Селекторы CSS функции CSS Ссылка Aural CSS Web Safe шрифты CSS Animatable CSS Единицы CSS PX-EM конвертер CSS Цвета CSS Значения цвета CSS Цвет Названия CSS3 Поддержка браузеров

 

CSS Текст


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

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


Цвет текста

color свойство используется , чтобы установить цвет текста.

С помощью CSS, цвет чаще всего определяется:

  • название цвета - как "red"
  • значение HEX - как "#ff0000"
  • Значение RGB - как "rgb(255,0,0)"

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

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

пример

body {
    color: blue;
}

h1 {
    color: green;
}
Попробуй сам "
ЗаметкаПримечание: Для W3C совместимый CSS: Если вы определяете color собственности, необходимо также определить background-color свойство.

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

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

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

Следующий пример показывает выровнен по центру, а также левый и выравнивание по правому краю текста (выравнивание по левому краю по умолчанию, если направление текста влево-вправо, и выравнивание по правому краю по умолчанию, если направление текста справа налево):

пример

h1 {
    text-align: center;
}

h2 {
    text-align: left;
}

h3 {
    text-align: right;
}
Попробуй сам "

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

пример

div {
    text-align: justify;
}
Попробуй сам "

Текст украшения

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

Значение text-decoration: none; часто используется , чтобы удалить подчеркивание из ссылок:

пример

a {
    text-decoration: none;
}
Попробуй сам "

Другие text-decoration значения используются для украшения текста:

пример

h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}
Попробуй сам "
ЗаметкаПримечание: Не рекомендуется , чтобы подчеркнуть текст , который не является ссылкой, как это часто сбивает с толку читателя.

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

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

Он может быть использован, чтобы превратить все в верхний или нижний регистр букв, или первые буквы каждого слова:

пример

p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}
Попробуй сам "

Текст Отступы

text-indent свойство используется для задания отступа первой строки текста:

пример

p {
    text-indent: 50px;
}
Попробуй сам "

Межбуквенное расстояние

letter-spacing свойство используется , чтобы указать расстояние между символами в тексте.

В следующем примере показано, как увеличить или уменьшить расстояние между символами:

пример

h1 {
    letter-spacing: 3px;
}

h2 {
    letter-spacing: -3px;
}
Попробуй сам "

Высота линии

line-height свойство используется , чтобы указать расстояние между строками:

пример

p.small {
    line-height: 0.8;
}

p.big {
    line-height: 1.8;
}
Попробуй сам "

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

direction свойство используется для изменения направления текста элемента:

пример

div {
    direction: rtl;
}
Попробуй сам "

Слово Разнос

word-spacing свойство используется , чтобы указать пространство между словами в тексте.

Следующий пример демонстрирует, как увеличить или уменьшить пространство между словами:

пример

h1 {
    word-spacing: 10px;
}

h2 {
    word-spacing: -5px;
}
Попробуй сам "

Примеры

Еще примеры

Отключить перенос текста внутри элемента
Этот пример демонстрирует, как отключить перенос текста внутри элемента.

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

Добавить тень в текст
Этот пример демонстрирует, как добавить тень к тексту.


Проверьте себя с упражнениями!

Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4» Упражнение 5 »


Все свойства 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 Увеличивает или уменьшает пространство между словами в тексте