×
Вы действительно хотите открыть доступ к тестированию по курсу HTML & CSS на 40 дней?
ВИДЕОУРОК №5. Теги div и span
Здравствуйте, уважаемые слушатели.
Мы с вами продолжаем курс лекций по HTML. Сегодня поговорим о тегах div span. Посмотрим на тег div. Давайте посмотрим, как можно сделать такую вот разметку страницы. Вы помните наш предыдущий урок, там мы изучали таблицы, и вы наверно думаете, что такую разметку можно сделать как раз с их помощью. Вот здесь можно создать и объединить их и здесь тоже. Давайте подумаем, какие могут быть недостатки в таком способе создания данной страницы.
Я создаю первую строку, за ней вторую. Создаю в них ячейки. Что, если я захочу создать вот здесь ячейку шире? Верхняя ячейка автоматически расширится до нижней. Если я захочу создать вложенную ячейку. Должен быть какой-то механизм, позволяющий делать такие вещи проще и быстрее. Таким тегом и является тег div.
С его помощью мы легко можем создавать такие страницы без использования таблиц. Тег <div> предназначен для создания слоя.
Давайте посмотрим, как он используется. Обратите внимание, мы указывается открывающийся тег и закрывающийся, а между ними содержимое контейнера.
Открываем первый пример начинаем наше знакомство.
Вот мы видим атрибут <style> , задающий какой-то стиль, background задает фон и т.д. Давайте запустим пример и посмотрим. Здесь мы видим желтую полосу – это и есть наш контейнер. Давайте еще посмотрим примеры.
Здесь мы видим три контейнера. Давайте запустим. Они выводятся в порядке очередности.
Поговорим более детально о данном теге.
Тег <div> более гибкий тега <table>.
Размеры блока задают с помощью свойств <width> и <height>.
Точка с запятой обязательно.
Давайте посмотрим на примерах.
Вот у нас тег <div>. Запустим пример. Вот вывелся такой квадрат. Думаю, понятно, что ширину и высоту мы задали и получили вот такой пример.
Давайте посмотрим дальше. Вот у нас три контейнера. Вот у нас был похожий пример. Только тут мы не задавали ширину и высоту.
Давайте поговорим о вложенности, что мы можем размещать в теге <div>.
Давайте поговорим о позиционировании слоев.
Эти слои расположены друг за другом. При этом мы задали им какие-то размеры: ширину и высоту. Вот здесь мы еще видим отступ. Размер слоя по вертикали определяется содержимым.
Оговорим об обтекании и о свойстве float. Элементы автоматически располагаются по вертикали. Если же нам нужно разместить их по горизонтали, то следует использовать свойство float.
Мы можем наш элемент разместить как с правого края страницы, так и с левого. Свойство может принимать 3 значения.
Давайте посмотрим, как это все работает.
Сразу же запустим данный пример. Вот у нас тег. Этот текст находится в контейнере. В теле <body> у нас есть тег <div>, в котором свойству float присвоено значение right. В данном случае обтекания у нас не видно, но выравнивание мы можем наблюдать. Давайте попробуем изменить. Напишем left. Вот что у нас получится. Обратите внимание. Высота текста указывает, какая должна быть высота нашего элемента. Ширина нашего элемента также может задаваться.
Видите, когда не указываем свойство float или задаем ему значение NULL, результат один и тот же.
Посмотрим дальше. На 9, 10, 11 строках мы указываем тег div, в свойстве указано, что элемент будет находиться справа страницы. Заметим, что наш элемент будет обтекаем. Как только выполнится 10 строка, новый тег будет изображен вот так, потому что желтый обтекаем с левой стороны.
Далее зеленый также обтекаем с левой стороны.
Запустим и посмотрим. Вот наши элементы.
Давайте посмотрим еще пример. Последний на свойство float. Отличие с предыдущим примером – это выравнивание по левой стороне. Давайте предположим, как они будут расположены в нашем браузере. Наши элементы теперь будут обтекаемы справа.
Давайте с вами посмотрим, правильно ли мы предположили.
Посмотрим теперь на свойство clear. Оно отменяет обтекание или запрещает обтекание элемента с указанной стороны.
Посмотрим на наш рисунок. Допустим, мы хотим отменить обтекание вот этого нижнего элемента.
Для этого нам нужно использовать свойство clear. Наиболее используемым его значением является both, которое убирает обтекание с обеих сторон нашего слоя.
Давайте откроем пример. Вот у нас указано три слоя. Вот указано, что этот слой будет обтекаем по правой стороне и будет находиться с у самой крайней границы страницы.
Мы хотим добиться отмены обтекания с двух сторон. Давайте посмотрим, как это будет выглядеть. Обтекание по правой стороне разрешено, поэтому зеленый сразу за желтым и расположился. На третьей строке отменено обтекание. Давайте уберем свойство clear. Вот что у нас получается.
Поговорим теперь о вложенности слоев. С помощью таблиц – это довольно трудоемко.
Вот мы видим три вложенных слоя. Синий, желтый и т.д. давайте посмотрим, как это все реализовать.
Очевидно мы можем нарисовать такой вот один слой, далее следующий, а далее внутри них разместить еще слои.
Для этого нужно нарисовать два базовых слоя и разместить в них еще по два слоя.
Мы указываем ширину, высоту, фон. Вот у нас еще один тег. Все то же самое: ширина, высота, фон. Посмотрим, как это сработает. Видите, высота каждой по 200 пикселей, в сумме выходит 400, и ширина также 400 пикселей. Теперь в каждом из этих элементов разместим квадраты.
Давайте разбираться, как это можно сделать.
Розкоментируем вот эту строку и эту. Что у нас получится. В нашем теге div мы указали еще два таких же тега div. И здесь также. Давайте посмотрим, что получилось.
Вот этот тег отработал, вот этот и т.д.
Изначально мы вывели некую заготовку и в ней разместили еще два тега и вот такое получили.
Свойство padding. Желтым у нас показано содержимое элемента, синим – сам наш элемент. Давайте смотреть, как это реализуется. Запустим и посмотрим. Вот у нас появился такой квадрат. Текст в нем размещен на расстоянии 30 пикселей сверху, слева и справа. Вниз больше потому, что мы так задали размер нашего слоя.
Давайте нажмем F12. У нас появилось такое вот дополнительное меню. Что мы можем увидеть? Знакомую нам разметку. Давайте выберем ее и справа у нас появляется такая вот подсказка, которая укажет мне, где находится мой слой. Зеленым у меня подсвечен отступ – padding. Будем еще изучать свойство margin. Оно отвечает за отступы от границ элемента до границ соседних либо родительских элементов.
Вот представьте себе, что вот это наш слой, стрелками обозначены отступы. Это как раз и есть отступы до соседних или родительских элементов.
Здесь у нас дано два слоя. Первый 200 на 200 пикселей, margin – 0 пикселей. В следующем - margin – 0 пикселей. Запустим и посмотрим. Вот здесь у нас 0 пикселей. Вот это расстояние 30 пикселей, вот это – тоже 30 пикселей.
Вот у нас 200 на 200, padding – 0, margin – 0.
Здесь margin – 30 пикселей.
Познакомимся немного детальней с темой отступов.
Можете заметить, что у нас здесь есть новый параметр auto. Он говорит о том, что отступы следует сделать равными с обеих сторон.
Посмотрим на примере, как это работает.
Если задаем 4 параметра, то порядок будет по часовой стрелке.
Посмотрим на примерах.
На 13 строке у нас указан слой синего цвета. В нем вложен слой, который будет желтым. Ему передано два параметра - 200 пикселей и auto. Вот слой, который нас интересует. Вот у нас 200 пикселей. Нажмем F12 и посмотрим, что нас такое auto. Я выбрал желтый цвет. Тут указан margin 200 пикселей, и с помощью параметра auto указано расстояние 100 пикселей.
Вот здесь у нас осталось по 100 пикселей.
Давайте смотреть следующий пример.
Давайте посмотрим, как это будет выглядеть в браузере.
Здесь у нас передано 4 параметра. По часовой стрелке у нас указано 10, 20, 30 пикселей.
Также можно создать отступы для конкретной стороны с помощью свойств padding-top, padding-bottom и т.д.
Если укажите padding-top, то будет отступ только сверху и т.д.
Вот наш слой. Padding – это отступ от нашего содержимого до границ слоя. В данном случае кругом 40.
Давайте изменим пример и запустим. Сверху, слева и справа у меня стали нули, а снизу у меня 40 пикселей. Попробуем еще раз изменить. Вот 40 пикселей справа.
Рассмотрим теперь следующий тег <span> </span>.
Он применяется для форматирования текста.
В этом теге мы указываем стиль, цвет. Текст внутри этого элемента приобретает все свойства, определенные в открывающемся теге.
Следует отметить, что вот эту рекомендацию относительно аккуратности использования нужно учитывать.
