Стильное оформление текста



Немного приукрасим наш блог на Blogspot и выделим наиболее важные абзацы текста.В процессе создания страниц блога часто бывает возникает необходимость визуального выделения определённых участков текста для привлечения внимания читателя к важной информации.Стандартный набор редактирования Bloger довольно скуден и не может удовлетворить все потребности.



Установка кода стилей для текста.


Для выделения и украшения определённых участков статьи можно воспользоваться простым добавлением стилей заданных для определённых участков текста заключённых в контейнер.Заданный вами стиль будет автоматически выделять и преображать все те абзацы,которым вы зададите на выбор любой из этих стилей.
Установка проста до непристойности.Скопировав приведённый ниже код CSS установите его или в шаблон блога или же в любой гаджет HTML и JavaScript.Предварительно можно воспользоваться онлайн редактором     для подгонки цветовой гаммы блоков под дизайн вашего блока,если стиль вашего оформления исполнен в другой цветовой гамме.
<style type="text/css">.v-gol, .v-g, .vvg,.vvvvg {
margin:10px;
padding:15px 20px 15px 20px;
border:1px solid #999999; /* толщина и цвет рамки */
border-radius: 10px;    /* закругление углов */
-moz-border-radius:10px 10px 10px 10px;
box-shadow:2px 2px 3px #999999;
-moz-box-shadow:2px 2px 3px #999999;
-webkit-box-shadow: #999 2px 2px 3px;
background-position:10px 50%;
background-repeat:no-repeat;
position:relative;
text-align:justify;
}.v-gol {background-color:#FFD4A0; /* цвет первого блока */
}.v-g {background-color:#FFFF0C; /* цвет второго блока */
}.vvg { background-color:#E9FFD4; /* цвет третьего  блока */
}.vvvvg {background-color:#FF2430;  /* цвет четвёртого блока */
 </style>

После того как вы установите приведённый выше код CSS,необходимо будет при создании страницы,те участки,которые по вашему следует выделить заключить в контейнер такого вида  <div class="v-g">ВАШ ТЕКСТ</div>. Ниже приведен код четырёх различных варианта оформления блоков.Каждый из них отвечает за свой цвет и передаёт выделенному участку стиль,заданный нами в CSS.
<div class="vvg">ВАШ ТЕКСТ
</div>
<div class="v-gol">ВАШ ТЕКСТ
</div>

<div class="v-g">ВАШ ТЕКСТ
</div>

<div class="vvvvg">ВАШ ТЕКСТ
</div>

Настройки блока и цветовой гаммы.


ВАШ ТЕКСТ
ВАШ ТЕКСТ
ВАШ ТЕКСТ
ВАШ ТЕКСТ

Настройки CSS для выделения различных участков текста на странице внесены в код и думаю понятны.Изменяя эти значения можно придать блокам ту цветовую гамму,которая будет соответствовать дизайну и стилистике ваших страниц.Так же можно закруглить углы блока изменив указанное по умолчанию значение на большее.





Отправить комментарий