Здравейте всички, които сте тук, за да почерпите информация. Днес ще работим върху текст с хоризонтални и вертикални разделителни линии за публикация.
Разделителни линии, или накратко разделители, използваме понякога в публикациите си. Затова реших да напиша за тях по-подробно. Ще се научете как да пишете зачертан текст, а също така как можете да подчертаете текста с двойна линия, точки или пунктирана линия. И така, който се интересува, нека чете по-нататък.
Разделителни линии с настройки по размер и цвят
➤Най-обикновена линия за цялата ширина на страницата
Код:
<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>
Можем да получим
!Ако искате да промените разположението на ляво или дясно, то заменете center с right (дясно) или с left (ляво).
Имате ли въпроси? Задайте ги в коментарите или използвайте контактната форма от страничното меню.
Да, почти забравих. В браузъра Mozilla Firefox вертикалните линии се показват под формата на кръг, в други браузъри е нормално. За браузъра IE ще замълча.
За днес това е всичко. Прочетете още по темата за разделителните линии в тази публикация.
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:
Няма коментари:
Публикуване на коментар