Изучаем HTML. Часть 9 — Блочная модель, примеры css

Перейти вниз

Изучаем HTML. Часть 9 — Блочная модель, примеры css

Сообщение  Admin в Пн Ноя 01, 2010 10:11 pm

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

Все html элементы делятся на 2 группы: блоки (block) и встроенные (inline).

Блочные элементы всегда начинаются с новой строки, а также заканчиваются ею. Т.е. если расположить несколько таких элементов друг за другом, то они будут идти вертикально. Самые часто употребляемые — это <div>, <p>, <h1>…<h6>, <ul>, <ol>, <li>.

Встроенные элементы не создают переносов строк. Яркие представители: <a>, <span>, <img>, <i>, <strong>.

Более специализированным языком можно сказать, что блочные элементы создают новые потоки (контент форматирования), а встроенные — нет.

Очень важным правилом является то, что блочные элементы нельзя вставлять внутрь встроенных.

Вернемся к блочным элементам. По-сути они ничем не отличаются друг от друга. Если помните, в предыдущей части я говорил, что стиль отображения элементов страницы, в том числе, определяется заданными в браузере стилями «по-умолчанию». Так вот, разница в этих элементах лишь в том, что для <h1> в стиле по-умолчанию задан большой размер шрифта и полу-жирность, а для <p> обычный размер и небольшие отступы между блоками.

Для любого блочного элемента можно задать следующие параметры:

Отступы вокруг
Граница
Отступы внутри
Ширина и высота
Рассмотрим их по порядку, а заодно и посмотрим, как они задаются в стилях.

Отступы вокруг элемента

Определяется параметром margin. Примеры:

Код HTML:
<style type="text/css">
H1 {
margin: 10px;
}

P {
margin: 0 5px;
}

.mysuperclass {
margin: 1px 2px 3px 4px;
}

.anotherclass {
margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;
}

.someclass {
margin: 5px 20px 10px;
}
</style>Для заголовков h1 задан общий внешний отступ в 10 пикселей; для параграфов верхний и нижний отступы равны нулю, а правый и левый по 5 пикселей; отступы у классов mysuperclass и anotherclass одинаковы (в пикселях): верхний 1, правый 2, нижний 3, левый 4; а у класса someclass (в пикселях): верхний 5, правый 20, нижний 10, левый 20. Запомнить очень просто: параметром margin (а также всеми другими аналогичными) стили задаются по часовой стрелке, начиная с верхнего. Если не указано только 1 число, то это общий для всех стиль. Не указанные параметры для низа и лева берутся из верха и права, соответственно. В примерах я использовал только пиксели, хотя существуют и другие единицы.

px — пиксели
pt — типографские пункты (обычно 12pt = 16px)
em — ширина заглавной буквы M в шрифте
ex — высота строчной буквы x в шрифте
pc — пики (12 пунктов)
in — дюймы
cm — сантиметры
mm — миллиметры
% — проценты от значения родительского элемента
На практике используются px, pt, em и %. Остальное лично я не встречал в вебе. Глупо указывать отступы в сантиметрах, которые на мониторах разного размера и при разных разрешениях будут смотреться по-разному, а вот в версии для печати — вполне можно использовать.

Итак, отступы вокруг элементов. Есть у них одно очень интересное свойство: они «схлопываются». Например, есть 2 идущих подряд элемента:

Код HTML:
<div style="margin: 30px;">…</div><div style="margin: 20px;">…</div>Расстояние между ними будет не 50 пикселей, а всего 30. Отступы не суммируются. Для определения расстояния между элементами выбирается наибольший отступ. Это я и назвал «схлопыванием».

Граница вокруг элемента

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

Код HTML:
<style type="text/css">
H1 {
border: 1px solid #ff0000;
}

P {
border-width: thin medium thick 1px;
border-style: dotted solid dashed solid;
border-color: #ffffff green #000000 transparent;
}

.mysuperclass {
border-top: 1px inset #ff0;
border-right: 2px outset #0f0;
border-bottom: 3px double #0ff;
border-left: 4px groove #000;
}

.anotherclass {
border-top-width: 1mm;
border-left-style: dotted;
border-bottom-color: red;
}
</style>Самый простой вариант: border: [размер] [стиль] [цвет]; можно в развернуть в отдельные определения размера (border-width), стиля (border-style), цвета (border-color), в отдельные определения границ для сторон (border-top, border-left) или вообще в отдельные элементы (border-top-width, border-left-style, border-bottom-color). К обычным размерам добавляется 3 варианта: thin (толстый) medium (средний) thick (тонкий). Стили рамки:

none — отсутствует
hidden — невидимая
dotted — точечная
dashed — пунктирная
dot-dash — «точка-пунктир»
dot-dot-dash — «точка-точка-пунктир»
solid — сплошная линия
double — двойная линия
groove — вогнутая рамка
ridge — выпуклая рамка
inset — вогнутая поверхность
outset — выпуклая поверхность
wave — волнистая
Отступы внутри элемента

