Блочные элементы могут размещаться непосредственно внутри элемента
. Они создают разрыв строки перед элементом и после него, образуя прямоугольную область, по ширине занимающую всю ширину веб-страницы или блока-родителя.
Блочные элементы могут содержать как строчные, так и блочные элементы, но не оба типа элементов сразу. При необходимости, строки текста, принадлежащие блочному контейнеру, могут быть обёрнуты анонимными контейнерами, которые будут вести себя внутри блока как элементы со значением display: block; , а строчные элементы обёрнуты элементом
Блочные элементы могут содержаться только в пределах блочных элементов.
Элемент
Относится к блочным элементам, но он не должен содержать внутри себя другой элемент
А также любой другой блочный элемент.
Анонимные боксы уровня блока
Как говорилось выше, блочные элементы могут содержать только блочные или только строчные элементы. В случае смешанного контента, когда блочный элемент одновременно содержит текстовое содержимое и другой блочный элемент, алгоритм визуального форматирования добавляет дополнительную обёртку для текстового содержимого — так называемый анонимный бокс. Поскольку такой контейнер не имеет названия, то к нему нельзя применить CSS-стили для оформления. Анонимные боксы наследуют свойства окружающего блока, а не наследуемые свойства принимают первоначальное значение.
Рис. 1. Анонимные боксы уровня блока
4. Строчные элементы и строчные контейнеры
Встроенные (строчные) элементы
генерируют внутристрочные контейнеры. Они не формируют новые блоки контента. Значения свойства display , такие как inline и inline-table делают элементы строчными.
, ,
, , ,
, ,
, ,
,
,
Рис. 2. Отличие воздействия CSS-свойств padding и margin на строчные и строчно-блочные элементы
Строчные элементы могут содержать только данные и другие строчные элементы. Исключение составляет элемент , который согласно спецификации HTML5 может оборачивать целые абзацы, списки, таблицы, заголовки и целые разделы при условии, что они не содержат другие интерактивные элементы — другие ссылки и кнопки.
Анонимные строчные боксы
Любой текст, содержащийся непосредственно внутри блочного элемента и не внутри строчного элемента, рассматривается как анонимный строчный элемент. Также как и анонимные блочные боксы они наследуют свойства родительского блока, а не наследуемые свойства принимают первоначальное значение.
Рис. 3. Анонимный строчный бокс
5. Строчно-блочные элементы
Существует еще одна группа элементов, которые браузер обрабатывает как строчно-блочные {display: inline-block;} . Такие элементы являются встроенным, но для них можно задавать поля, отступы, ширину и высоту.
,
,
,
,
,
,
,
,
,
,
6. Ширина содержимого: свойство width
Свойство width определяет ширину содержимого блока.
Это свойство не применяется к незамещаемым строчным элементам. Ширина содержимого встроенных блоков определяется шириной отображаемого содержимого внутри них. Встроенные блоки сливаются в линейные блоки. Ширина линейных блоков определяется шириной содержащего блока, но может быть уменьшена из-за наличия свойства float .
Отрицательные значения не допускаются.
Свойство не наследуется.
Синтаксис
Width: 100px;
width: 10em;
width: 50%;
width: auto;
width: inherit;
7. Минимальная и максимальная ширина: свойства min-width и max-width
Свойства min-width и max-width позволяют ограничивать ширину содержимого до определенного диапазона. Значения не могут быть отрицательными. Для min-width значение по умолчанию 0 , для max-width — none .
Свойства не наследуются.
Синтаксис
Min-width: 100px;
min-width: 10em;
min-width: 50%;
min-width: inherit;
max-width: 500px;
max-width: 20em;
max-width: 80%;
max-width: none;
max-width: inherit;
8. Высота содержимого: свойство height
Свойство height определяет высоту содержимого блока. Это свойство не применяется к незамещаемым строчным элементам. Значения длины не могут быть отрицательными.
Свойство не наследуется.
Синтаксис
Height: 100px;
height: 10em;
height: 50%;
height: auto;
width: inherit;
9. Минимальная и максимальная высота: свойства min-height и max-height
Иногда полезно ограничить высоту элементов определенным диапазоном. Свойства min-height и max-height предлагают эту функциональность.
Свойства не наследуются.
Синтаксис
Min-height: 100px;
min-height: 2em;
min-height: 50%;
min-height: inherit;
max-height: 500px;
max-height: 20em;
max-height: 80%;
max-height: none;
max-height: inherit;
10. Расчет высоты строки: свойства line-height и vertical-align
Как описано выше, пользовательские агенты передают блоки встроенного уровня в вертикальный стек линейных блоков. Высота линейного блока определяется следующим образом:
Высота каждого встроенного прямоугольника в линейном блоке вычисляется. Для замещаемых, inline-block и inline-table элементов это высота их области поля (margin box)
Блоки уровня строки выравниваются вертикально в соответствии со значением свойства vertical-align. Если они выровнены по верху или по низу, они должны быть выровнены так, чтобы минимизировать высоту линейного блока.
Высота линейного блока — это расстояние между самой верхней верхней и самой нижней частью блока. Пустые встроенные элементы генерируют пустые встроенные блоки, но эти блоки по-прежнему имеют поля, отступы, границ, высоту строки и, таким образом, влияют на эти вычисления так же, как элементы с содержимым.
В элементе уровня блока, содержимое которого состоит из элементов встроенного уровня, свойство line-height определяет минимальную высоту линейных блоков внутри элемента. Минимальная высота состоит из минимальной высоты над базовой линией и минимальной глубины под ней.
Для элементов уровня строки line-height указывает высоту, которая используется при расчете высоты линейного блока.
Отрицательные значения не допустимы.
Свойство наследуется.
Значения:
normal
Сообщает пользовательским агентам установить «разумное» значение на основе шрифта элемента. Значение по умолчанию. Когда элемент содержит текст, отображаемый более чем одним шрифтом, пользовательские агенты могут определить значение normal в соответствии с наибольшим размером шрифта.
длина
Значение задаётся в единицах длины, создавая фиксированное значение высоты строки. Если задать значение меньше единицы, смежные строки будут находить друг на друга.
число
Используемое значение свойства — это число, умноженное на размер шрифта элемента.
%
Вычисленное значение свойства — это процент, умноженный на вычисленный размер шрифта элемента.
inherit
Синтаксис
Line-height: normal;
line-height: 2em;
line-height: 1.5;
line-height: 50%;
line-height: inherit;
Рис. 4. Контейнер строки
Свойство vertical-align влияет на вертикальное позиционирование в линейном блоке элементов уровня строки: display: inline и display: table-cell . Значения этого свойства имеют другие значения в контексте таблиц.
Свойство не наследуется.
Значения:
baseline
Выравнивает базовую линию элемента по базовой линии его родителя, совмещая среднюю линию элемента со средней линией родительского элемента.
sub
Делает элемент подстрочным (аналогично с тегом ). Величина понижения элемента может меняться в зависимости от браузера пользователя.
super
Делает элемент надстрочным (аналогично с тегом ). При этом значения sup и super не меняют размер шрифта, по умолчанию текст надстрочного и подстрочного элемента имеет такой же размер, как и текст родительского элемента.
top
Верхний край элемента совмещается с верхним краем самого высокого элемента в линии.
text-top
Верхний край элемента совмещается с верхним краем шрифта родительского элемента.
middle
Средняя линия элемента (обычно изображения) совмещается с линией, проходящей через середину родительского элемента.
bottom
Нижний край элемента совмещается с нижним краем самого низкого элемента в линии.
text-bottom
Нижний край элемента совмещается с нижним краем шрифта родительского элемента.
%
Не позволяет устанавливать middle , вычисляется как часть line-height элемента, а не его родителя, т.е. если установить значение vertical-align , равное 50% для элемента с line-height равным 20рх, то базовая линия элемента поднимется на 10px .
длина
Устанавливает значение в единицах длины, перемещая элемент на заданное расстояние.
inherit
Наследует значение свойства от родительского элемента.
Синтаксис
Vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;
vertical-align: 6em;
vertical-align: 10px;
vertical-align: 25%;
vertical-align: inherit;
Рис. 5. Свойство vertical-align
11. Изменение блочной модели: свойство box-sizing
Свойство box-sizing переключает блочную модель с фиксированных размеров длины и ширины на content-box и border-box . Это влияет на интерпретацию всех свойств, определяющих размеры, включая flex-basis .
Свойство не наследуется.
box-sizing
Значения:
content-box
Это поведение ширины и высоты, как указано в CSS2.1. Заданные ширина и высота (и соответствующие min/max-свойства) применяются к ширине и высоте области содержимого элемента. Поля padding и рамка border элемента располагаются за пределами указанной ширины и высоты. Значение по умолчанию.
border-box
Любые padding или border , заданные для элемента, размечаются и отрисовываются внутри указанных значений ширины и высоты. Ширина и высота содержимого вычисляются путем вычитания ширины границ и полей соответствующих сторон из указанных свойств ширины и высоты. Значение auto свойств width и height не зависит от свойства box-sizing и всегда устанавливает размер блока с содержимым. Сумма padding и border не должна превышать заданные значения width и height , в противном случае размер области содержимого будет равен нулю.
initial
Устанавливает значение свойства в значение по умолчанию.
inherit
Наследует значение свойства от родительского элемента.
Некоторые html-элементы, например, , по умолчанию имеют box-sizing: border-box .
Синтаксис
Box-sizing: content-box;
box-sizing: border-box;
box-sizing: inherit;
box-sizing: initial;
Поскольку уж мы начали разбираться в коде своих блогов на Вордпресс — нам не обойти вопрос html форматирования. Конечно, это целая наука. Но мы постараемся разобраться с основами: понять, какие теги используются для форматирования текста — отдельных постов, страниц. Тогда нам удастся вносить в эту структуру осмысленные изменения.
Блочная верстка Вордпресс
Для начала обсудим общий принцип формирования html-кода для Вордпресс. Он носит название «блочная верстка». И, как нетрудно догадаться, это значит, что шаблон состоит из неких блоков. Мы уже видели это на примере шаблона страницы или одной записи ().
Но и если вы откроете код любой статьи блога (например, в режиме html-редактора) — то увидите те же блоки, расположенные один над другим. Вообще, такая верстка является настолько естественной, что многие авторы даже не задумываются, что это именно определенный принцип, а не сложившееся само собой положение вещей.
На самом деле, далеко не все так очевидно. Вот, например, верстка таблицы (можете подробно прочитать о таблицах в отдельной статье):
Левая ячейка
Правая ячейка
Мы видим, что отдельные элементы (ячейки) прописаны одна над другой. А располагаться они будут на одной линии. Вот результат такой простой записи:
Левая ячейка
Правая ячейка
Обратите внимание, что, если в таблице нет никаких границ — то содержимое ее ячеек выглядит, как обычная запись. Представьте, что мы можем (а мы можем!) задать любую конфигурацию для ячеек, добавить туда не только текст, но и картинки… А теперь попытайтесь представить, каким навороченным будет код такой страницы!
Именно такой принцип верстки применяли раньше (например, для сайтов narod) и иногда применяют до сих пор! Он называется «табличная верстка». Так что, естественность блочной верстки — это удачная находка разработчиков, а не случайность.
Элементы блочной верстки
Но как формируются блоки в блочной верстке? Как браузер отличает, что один элемент закончился и начался следующий? Как он определяет, что у этого элемента такие свойства и стили, а у другого — другие? — Это главные вопросы, которые приводят нас от теории к практике.
Итак, блоки — это фрагменты контента, которые заключены в блочные теги или блочные элементы (контейнеры). Вообще-то, их немало, но мы сегодня познакомимся с самыми важными и часто встречающимися — тегами div, p, h.
У всех блочных элементов есть общие правила форматирования:
Ширина
такого элемента будет равна ширине родителя. То есть, например, ширина текста поста будет равна всей ширине колонки; Высота
определяется количеством контента. То есть, абзац будет выше, если в нем больше текста; Новый блок начинается с новой строки
.
Контейнер div
Это базовый тег для любого шаблона Вордпресс. Посмотрите коды своей темы — там будут вызовы функций php:
php ...; ?>
И некие фрагменты, заключенные в теги — собственно, контейнер:
...
Причем в такой контейнер могут заключаться и php-функции, и другие теги (например, активные ссылки, ограниченные тегами а, заголовки h и т.д.)
Зачем же вообще нужен такой контейнер? — Чтобы присвоить ему отдельный стиль, который будет прописан отдельно (в таблице стилей). Так можно написать довольно лаконичный код, состоящий из отдельных блоков для которых будет назначено название или id стиля. Но сам CSS-код оформления будет подгружаться из другого файла. Свойства стиля дописываются так:
...
или так
...
Посмотрите на код любого из разделов шаблона вашего блога и сразу увидите, о чем я говорю. Для тренировки, попробуйте вычленить отдельные блоки и понять, за отображение каких элементов страницы они отвечают. А потом найдите в таблице стилей название или id стилей, которые относятся к разным блокам.
Контейнер p
Эти теги мы преимущественно встретим в форматировании отдельной записи — стоит только открыть html редактор статьи. Потому, что этот тег содержит в себе контент одного абзаца текста. Как правило, к нему применяют стилевое свойство text-align, которое устанавливает выравшивание:
text-align: left; — выравнивание по левому краю;
text-align: right; — выравнивание по правому краю; text-align: justify; — выравнивание по ширине;
Полная запись выглядит, например, так:
Все другие стилевые свойства для этого тега заданы в таблице стилей. Там прописаны и шрифты, и их размеры, и цвет текста (ведь он может быть не только черным!)
Контейнер h
Это известный тег, в который заключаются заголовки — h1, h2, h3 и так далее. Стили для каждого типа заголовков уже прописаны в теме блога. Они участвуют и в верстке страниц шаблона, и в форматировании отдельных постов.
Об использовании заголовков разного уровня в тексте уже говорено-переговорено сеошниками всех мастей. Но мы можем применить этот тег и в шаблоне Вордпресс. Например, добавить девиз своего блога на главную страницу — под шапкой, над перечнем постов. Например, так:
Мой блог - самый лучший!
А в следующий раз мы рассмотрим строчные элементы, без которых верстка и форматирование блога, также, невозможны.
Оставайтесь на связи! Блоготей пришлет вам новые статьи на почту!
Онлайн учебники на сайт
Учебник по HTML 4
Тег-контейнер
Тег-контейнер
является элементом уровня блока,
служащим для выделения фрагмента документа. Целью этого выделения является управление
параметрами данного фрагмента, которое обычно выполняется с помощью назначения
стилей. Приведем пример:
(Фрагмент документа)
В этом примере фрагмент HTML-документа обрамляется тегами
и
для задания некоторых его свойств. В данном случае
все текстовые элементы выделенного фрагмента будут отображаться зеленым (green)
цветом. Аналогом тега
уровня текста является элемент
.Заметим, что непосредственное назначение стилевых свойств
отдельного фрагмента так, как это сделано в примере, использовать не желательно
в соответствии с концепцией разделения структуры документа и его представления.
Следует использовать таблицы стилей, речь о которых пойдет во второй части книги.
Тег
Тег-контейнер
предназначен для горизонтального
выравнивания всех элементов посередине окна просмотра браузера. Он имеет уровень
блока и его полезно использовать для центрирования таких элементов, как, например,
таблиц, так как они не могут быть центрированы назначениемALIGN=CENTER тега
.По существу тег
является краткой формой
следующей записи: . Дальнейшее использование тега
по причинам, отмеченным в предыдущем разделе, также нежелательно.
Любая веб-страница состоит из расположенных на ней элементов, и практически всегда за их размещение отвечает блочная верстка div. Конечно, существует еще и табличная верстка с использованием тегов
, , , и существуют даже споры о том, какую лучше использовать систему — блочную или табличную. Однако в действительности в в настоящее время вы не встретите ни одного из современных, популярных и удобных сайтов, использующих только табличную верстку. В лучшем случае она используется только для того, для чего она и предназначена — то есть для создания таблиц, но никак не для формирования самой структуры сайта.
Дело в том, что div верстка сайта позволяет задавать множество css-свойств, недоступных для таблиц. Кроме того, самый главный недостаток табличной системы состоит в том, что таблица не будет показана на экране до тех пор, пока она не будет полностью загружена браузером. Если весь сайт сделан в таблице, то он появится на дисплее лишь после того, как будет полностью загружен весь html-код страницы.
Тег DIV и свойство float
Основа блочной системы — это тег
, который является контейнером для контента. Внутри него также могут содержаться другие контейнеры
.
Использовать тег DIV — не сложнее, чем . Как правило, стандартная структура сайта формируется следующим образом: существует основной контейнер
(часто ему присваивается класс с названием wrapper, container, main и т.д.). Внутри этого контейнера располагаются блоки меню, контентной части, сайдбара.
По умолчанию, каждый новый блок располагается с новой строки. Для того, чтобы расположить блок слева или справа от другого (например, чтобы расположить сайдбар справа), используется свойство float. По умолчанию оно имеет значение «none», но можно также выставлять значения «left» и «right».
Рассмотрим это свойство на примере с двумя блоками.
Блок для контента
Блок для сайдбара
Этот код даст следующий результат:
Свойство clear
Важно учитывать, что свойство float распространяется не только на сам блок, в котором оно прописано, но и на последующий элемент, который будет идти за этим блоком. То есть если мы к вышеописанным двум блокам добавим еще один блок, не указывая ему никаких свойств, то он расположится не с новой строки, а начнется справа от второго блока.
Для того, чтобы избежать этого, блочная верстка div использует свойство clear, которое должно быть задано для того блока, который мы хотим расположить с новой строки. Чаще всего для этого ему задается значение «both», но можно также задать значения «left» или «right», если мы хотим не просто расположить блок на новой строке, но и задать ему выравнивание.
Дополним вышеуказанный пример новым элементом:
Блок для контента
Блок для сайдбара
Новый блок, расположенный снизу
Результат:
Отступы в блочной верстке
Помимо расположения блоков, немаловажным является задание отступов как между блоками, так и внутри них. Для этого, соответственно, используются свойства margin и padding.
Отступы задаются отдельно для верхней, правой, нижней и левой частей элемента. Их можно задать одной строкой путем перечисления четырех значений:
Margin: 20px 10px 0 40px
Блок с такими параметрами будет располагаться на 20 пикселей ниже вышестоящего элемента, на десять пикселей от правостоящего элемента, будет иметь нулевой отступ снизу и будет иметь отступ размером в 40 пикселей слева.
Если все те же самые показатели указать в свойстве padding, то это будут внутренние отступы для контента по отношению к границам блока, в которых он расположен.
Можно также задавать отдельные свойства для отдельных граней с помощью margin-top, margin-bottom, margin-left, margin-right (и аналогично для padding). В таком случае, если какая-то из граней не будет указана, то отступ с ее стороны будет равен нулю или будет определен общими свойствами css, заданными для блоков на странице.
Иногда бывает
необходимо произвести выравнивание
большого блока документа, содержащего
не только текст, но и рисунки, таблицы
и т.п. Для этих целей используется
элемент-контейнер DIV
.
Спецификация элемента DIV:
ALIGN="выравнивание">
Атрибут ALIGN
определяет тип выравнивания содержимого
и может иметь те же значения, что и
элемент P.
Отступы Иногда требуется
отобразить блок текста с отступом. Для
этого блок текста помещают в
элемент-контейнер BLOCKQUOTE
.
Тогда содержимое этого элемента будет
отображаться с небольшими отступами
слева и справа, а также отделяться от
остального текста пустыми строками.
Таблицы Одним из наиболее
мощных и широко применяемых в HTML
средств являются таблицы. Они используются
не только традиционно как метод
представления данных, но и как средство
форматирования Web-страниц.
Документ HTML
может содержать произвольное число
таблиц, причем допускается вложенность
таблиц друг в друга.
Каждая таблица
начинается тегом <TABLE
>
и заканчивается тегом TABLE
>.
Внутри этой пары тегов располагается
описание содержимого таблицы. Любая
таблица состоит из одной или нескольких
строк, в которых задаются данные для
отдельных ячеек.
Каждая строка
начинается тегом <TR
>
и заканчивается тегом TR
>.
Отдельная ячейка в строке обрамляется
парой тегов <TD
>
и TD
>
или <TH
>
и TH
>.
Тег
используется для ячеек заголовка
таблицы, а
– для ячеек данных. Отличие этих тегов
в том, что в заголовке по умолчанию
используется полужирный шрифт, а для
данных – обычный.Теги
и
не могут появляться вне описания строки
таблицы .Пример таблицы:
Пример
таблицы
Ячейка
1
Ячейка
2
Ячейка
3
Ячейка
4 Этот пример
отобразится в броузере так:
Спецификация тега
:ALIGN="выравнивание"
BORDER="толщина
рамки"
CELLPADDING="расстояние"
CELLSPACING="расстояние"
HEIGHT="высота"
WIDTH="ширина"
Атрибут ALIGN
определяет выравнивание таблицы в окне
просмотра броузера. Он может иметь одно
из двух значений: LEFT
(по левому краю) и RIGHT
(по правому краю). По умолчанию – LEFT.
Атрибут BORDER
управляет толщиной рамки. Значением
этого атрибута является число. Это число
определяет толщину рамки таблицы в
пикселях. По умолчанию толщина рамки –
1.
Атрибут CELLPADDING
определяет расстояние в пикселях между
рамкой и содержимым ячейки. По умолчанию
– 1.
Атрибут CELLSPACING
определяет расстояние в пикселях между
ячейками таблицы. По умолчанию – 2.
Атрибут HEIGHT
определяет высоту таблицы в пикселях.
Атрибут VALIGN
определяет вертикальное выравнивание
содержимого таблицы. Он может иметь
следующие значения: TOP
(по верхнему краю), MIDDLE
(посередине) и BOTTOM
(по нижнему краю). По умолчанию – MIDDLE.
Атрибут WIDTH
определяет ширину таблицы в пикселях
или процентах от ширины окна броузера.
Спецификация тега
ALIGN="выравнивание"
BGCOLOR="цвет
фона"
VALIGN="вертикальное
выравнивание"
Атрибут ALIGN
определяет выравнивание содержимого
всех ячеек строки. Он может иметь одно
из трех значений: LEFT
(по левому краю), RIGHT
(по правому краю) и CENTER
(по центру). По умолчанию – CENTER.
Атрибут BGCOLOR
определяет цвет фона для всех ячеек
строки. Его значение можно указывать в
символьной нотации или в формате RGB.
Атрибут VALIGN
определяет вертикальное выравнивание
содержимого всех ячеек строки. Он может
иметь следующие значения: TOP
(по верхнему краю), MIDDLE
(посередине) и BOTTOM
(по нижнему краю). По умолчанию – MIDDLE.
Спецификация тега
ALIGN="выравнивание"
BGCOLOR="цвет
фона"
COLSPAN="количество
ячеек"
HEIGHT="высота
ячейки"
ROWSPAN="
количество ячеек "
VALIGN="вертикальное
выравнивание"
WIDTH="ширина
ячейки"
Атрибут ALIGN
определяет выравнивание содержимого
ячейки. Он может иметь одно из трех
значений: LEFT
(по левому краю), RIGHT
(по правому краю) и CENTER
(по центру). По умолчанию – CENTER.
Атрибут BGCOLOR
определяет цвет фона для ячейки. Его
значение можно указывать в символьной
нотации или в формате RGB.
Атрибут COLSPAN
позволяет объединить несколько соседних
ячеек по горизонтали. Значение этого
атрибута – количество объединяемых
ячеек.
Атрибут HEIGHT
определяет высоту ячейки в пикселях.
Атрибут ROWSPAN
позволяет объединить несколько соседних
ячеек по вертикали. Значение этого
атрибута – количество объединяемых
ячеек.
Атрибут VALIGN
определяет вертикальное выравнивание
содержимого ячейки. Он может иметь
следующие значения: TOP
(по верхнему краю), MIDDLE
(посередине) и BOTTOM
(по нижнему краю). По умолчанию – MIDDLE.
Атрибут WIDTH
определяет ширину ячейки в пикселях.
Вопросы для
закрепления.
Чем отличаются
абзацы от заголовков?
Какие бывают
списки?
Какие теги
используются для изменения шрифта?Что
такое «информация»?
4.
Домашние
задание:
1. Создайте таблицу,
которая в первой строке содержит одну
ячейку, во второй – две, в третьей – три
ячейки.
2. На практике
понаблюдайте эффект использования
различных значений атрибута ALIGN
тега .