Заключаем текст в красивый блок

Ну, должно быть, у меня не совсем красиво, но вы можете придумать что-нибудь иное, необычное.

На своем блоге для выделения html-кода я уже давно стал использовать вертикальную линию слева. Чтобы не вводить код линии в каждом сообщении, разумнее использовать css (каскадные таблицы стилей). В шаблоне блогспота css помещается между тегами
Я, соответственно, поместил такой код своей вертикальной линии там же:
Далее. Для того чтобы этот стиль заработал для нужного нам куска текста, нужно этот самый кусок заключить в теги:
Кстати, я еще дополнительно выделял текст другим цветом, и только сейчас понял, что и этот момент тоже можно добавить в css ( внутри фигурных скобок):
И целиком стиль, который надо добавить в шаблон Блоггера, будет такой:
 где
  • .link это название элемента, который вы можете обозвать любым удобным запоминающимся для вас именем, я случайно так обозвал, теперь менять уже поздно))).
  • border-left: solid #cbe176 это сама линия, зеленого цвета
  • padding-left: 10px; отступ текста слева внутри блока 
  • margin: 1.4em 0em 1.4em; отступы сверху, слева и снизу самого блока от основного текста статьи или краев. em в данном случае — это размер используемого шрифта.
  • text-indent: 0px; отсуп красной строки внутри блока. По умолчанию у меня выставляется отступ в блоге на 15px, я подумал, что здесь будет симпатичнее без него.
  • И, наконец, color: #783f04; — цвет нашего текста, о чем я уже упоминал.
Идем дальше.
Собственно, таким образом можно добавить различные стили, например сделать фон другого цвета для выделения не только кода, но и, например, основных мыслей статьи, цитат и так далее.
Запомните названия своих стилей! Чтобы не подсматривать каждый раз в шаблоне!
Вот код для красного и желтого блоков:
Как видите, указаны общие параметры .yell, .red (через запятую), а затем для .red отдельно указано значение цвета для фона. Также здесь прописаны тени (box-shadow) и закругленные углы (border-radius), для разных браузеров, потому как не везде они корректно отображаются.

Так как на блогспоте в редакторе уже есть инструмент для выделения цитат,

\

то почему бы им не воспользоваться. Для этого нужно выделить необходимый текст, нажать на эту кнопку с кавычками, перейти на вкладку HTML, найти нужный фрагмент, он будет заключен в тег
у меня, по крайней мере, так, и заменить tr_bq на название стиля. Например:
 В следующем видео я показал этот интересный процесс:



Я думаю, ничего страшно нету в том, что div class заменен на blockquote class. В крайнем случае можно и blockquote заменить на div. В этом случае нужно будет заменить и закрывающий тег.
На этом все, удачи!
Яндекс.Метрика