Разделителни линии с различен размер и цвят

Как да подчертаете и зачертаете текст. Разделителни линии с настройки по размер и цвят
Здравейте всички, които сте тук, за да почерпите информация. Днес ще работим върху текст с хоризонтални и вертикални разделителни линии за публикация.

Разделителни линии, или накратко разделители, използваме понякога в публикациите си. Затова реших да напиша за тях по-подробно. Ще се научете как да пишете зачертан текст, а също така как можете да подчертаете текста с двойна линия, точки или пунктирана линия. И така, който се интересува, нека чете по-нататък.

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

➤Най-обикновена линия за цялата ширина на страницата

---

Код:     

<hr>

➤Цветна линия на цялата ширина на страницата

---

Код:

<hr color="#2288bb">

➤Линия, разположена централно с настройка за ширина

---

Код:

<hr align=center width=80%>

➤Линия и с определена ширина

---

Код:

<hr align=center width=50%>

➤Разделителна линия в лявата страна на страницата

---

Код:

<hr width=100 align="left">

➤Разделителна линия в дясната страна на страницата

Заменяме в кода "left" с "right"

Код:

<hr width=100 align="right">

➤Разделител подравнен по ширина

---

Код:

<hr width=100 align="justify">

➤Цветен разделител, подравнен по зададена ширина

---

Код:

 <hr color="#0e5198";width=200 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="border:2px solid Brown; padding:3px;"><span style="color: Gainsboro;"> Сив текст в кафява рамка  </span></span>

➤Оранжев текст в зелена рамка

Оранжев текст в зелена рамка

Код:

<span style="border:2px solid Green; padding:3px;"><span style="color: Orange;"> Оранжев текст в зелена рамка  </span></span>

Уточнение: За да променим цвета, променяме названието му в кода на английски език


➤Текст върху зададен фон


Оранжев текст на зелен фон

Код:

<center><span style="background-color: green; color: Orange; 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>

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

Вашият текст, подчертан с пунктир от точки
Код:

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

◾Ваш текст, подчертан с пунктир от червени точки

Вашият текст, подчертан с пунктир от червени точки

Код:

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

◾Ваш текст, подчертан с двойна линия

Вашият текст, подчертан с двойна линия

Код:

<span style="border-bottom: 2px double;">Ваш текст, подчертан с двойна линия</span>

Уточнение:
В трите кода по-горе се променя значението dashed на dotted или double, цвета на текста – също.

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

~~~~~~~~~~~~~~~~~~~~~~~~

Код:

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

Тук също можете да измените цвета (green), като впишите името му на английски език- pink, blue, red или brown.

Можем да получим

~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~
!Ако искате да промените разположението на ляво или дясно, то заменете center с right (дясно) или с left (ляво).

Имате ли въпроси? Задайте ги в коментарите или използвайте контактната форма от страничното меню.
Да, почти забравих. В браузъра Mozilla Firefox вертикалните линии се показват под формата на кръг, в други браузъри е нормално. За браузъра IE ще замълча.

За днес това е всичко. Прочетете още по темата за разделителните линии в тази публикация.

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на: