Выделение фоном
Наверное вы знаете, чтобы добиться красивого оформления текстов, можно использовать различные художественные приемы, одним из которых является оформление цветом. Мы уже рассмотрели изменение цвета текста, теперь поговорим о цвете фона.

Для начала вы должны определить фон какого блока вам нужнен. Это может быть:

• Фон непосредственно под текстом.
  
• Фон для одного абзаца.
  
• Фон для множества элементов.
  

В случае, если вы хотите выделить фон только под текстом, то для этого используем тэг <span>.




Тэг <div>
Если же вам нужно выделить целый абзац или множество других элементов, то нужно воспользоваться тэгом <div>.



Синтаксис <div> мало отличается от <span>.

Таким образом вы сможете выделять нужные вам фрагменты.

Устанавливаем отступы
Для любого блока можно установить отступы внешние и внутренние. Внешний отступ задается параметром margin, внутренний padding.

Красная граница это и есть margin.

Отступ текста в желтом поле это и есть padding.


Оступы с разных сторон
HTML позволяет устанавивать отступы для всех сторон по-отдельности. Для этого используются следующие параметры:

• padding-left - отступ слева
  
• padding-right - отступ справа
  
• padding-top - отступ сверху
  
• padding-bottom - отступ снизу
  И аналогично для margin:
  
  
• margin-left - отступ слева
  
• margin-right - отступ справа
  
• margin-top - отступ сверху
  
• margin-bottom - отступ снизу
  

Делаем цитаты (комментарии)
Пример цитат или комментариев вы видите прямо в этом тексте. Там, где я хочу обратить ваше внимание на особые моменты, то оформляю их в виде своего комментария. Такой приём здорово оживляет текст и его читать будет гораздо удобней.

Сразу привожу готовый код, вы же его можете модифицировать по своему усмотрению.


Врезка
Очень часто на сайтах используют еще один приём - врезка. Это примерно тоже, что и комментарии, только блок врезки как-бы "висит" с одного края.

Делается врезка по тому же принципу, что и комментарии, только нужно обязательно указывать ширину блока и дополнительный параметр float.

Float может принимать значения:

• float: none; - блок не обтекается (это значение используется по-умолчанию).
  
• float: left; - блок распологается слева, а остальные элементы обтекают его справа.
  
• float: right; - блок распологается справа, а остальные элементы обтекают его слева.
  
• float: inherid; - наследуется значение родительского элемента.
  

Рассмотрим пример:

Думаю, что этот пример не очень сложный и вы сможете его модифицировать по своему усмотрению.

Есть только один нюанс, о котором вы должны знать, когда будете размещать не только врезку, но и любой другой HTML-элемент с парметром float. Поскольку браузер для такого элемента создает отдельный поток вывода, то лучше размешать такой элемент перед нужным вам абзацем. В этом случае этот абзац и врезка окажутся выровненными по одной высоте (правда с учетом отступов).

Классы (class)
Всё это конечно хорошо, скажете вы, но каждый раз набирать эти сложные конструкции не очень-то и просто. Тем более, что многие из них будут повторяться. Оказывается, можно один раз определить нужный вам стиль и, в дальнейшем, только указыват его имя. Для этого существует механизм классов (class).

Суть его очень проста. В каждом шаблоне есть файл style.css - в нем хранятся вся стилевая разметка этого шаблона. Ну, например, мы хотим определить класс с именем vrezka:


Как видите, это ровно наш стиль врезки. После того, как мы добавим этот код в style.css мы можем в текстах указывать:


Как видите это гораздо проще . Кроме этого, если вы вдруг захотите изменить стиль врезки, то вам будет достаточно просто изменить его в style.css.

Используем псевдокод
Если вы установили мой плагин "Псевдокод", то можете еще больше упростить себе задачу. Для этого вы можете заранее написать псевдокод, который будет автоматически заменяться на сложный HTML-код. Например так можно оформить врезку:

[
Теперь оформлять тексты будет еще проще:


Попробуйте поэкспериметрировать и сделать для себя стиль и класс для псевдокодов [ отступ ] и [ комментарий ].

Могу открыть меленький секрет: это рассылку и все тексты на своем сайте я оформляю с помощью псевдокодов. Один раз их написав, я могу очень просто публиковать свои материалы.