Стили для блоков и усовершентвованная система разметки

Что такое блок

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

Блок - отдельный элемент веб страницы, в котором размещаются текст, изображения и другие блоки. Блок разбивает страницу на отдельные части.

Главным блок веб страницы - это все окно браузера, или тег <body>. В теге <body> размещаются другие блоки. Теги блоков: <p>, <table>, <td>, <form>, <input>, <textarea>, <hr />, <img />, <h1>-<h7>, <blockquote>, <div>, <body>.

Здесь мы видим 2 новых тега: <blockquote> и <div>.

<blockquote> используется редко, в основном для написания цитат.

<div> - усоврешенствованный тег <p>. Он также как и <p> разбивает страницу, но к нему можно применить огромное количество настроек. Тег <div> используется для создания слоев, разметки страницы или для размещения элементов веб страницы один над другим.

Разметка страницы таблицами стилей осуществляется именно с помощью тега <div>. (<p> лучше не использовать при разметке. Его назначение - параграфы).

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

Структура блока

Наружное поле - margin

У каждого блока есть основные составляющие: граница блока(border), содержимое, отступ от границы до содержимого(padding), отступ от границы до следующего блока, или поле(margin), ширина(по содержанию)(width), длина(по содержанию)(height). Вот как это выглядит:

За ширину и длину блока отвечают команды width и height. Они могут принимать значение в пикселях или процентах(в процентах от размера родительского блока(размер блока <body> - 100% по ширине и 100% по длине)).

За ширину поля отвечает команда margin. У команды margin есть 4 подкоманды, определяющие ширину поля с каждой стороны по отдельности. Это margin-left, margin-right, margin-top, margin-bottom. Эти команды могут принимать только одно значение: либо кол-во пикселей, сантиметров, либо количество процентов, либо auto(автоопределение). Команда margin может принимать набор значений, каждое из которых также может быть выражено в пикселях, процентах или сгенерированно автоматически.

Команда margin определяет одинаковое поле для всех сторон. Синтаксис - margin:значение
Команда margin определяет поле для каждой из сторон отдельно. Синтаксис - margin: top right bottom left. Здесь top, left,.. - стороны поля, вместо которых нужно подставить соответствующее значение.
Команда margin определяет четыре поля: верхнее отдельно, левое отдельно и правое с нижним вместе. Синтаксис команды margin: top left right&bottom. Таким образом есть 3 значения.
Команда margin определяет 2 значение - первое для верхнего и нижнего полей, второе - для левого и правого полей. Синтаксис - margin: top&bottom left&right

Границы - border

С границей интересней. Команда border также имеет 4 подкоманды(border-left, border-right...). Однако у границы есть не одно свойство, как у margin(единственное свойство margin - ширина), а 3 свойства - толщина границы, цвет и тип (например граница точками, линиями, сплошная).

Каждая из подкомманд border может иметь одно свойство(любое) или 3 свойства (ширина тип цвет), разделенные пробелами. Команда border может только настраивать все границы, а не по отдельности, как margin, и также может иметь либо одно, либо 3 свойства(Синтаксис border:ширина тип цвет).

Также есть 3 комманды, определяющие одно из этих свойств по отдельности. Это border-width, ширина границы в пикселях или процентах; border-style - тип границы и border-color - цвет границы. Каждая из этих комманд может иметь четыре типа значений, таких же, как и margin. Т.е. комманды могут определять все границы сразу, по отдельности (top right bottom left | top&bottom left&right | top left right&bottom).

Возможные типы границ:

<div style="border-style:outset">Например, вот так. </div>

Например, вот так.

А еще у border есть другие 4 подкомманды, отвечающие за то, как будет отображена каждая из сторон. Подкомманды: border-top, border-bottom, border-left, border-right. Каждая из них может принимать 1 или 3 значения. Также у каждой из этих подкомманд есть по 3 своих подкомманды(!), каждая из которых совершает самую тонкую настройку, какая только возможно.

Например, у border-top подкомманды: border-top-color, border-top-width, border-top-style. Аналогично для border-bottom, border-left, border-right. Каждая из таких подкомманд второго уровня(т.е. подкомманды другой подкомманды) может иметь только одно значение, а не их набор. Впрочем, редко возникает надобность использовать столько комманд и подкомманд на практике.

Внутренний отступ - padding

