Стили и структура

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

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

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

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

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

О блочные элементы (block element) располагаются на странице один под другим;

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

Практически каждый структурный элемент документа по умолчанию считается блочным. Это означает, что каждый тег HTML, представляющий собой некий компонент визуальной организации (например, <section>, <nav>, <header>, <footer>, <div>), будет помещаться ниже предыдущего. В главе 1 мы создали HTML-документ, повторяющий макет типичного веб-сайта. Дизайн предусматривает горизонтальные полосы и два столбца в центре. Однако из-за использования правил отображения, принятых в браузерах по умолчанию, визуальный результат оказывается весьма далеким от ожидаемого. Открыв HTML-файл с кодом из листинга 1.18 в браузере, вы заметите, что два столбца, описанные с помощью тегов <section> и <aside>, располагаются на экране неправильно: один под другим, а не бок о бок, как мы планировали. По умолчанию каждый блок визуализируется максимальной ширины, а его высота соответствует содержащейся в нем информации. Схематическое представление результата, в котором блоки отображаются вертикально, показано на рис. 2.1.

<aside> </asidc>

<footer> </footer>

Рис. 2.1. Визуальное представление макета страницы, созданное с использованием стилей по умолчанию