Как сделать красивый текст html

LiveInternetLiveInternet

Рубрики

Приложения

Всегда под рукой

Поиск по дневнику

Подписка по e-mail

Постоянные читатели

Статистика

РАБОТА С ТЕКСТОМ. html коды для текста

Как сделать красивый текст html

Сегодня мы поговорим о шрифтах, тексте, его основных формулах, и различном написании.

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

УВЕЛИЧЕННЫЙ ТЕКСТ

ТЕКСТ КУРСИВ

ЖИРНЫЙ КУРСИВ

ПОДЧЕРКНУТЫЙ КУРСИВ

СРЕДНИЙ ТЕКСТ

ОЧЕНЬ КРУПНЫЙ ТЕКСТ

ОЧЕНЬ МЕЛКИЙ ТЕКСТ

Супермелкий шрифт. Например: Я хочу тебе тихонько сказать Или: Я хочу тебе тихонько сказать

Минимальное значение font-size:1pt (самый мелкий)

Меняем вид шрифта:
КРАСИВЫЙ ПРОПИСНОЙ ШРИФТ

ВНИМАНИЕ. Таблица кодов цветов НАХОДИТСЯ ЗДЕСЬ

Для желающих поэкспериментировать с текстом есть очень интересный сайт typetester.org

МЕНЯЕМ ШРИФТА И ЦВЕТ ТЕКСТА

СИНИЙ ТЕКСТ ПЕРЕЧЕРКНУТ КРАСНОЙ ЛИНИЕЙ Цвета текста и линии можно менять.

Синий текст подчеркнут красной линией

Синий текст в красной рамке Цвета текста и рамки можно менять.

Цветной текст с цветным фоном Цвета текста и фона можно менять.

Цветной текст с цветным фоном в цветной рамке

Текст, подчеркнутый пунктиром

Текст, подчеркнутый точками

Текст, подчеркнутый двойной чертой

Текст, окаймленный разноцветным пунктиром Все цвета можно менять.

Текст в двойной рамке

Цветной текст в двойной цветной рамке Цвета меняйте по своему вкусу

Ваш текст в объемной 3D-рамке

На заметку:
Тег span (строчный) во всех приведенных примерах можно заменять на div (блочный элемент) и тогда получим рамку во всю ширину поста.

Лучшие сервисы для подбора цвета:

Выделение первой буквы в предложении, или так называемая «буквица»:
Ж или были дед да баба…

Всплывающее окошко с пояснением при наведении на текст курсора (подведите курсор к следующему тексту):

Ваш основной текст текст

Текст «наоборот»:
Перевернуть текст задом-наперед

Значения можно менять

Приподнять фразу на 5 пикселей над текстом (значение можно менять)

Опустить фразу (значение можно менять)

Выделение цитаты в тексте.
Пример:
Выделяем следующую фразу:

Выделение цитаты С ЭФФЕКТОМ ПОДСВЕТКИ (наведите курсор на текст):
Выделение цитаты С ЭФФЕКТОМ ПОДСВЕТКИ

Код:

текст левой колонки

текст правой колонки

Правильное (и уважительное) указание автора под скопированным текстом (цитатой) с всплывающей доп. информацией при наведении курсора на имя автора
Пример

“Тег-закрепитель” (фиксирует текст так, как и расположите его в поле поста):

Есть особенность. Текст, заключенный в тег pre отобразится в окне браузера так называемым «моноширинным» шрифтом. Обычно в качестве такого шрифта используется Courier New. Если вас это не устраивает, воспользуйтесь встроенными стилями и назначьте свой шрифт:

Текст, обтекаемый другим текстом:

Сегодня мы поговорим о шрифтах, тексте, его основных формулах, и различном написании.

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

Написать текст, имея фоном картинку:

Выравнивание текста HTML-кодом

Исходный код для выравнивания текста по левому краю:

Исходный код для выравнивания текста по правому краю:

Исходный код для выравнивания текста по центру:

Выравнивание текста по обеим сторонам:

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *