Как выделить часть текста в рамку
Выделение текста рамкой и оформление на заданном цветном фоне
Здравствуйте! Любому из веб мастеров в своих статьях бывает необходимо выделить какую-то часть текста в рамку. Текст будет более заметным, читатели обращают внимание на такие выделенные записи. Сегодня мы рассмотрим наиболее простые способы выделения текста в рамку. Вы сможете выделить любую часть текста или весь текст на странице, а также узнать, как выделить текст на заданном Вами фоне. Итак приступим:
Точечная рамка, заключить текст в этом коде:
<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 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 #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>
<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>
Подробнее об оформлении текста с этим кодом читайте в этом моем посте.
Вот и все. Комментируйте, делитесь с друзьями. А я говорю вам всего наилучшего.