Выпуск №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 — значение по умолчанию.

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

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

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

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

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

Значения:

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

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

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

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

Пример:

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

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

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

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

Значения:

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

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

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

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

Пример:

<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>

Любой текст!

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

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

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

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

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

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

Комментарии Facebook:

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

  1. Петр

    Учебников на подобные темы встречал немало. Положительным моментом у Андрея является умение преподнести материал.

  2. Елена

    Андрей, спасибо за урок. Вопрос, а как в div сделать выравнивание по вертикали. Предположим у нас два дива слева и справа на странице, в левом диве картинка, в правом текст. Необходимо сделать выравнивание по вертикали по центру картинки по отношению к правому диву с текстом.

  3. Елена

    Спасибо большое Андрей! Спасибо за ценную информацию о расположении картинок в тексте! Все доступно и понятно! СПАСИБО!!! Прекрасный урок!

  4. Ekaterina

    Спасибо, Андрей! С видео намного лучше все становится понятно, но и текстовой материал очень помогает. Думаю вы выбрали правильный метод донести информацию, это радует.

  5. Лариса

    Ура! Двойная подача — самая эффективная!

  6. Tanuxa

    Спасибо,за урок! Действительно видео урок дополняет текстовый и на оборот. Что было не понятно в текстовом уроке — разъяснилось в видео уроке. Урок прошла самым тщательным образом, не спешила. Надеюсь не забуду! :)

  7. Maldives fan

    Я считаю, что хтмл можно выучить за короткий срок, а потом уже и за ccs браться и php)

  8. Сергей Петрович

    И всё же я за хороший русский (язык). У Вас хороший тембр. Вам удаются экспромты. Но я бы переписл текст: Вы, вероятно, очень спешили — и этот экспромт оказался не самым лучшим. Меня раздражают (не только у Вас) бесконечные «да?» и «э-э-э» и, когда не находится что сказать звучит: «вот таким образом». Надеюсь, Вы сами заметили и другие нестыковки.

    Вот такие, вот, дела…

  9. Станислав

    Андрей! Спасибо за урок Видео помогает закрепить его.

  10. Grigorii

    спасибо Андрей а вот 10 урок был или я его упустил по причине неисправности ПК. спасибо.

  11. Роза

    Текстовую версию я обычно переписываю. Это помогает лучше разобраться. Видео многое разясняет на практике.
    Спасибо всё понятно.

  12. Любовь

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree