Блочные элементы

Элементы каркаса

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

В рабочей папке для экспериментов создайте папку task_04, а в ней из копии шаблона создайте файл foolsize.html, и назовите документ в нём Размеры блочных элементов. В документе создадайте сразу два раздела: элементы SECTION и внешнюю панель ASIDE. Между ними создайте элемент горизонтальная линия HR, чтобы не путать их друг с другом. В горизонтальную линию ничего нельзя поместить, поэтому закрывающий тег элеенту HR не нужен.

Усложним структуру внешней панели ASIDE, добавим в неё элемент для текстa, но не P. К семантическим элементам браузер самостоятельно применяет некоторые оформительские отступы, которые будут мешать наблюдению за происходящим на странице. Поэтому во внешней панели дочерним элементом вместо P будет несемантический элемент DIV, в который позже и поместим текст.

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

Теперь настроим внешний вид страницы. Для элементов HTML создадим встроенные в страницу стилевые правила. Если в вашем шаблоне элемент STYLE до сих пор отсутствует, то добавьте его в HEAD последним. В нём запишите или измените свойства со значениями: фон тёмно-зелёный, размер шрифта, равный ширине буквы «М» и цвет шрифта чёрный.

····STYLE
bodybackground-colordarkgreenfont-size1emcolorblack
····/STYLE

Взгляните на страницу, что получилось. На экране видно только горизонтальную черту и ничего больше. И это правильно.

Браузер пустые элементы без контента выводит на экран с нулевой высотой, если их высота не задана в правилах CSS.

Зайдите на рефераты Яндекса. Эту ссылку стоит положить в закладки. Пока вы учитесь, придётся часто создавать текстовый контент для разных элементов. Выберите абзац покрупнее и его текст поместите в первый раздел SECTION без элемента P и во втором разделе ASIDE в элемент DIV.

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

Групповой селектор P, E. Правило применяется для всех P и для всех E в любом месте кода.  ? .

Групповой селектор — одно правило сразу для нескольких элементов. Запишем в него сведения о рамке.

section, asidebordersolid 1px whitesmoke

Элемент BODY — вся ширина рабочей области окна. Но у него имеются поля по 8px со всех четырёх сторон. Оба наших раздела вытянулись на всю ширину рабочей области окна браузера без учёта боковых полей (2 × 8px). Мы ещё раз убедились что блочные элементы занимают 100% ширины выделнной для них родительским элементом. И её можно даже вычислить.

  • Ширина (по-английски width) блочных элементов SECTION и ASIDE равна ширине BODY без учёта его отступов: width = 100% − 16px. Конечно же от процентов пикселы отнять невозможно, но стала понятна зависимость ширины элемента от ширины его родителя.
  • Высота (по-английски height) элемента SECTION формируется по контенту. В данном случае по количеству строк в тексте: много их — высота большая, мало — небольшая. Высоту ASIDE задаёт дочерний элемент DIV, который тоже получает высоту от своего контента.

Блочный элемент по умолчанию занимает 100% всей ширины, выделенной для него родительским элементом. А его высота зависит от размера контента.

Изменим ширину наших разделов до 640px. Вы уже научились добавлять свойства в правила самостоятельно: width640px.

Посмотрите, на тёмно-зелёном фоне чёрный текст почти не виден. Нужно тексту назначить белый фон. Но текст не элемент HTML и правило нужно создавать для его родительского элемента. У первого это SECTION, а у второго — DIV, которому нужно уточнение, что он находится в ASIDE. Чтобы не писать два правила снова воспользуемся групповым селектором. Но теперь будем объединять другие элементы.

section, aside divbackground-colorwhite

Глядя на второй блок с текстом DIV, расположенным внутри ASIDE убеждаемся, что ширина дочернего блочного элемента по умолчанию равна 100% ширины родительского элемента. Или по-другому: DIV зажат в рамки ширины родителя. При этом его ширина и ширина SECTION равны 640px.

Теперь наши блоки почти готовы к экспериментам. Почему два блока? Дело в то, что у первого SECTION контент лежит непосредственно в нём. Его ширина ограничена лишь нашими желаниями. А второй блок с контентом DIV ограничен по ширине родительским элементом. Как поведут себя эти два блока? Узнать это, и будет наша задача.

