Немного приукрасим наш блог на 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 для выделения различных участков текста на странице внесены в код и думаю понятны.Изменяя эти значения можно придать блокам ту цветовую гамму,которая будет соответствовать дизайну и стилистике ваших страниц.Так же можно закруглить углы блока изменив указанное по умолчанию значение на большее. |
.jpg)






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