MaxSite CMS - бесплатный «движок» вашего сайта! Легкая, мощная и надежная CMS - система управления сайтом. Никаких тормозов!

Выпуск 7. Оформление текстов с помощью HTML

15 июля 2006 г. Просмотров: 45642 2
WordPress » Архив рассылки WordPress

Продолжаем изучать основные методы оформления текстов с помощью HTML.

Небольшое объявление

Теперь на моем сайте вы найдете архив рассылки. Думаю, что так будет удобно все подписчикам. Архив доступен по адресу: maxsite.org/ras

Так же напоминаю, что свои вопросы по WordPress вы можете задать на форуме: forum.maxsite.org

А пока продолжим разговор предыдущего выпуска об оформлении ваших текстов с помощью HTML.

Выделение фоном

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

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

  • Фон непосредственно под текстом.
  • Фон для одного абзаца.
  • Фон для множества элементов.
В случае, если вы хотите выделить фон только под текстом, то для этого используем тэг <span>.
текст <span style="background: yellow;">текст</span> текст
<span> - это тэг т.н. строкового уровня. Это значит, что после его закрытия браузер продолжит вывод на той же линии.

Тэг <div>

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

<div> - это тэг т.н. блокового уровня. Это значит, что после его закрытия, браузер продолжит вывод уже с новой линии, то есть как бы добавит перенос строки. Кроме этого тэги блокового уровня стараются разместить себя по всей доступной ширине (если, конечно же, не указать размеры явно).

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

<div style="background: yellow;">текст текст текст текст текст текст текст текст текст 
текст текст текст текст текст текст текст текст текст </div>
<div style="background: #CCFFCC;">текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст </div>

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

Устанавливаем отступы

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

текст текст текст
<div style="margin: 20px;">текст</div>
текст текст текст

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

текст текст текст
<div style="padding: 20px;>текст</div>
текст текст текст

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

Напомню, что в стиле всегда нужно указывать единицы измерения! В данном случае мы используем пикселы (px).

Оступы с разных сторон

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

  • padding-left - отступ слева
  • padding-right - отступ справа
  • padding-top - отступ сверху
  • padding-bottom - отступ снизу

И аналогично для margin:

  • margin-left - отступ слева
  • margin-right - отступ справа
  • margin-top - отступ сверху
  • margin-bottom - отступ снизу

Рамки

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

<div style="border: 6px #339966 solid;">
<div style="border: 6px #339966 dotted;">
<div style="border: 6px #339966 dashed;">
<div style="border: 6px #339966 double;">
<div style="border: 6px #339966 groove;">
<div style="border: 6px #339966 ridge;">
<div style="border: 6px #339966 inset;">
<div style="border: 6px #339966 outset;">

Естественно, вы можете установить бордюр с любой стороны:

  • border-left - слева
  • border-right - справа
  • border-top - сверху
  • border-bottom - снизу

Делаем цитаты (комментарии)

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

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

<div style="border-left: 3px #606080 solid; padding: 3px;
padding-left: 10px; background: #F0F0F0;">
текст текст текст</div>

Врезка

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

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

Параметр float позволяет установить обтекание блока слева или справа.

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

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

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

<div style="float: right; width: 200px; padding: 5px;
margin: 10px; border-left: 4px double navy; background: #99CCFF;">
Это пример врезки.
Это пример врезки.
</div>
Это пример врезки.

Это пример врезки.

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

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

Классы (class)

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

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

.vrezka {float: right;
         width: 200px;
         padding: 5px;
         margin: 10px;
         border-left: 4px double navy;
         background: #99CCFF;}

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

<div class="vrezka">
Это пример врезки.
Это пример врезки.
</div>

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

Используем псевдокод

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

[ врезка ] => '<div class="vrezka">',
[ /врезка ]' => '</div>',

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

<div class="vrezka">
Это пример врезки.
Это пример врезки.
</div>

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

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

twitter.com facebook.com vkontakte.ru odnoklassniki.ru mail.ru
Комментариев: 2
  1. Виталий | 2008-10-13 в 23:20:29#1

    Можно ли использовать плагин "Псевдокод" для того, чтобы заменять слова?

    например, чтобы русское слово заменять на такое же, но с переводом на английский. Например, "факт" заменять на "факт (fact)".

  2. Максим | 2009-07-04 в 16:52:06#2

    Класс, коды и примеры прямо перед глазами, очень удобно, спасибо.

Мебель для офиса Спасибо за ваше обращение в нашу компанию. Мы рассмотрим его в ближайшее время.