Стили текста
Текст на странице HTML может быть красивым, стилизоравонным (т.е. не как у всех, а только на вашем сайте). Тут пойдёт тема как задавать стиль текста в css с готовыми примерами.
Стиль текста можно задавать для всей страницы (тег body), для параграфа (абзац p), элемента span
font-size - задаёт размер шрифта.
em и % - являются относительными и зависят от размера шрифта установленного в документе.
px и pt - являются абсолютными и их размер зависит от разрешения экрана.
small и larger - уменьшают или увеличивают текст по отношению к базовому.
<p style="font-size:1em;">Вот такой текст 1</p>
<p style="font-size:120%;">Вот такой текст 2</p>
<p style="font-size:16px;">Вот такой текст 3</p>
<p style="font-size:14pt;">Вот такой текст 4</p>
<p style="font-size:larger;">Вот такой текст 5</p>
<p style="font-size:small;">Вот такой текст 6</p>
Пример
Вот такой текст 1
Вот такой текст 2
Вот такой текст 3
Вот такой текст 4
Вот такой текст 5
Вот такой текст 6
font-weight - изменяет жирность шрифта.
normal и bold - обычный (по умолчанию) или жирный текст.
bolder и lighter - тоже самое, жирный и обычный.
100 до 900 - шагом 100 (100 – самое тонкое начертание, 900 – самое жирное начертание).
<p style="font-weight:normal;">Вот такой текст 1</p>
<p style="font-weight:bold;">Вот такой текст 2</p>
<p style="font-weight:200;">Вот такой текст 3</p>
<p style="font-weight:900;">Вот такой текст 4</p>
<p style="font-weight:lighter;">Вот такой текст 5</p>
<p style="font-weight:bolder;">Вот такой текст 6</p>
Пример
Вот такой текст 1
Вот такой текст 2
Вот такой текст 3
Вот такой текст 4
Вот такой текст 5
Вот такой текст 6
font-style - устанавливает тексту курсивное начертание.
normal и italic - обычный (по умолчанию) или курсивное начертание.
<p style="font-style:normal;">Вот такой текст 1</p>
<p style="font-style:italic;">Вот такой текст 2</p>
Пример
Вот такой текст 1
Вот такой текст 2
font-family - изменяет шрифт или список шрифтов с помощью которых отображается текст.
В качестве значений свойство font-family принимает названия шрифтов.
<p style="font-family:'Times New Roman','Arial'";>Вот такой текст 1</p>
<p style="font-family:serif;">Вот такой текст 2</p>
<p style="font-family:sans-serif;">Вот такой текст 3</p>
<p style="font-family:monospace;">Вот такой текст 4</p>
<p style="font-family:fantasy;">Вот такой текст 5</p>
<p style="font-family:cursive;">Вот такой текст 6</p>
Пример
Вот такой текст 1
Вот такой текст 2
Вот такой текст 3
Вот такой текст 4
Вот такой текст 5
Вот такой текст 6
color - изменяет цвет шрифта. Установить цвет можно несколькими способами: #ff0000 (шестнадцатеричное значение цвета), orange (зарезервированное название цвета), rgb(120,17,90) (RGB значение).
<p style="color:#aa00aa;";>Вот такой текст 1</p>
<p style="color:pink;">Вот такой текст 2</p>
<p style="color:rgb(17,17,17)">Вот такой текст 3</p>
Пример
Вот такой текст 1
Вот такой текст 2
Вот такой текст 3
background-color - можно использовать для выделения текста цветом, т.е. текст делается похожим на текст выделенный маркером. Установить цвет можно такими же способами, как и для свойства color.
<p>Вот такой <span style="background-color:yellow;">текст</span> 1</p>
<p style="color:orange;">Вот такой <span style="background-color:green;">текст</span> 2</p>
Пример
Вот такой текст 1
Вот такой текст 2
text-decoration - можно использовать для декоративного оформления текста. В качестве значений свойства text-decoration можно использовать следующие: none (без декоративного оформления), underline (подчёркивание), overline (линия над текстом), line-through (зачёркивание).
<p style="text-decoration:none;";>Вот такой текст 1</p>
<p style="text-decoration:underline;">Вот такой текст 2</p>
<p style="text-decoration:overline;">Вот такой текст 3</p>
<p style="text-decoration:line-through;">Вот такой текст 4</p>
<p style="text-decoration:underline line-through;">Вот такой текст 5</p>
<p>Вот такой <span style="color:red; text-decoration: none;
border-bottom: 1px dashed red;">текст</span> 6</p>
Пример
Вот такой текст 1
Вот такой текст 2
Вот такой текст 3
Вот такой текст 4
Вот такой текст 5
Вот такой текст 6
text-transform - управляет регистром символов. В качестве значений свойства text-transform можно использовать следующие: none (по умолчанию), lowercase (переводит все символы в строчные), uppercase (переводит все символы в прописные), capitalize (каждое слово начинается с прописного символа).
<p style="text-transform:none;";>Вот такой текст 1</p>
<p style="text-transform:lowercase;">Вот такой текст 2</p>
<p style="text-transform:uppercase;">Вот такой текст 3</p>
<p style="text-transform:capitalize;">Вот такой текст 4</p>
Пример
Вот такой текст 1
Вот такой текст 2
Вот такой текст 3
Вот такой текст 4
white-space - Настраивает браузер.
nowrap - не переносит текст, пока не встретит тег br.
pre - отображает текст как в коде на HTML.
pre-wrap - отображает все пробелы между словами и переносит текст, если он не помещается в контейнер.
<p style="white-space:pre;";>Вот такой
текст 1</p>
Пример
Вот такой текст 1
text-align - выравнивание текста в горизонтальном направлении.
left - по левому краю.
center - по центру.
right - по правому краю.
justify - по ширине, т.е. одновременно по левому и правому краям.
<p style="text-align:left;";>Вот такой текст 1</p>
<p style="text-align:center;">Вот такой текст 2</p>
<p style="text-align:right;">Вот такой текст 3</p>
<p style="text-align:justify;">Вот такой текст 4</p>
Пример
Вот такой текст 1
Вот такой текст 2
Вот такой текст 3
Вот такой текст 4
text-shadow - тень вокруг текста. В свойстве четыре значения:
x-offset - расположение тени по горизонтали.
y-offset - расположение тени по вертикали.
Радиус размытия - определяет, насколько тёмной будет тень.
Цвет - задаёт цвет текста.
<p style="text-shadow: 0px 4px 10px rgba(179, 147, 211, 0.8)";>Вот такой текст </p>
Пример
Вот такой текст
Добавить тени — наслоение
<p style="text-shadow: 2px 2px 4px rgba(179, 147, 11, 0.1),
3px 4px 4px rgba(179, 147, 11, 0.15),
4px 6px 4px rgba(179, 147, 11, 0.2),
5px 8px 4px rgba(179, 147, 11, 0.25);";>Вот такой текст </p>
Пример
Вот такой текст
Многоцветный слой
<p style=" font-size: 90px;
font-weight: 600;
font-family: 'Niconne', cursive;
color: #e0d6e9;
text-shadow: 2px 2px 0px #957dad,
4px 4px 0px #ee4b2b,
6px 6px 0px #00c2cb,
8px 8px 0px #ff7f50,
10px 10px 0px #553c9a;";>Вот такой текст </p>
Пример
Вот такой текст
text-indent - отступ текста.
<p style="text-indent:110px";>Вот такой текст </p>
Пример
Вот такой текст