Как выделить часть текста в рамку



 Выделение текста рамкой и оформление на заданном цветном фоне


Здравствуйте! Любому из веб мастеров в своих статьях бывает необходимо выделить какую-то часть текста в рамку. Текст будет более заметным, читатели обращают внимание на такие выделенные записи. Сегодня мы рассмотрим наиболее простые способы выделения текста в рамку. Вы сможете выделить любую часть текста или весь текст  на странице, а также узнать, как выделить текст на заданном Вами фоне. Итак приступим:

Точечная рамка, заключить текст  в этом  коде:

<div style="border:5px dotted  #0e5198;padding:10px;">ваш текст</div>


Заключить текст  простой линией в этот код:

<div align="center" style="border: 1px solid #9b089e;">ваш текст</div>



Это рамка с измененными размерами border:10 px и цветом solid #9b089e;


Код для выделения текста сплошной линией

<div style="border:3px solid #000000;padding:10px;">ваш текст</div>

Пунктирная рамка

<div style="border:3px dashed #0e5198;padding:10px;">ваш текст</div>
 

Края рамка вдавленные

<div style="border:10px inset #ff9900;padding:10px;">ваш текст</div>

Выпуклые края рамки

<div style="border:10px outset #054f04;padding:10px;">ваш текст</div>

Двойная рамка

<div style="border:10px double #0a9e08;padding:10px;">ваш текст</div>

Края рамки выемкой

<div style="border:10px groove #047AFE;padding:10px;">ваш текст</div>  

Края рамки в виде кромки

<div style="border:10px ridge #8b00ff;padding:10px;">ваш текст</div>

Такая рамочка с краями кромкой

<div style="border:10px ridge  #FFFACD;padding:10px;"><div style="text-align: center; font: 20px Arial;font-style: italic; color: #000000; padding:2px;">ваш текст</div></div>

Этот стиль CSS вставляется в шаблон, изменить шаблон: Ваш текст будет выделен на заданном Вами фоне, как у меня здесь.  Вы так же можете установить фон для всей страницы. Найти в шаблоне  после тэга <head>  строку  <b:skin> ... </ b:skin>, нажмите на стрелку слева.
Прокрутите вниз и находите строку   ]]></ b:skin> 
  
Выше этой строки вставляете код ниже


.code 1 {

margin : 15px 35px 15px 15px;

padding : 20px 10px 10px 35px;background : #f3f3f3;

border-top : 1px solid #E3E3E3; цвет границы

border-right : 1px solid #E3E3E3;  цвет гранцы справа

border-bottom : 1px solid #E3E3E3; цвет нижней границы

border-left : 1px solid #E3E3E3; цвет границы слева

border-radius: 5px; размер рамки

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}



Вы можете вставить в шаблон и использовать несколько стилей CSS.
Измените только   code2;  code3;  code4;   и.т.д. вставьте другие цвета и размеры.
Затем, когда напишите текст, заключите его в редакторе сообщений, нажав на вкладке HTML в следующем коде

<div class="code1"> ваш текст </div>


Подробнее об оформлении текста с этим кодом читайте в этом моем посте.

Вот и все. Комментируйте, делитесь с друзьями. А я говорю вам всего наилучшего.


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


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

4 коммент. :

  1. Здравствуйте Ольга! Подскажите что значит дел? Если просто скопировать код и вставить в сообщение , то ничего не получается. И еще не могу присоединиться к сайту.

    ОтветитьУдалить
    Ответы
    1. Татьяна, можете копировать, получилось исправить в браузере Опера.

      Удалить
  2. Ольга, здравствуйте! Спасибо большое. Всё получилось.

    ОтветитьУдалить


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

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

Имя

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

Сообщение *