Размеры блоков

Поля

Белый фон наших блоков представим как лист тетради, в котором мы пишем классную(!) работу. Контент занимает всю ширину и высоту блока. Однако, ни в тетрадях, ни в книгах не принято писать от края до края листа. Для письма всегда оставляют поля. Нам нужно поступить так же.

С каждой стороны наших прямоугольных блоков с текстом SECTION и DIV всего четыре поля (англ.: padding). Перечислим их имена по часовой стрелке: top — верхнее, right — правое, bottom — нижнее и left — левое. Попробуем увеличить размеры этих полей.

Свойства полей можете дописывать в уже имеющееся правило с белым фоном. Но лучше для тренировки нового свойства создать ещё одно правило с тем же селектором. Все правила с одинаковыми селекторами отвечают за внешний вид одних и тех же элементов. Если перечисленные в них свойства совпадут, то выбрано будет последнее, а если нет — то новые добавятся.

section, aside divразмеры полейpadding-top40pxверхнееpadding-right40pxправоеpadding-bottom40pxнижнееpadding-left40pxлевое

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

В примере кода текст зелёного цвета взят в непривычные скобки. /* */. Всё что написано в этих скобках, называется комментарии. Браузер игнорирует (пропускает) эти фрагменты кода. Разработчик в комментариях пишет напоминания и подсказки для себя, чтобы проще ориентироваться в коде. В больших документах размер кода CSS может доходить до нескольких сотен и даже свыше тысячи строк.

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

Поведение у блоков оказалось совершенно различным. Размеры элементов изменились. Белая фоновая заливка показала, что добавленные поля входят в состав элементов, часто их называют внутренними отступами. Тем самым у блочных элементов определились ещё два размера. Всего их стало четыре.

  1. Ширина по ширине родителя или по заданному значению, и высота — по размеру контента.
  2. Полная ширина и полная высота вместе с собственными шириной и высотой и добавленными полями.

Первый элемент, не ограничен родителем. От его правого края до границы BODY много свободного места. За счёт добавленных полей он стал шире. Его полная ширина стала равна сумме собственной ширины и обоих боковых полей.
Вычисляется это так: 40px + 640px + 40px = 720px,
по формуле: padding-left + width + padding-right.

Второй элемент зажат в ширину родителя 640px, поэтому увеличиваться ему некуда, но поля добавлять нужно. Для добавления полей уменьшается собственная ширина блока.
Вычисляется это так: width = 640px − (40px + 40px) = 560px,
по формуле: 100% − (padding-left + padding-right).

Теперь у второго элемента полная ширина стала 640px, а собственная — уменьшилась на ширину полей.

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

Поля влияют на полный размер элемента.

Не забывайте это, когда будете проектировать макет своей страницы. Ширина блоков, как правило, всегда ограничена, потому, что прокручивать страницу по вертикали удобнее, чем по горизонтали.

Размеры полей у блоков не всегда равны между собой. Если вы заранее знаете, какими они должны быть, для удобства записи в коде CSS можно использовать только одно свойство padding, а не четыре. Добавьте пример в правило про поля. В комментариях описано, к каким полям относится каждое число пикселей в значении свойства.

размеры полейpadding25px 35px 15px 5pxдля каждого поля по часовой стрелкеpadding45px 35px 15pxверхнее поле, левое равно правому и нижнее полеpadding5px 80pxверхнее поле равно нижнему, а левое — правомуpadding40pxвсе четыре поля равны

Применение свойств в правиле потренируйте самостоятельно. Не забывайте, что за счёт каскадности элемент на странице отобразится в состоянии, описанном в последнем свойстве. Поэтому добавляйте их по очереди, назначайте им и большие и малые значения и наблюдайте за изменениями на странице.

Границы

Поля на нашем электронном «тетрадном» листе установлены. Но тетрадный лист не бесконечен. Он ограничен своими краями. Наши электронные листы с текстом тоже имеют края. Их хорошо видно на тёмном фоне. А если фон белый, то их невозможно будет обнаружить.

В языке CSS имеется свойство, которое отвечает за границы элемента. Оно называется border. Перевод, думаю, не обязателен.

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

Свойства границ можно дописывать в уже имеющееся правило для полей. Но для тренировки стоит создать ещё одно с тем же селектором.

