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

Что касается структуры, почти все браузеры по умолчанию располагают элементы, ориентируясь на их тип: блочный или строчный. Данная классификация определяет, как элементы выстраиваются на экране:

• блочные элементы располагаются на странице один за другим;

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

Практически каждый струтурный элемент по умолчанию считается блочным. Это означает, что каждый тег HTML, предсталяющий собой некий компонент визуальной организации (например, <section>, <nav>, <header>, <footer>, <div>), будет помещаться ниже предыдущего.

Мы рассматривали HTML-документ, повторяющий макет типичного веб-сайта. Дизайн предусматривает горизонтальные полосы и два столбца в центре. Однако из-за использования правил отображения, по умолчанию принятых в браузерах, визуальный результат далек от ожидаемого.

Визуальное представление макета страницы, связанное с использованием стилей по умолчанию, будет выглядеть так:

<header> </header>

<nav> </nav>

<section> </section>

<aside> </aside>

<footer> </footer>

Для того чтобы создавать собственные хорошие макеты, сначала необходимо разобраться, каким образом браузеры обрабатывают код HTML. Каждый элемент браузеры считают отдельным блоком. Веб-страница, фактически, представляет собой группу блоков, собранную воедино в соответствии с некоторыми правилами. Эти правила определяются стилями – либо встроенными в браузер, либо поставляемыми дизайнерами в форме кода CSS.

В CSS существует предустановленный набор свойств, позволяющий переопределять стили браузеров и создавать желаемый вариант дизайна. Это не какие-то узкоспециализированные свойства: их можно и нужно объединять для формирования правил, на основе которых блоки и будут группироваться, определяя правильный дизайн. Комбинацию таких правил обычно называют моделью или системой макета. Все вместе правила определяют блочную модель.

Сегодня только одна блочная модель считается стандартной, кроме нее существует еще несколько экспериментальных. Допустимая и повсеместноиспользуемая модель называется традиционной блочной моделью (Traditional Box Model), и она существует со времен первой версии CSS. Несмотра на доказанную эффективность данной модели, разрабатываются экспериментальные модели, нацеленные на преодоление ее недостатков. Наиболее значимой среди них является новая гибкая блочная модель (Flexible Box Model), появившаяся в CSS3 и полагаемая частью HTML5.

Основы применения стилей

Вспомним базовые концепции применения стилей CSS.

Строчные стили

Одна из простейших техник определения стилей внутри элемента включает в себя использование атрибутов. Рассмотрим листинг:

<!DOCTYPE html>

<html lang="ru">

<head>

<title>Этот текст – заголовок документа</title>

</head>

<body>

<p style="font-size: 20px">Мой текст</p>

</body>

</html>

Здесь элемент <p> модифицируется атрибутом style, имеющим значение font-size: 20px. Атрибут style меняет размер по умолчанию для текста внутри элемента <p>, увеличивая его до 20 px. Однако описанную технику не рекомендуется применять для всего документа: она подразумевает, что стили нужно описать и повторить для каждого отдельного элемента, из-за чего документ раздувается до недопустимого размера, а поддерживать его и обновлять становится сложно.