Выделение текста рамкой и оформление на заданном цветном фоне
Здравствуйте! Любому из веб мастеров в своих статьях бывает необходимо выделить какую-то часть текста в рамку. Текст будет более заметным, читатели обращают внимание на такие выделенные записи. Сегодня мы рассмотрим наиболее простые способы выделения текста в рамку. Вы сможете выделить любую часть текста или весь текст на странице, а также узнать, как выделить текст на заданном Вами фоне. Итак приступим:
Точечная рамка, заключить текст в этом коде:
<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>
Подробнее об оформлении текста с этим кодом читайте в этом моем посте. Вот и все. Комментируйте, делитесь с друзьями. А я говорю вам всего наилучшего.
Рекомендуемый контент:
Здравствуйте Ольга! Подскажите что значит дел? Если просто скопировать код и вставить в сообщение , то ничего не получается. И еще не могу присоединиться к сайту.
ОтветитьУдалитьТатьяна, можете копировать, получилось исправить в браузере Опера.
УдалитьОльга, здравствуйте! Спасибо большое. Всё получилось.
ОтветитьУдалитьприкольно)
ОтветитьУдалитьСколько перерыла статей в интернете, все объясняют очень сложно, с css, как делать рамку. А у вас все просто до гениальности - заключи текст в код - и вуаля! Единственное, что я бы добавила в вашу статью - что цвета рамки можно менять, заменив соответствующий цвет в коде.
ОтветитьУдалитьИ еще у вас хорошее оформление - код + как это выглядит. Лучшая статья для чайников
PS Третья рамка (зеленая) без кода. Последняя рамка "с краями кромкой" почему-то делает текст жирным курсивом по центру.
elenavogni, спасибо за отзыв. Третья рамка (зеленая) для примера, код в рамке выше. Я изменила размер границ рамки: border: 1px на border:10px.
УдалитьРамка с краями кромкой: в части кода text-align: center; font: 20px Arial;font-style: italic;
center-текст по центру, можно вставить right (справа), left (слева) или удалить строку с кода.
font-style: italic; текст курсив, наклонный (italic), нормальный текст (вставьте normal).Что касается жирного текста, напишите, Вы рамку используете на странице сообщений или в гаджете? Я проверила гаджетом для проверки, текст не жирный.