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

Положительное восприятие веб-сайта пользователем зависит не только от смыслового содержания текста, но и от его оформления.

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

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

Визуальное оформление текста в CSS

В CSS оформление текста осуществляется с помощью параметра text-decoration, который может принимать следующие значения:

  • blink — мерцающий текст;
  • none — значение по умолчанию, оформление отсутствует;
  • overline — линия расположена над текстом;
  • underline — подчеркнутый линией текст;
  • line-through — текст, зачеркнутый линией;
  • inherit — в данном случае text-decoration наследует значение родительского элемента.

Пример:

<a href="index.html" style="text-decoration:none">Текст ссылки</a>
<a href="index.html" style="text-decoration:overline">Текст ссылки</a>
<a href="index.html" style="text-decoration:underline">Текст ссылки</a>
<a href="index.html" style="text-decoration:line-through">Текст ссылки</a>
<a href="index.html" style="text-decoration:none">Текст ссылки</a>

В окне браузера данный пример будет выглядеть следующим образом:

Визуальное оформление текста в CSS

Цвет текста в CSS

Изменить цвет текста, расположенного внутри HTML элементов можно с помощью CSS свойства color.

Способы задания могут быть следующими:

  • При помощи названия цвета (например, red, green, blue, white);
  • При помощи значения RGB (например, rgb(221,102,212));
  • При помощи шестнадцатеричного цветового значения (например, #ff00aa).

Пример:

<html>
<head>
<title>CSS цвет</title>
</head>
<body>
<p style="color:red">Текст 1 Текст 2 Текст 2</p>
<p style="color:rgb(245,100,255)">Текст 2 Текст 2 Текст 2</p>
<p style="color:#7722aa">Текст 3 Текст 3 Текст 3</p>
</body>
</html>

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

Цвет текста в CSS

Размер текста в CSS

CSS свойство font-size позволяет задать размер текста.

Единицами измерения могут быть:

  • Пиксели (например, 14px);
  • Пункты (например, 20pt);
  • Проценты (например, 50%);
  • Ключевые слова small, large и т.п.

Пример:

<head>
<style type="text/css">
p {font-size:14px}
p.big {font-size:20pt}
</style>
</head>
<p>Текстовая строка размером 14 пикселей.</p>
<p class="big">Текстовая строка размером 20 пунктов.</p>

Визуальное представление приведенного выше кода выглядит следующим образом:

Размер текста в CSS

Отступ текста в CSS

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

Однако в CSS данная проблема решается с помощью свойства text-indent.

Пример:

<html>
<title>Отступ текстовой строки</title>
</head>
<body>
<p>Текст без отступа.</p>
<p style="text-indent:110px">Текст с отступом слева 110 пикселей</p>
</body>

Визуальное отображение кода:

Отступ текста в CSS

Жирный и наклонный текст в CSS

С помощью атрибута CSS font-weight определяется жирность шрифта.

Данный атрибут может принимать следующие значения:

  • normal — обычный;
  • lighter — более светлый;
  • bold — жирный;
  • от 100 до 900, где 100 — самый тонкий шрифт, а 900 — самый толстый.

Пример:

<html>
<head>
<title>Стили шрифта</title>
</head>
<body>
<p style="font-weight: normal">текст текст текст текст</p>
<p style="font-weight: bolder">текст текст текст текст</p>
<p style="font-weight: 600">текст текст текст текст</p>
</body>
</html>

В браузере данный код выглядит следующим образом:

Жирный и наклонный текст в CSS

Тень текста в CSS

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

В том случае, если цвет тени не задан, используется цвет текста.

Пример:

<head>
<title> тень текста в CSS </title>
</head>
<body>
<h1 style="text-shadow:#cccccc -17px -8px 6px">Текст с тенью
</h1>
</body>

Представленный выше код в браузере выглядит следующим образом:

Тень текста в CSS

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

Выравнивание текста по горизонтали задаётся свойством text-align, которое может принимать следующие значения:

  • left — выравнивание по левому краю;
  • right — выравнивание по правому краю;
  • center — выравнивание по центру;
  • justify — выравнивание по всей ширине.

С помощью свойства vertical-align выполняется выравнивание текста по вертикали.

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

  • baseline — выравнивание линии элемента по базовой линии родительского элемента;
  • middle — выравнивание средней элементной точки по базовой линии родительского элемента;
  • text-top — выравнивание верхней части элемента по верху шрифта родительского элемента;
  • top — выравнивание верха элемента по верхней части самого высокого элемента строки;
  • sub, super — отображение элемента в виде нижнего и верхнего индексов соответственно.

Пример:

<title>Выравнивание текста по вертикали</title>
</head>
<body>
<table height="80" cellpadding="10" border="1">
<tr>
<td style="vertical-align:top">Текст 1</td>
<td style="vertical-align:bottom">Текст 2</td>
<td style="vertical-align:middle">Текст 3</td>
</tr>
</table>
Выравнивание текста в CSS

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

Желаем удачи в изучении веб-дизайна!

АМАнтон Малаховавтор