Текст CSS

Текстовые свойства CSS определяют вид текста.

С помощью текстовых свойств можно изменить цвет текста, интервал между символами, выравнивание текста, декорацию текста, отступ текста и т.д.

Вывод текста с отступом

Отступ первой строки абзацев на веб-странице, это один из самых常用的 эффектов форматирования текста.

CSS предоставляет Атрибут text-indentЭтот атрибут позволяет легко реализовать отступ текста.

Используя атрибут text-indent, можно отступить первую строку всех элементов на заданную длину, даже если это отрицательное значение.

Наиболее частое использование этого свойства - это отступ первой строки абзаца,下面的规则会使所有段落 отступать первую строку на 5 em:

p {text-indent: 5em;}

注意：Обычно текст-отступ можно применить ко всем блочным элементам, но эту�性ть не можно применить к инлайн-элементам, замещающим элементам, таким как изображения, и к свойству text-indent не можно применить к заменяющим элементам. Однако, если у блочного элемента (например, абзаца) в первой строке есть изображение, оно будет перемещаться вместе с остальным текстом этой строки.

Совет:Если нужно "отступить" первую строку инлайн-элемента, можно создать этот эффект с помощью внутреннего или внешнего отступа.

Использование отрицательных значений

text-indent также можно установить в отрицательное значение. Используя эту технологию, можно создать множество интересных эффектов, например, "отступ悬挂", когда первая строка悬挂 на левом крае элемента:

p {text-indent: -5em;}

Однако при установке отрицательного значения для text-indent следует быть осторожными, так как если для абзаца установлено отрицательное значение, некоторые тексты в первой строке могут выйти за левую границу окна браузера. Чтобы избежать этой проблемы, рекомендуется для отрицательного отступа установить дополнительный отступ или внутренний отступ:

p {text-indent: -5em; padding-left: 5em;}

Использование процентных значений

Свойство text-indent можно использовать с любыми единицами измерения, включая проценты.

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

В следующем примере значение отступа составляет 20% от значения родительского элемента, то есть 100 пикселей:

div {width: 500px;}
p {text-indent: 20%;}
<div>
<p>this is a paragragh</p>
</div>

наследование

Свойство text-indent можно наследовать, учитывайте следующие маркеры:

div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
<div id="outer">
<div id="inner">some text. some text. some text.</div>
<p>this is a paragragh.</p>
</div>
</div>

Текст в этих маркерах также отступает на 50 пикселей, потому что этот абзац наследует значение отступа у элемента div с id="inner".

горизонтальное выравнивание

text-align Это базовый атрибут, который влияет наСтроки текстаМежду собой способ выравнивания. Его первые три значения очень прямые, но четвертый и пятый несколько сложнее.

Значения left, right и center вызывают левое, правое и центральное выравнивание текста в элементе.

Западные языки читаются слева направо, поэтому значение по умолчанию для text-align — left. Текст выравнивается по левому краю, а правый край呈 зазубренный (называется «текст слева направо»). Для языков, таких как иврит и арабский, text-align по умолчанию равен right, так как эти языки читаются справа налево. Не удивительно, что center-centered делает каждую строку текста в элементе центрированной.

Совет:Для центрирования блочных или таблицевых элементов необходимо правильно установить левый и правый внешние поля на этих элементах.

text-align:center и <CENTER>

Вы можете подумать, что text-align:center и элемент <CENTER> выполняют одну и ту же функцию, но на самом деле это не так.

<CENTER> не только влияет на текст, но и центрирует весь элемент. Свойство text-align не контролирует выравнивание элемента, а только влияет на его внутреннее содержимое. Элемент сам не перемещается от начала к концу строки, а только текст в нем受到影响.

justify

Последним горизонтальным свойством выравнивания является justify.

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

Следует отметить, что determination как текст будет растягиваться, чтобы заполнить пространство между правыми и левыми границами родительского элемента, зависит от агента пользователя (а не от CSS). Для получения более подробной информации обратитесь к Страница справки CSS text-align.

Интервал между словами

Свойство word-spacingИнтервал между словами (словами) можно изменить. Его значение по умолчанию normal равно значению 0.

