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

2014-03-10

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

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

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

Визуальное оформление текста в CSS
Цвет текста в CSS
Размер текста в CSS
Отступ текста в CSS
Жирный и наклонный текст в CSS
Тень текста в 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

Изменить цвет текста, расположенного внутри 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 свойство 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

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

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

Пример:

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

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

Жирный и наклонный текст в 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 свойство text-shadow позволяет задать тексту тень. Данное свойство содержит в себе целый перечень эффектов: цвет, смещение вправо, смещение вниз, радиус пятна тени.

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

Пример:

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

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

Выравнивание текста в 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 позволяют произвести практически любые манипуляции с оформлением текста на веб-сайте для улучшения его восприятия пользователями.

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