Всем привет!
С Вами снова Андрей.
Очередной выпуск рассылки будет посвящен элементу span и элементу div в HTML.
Сегодня Вам будет предложено 2 версии урока. Одна в текстовом виде – ее Вы видите перед своими глазами, а второе ВИДЕО – ее Вам нужно будет скачать.
Ссылка на видео версию урока:
Практический курс по верстке адаптивного лендинга с нуля!
Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней
Узнать подробнееНа наш взгляд видео версия Вам будет более понятна.
Так, про дополнительные элементы html…
Допустим вам нужно выделить какое-нибудь отдельное слово в тексте (предположим другим цветом и фоном), или чтобы картинка и текст, относящийся к ней, были сверху и справа в ячейке таблицы, а основное содержимое страницы, допустим в низу и ближе к левому краю. По поводу первого примера скажу, что можно это сделать тегом <font> с набором нужных параметров, но он относится к запрещенным тегам (новые браузеры его могут не поддерживать), да и свойства замены фона у него нет.
Для подобных случаев и предусмотрены два специфических тега, которые по сути ничего не делают сами по себе. Но при применении нужных стилей к ним, можно добиться чего угодно. Можно вообще используя только два этих тега и применяя к ним стили, сделать всю страницу сайта.
И так, это теги <div></div> и <span></span>.
Какая между ними разница, если используются они для одного и того же?
Элемент div — это блочный тег, и в нем могут быть любые нам известные теги (списки, картинки, таблицы…).
Элемент span — это строчный тег, и он применим исключительно к тексту (выделить фрагмент текста другим цветом).
Стили, которые применимы к данным тегам – это все нами изученные стили. Ограничений на применение каких-либо стилей нет.
Давайте рассмотрим стили, которые наиболее типичны для данных тегов. Они же применимы ко всем остальным тегам, и используются так же, просто чаще их используют с этими тегами (особенно к <div></div>) .
Первое с чего хотелось бы начать это с позиционирования элементов.
Это свойство:
position — устанавливает или определяет позицию элемента.
Значения:
static — по умолчанию. Позиция объекта определяется текущей разметкой HTML по стандартным правилам.
absolute — позиция объекта определяется относительно позиции родительского объекта или относительно объекта body. relative — Позиция объекта определяется смещением от позиции, в которой он появился по умолчанию.
left/top — устанавливает или определяет позицию элемента относительно левого/верхнего края.
Значения:
x – число в процентах или пикселях.
auto — значение по умолчанию.
Рассмотрим пример:
| 1 2 | <div style="position: relative; top:350px; left:200px; width:300px;"> Любое содержимое блока!!!</div> |
Данный пример показывает, что наш блок с шириной в 300px сдвинется вниз на 350px и влево на 200px, относительно того места, в котором он появится по умолчанию.
Следующее важное свойство:
margin – величина отступа от нашего блока до соседних объектов с четырех сторон.
Значения:
Практический курс по верстке адаптивного лендинга с нуля!
Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней
Узнать подробнееmargin-top — задает величину верхнего отступа объекта
margin-left — задает величину левого отступа объекта
margin-right — задает величину правого отступа объекта
margin-bottom — задает величину нижнего отступа объекта
Пример:
| 1 2 | <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 - задает величину пространства, вставляемого между объектом его верхней границей.
Пример:
| 1 2 | <div style="padding-bottom:30px; padding-left:30px; padding-right:30px; padding-top:30px;"> Любое содержимое блока!!!</div> |
Мы создали блок с отступами по 30px от содержимого до всех его сторон.
И рассмотрим пример с использованием тэга <span></span>:
Допустим, у нас есть конструкция вида:
Любой текст !
Мы хотим сделать слово текст на желтом фоне синими буквами. Для этого заключим его в тег <span></span> и применим соответствующие стили.
| 1 2 | Любой <span style="background-color:#FFFF66; color:#000066;">текст</span>! <p></code></p> |
Любой текст!
Еще раз повторюсь, что все рассмотренные стили применимы не только к рассмотренным двум элементам div и span, но и ко всем нам известным HTML-тегам!
На этом мы сегодня закончим, и напоминаю Вам, что Вы можете, для лучшей проработки, скачать видео-версию урока:
Любой <span style="background-color:#FFFF66; color:#000066;">текст</span>!
<p></code></p>
С Вами был Бернацкий Андрей!
Практический курс по верстке адаптивного лендинга с нуля!
Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней
Узнать подробнее
Практика HTML5 и CSS3 с нуля до результата!
Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3
Получить
Учебников на подобные темы встречал немало. Положительным моментом у Андрея является умение преподнести материал.
Андрей, спасибо за урок. Вопрос, а как в div сделать выравнивание по вертикали. Предположим у нас два дива слева и справа на странице, в левом диве картинка, в правом текст. Необходимо сделать выравнивание по вертикали по центру картинки по отношению к правому диву с текстом.
Спасибо очень помогли, надоело пользоваться таблицами.
єсть така штука в CSS, как float, каторие виравниваеть обєкт и имеет значение right или left
Спасибо большое Андрей! Спасибо за ценную информацию о расположении картинок в тексте! Все доступно и понятно! СПАСИБО!!! Прекрасный урок!
Спасибо, Андрей! С видео намного лучше все становится понятно, но и текстовой материал очень помогает. Думаю вы выбрали правильный метод донести информацию, это радует.
Ура! Двойная подача — самая эффективная!
Спасибо,за урок! Действительно видео урок дополняет текстовый и на оборот. Что было не понятно в текстовом уроке — разъяснилось в видео уроке. Урок прошла самым тщательным образом, не спешила. Надеюсь не забуду!
Я считаю, что хтмл можно выучить за короткий срок, а потом уже и за ccs браться и php)
И всё же я за хороший русский (язык). У Вас хороший тембр. Вам удаются экспромты. Но я бы переписл текст: Вы, вероятно, очень спешили — и этот экспромт оказался не самым лучшим. Меня раздражают (не только у Вас) бесконечные «да?» и «э-э-э» и, когда не находится что сказать звучит: «вот таким образом». Надеюсь, Вы сами заметили и другие нестыковки.
Вот такие, вот, дела…
Примем к сведению. Спасибо за критику.
Андрей! Спасибо за урок Видео помогает закрепить его.
спасибо Андрей а вот 10 урок был или я его упустил по причине неисправности ПК. спасибо.
Текстовую версию я обычно переписываю. Это помогает лучше разобраться. Видео многое разясняет на практике.
Спасибо всё понятно.
Андрей спасибо за отличный урок, да видео во многом помогает, но и текст тоже нужен разбираться.