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

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

<font size="+4">ВАШ ТЕКСТ</font>

КРУПНЫЙ ТЕКСТ

<font size="+3">ВАШ ТЕКСТ</font>

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

<font size="+2">ВАШ ТЕКСТ</font>
 

• Посмотреть таблицу сочетаемость цветов
  

  ---

  
  Все цвета меняйте по своему вкусу
  
  Цветной текст с цветным фоном в цветной рамке
  
  <span style="background-color:dodgerblue; color:white; padding:3px; border:3px solid red;">ВАШ ТЕКСТ</span>
  

  ---

  
  Текст, подчеркнутый пунктиром
  
  <span style="border-bottom: 2px dashed red;">ВАШ ТЕКСТ</span>
  

  ---

  
  Текст, подчеркнутый точками
  
  <span style="border-bottom: 3px dotted lime;">Текст, подчеркнутый пунктиром</span>
  

  ---

  
  Текст, подчеркнутый двойной чертой
  
  <span style="border-bottom: double red;">Текст, подчеркнутый двойной чертой</span>
  

  ---

  
  Текст, окаймленный разноцветным пунктиром Все цвета можно менять.
  
  <span style=border-style:dashed; border-top-color:blue; border-bottom-color:red; padding:5px;> Текст </span>
  

  ---

  
  Текст в двойной рамке
  
  <span style="border-style: double; padding:3px;">Текст в двойной рамке</span>
  

  ---

  
  
  Цветной текст в двойной цветной рамке Цвета меняйте по своему вкусу
  
  <span style="border-style: double; color: green; padding:3px;"><span style="color:blue;">Цветной текст в двойной цветной рамке</span></span>
  

  ---

  
  Ваш текст в объемной 3D-рамке
  
  <span style="border-width:thick; border-style:groove; padding:4px; border-color:#FF5730"> Ваш текст в объемной 3D-рамке</span>
  

  ---

  
  На заметку:
  Тег span (строчный) во всех приведенных примерах можно заменять на div (блочный элемент) и тогда получим рамку во всю ширину поста.
  
  Ваш текст в объемной 3D-рамке
  
  Что бы получить рамку с определенными размерами, то используем следующие теги:
  Размеры блока div задаются атрибутами:
  div style=width:200px; height:50px;
  где ">width:200px; — ширина блока 200 пикселей,
  height:50px; — высота блока 50 пикселей
  Если проставить ширину и высоту, то получим рамку с нужными размерами:
  
  Ваш текст в объемной 3D-рамке
  
  
  <div style="width:200px; height:50px; border-width:thick; border-style:groove; padding:4px; border-color:#FF5730"> Ваш текст </div>
  

  ---

  
  Лучшие сервисы для подбора цвета:
  
  ПЕРВАЯ ССЫЛКА - Таблица «безопасных» цветов
  ВТОРАЯ ССЫЛКА - 4096 Цветовых Колеса
  ТРЕТЬЯ ССЫЛКА - Таблица html кодов цветов, буквенное написание и коды цветов в RGB
  
  

  ---

  
  Аббревиатура: HTML
  <acronym title="Hiper Text Markup Language">HTML</acronym>
  

  ---

  
  Так называемый «спойлерный» текст, проявляющийся при его выделении (закрашивании) мышкой. Например:
  Загадка видна всем, а отгадку увидим только при выделении - «Зимой белый, летом серый ответ ЗАЙЧИК«
  
  <span style="background-color:#FFFFFF; color:#FFFFFF">спойлерный текст</span>
  

  ---

  
  Выделение первой буквы в предложении, или так называемая «буквица»:
  Ж или были дед да баба…
  <font size="+4" face="Monotype Corsiva" color="#0000FF">Ж</font> <i>или были дед да баба…</i>
  

  ---

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

  
  Ваш основной текст текст
  <p title="Пояснительный текст">Основной текст</p>

  ---

  
  Текст «наоборот»:
  Перевернуть текст задом-наперед
  <bdo dir="rtl">Перевернуть текст задом-наперед</bdo>
  

  ---

  
  

   

  Увеличиваем расстояние между словами
  Значения можно менять
  <div style="word-spacing: 20px;">ВАШ ТЕКСТ</div>
  

  ---

  
  
  Больше расстояние между словами
  
  <div style="word-spacing: 40px;">Больше расстояние между словами</div>
  

  ---

  
  
  Расстояние между буквами
  Значение 10px можно менять
  

  <div style="letter-spacing: 10px;">Расстояние между буквами</div>

  
  

  ---

  
  
  А здесь задано расстояние между строками (по вертикали) пятьдесят пикселов, как видите растояние между строчками сразу увеличилось. Значение пикселей можно менять
  
  <div style="line-height:50px;">Расстояние между строками</div>
  

  ---

  
  Приподнять ^фразу на 5 пикселей над текстом (значение можно менять)
  
  Приподнять <sup style="position: relative; top:-5px;">фразу</sup>
  

  ---

  
  Опустить _фразу (значение можно менять)
  
  Опустить <sub style="position: relative; bottom:-5px;">фразу</sub>
  
  Выделение цитаты в тексте.
  Пример:
  Выделяем следующую фразу:
  
  Внимание, это пояснение очень важное
  
  
  <div style="border-right: #000080 1px solid; padding-right: 4px; border-top: #000080 1px solid; padding-left: 3px; font-size: 92%; padding-bottom: 4px; border-left: #000080 1px solid; color: #000080; padding-top: 2px; border-bottom: #000080 1px solid; background-color: #f0f0ff"> ТЕКСТ ЦИТАТЫ</div>
  

  ---

  
  Выделение цитаты С ЭФФЕКТОМ ПОДСВЕТКИ (наведите курсор на текст):
  Выделение цитаты С ЭФФЕКТОМ ПОДСВЕТКИ
  
  <button type="submit">ТЕКСТ С ЭФФЕКТОМ ПОДСВЕТКИ</button>
  

  ---

  
  Разбить текст на две колонки:
  
  
  

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

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

  
  

  Незаметно исчезают друзья. Реже встречи и короче звонки. Изменить, наверно, это нельзя, Если вы уже другие внутри.

  И никто не виноват - просто жаль, Что у всех такая разная жизнь. Наше прошлое, летящее в даль, Превращается легко в миражи.

  
  
  

  Код:
  <table width=100%>
  <tr><td width=50%>
  текст левой колонки
  <td width=50%>
  текст правой колонки</table>
  

  ---

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

   

  © J.Shaffer 1928
  
  

  <div align=right><cite title="Информация">&copy; АВТОР</cite></div>

  
  

  ---

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

  Я
  
    Пешу
  
         Лесинкой!!!

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

  C
  
       Днем 
  
                 Рождения!

  
  <pre style="font-family:'Arial Black'">ваш текст</pre>
  

  ---

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

   

  
  

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

  Красиво написанный текст или оформленный заголовок всегда привлекает внимание к себе. Но не все знают как сделать это, да и трудно удержать в голове различные теги и формулы. Поэтому в этом посте собраны все основные теги и формулы по написанию и оформлению текста. Просто вписывайте свой текст в данные коды, и ваш текст будет выглядеть как в этих примерах. Значения размеров, толщину и цвет в кодах всегда можно поменять на свои.
  
  <p style="padding-right: 15px; margin-top: 0px; float: left; margin-bottom: 3px; width: 30%; color: blue;">Текст внутри</p> Обтекающий текст
  
  

  ---

  
  Написать текст, имея фоном картинку:
  
  Томас Эдисон сказал: «У меня не было рабочих дней и дней отдыха. Я просто делал и получал от этого удовольствие».
  
  
  <div style="font-size: 15px; font-weight: bold; font-family: Georgia; color: red; padding: 8px; background-image: url('Адрес картинки');">ВАШ ТЕКСТ</div>
  

  ---

  
  Выравнивание текста HTML-кодом
  
  Исходный код для выравнивания текста по левому краю:
  <div align="left"> Текст выровнен по левому краю </div>
  
  Исходный код для выравнивания текста по правому краю:
  <div align="right"> Текст выровнен по правому краю </div>
  
  Исходный код для выравнивания текста по центру:
  <div align="center"> Текст выровнен по центру</div>
  
  Выравнивание текста по обеим сторонам:
  
  Ваш текст
  
  
  <div align="justify">Ваш текст</div>
  

  ---

  
  
  Все о бегущем тексте СМОТРИМ ЗДЕСЬ