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