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

Вторник, 24 Декабря 2024 г. 06:17 + в цитатник

Цитата сообщения ЛЮДМИЛА_ГОРНАЯ

Прочитать целиком В свой цитатник или сообщество!

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

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

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

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

<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>