Свойство word-spacing принимает положительное или отрицательное значение длины. Если предоставляется положительное значение длины, то интервал между словами увеличится. Установка отрицательного значения для word-spacing приведет к его уменьшению:

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
<p class="spread">
Это абзац. Пробелы между словами будут увеличены.
</p>
<p class="tight">
This is a paragraph. The spaces between words will be decreased.
</p>

пример TIY: увеличить или уменьшить间距 между словами (间隔字)

注释：Для более глубокого понимания определения CSS для 'слова' (word) пожалуйста, посетите Страница справки по свойству word-spacing CSS.

Интервал между символами

атрибут letter-spacingразница с word-spacing заключается в том, что letter-spacing изменяет интервал между символами или буквами.

Как и у свойства word-spacing, значения letter-spacing включают все размеры. Значение по умолчанию - keyword normal (что равно letter-spacing:0). Введенные значения длины увеличат или уменьшат расстояние между символами на указанное количество:

h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
<h1>This is header 1</h1>
<h4>This is header 4</h4>

пример TIY: определить间距 между символами (间隔字母)

преобразование символов

атрибут text-transformобработка регистра текста. Этот атрибут имеет 4 значения:

  • none
  • uppercase
  • lowercase
  • capitalize

по умолчанию none не делает никаких изменений в тексте, сохраняет исходный регистр. По имени uppercase и lowercase преобразуют текст в строчный и заглавный регистр. В конце концов, capitalize делает первую букву каждого слова заглавной.

В качестве свойства text-transform может показаться не очень важным, но если вы突然 решите сделать все элементы h1 строчными, этот атрибут будет очень полезен. Не нужно отдельно изменять содержимое всех элементов h1, достаточно использовать text-transform для выполнения этой модификации:

h1 {text-transform: uppercase}

Использование text-transform имеет два преимущества. Во-первых, достаточно написать простое правило для выполнения этой модификации, не нужно изменять сам элемент h1. Во-вторых, если в будущем вы решите снова изменить все регистры на исходный, это будет сделать легче.

пример TIY: управление регистром букв в тексте

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

далее мы обсуждаем свойство text-decorationЭто очень интересный атрибут, который предоставляет множество очень интересных поведения.

У атрибута text-decoration 5 значений:

  • none
  • underline
  • overline
  • line-through
  • blink

Подчеркивание underline добавляет элементу подчеркивание, как это делает элемент U в HTML. Overline действует наоборот, рисует надстрочку вверху текста. Значение line-through рисует черезстрочку по середине текста, эквивалентно элементам S и strike в HTML. Blink делает текст мерцанием, как это поддерживал Netscape, что вызывало много критики.

Значение none关闭原本应用于元素的 所有装饰。Обычно, текст без декораций имеет по умолчанию стандартный вид, но это не всегда так. Например, по умолчанию у ссылок есть подчеркивания. Если нужно удалить подчеркивание у гиперссылки, можно использовать следующий CSS:

a {text-decoration: none;}

注意：Если явно использовать такое правило для удаления подчеркивания у гиперссылки, то единственным визуальным отличием между якорем и обычным текстом будет цвет (по крайней мере, по умолчанию так и есть, но нельзя полностью гарантировать, что цвет определенно отличается).

Можно комбинировать несколько декораций в одном правиле. Если нужно, чтобы все гиперссылки имели как подчеркивания, так и надстрочки, правило будет следующим:

a:link a:visited {text-decoration: underline overline;}

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

h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}

Для данных правил, все элементы h2 с классом stricken имеют только одну декорацию черезстрочки,而没有 подчеркивания и надстрочки, потому что Значение text-decoration заменяет, а не накапливается.

Обработка пробелов

Атрибут white-spaceЭто влияет на обработку пользователем агента пробелов, переводов строк и табуляций в исходном документе.

Используя этот атрибут, можно влиять на способ обработки браузером пробелов между символами и между строками текста. В определенной степени, по умолчанию XHTML уже выполняет обработку пробелов: все пробельные символы объединяются в один пробел. Поэтому, если данная маркировка будет отображаться в веб-браузере, между символами будет отображаться только один пробел, а переводы строк в элементах будут игнорироваться:

<p>This paragraph has many
    spaces in it.</p>

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

p {white-space: normal;}

Эти правила говорят браузеру обрабатывать空白 символы так, как обычно: удалять избыточные пробелы. Если дано это значение, символы перевода строки (возврат каретки) будут преобразованы в пробелы, и последовательности нескольких пробелов в строке будут преобразованы в один пробел.

