• Авторизация
Дневник tamaralos Лента друзей - Дневник - Полная версия


Разделительные линии для текста с настройкой размера и цвета 25-04-2019 09:56 к комментариям - к полной версии - понравилось!

Это цитата сообщения ЛЮДМИЛА_ГОРНАЯ Оригинальное сообщение

Разделительные линии для текста с настройкой размера и цвета







Разделительные линии для текста с настройкой размера и цвета


Как написать подчеркнутый и зачеркнутый текст, разделительные линии с настройкой размера и цвета


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

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

Самая простая линия на всю ширину страницы
<hr>
 
Цветная простая линия на всю ширину страницы
<hr color="#0e5198">


 Линия по центру, можно настроить ширину
<hr align=center width=80%>

  Такая ширина линии 
<hr align=center width=50%>
   
Разделительная линия выровнена по левому краю;

<hr width=100 align="left">
Разделительная линия выровнена по правому краю

 <hr width=100 align="right"> 
  

Цветные разделители справа и слева
 <hr color="#0e5198"width=100 align="right">
  <hr color="#871F78"width=100 align="left">
 

Разделитель выровнен по ширине
 
<hr width=100 align="justify">

Цветной разделитель, выровнен по заданной ширине 
 
 <hr color="#0e5198";width=100 align="justify">
 

 Цветная разделительная линия по ширине страницы, где size=8-толщина разделителя;
 
   <hr color="#0e5198";size=8>


 
Если установить больший вертикальный размер линии (size) и минимальный горизонтальный (width), то получим вертикальную линию:

<hr noshade align="center" width="3" size="50">  
 Вертикальная разделительная линия слева. Расположить справа, в коде измените left на right

<hr noshade align="left" width="1" size="60">
А теперь поработаем немного с текстом:
 
<span style="border:2px solid blue; padding:3px;"><span style="color:red;">Красный текст в синей рамке</span></span>
 
 
  
  Красный текст в синей рамке 


  Серый текст в коричневой рамке 


 Текст оранжевого цвета в зеленой рамке 

Здесь, чтобы изменить цвет, надо название цвета написать на английском языке. 


Текст на заданном фоне

 <span style="background-color: green; color: brown; padding: 3px;">Коричневый текст на зеленом фоне</span>
 
Коричневый текст на зеленом фоне


Зачеркнутый текст

 <span style="color:green;text-decoration:line-through;"><span style="color:green;">Ваш текст </span></span> ;

Ваш зачеркнутый текст ;

Подчеркнутый текст

<span style="color:brown;text-decoration:underline;"><span style="color:brown">Ваш текст</span></span>
Ваш подчеркнутый текст
 

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

<span style="border-bottom: 2px dashed green;">Ваш текст, подчеркнутый пунктирными точками</span> 

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

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

Ваш текст, подчеркнутый двойной линией
 
В коде измените dashed на dotted (подчеркнуть красными точками), double ( подчеркнуть двойной линией), green-это зеленый цвет текста, измените на свой, также на англ.

И в заключение вот такая разделительная линия

 <p align=center style=color:green;>~~~~~~~~~~~~~~~~~~~~~~~~</p>

Здесь также, чтобы изменить цвет (green), впишите название цвета на английском языке;
Получим
~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~

Если захотите расположение справа или слева, замените center на right (справа) и left (слева). 





 


 
вверх^ к полной версии понравилось! в evernote


Вы сейчас не можете прокомментировать это сообщение.

Дневник Разделительные линии для текста с настройкой размера и цвета | tamaralos - Дневник tamaralos | Лента друзей tamaralos / Полная версия Добавить в друзья Страницы: раньше»