section, aside divвсе свойства всех четырёх границborderdashed 40px navyтип, ширина и цвет

Это комплексное свойство. Оно одновременно управляет разными свойствами элемента — три в одном, применённые сразу ко всем четырём границам.

  1. Первое значение свойства, тип линий: border-styledashed
  2. Второе значение — ширина линий: border-width40px.
  3. Третье — цвет линий: border-colornavy.

Проведём небольшой эксперимент. Замените значение в свойстве цвет на transparent border-colortransparent Эффект интересный — границы пропали. Но они никуда не делись. Место, занимаемое ими, не освободилось. Они есть, но мы их не видим, точнее сквозь них видим цвет увеличенного фона.

Первый элемент стал ещё шире. Его полная ширина теперь равна сумме собственной ширины обоих боковых полей и обоих границ.
Вычисляется это так: 40px + 40px + 640px + 40px + 40px = 800px,
по формуле: border-left-weight + padding-left + width + padding-right + border-right-width.

Второй элемент зажат в ширину родителя 640px и увеличиваться ему некуда. Для добавления границ снова уменьшается собственная ширина блока.
Вычисляется это так: width = 640px − (40px + 40px + 40px + 40px) = 480px,
по формуле: 640px − (border-left-width + padding-left + padding-right + border-right-width).

Границы тоже влияют на полный размер элемента.

Почему предыдущее свойство комплексное? Взгляните на пример обычных некомплексных свойств. Каждое из них управляет только одним свойством какой-либо одной границы. В данном случае выбрана левая.

отдельные свойства только левой границыborder-bottom-styledottedтип линииborder-bottom-weight15pxширина линииborder-bottom-colormagentaцвет линии

Можно поэкспериментировать с отдельными свойствами для каждой стороны, а можно и сразу для всех сторон.

одинаковое значение свойств у всех границborder-colorpurpleцвет границborder-width40pxтолщина границborder-stylesolidстиль границ (сплошная двойная линия)

Любое из трёх перечисленных свойств может управлять отдельными границами. Рассмотрим это на примере свойства цвет.

разный цвет у разных границborder-colororangered orange yellow limeу всех границ цвет разныйborder-colorred lightgreen blueверхняя граница, пара боковых и нижняяborder-colororange orangeredодинаковый цвет у противоположных границborder-colorsilverу всех четырёх цвет одинаковый

Наряду с этими старыми свойствами границ в CSS 3 появились и новые. Например, border-image. Границам можно назначать градиентную заливку и даже изображения.

