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



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


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

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

<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-size: 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 Ярлыки ►


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

6 коммент. :

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

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

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

    ОтветитьУдалить
  3. Сколько перерыла статей в интернете, все объясняют очень сложно, с css, как делать рамку. А у вас все просто до гениальности - заключи текст в код - и вуаля! Единственное, что я бы добавила в вашу статью - что цвета рамки можно менять, заменив соответствующий цвет в коде.
    И еще у вас хорошее оформление - код + как это выглядит. Лучшая статья для чайников

    PS Третья рамка (зеленая) без кода. Последняя рамка "с краями кромкой" почему-то делает текст жирным курсивом по центру.

    ОтветитьУдалить
    Ответы
    1. elenavogni, спасибо за отзыв. Третья рамка (зеленая) для примера, код в рамке выше. Я изменила размер границ рамки: border: 1px на border:10px.

      Рамка с краями кромкой: в части кода text-align: center; font: 20px Arial;font-style: italic;

      center-текст по центру, можно вставить right (справа), left (слева) или удалить строку с кода.

      font-style: italic; текст курсив, наклонный (italic), нормальный текст (вставьте normal).Что касается жирного текста, напишите, Вы рамку используете на странице сообщений или в гаджете? Я проверила гаджетом для проверки, текст не жирный.

      Удалить


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

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

Имя

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

Сообщение *