Выпуск №11. Элементы span и div в HTML

верстка

Всем привет!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Значения:

static — по умолчанию. Позиция объекта определяется текущей разметкой HTML по стандартным правилам.

absolute — позиция объекта определяется относительно позиции родительского объекта или относительно объекта body. relative — Позиция объекта определяется смещением от позиции, в которой он появился по умолчанию.

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

Значения:

x – число в процентах или пикселях.

auto — значение по умолчанию.

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

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

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

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

Значения:

margin-top — задает величину верхнего отступа объекта

margin-left — задает величину левого отступа объекта

margin-right — задает величину правого отступа объекта

margin-bottom — задает величину нижнего отступа объекта

Пример:

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

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

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

Значения:

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

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

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

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

Пример:

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

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

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

Любой текст !

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

Любой текст!

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

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

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

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

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

киберсант-вебмастер

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии (15)