граница из рисунка-webkit-border-imageurl(http://rulik.unionlik.ru/room/img/step.png) 48 roundborder-imageurl(http://rulik.unionlik.ru/room/img/step.png) 48 round

Отступы

Можно предположить, что тёмно-зелёное «сукно» — письменный стол и у его угла лежит наш лист. Чтобы он не слетел со стола его нужно отодвинуть от края. То же самое можно делать и с блочными элементами на странице. Свойство, управляющее положением элемента относительно других и своего родительского, называется margin.

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

section, aside divразмеры отсуповmargin-top25pxверхнееmargin-right25pxправоеmargin-bottom25pxнижнееmargin-left25pxлевое

Обратите внимание на то, что блок отодвинулся от верхней и левой границ родителя и снизу от себя оттолкнул элемент HR. Справа он тоже оттолкнул. Но это не видно потому, что там ничего нет.

Ещё один важный момент. Фоновый цвет не расширился на величину отступов. Они не входят в размер элемента.

Отступы не входят в состав полных размеров элемента. Но они влияют на размер места занимаемого элементом на странице.

Но это касается только первого верхнего блока. С блоком, зажатым в родительском элементе, происходит то же, что раньше. Потому что место, занимаемое им, ограничено. Добавление отступов от границ родителя выполняется, за счёт уменьшения собственной ширины блока. Проверьте, увеличивая размер отступов, в частности слева и справа.

У свойства margin есть ещё одна замечательная возможность. Eсли его значения слева и справа установить вычисляемым автоматически auto, то блок установится строго по центру родительского.

центрированиеmargin-leftautoотступ слеваmargin-rightautoотступ справа
центрирование, если верхний и нижний отступы известныmargin15px auto 25px autoотступы: сверху, справа, снизу, слева

Но это опять только про верхний незажатый блок. Его родитель, элемент BODY, а ширина 640px. Она заведомо меньше родительского и имеется свободное место для отступов.

Нижний блок ведёт себя по-другому. Он не имеет установленного размера. Поэтому его ширина — 100% родительской ширины. И когда отступы слева и справа стали вычислятся автоматически, браузер назначил им нулевые значения растягивая блок до 100%.

Попробуйте самостоятельно назначить собственную ширину блоку, чтобы его полная ширина оказалась меньше на 50px чем 640px.

Объектная модель CSS

CSS object model

Со структурой объектной модели документа DOM вы уже хорошо знакомы. Именно её вы повторяете при записи кода HTML в документе. Давайте вспомним, как браузер этот код HTML преобразует в страницу на экране. Этот процесс называется рендеринг.

  1. Браузер, читая в оперативной памяти открывающий и закрывающий теги вместе с содержимым, преобразует их в объект. Этот объект называют элемент языка HTML. Он же элемент системы DOM, описываемый тегами в коде HTML.
  2. Устанавливает элементу значения всех свойств CSS определённые по умолчанию.
  3. Встраивает элемент в структуру DOM. Это определяет, какие элементы будут влиять на его свойства и на свойства каких, будет влиять он.
  4. Выводит его на экран с определённым внешним видом в конкретном месте страницы.

Каждый элемент, добавленный в DOM, обладает сразу всеми свойствами CSS. Уже на втором шаге браузер присваивает им значения по умолчанию. Например, когда описанные в коде элементы SECTION, ASIDE с DIV на экране не отобразились, то весь набор их свойств уже был браузером задан по умолчанию.

  • Имелся фон с назначенной прозрачностью: background-colortransparent.
  • Поля и отступы имели нулевое значение: padding0 и margin0;
  • Границы всех сторон тоже имели основное значение тип: border-stylenone, а когда тип линии не назначен, то уже неважно какой цвет и ширина у отсутствующей границы.
  • С ними были заданы значения и многих других свойств, с которыми вам ещё придётся познакомиться. А самое главное, у всех элементов без контента и у наших в том числе, отсуствует высота height0.

Всем свойствам, не описанным разработчиком в правилах CSS, браузер всегда задаёт свои значения по умолчанию.

Во второй пункт рендеринга нужно внести изменения: «Устанавливает элементу значения всех свойств CSS описанных в правилах CSS или назначенных по умолчанию». Таким образом, объектная модель CSS тесно связана объектной моделью документа.

Вот как выглядит общая модель DOM + CSSOM.

DOM │ CSSOM ─────────────────┼───────────────────────────────────────────────── └► HTML │ └► BODY │ свойства CSS: font-size, color, background-color │ │ остальные по умолчанию ├► SECTION │ свойства CSS: border, width, padding, margin │ │ остальные по умолчанию └► ASIDE │ свойства CSS: border, width │ │ остальные по умолчанию └► DIV │ свойства CSS: padding, border, margin │ остальные по умолчанию

В структуре объектной модели DOM к описанию взаимного расположения элементов добавляется полное описание свойств CSS каждого. Именно эта древовидная структура DOM + CSSOM определяет, что покажет браузер и как будет выглядеть сгенерированная страница.

Инструменты разработчика

Заглянем «на кухню» к браузеру. В теме «DOM» мы уже знакомились с инструментами веб-разработчика браузера Firefox Develorer Edition. Теперь рассмотрим их подробнее на примере выполненной практической работы.

Включить инструменты не сложно. Можно воспользоваться аккордами Ctrl + Shift + I или клавишей F12 , щелчком по кнопке «Открыть инструменты…» или в меню «Веб-разработка»

Снимок 1.

Снимок 2.

Снимок 3.

Снимок 4.

Снимок 5.

Снимок 6.

Снимок 7.

Снимок 8.

Не бойтесь экспериментировать с инструментами. Помните, чтобы сломать программу нужно очень много знать. Она может просто отказаться работать с вами и повиснет. Тогда её можно закрыть (выгрузить из оперативной памяти) и снова запустить.

Сломать веб-страницу в браузере ещё сложнее. Чтобы вы с ней не натворили — обновите её. Нажмите клавишу F5 и можете эксперименты начинать с начала.