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

В этой главе:

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

  • Изменение цвета

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

  • Форматирование

  • Добавление тени

ФОРМАТИРОВАНИЕ ТЕКСТА

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

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

Отступ в первой строке абзаца, имитирующий красную строку, - это один из самых распространенных эффектов для текста. В CSS для указания отступа предназначено свойство text-indent.

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

1
p { text-indent: 30px; }

Согласно коду нашего примера первая строка любого абзаца будет сдвинута на 30px.

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p {
        text-indent: -40px;
        padding-left: 40px;
      }
    </style>
  </head>
 
  <body>
    <p>У этого абзаца первая строка будет выступать над остальными на 40px, для просмотра
    выхода строки за границу элемента и ее усечение вследствии этого, просто удалите строку
    CSS-кода добавляющую внутренний отступ к абзацу (padding-left: 40px;).</p>
  </body>
</html>

Примечание: свойство padding-left было приведено только для примера, как можно выйти из неприятной ситуации. На данный момент на нем можно не заострять внимание. Внутренние отступы и свойство padding-left подробно разбираются в главе - Блочная модель.

С text-indent могут применяться любые единицы измерения длины, в том числе и процентные значения. Размер отступа, установленный в процентах, связан с шириной родительского элемента. Например, если установлен отступ равный 50% и абзац занимает всю ширину окна браузера, то первая строка будет начинаться посередине экрана.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      .test1 { text-indent: 25px; }
      .test2 { text-indent: 50%; }
    </style>
  </head>
 
  <body>
    <p class="test1">Абзац с отступом в 25px. Абзац с отступом в 25px. Абзац с отступом
    в 25px. Абзац с отступом в 25px. Абзац с отступом в 25px. Абзац с отступом в 25px.</p>
    <p class="test2">Абзац с отступом в 50%. Абзац с отступом в 50%. Абзац с отступом
    в 50%. Абзац с отступом в 50%. Абзац с отступом в 50%. Абзац с отступом в 50%.</p>
  </body>
</html>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      .test1 { text-indent: 15%; }
    </style>
  </head>
 
  <body>
    <div class="test1">
      Первая строка текста элемента div будет иметь отступ равный 15% ширины его
      родительского элемента или ширины окна браузера.
      <p>Первая строка текста элемента p будет иметь отступ, который был унаследован
      от его родительского элемента.</p>
    </div>
  </body>
</html>

Изменение цвета

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      body { color:blue; }
      h1 { color:#00ff00; }
    </style>
  </head>
 
  <body>
    <h1>Заголовок имеет свой собственный цвет текста</h1>
    <p>Абзац будет наследовать цвет текста от родительского элемента, в качестве
    которого для него выступает элемент body.</p>
  </body>
</html>

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

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

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

  • left - выравнивает текст по левому краю.

  • right - выравнивает текст по правому краю.

  • center - выравнивает текст по центру.

  • justify - выравнивает текст по ширине, в таком тексте оба конца строки размещаются вплотную к внутренним краям элемента. Пробелы между словами в этом случае корректируются браузером так, что бы длина всех строк была строго одинаковая.

Попробуйте сами:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      h1 { text-align:center; }
      p.date { text-align:right; }
      p.main { text-align:justify; } /*значение justify растягивание текста по ширине*/
      p { text-indent:30px; } /*задаем размер отступа для первой строки абзаца*/
    </style>
  </head>
 
  <body>
    <h1>Пример выравнивания текста</h1>
    <p class="date">февраль, 2012</p>
    <p class="main">Помимо выравнивания текста, для первой строки абзаца был задан небольшой
    отступ, который визуально добавляет "красную строку" к тексту. Этот эффект очень
     пригодится на страницах с большими объемами текста, облегчая визуальное восприятие.</p>
  </body>
</html>

Примечание: свойство text-align работает только с блочными элементами, такими как абзац или div, выравнивая внутри них все строчное содержимое, включая изображения. Применение свойства к строчным элементам, таким как ссылка или span, не даст никакого эффекта.

Форматирование

Существуют различные свойства для форматирования текста, рассмотрим некоторые из них. Свойство text-decoration позволяет сделать текст подчеркнутым, установить черту над текстом или сделать текст перечеркнутым. Для управления строчными и прописными буквами в тексте используется свойство text-transform. Если необходимо увеличить или уменьшить расстояние между символами в тексте, в этом вам поможет свойство letter-spacing:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p.class1 {
        text-transform: uppercase;
        text-decoration: overline;
      }
      p.class2 {
        text-transform: lowercase;
        text-decoration: line-through;
      }
      p.class3 {
        text-transform: capitalize;
        text-decoration: underline;
      }
    </style>
  </head>
 
  <body>
    <p class="class1">Первый абзац.</p>
    <p class="class2">Второй абзац.</p>
    <p class="class3">Третий абзац.</p>
    <p style="letter-spacing:3px;">Расстояние между символами в тексте изменено
    с помощью свойства letter-spacing.</p>
  </body>
</html>

Добавление тени

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

  1. смещение тени вправо (при положительных значениях) или влево (при отрицательных значениях) от текста

  2. смещение тени вниз (при положительных значениях) или вверх (при отрицательных значениях) от текста

  3. размытие тени, чем больше число, тем смазаннее будет тень, нулевое значение означает полное отсутствие размытости (определяет четкую и резкую тень)

  4. цвет для тени

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>          
      h1 { text-shadow: 2px 2px 3px #000; }
    </style>
  </head>
 
  <body>
    <h1>Текст с тенью</h1>
  </body>
</html>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      .test1 {
        background: #CCCCCC;
        color: #CCCCCC;
        font-size: 60px;
        text-align: center;
        text-shadow: 1px 1px 3px #666666,
                    -1px -1px 3px #FFFFFF;
      }
      .test2 {
        color: #707070;
        font-size: 60px;
        text-shadow: 1px 1px 0px #eee,
                     3px 3px 0px #707070;
      }
    </style>
  </head>
 
  <body>
    <h1 class="test1">Текст с тенью</h1>
    <h1 class="test2">Текст с тенью</h1>
  </body>
</html>

Примечание: свойство text-shadow не поддерживается в IE9 и более ранних версиях.