0

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

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



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








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


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



    Код:     


    <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 ще замълча.

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




    Няма коментари :

    Винаги се радвам на Вашето мнение


    Copyright © БЛОГ ЗА БЛОГОВЕ©2016-| Original style & code - magentawave.com | Всички права запазени |
    Използването на Blogzablogove.com означава, че сте съгласни с нашата Политика на конфиденциалност и защита