Всем привет!

С Вами снова Андрей.

Очередной выпуск рассылки будет про дополнительные элементы HTML.

Сегодня Вам будет предложено 2 версии урока. Одна в текстовом виде – ее Вы видите перед своими глазами, а вторая ВИДЕО – ее Вам нужно будет скачать.

Ссылка на видео версию урока:

Видео версия 11 урока

На наш взгляд видео версия Вам будет более понятна.

Так, про дополнительные элементы html…

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

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

И так, это теги <div></div> и <span></span>.

Какая между ними разница, если используются они для одного и того же?

<div></div> – это блочный тег, и в нем могут быть любые нам известные теги (списки, картинки, таблицы…).

<span></span> – это строчный тег, и он применим исключительно к тексту (выделить фрагмент текста другим цветом).

Стили, которые применимы к данным тегам – это все нами изученные стили. Ограничений на применение каких-либо стилей нет.

Давайте рассмотрим стили, которые наиболее типичны для данных тегов. Они же применимы ко всем остальным тегам, и используются так же, просто чаще их используют с этими тегами (особенно к <div></div>) .

Первое с чего хотелось бы начать это с позиционирования элементов.

Это свойство:

position – устанавливает или определяет позицию элемента.

Значения:

left/top – Устанавливает или определяет позицию элемента относительно левого/верхнего края.

Значения:

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

<div style="position:relative; top:350px; left:200px; width:300px;">
Любое содержимое блока!!!</div>

Данный пример показывает, что наш блок с шириной в 300px сдвинется вниз на 350px и в лево на 200px , относительно того места, в котором он появится по умолчанию.

Следующее важное свойство:

margin – величина отступа от нашего блока до соседних объектов с четырех сторон.

Значения:

Пример:

<div style="margin-top:30px; margin-left:30px; margin-bottom:30px; margin-right:30px;">
Любое содержимое блока!!!</div>

Мы создали блок с отступами вокруг него по 30px от всех его сторон.

Над чем хотелось бы остановиться еще:

padding – свойство задает величину пространтства, вставляемого между объектом и его границами.

Значения:

Пример:

<div style="padding-bottom:30px; padding-left:30px; padding-right:30px; padding-top:30px;">
Любое содержимое блока!!!</div>

Мы создали блок с отступами по 30px от содержимого до всех его сторон.

И рассмотрим пример с использованием тэга <span></span>:

Допустим, у нас есть конструкция вида:

Любой текст !

Мы хотим сделать слово текст на желтом фоне синими буквами. Для этого заключим его в тэг <span></span> и применим соответствующие стили.

Любой <span style="background-color:#FFFF66; color:#000066;">текст</span>!
<p></code></p>

Любой текст!

Еще раз повторюсь, что все рассмотренные стили применимы не только к рассмотренным двум тэгам, но и ко всем нами известным тэгам!

На этом мы сегодня закончим, и напоминаю Вам, что Вы можете, для лучшей проработки, скачать видео-версию урока:

Видео версия 11 урока

По вопросам пишите на E-mail: contact@webformyself.com

Проект webformyself.com – основы самостоятельного сайтостроения

С Вами был Бернацкий Андрей!

Метки: div, font, margin, padding, span, верстка div

Запись опубликована 15.07.2009 в 11:58 и размещена в рубрике Базовый курс. Вы можете следить за обсуждением этой записи с помощью ленты RSS 2.0. Можно оставить комментарий или сделать обратную ссылку с вашего сайта.