У команды padding есть лишь одно отличие от команды margin. Padding определяет отступ от содержимого блока до границы, а margin определяет отступ от границы наружу. Во всем остальном: в подкоммандах, в синтаксисе - они схожи. У padding есть 4 подкомманды: padding-top, padding-bottom...

Обтекание текстом

Внимание! Мы говорили, что все блоки разделяют страницу на части. Это так, но CSS может изменить это правило.

В этом блоке <div> располагается текст. Для удобства мы сделали у блока границу, чтобы наглядно показать действие команды float

float позволяет выбрать способ обтекания текста вокруг блока, вот так.

Доступные параметры: right(блок справа, а текст обтекает слева), left(блок слева, а текст обтекает справа), none(текст не обтекает блок) и inherit(наследует значение родителя).

Отображение блока

Команда display позволяет нам настроить то, чем собственно будет блок: обычным блоком с разрывом строки(block), элементом списка(list-item), просто текстом без разрыва(inline) или вообще не будет отображаться на экране(none).

Позиционирование: разметка страницы

Несколько слов о разметке страницы.

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

При загрузке таблицы браузер должен рассчитать правильно ширину и высоту всех ячеек таблицы, исходя из находящегося там содержимого. Это занимает дополнительное время при загрузке, что буквально является бичом всех веб дизайнеров. Разметка с помощью таблиц стилей гораздо быстрее, т.к. браузер должен либо расположить элементы там, где Вы указали(что лучше), либо просто поставить их друг за другом.
При использовании специальных браузеров, которые вслух зачитывают содержимое веб страниц слепым людям, или тем, кто не имеет возможности подойти к монитору зачитываются все таблицы вслух. Если такой браузер встретит разметочную страницу, он может сообщить например "таблица из 3 строк и 3 столбцов". Однако, по задумке, пользователь не должен знать об этой таблице, ведь она только для его удобства.
Допустим, Вы создали сайт с большим количеством страниц с некоторыми одинаковыми элементами - логотип, название, дополнительная информация, навигация. Однако затем Вам понадобилось просто переставить некоторые элементы местами. Если Вы размечаете страницу с помощью таблиц, нужно будет открывать каждую страницу и менять код. В CSS применяется позиционирование и размещение нескольких блоков можно поменять в одном css файле. Вот так! Однако, это не распространяется на случаи, если нужно добавить или удалить содержимое. Тогда придется делать все вручную или с помощью редактора.

Мы упомянули позиционирование. Что это?

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

Тип позиционирования отмечает команда position. Есть 3 типа позиционирования - статическое(static - по умолчанию, размечает браузер), абсолютное(absolute) и относительное(relative).

В случае, когда position равно absolute или relative применяется еще 4 команды - top(отступ сверху = y), bottom(снизу = y), right(отступ справа = x) и left(отступ слева = x). Обратите внимание - они не являются подкоммандами и отделяются от команды position точкой с запятой. Одну из этих комманд, иногда и больше можно опустить.

Если position равно absolute, то top... показывают точное размещение блока в окне браузера. Например, если top:100px; left:200px;, то блок начнется в точке с координатами (200;100); (x=200; y=100;). Если Вы размечаете страницу с абсолютными координатами, она будет максимально быстро загружаться и отображаться одинаково во всех браузерах. Поэтому, как правило, страницу делают слева.

Если position равно relative, то top и left по тому же принципу определяют смещение элемента от того места, где он должен был загрузиться по умолчанию. Этот способ медленней и почти не используется, за исключением скриптов.

Страницу также можно разметить, если определить внутри тега <body> главный блок с определенной шириной. Он может располагаться как слева, так и по центру и справа окна браузера.

Команды top и left прменяют чаще, т.к. расположение элементов согласно right и bottom зависит от конфигурации монитора и к тому же должно высчитаться браузером.

Как это можно использовать? Можно, например, сделать так, что все параграфы будут смещены на 50 пикселей вправо (position:relative; left:50px). Правда, аналогично можно сделать и с командой margin-left, но тогда могут возникнуть проблемы с блоками, расположенными слева, если они там есть.

3D позиционирование

Несмотря на то, что веб страницы не могут быть трехмерными, мы можем разместить один блок над другим. Это делает команда z-index. Ее значение - уровень слоя, чем он больше, тем блок выше. Команду z-index нужно использовать как с блоком, который отображается сверху, так и с тем, что ниже. У того блока, что ниже, z-index должен быть меньше, чем у верхнего блока.

Пример:

У маленькой картинки z-index:2, у большой - z-index:1.

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

uroki.webservis.ru