Определяются параметром padding, абсолютно так же, как и margin:

Код HTML:
<style type="text/css">
H1 {
padding: 10px;
}

P {
padding: 0 5px;
}

.mysuperclass {
padding: 1px 2px 3px 4px;
}

.anotherclass {
padding-top: 1px;
padding-right: 2px;
padding-bottom: 3px;
padding-left: 4px;
}

.someclass {
padding: 5px 20px 10px;
}
</style>В отличие от отступов вокруг элемента, не «схлопываются», в них отображается фон блока.

Высота и ширина

С одной стороны, тут всё просто. 2 свойства: width и height.

Код HTML:
<style type="text/css">
H1 {
width: 100%;
}

P {
width: 400px;
}

.mysuperclass {
width: 150px;
height: 100px;
}
</style>Самое интересное начинается, когда для блоков задаются и отступы и размеры.

Код HTML:
<div style="margin: 20px; padding: 10px; border:1px solid red; width: 500px; background: yellow;">Тут какой-то текст</div>Вопрос: как будет нарисован такой блок?
Начнем с очевидного: вокруг будут отступы в 20 пикселей, потом черная однопиксельная рамка, фон блока желтый, отступы от рамки в 10 пикселей, внутри текст… но какой будет ширина блока? 500? 520 522? 560? Согласно спецификации, атрибуты width и height определяют размеры, которые отводятся под контент. Это значит, что все нормальные браузеры отобразят блок следующим образом: общая ширина желтой области будет 520 пикселей (width + padding-left + padding-right), вокруг которой будет однопиксельная рамка. Итого общая ширина видимого блока будет 522 пикселя, а отступы в 20 пикселей будут уже вокруг этих 522.

Почему в предыдущем абзаце я написал «нормальные браузеры»? Да потому что всеми любимый IE как всегда отличается умом и сообразительностью. Еще в 4 и 5 версии ослика неправильно обрабатывалось это свойство и параметр width определял общую ширину блока (контент + внутренние отступы + граница). IE старших поколений перенял эту «традицию», но в тоже время предоставил возможность заставить вести себя как все. Чтобы усмирить ишака либо используют css-хаки, либо условные комментарии (о тех и других расскажу в другой раз), либо идут по самому правильному пути, задавая режим рендеринга.

Режимы рендеринга html документов

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

Как вы знаете, существуют стандарты, по которым браузеры должны отображать содержимое страниц. На данный момент актуальной является спецификация HTML 4.01. В ней, например, тег <font> является устаревшим (еще с версии HTML 4.0 от 1997 года!). Но вы его хотите использовать)) Чтобы сказать браузеру, в каком режиме следует отображать html документ, в самое начало помещают специальную строку — DOCTYPE, в которой и указывается режим. Варианты для спецификации HTML 4.01:


Код HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">Строгий режим. Не содержит запрещенных и устаревших элементов, таблицы только для табличных данных, полное отделение содержимого от стилей (через css).


Код HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">Переходный режим. Некий компромисс между строгими ограничениями предыдущего варианта и вседозволенностью. Что-то уже нельзя, а что-то еще можно. Но, что важно, уже в этом режиме IE ведет себя как нормальный браузер при вычислении размеров блоков.


Код HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">Документ с фреймами.

Если DOCTYPE не указывать вовсе, то браузеры переходят в т.н. режим несовместимости (quirks mode). Можно сказать (хотя это не совсем так), что браузеры начинают вести себя как устаревшие, вылезают непонятные глюки.

Кроме стандарта HTML есть еще и стандарт XHTML. Не смотря на почти одинаковое название, он довольно сильно отличается, так как основан на стандартах xml, в нем намного больше ограничений. Для XHTML есть следующие доктайпы:


Код HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Переходный режим.


Код HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">>Строгий режим.


Код HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">Документ с фреймами.


Код HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">XHTML 1.1 — модульный.

Да, конечно, если ваша страница (к примеру, стартовая) представляет собой большую фоновую картинку + простую форму входа в чат, то все эти проблемы с багами IE, режимами рендеринга и прочим вас не будут касаться. Но как только вы попытаетесь сделать что-то более-менее сложное, да так, чтобы в разных браузерах всё выглядело одинаково, то без доктайпа будет сложно. Самый простой вариант — использование традиционного режима:


Код HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Заголовок страницы</title>
</head>
<body>

</body>
</html>В следующей части будет пример верстки несложной стартовой страницы.

avatar
Admin
Admin
Admin

Сообщения : 80
Очки : 291
Дата регистрации : 2010-08-21
Возраст : 31

Посмотреть профиль http://forum-august4u.forumy2x2.ru

Вернуться к началу Перейти вниз

Вернуться к началу

- Похожие темы

 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения