Фон для текста

Озадачился, на днях, я вопросом, как из основного текста публикации выделить более значащую его часть, чтобы именно на неё пользователь обратил больше внимания своего.

Естественно, можно использовать уже встроенный функционал текстового редактора блоггера: выделить полужирным шрифтом, курсивом, зачёркнутым или же подчёркнутым; увеличить/уменьшить размер шрифта или же другим (например, салатовым) цветом выделять; можно играть стилем шрифта и т.д...
Но весь этот стандартный набор редактора меня уже не устраивал. Мне надо был текст выделенный именно на другом, отличающемся от основного, сплошном фоне или, что лучше, в рамке!

Решение, как оказалось, было практически на поверхности...
Тянуть резину больше не буду...

Выделение части текста на сплошном фоне (без рамки)!

допустим, что эта часть содержимого статьи должна привлечь больше внимания посетителя, поэтому мы её выделили таким образом.
Код данного фона такой:
<span style="background: #eeeeee; padding: 10px; display: block;">текст, который хотите выделить</span>
Где:
- background: #eeeeee; - цвет фона (в данном случае, #eeeeee - цвет "Морской пены") - можете свой цвет подбирать;
- padding: 10px; - определяет значение (отступ) полей вокруг текста (содержимого) - от ноля до... сами можете подобрать;
- display: block; - этот параметр как раз и задаёт блочность содержимого. Без него не будет работать весь код (вернее, фон не будет одним сплошным блоком) - не удаляйте его с кода!

Как видите, сейчас фон сплошной, то есть, как отдельный, независимый блок

Выделение части текста на сплошном фоне (в рамке)!

<span style="background: #eeeeee; border: 10px inset #798081; display: block; padding: 10px;">текст, который надо выделить от общей массы</span>
Где:
- background: #eeeeee; - цвет фона (в данном случае, #eeeeee - цвет "Морской пены")
- border: 10px inset #798081; - ширина рамки (в данном случае, 10px, ), стиль рамки (в данном случае, inset), цвет рамки ( в данном случае #798081)
- display: block; - задаёт блочность содержимого. без этого параметра не будет работать весь код (вернее, фон не будет одним сплошным блоком)
- padding: 10px; - определяет значение (отступ) полей вокруг текста (содержимого).

Вот примеры и значения стилей рамки:

dotted  dashed  solid  double  groove  ridge  inset  outset

Помимо рамки вокруг нашего текста (содержимого), можно бордюрчик сделать лишь с левой, например, стороны (border-left):
<span style="background: #eeeeee; border-left: 10px solid #798081; display: block; padding: 10px;">текст, который надо выделить от общей массы</span>

или с правой (border-right):
<span style="background: #eeeeee; border-right: 10px solid #798081; display: block; padding: 10px;">текст, который надо выделить от общей массы</span>

верхний бордюр (border-top)
<span style="background: #eeeeee; border-top: 10px solid #798081; display: block; padding: 10px;">текст, который надо выделить от общей массы</span>

нижний бордюр (border-bottom)
<span style="background: #eeeeee; border-bottom: 10px solid #798081; display: block; padding: 10px;">текст, который надо выделить от общей массы</span>

двухсторонний можно (прописываем border-left и border-right вместе):
<span style="background: #eeeeee; border-left: 10px solid #798081; border-right: 10px solid #798081; display: block; padding: 10px;">текст, который надо выделить от общей массы</span>

Задайте для правого бордюра стиль dotted, а для левого ridge и получится вот так:
<span style="background: #eeeeee; border-left: 10px ridge #798081; border-right: 10px dotted #798081; display: block; padding: 10px;">текст, который надо выделить от общей массы</span>

И т.д. можно фантазировать...

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

Удачи!


P.S. Хоть кому-то пригодится данная информация?