Пример TIY: white-space: normal

Значение pre

Однако, если установить white-space в pre, обработка пробелов в элементах,受到影响 от этого свойства, будет отличаться, и они будут обрабатываться так же, как элементы pre в XHTML; пробелы не будут игнорироваться.

Если значение свойства white-space установлено в pre, браузер будет обращать внимание на дополнительные пробелы, включая возврат каретки. В этом аспекте, и только в этом аспекте, любой элемент может считаться эквивалентным элементу pre.

Пример TIY: white-space: pre

注意：По результатам тестирования, браузеры IE 7 и более ранние версии не поддерживают это значение, поэтому пожалуйста, используйте браузеры, не основанные на IE, чтобы просмотреть上面的 пример.

Значение nowrap

Противоположное значение — nowrap, оно предотвращает перебрасывание текста в элементе,除非 используется элемент br. Использование nowrap в CSS очень похоже на использование <td nowrap> в HTML 4 для того, чтобы установить ячейку таблицы так, чтобы она не могла перебрасываться, но значение white-space может применяться к любому элементу.

Пример TIY: white-space: nowrap

Значения pre-wrap и pre-line

CSS2.1 ввел значения pre-wrap и pre-line, которых не было в предыдущих версиях CSS. Эти значения позволяют создателям лучше контролировать обработку пробелов.

Если значение white-space элемента установлено в pre-wrap, то текст в этом элементе будет сохранять последовательности пробелов, но строки текста будут нормально перебрасываться на новую строку. Если установлено это значение, то также будут сохраняться строковые разделители в исходном тексте и создаваемые строковые разделители. Значение pre-line, наоборот, будет сжимать последовательности пробелов, как это делает обычный текст, но сохранять строки.

实例 TIY ：white-space: pre-wrap

实例 TIY ：white-space: pre-line

注意：我们在 IE7 和 FireFox2.0 浏览器中测试了上面的两个实例，但是结果是，值 pre-wrap 和 pre-line 都没有得到很好的支持。

总结

下面的表格总结了 white-space 属性的行为：

值 空白符 换行符 自动换行
pre-line 合并 保留 允许
normal 合并 忽略 允许
nowrap 合并 忽略 不允许
pre 保留 保留 不允许
pre-wrap 保留 保留 允许

文本方向

如果您阅读的是英文书籍，就会从左到右、从上到下地阅读，这就是英文的流方向。不过，并不是所有语言都如此。我们知道古汉语就是从右到左来阅读的，当然还包括希伯来语和阿拉伯语等等。CSS2 引入了一个属性来描述其方向性。

direction 属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置。

注释：对于行内元素，只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性。

direction 属性有两个值：ltr 和 rtl。大多数情况下，默认值是 ltr，显示从左到右的文本。如果显示从右到左的文本，应使用值 rtl。

CSS 文本实例：

设置文本颜色
本例演示如何设置文本的颜色。
设置文本的背景颜色
本例颜色如何设置部分文本的背景颜色。
规定字符间距
本例演示如何增加或减少字符间距。
使用百分比设置行间距
本例演示如何使用百分比值来设置段落中的行间距。
使用像素值设置行间距
本例演示如何使用像素值来设置段落中的行间距。
使用数值来设置行间距
本例演示如何使用一个数值来设置段落中的行间距。
对齐文本
本例演示如何对齐文本。
修饰文本
本例演示如何向文本添加修饰。
Вывод текста с отступом
本例演示如何缩进文本首行。
控制文本中的字母
本例演示如何控制文本中的字母。
在元素中禁止文本折行
本例演示如何禁止在元素中的文本折行。
增加单词间距
本例演示如何增加段落中单词间的距离。

CSS 文本属性

属性 描述
color 设置文本颜色
direction Настройка направления текста.
line-height Настройка высоты строки.
letter-spacing Настройка интервала между символами.
text-align Выравнивание текста в элементе.
text-decoration Добавление украшений к тексту.
text-indent Отступ первого строки текста в элементе.
text-shadow Настройка тени текста. CSS2 включает этот атрибут, но CSS2.1 не поддерживает этот атрибут.
text-transform Контроль символов в элементе.
unicode-bidi Настройка направления текста.
white-space Настройка обработки пробелов в элементе.
word-spacing Настройка интервала между словами.