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



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


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

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

Самая простая линия на всю ширину страницы
<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 (слева). 


Будут вопросы, задавайте в комментариях или воспользуйтесь в меню-контакты. Да, чуть не забыла. У меня в браузере Mozilla Firefox вертикальные линии отображаются в виде круга, в других браузерах нормально. За браузер ИЕ я помолчу.

На сегодня у меня все. Всего Вам Доброго и наилучшего. Почитайте по теме разделительные линии в этом посте.


Автор статьи ✎ Olga Protasova Выпуск ✹ 4/09/2014 Ярлыки ►


Открыть комментарии →

0 коммент. :

Отправить комментарий


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *