«Резиновый» сайт. Работа со слоями Урок IV
Создание слоя, тег <div>
Тег <div> … </div> <div> … </div> - тег предназначенный для создания слоя. Это контейнер в который можно поместить практически любое содержимое, и вирируя размерами и позиционированием которого можно реализовать достаточно гибкую верстку. <div> … некое содержимое контейнера … </div> В данное время является основным инструментом для верстки страниц, заменив уже устаревшие таблицы.
Слой • <body> • <div style=" background-color:Yellow">Этот текст находится в контейнере</div> • <div style=" background-color:Red">Этот текст находится в контейнере</div> • <div style=" background-color:Green">Этот текст находится в контейнере</div> • </body>
Основные особенности верстки слоями Преимущества верстки дивами Верстка с помощью тега <div> имеет определенные преимущества над версткой таблицами. • 1.Нет зависимости от размерностей соседних элементов. • 2.Не зависимости соседних элементов от размерности текущего. • 3.Можно реализовать необходимый уровень вложенности, что в таблицах не допускается. • 4.Верстка реализованная слоями грузится быстрее. 5.Доступны все богатства CSS. • 6.Возможность работать с DOM деревом.
Задание стилей в слоях <title>Тег style</title> <style type="text/css"> p { font-family:Segoe UI; font-size:18pt; color:Green; } </style> </head> <body> <p>Простой параграф</p> <p>Еще один простой параграф</p> <div> <p>Также Еще один простой параграф который находится в блочном элементе</p> </div>
Задание размеров слоя <div style=" background-color:Yellow; width:200px; height:200px;">Этот текст находится в контейнере</div>
Содержимое слоя В качестве содержимого слоя, может выступать любой элемент: 1.Таблица 2.Список 3.Другой слой 4.Определенная конструкция <JavaScript> 5.Любое текстовое содержимое 6.Изображения
Размещение слоев По умолчанию все слои позиционируются друг за другом, каждый следующий начинается с новой строки. При этом все элементы пытаются разместится максимально ближе к верхнему левому углу. Отступов и рамок между ними по умолчанию нету. Размер по вертикали определяется содержимым, а по горизонтали максимально доступным значением согласно размерам элемента-родителя.
Свойство «обтекание» Свойство float указывает что элемент будет обтекаем, и следывательно размещает его максимально прижатым в указаную строну. Может принимать 3 значения: left - элемеент прибьется влево и будет обтекаем справа right - элемеент прибьется вправо и будет обтекаем слева none - для избежания какого либо обтекания, но не всегда срабатывает --> <html> <head> <title>Свойство Float</title> </head> <body> <div style="background-color: LightBlue; float: left"> Container </div> </html>
Отступи внутри слоя Padding <body> <div style=" width:200px; height:200px; backgroundcolor:Yellow; padding:30px;"> содержимое дива которое будет отступать от его границ на 30px </div>
Отступи внутри слоя Margin Свойство margin отвечает за отступы от границ элемента до границ соседних либо родительских элементов. --> <html> <head> <title>Свойство margin</title> </head> <body style=" background-color:Blue"> <div style=" width:200px; height:200px; background-color:Yellow; margin:30px"> содержимое дива которое будет отступать от его границ на 30px </div> </body> </html>
Сложные отступи Margin Свойство margin может принимать от одного до 4 параметров: 1 - этот отступ будет установлен для всех сторон одинаково 2 - первый будет устанавливать отступы по вертикали(сверху и с низу), второй по горизонтали(слева справа) 3 - первый устанавливает отступ сверху, второй снизу , третий слева и справа 4 - первый устанавливает отступ сверху, второй - справа, третий - снизу, четвертый - слева --> <div style=" background-color:Blue; width:400px; height:400px;"> <div style=" width:200px; height:200px; background-color:Yellow; margin:0px auto"> содержимое дива </div> </div> <div style=" background-color:Blue; width:400px; height:400px;"> <div style=" width:200px; height:200px; background-color:Yellow; margin:10px 20px 30px"> содержимое дива </div> </div> <div style=" background-color:Blue; width:400px; height:400px;"> <div style=" width:200px; height:200px; background-color:Yellow; margin:10px 20px 30px 40px"> содержимое дива </div> </div>
Пример отступов
Задание отступов для отдельной стороны Также можно задать отступы для конкретной стороны, с помощью соответствующих свойств: padding-top padding-bottom padding-left padding-right --> <html> <head> <title>Тег div</title> </head> <body> <div style=" background-color:Green; padding-top:10px; padding-bottom:20px; padding-left:30px; padding-right:40px; float:left"> Содержимое дива </div> </body> </html>
Свойство float Для того чтобы разместить элементы по горизонтали используется свойство float. Свойство float указывает что элемент будет обтекаем, и следовательно размещает его максимально прижатым в указанную строну. Может принимать 3 значения: 1. left - элемент прибьется влево и будет обтекаем справа 2. right - элемент прибьется вправо и будет обтекаем слева 3. none - для избегания какого либо обтекания, но не всегда срабатывает
Float-right <!-Если разместить все элементы подряд и задать им свойство float, то они выстроятся в одну линию. --> <html> <head> <title>Свойство Float</title> </head> <body> <div style=" background-color:Yellow; width:200px; height:200px; float: right">Этот текст находится в контейнере</div> <div style=" background-color:Green; width:200px; height:200px; float: right">Этот текст находится в контейнере</div> <div style=" background-color:Red; width:200px; height:200px; float: right">Этот текст находится в контейнере</div> </body> </html>
Right
Left <html> <head> <title>Свойство Float</title> </head> <body> <div style=" background-color:Yellow; width:200px; height:200px; float: left">Этот текст находится в контейнере</div> <div style=" background-color:Green; width:200px; height:200px; float: left">Этот текст находится в контейнере</div> <div style=" background-color:Red; width:200px; height:200px; float: left">Этот текст находится в контейнере</div> </body> </html>
Clear • •
Свойство clear - некая панацея, если ваши элементы наследуют обтеканию которого быть не должно. Свойство может принимать несколько значений, но наиболее используемое both, убирает обтекания с обоих сторон.
Создание блоков в блоке Элемент <div> является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. --> <div> <div style="width:400px; height:200px;"> <div style="width:200px; height:200px; background-color:Green; float:left"></div> <div style="width:200px; height:200px; background-color:Yellow; float:left"></div> </div> <div style="width:400px; height:200px;"> <div style="width:200px; height:200px; background-color:Yellow; float:left"></div> <div style="width:200px; height:200px; background-color:Green; float:left"></div> </div> </div>
Блочная верстка
Задание цвета Задание цвета в разметке (будь то цвет фона, рамки или текста) можно тремя способами: 1. <body style=“background-color: Blue”> 2. Указав цвет через его RGB значения насыщенности: <body style=“background-color: rgb(123, 12, 0)”> 3. Указав шестнадцатеричный код цвета: