В CSS элементы, как правило, рассматриваются как прямоугольные блоки или полосы. Для описания блоков используются следующие – вам уже, наверное, известные – свойства:
• width – ширина элемента
• height – высота элемента
• left – отступ слева
• right – отступ справа
• top – отступ сверху
• bottom – отступ снизу
• margin – внешний отступ
• border – рамка вокруг элемента
• padding – внутренний отступ, т.е. отступ от рамки до содержимого элемента
Эти свойства уже были представлены.
Общая ширина элемента складывается из ширины отдельных значений. (То же самое относится к высоте).
Пример:
div#box {
width: 100px;
padding: 20px; /* по 20 пикселей слева и справа /
border: 2px solid; / по 2 пикселя слева и справа /
margin: 0 30px; / по 30 пикселей слева и справа */
}Какая ширина у этой области div? Давайте рассмотрим каждое значение:
• 100 пикселей
• 2 раза по 20 пикселей
• 2 раза по 2 пикселя
• 2 раза по 30 пикселей
Это дает общую ширину элемента в 204 пикселя.
Ширина и высота элементов определяются с помощью width и height. Если эти значения не указаны явно в таблице стилей, действует следующее:
• Если отсутствует width, то блок будет шириной, равной окружающему его элементу.
• Если отсутствует height, то элемент будет высотой, равной его содержимому.
Пример:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div#box {
border: 1px solid; /* по 2 пикселя слева и справа */
margin: 0 30px; /* по 30 пикселей слева и справа */
background-color:#6600CC;
}
</style>
</head>
<body>
<div id="box">PSD-Tutorials.de</div>
</body>
</html>
В браузере это будет выглядеть следующим образом:
Родительским элементом элемента div является элемент body. Следовательно, элемент будет отображаться на ширину элемента body. Если говорить о высоте, то она определяется содержимым.
Всё на ноль
У каждого браузера есть встроенная таблица стилей. В них определены некоторые стандартные значения. Это касается, например, padding и margin. К сожалению, эти стандартные значения различаются в разных браузерах. Этот аспект затрудняет достижение идентичных результатов в различных браузерах, в том числе в контексте модели блока. Поэтому рекомендуется установить нулевые отступы, заданные браузерами. Это можно сделать следующим образом:
* { padding: 0; margin: 0; }
Добавьте эту строку в начало вашей таблицы стилей. Теперь вы можете начинать размещать блоки по вашему усмотрению.
Типы блоков
Как конкретный элемент отображается и как он влияет на другие элементы зависит от типа элемента. Фактически спецификация CSS различает между блочными элементами и строчными элементами. (Есть еще другие типы, которые здесь опущены, поскольку они играют второстепенную роль).
Блочные элементы всегда создают новую строку. Следующие элементы также начинаются с новой строки. Типичными блочными элементами являются, например, p, div, h1, ul и т. д. Для этих элементов действуют упомянутые ранее свойства внешний отступ, внутренний отступ, высота, ширина и граница.
<h1>Digital Painting & Matte Painting: Bildaufbau definieren</h1> <p>Modul 2 - Teil 2: Ein Bild ist immer ein Ganzes. Jedoch muss man sich immer überlegen, wo der Betrachter als Erstes hinsehen sollte.</p>
Просмотр результата в браузере показывает, что h1 и p создают каждый свою строку.
Строчные элементы, наоборот, не создают собственного абзаца, они отображаются в обычном порядке текста. Типичными строчными элементами являются span, em, strong, img, br и т. д. Для строчных элементов не применяются вертикальные внешние отступы и ширина и высота.
<h1><em>Digital Painting & Matte Painting</em>: Bildaufbau definieren</h1> <p>Modul 2 - Teil zwei: <strong>Ein Bild ist immer ein Ganzes</strong>. Jedoch muss man sich immer überlegen, wo der Betrachter als Erstes hinsehen sollte.</p>
И вот еще один взгляд на результат:
Теперь вы можете превратить элементы, которые по сути являются блочными, в строчные элементы.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
h1 {
background-color:#00CCFF;
}
</style>
</head>
<body>
<h1>Digital Painting & Matte Painting</h1>
<p>Модуль 2 - Часть 2: <em>Изображение всегда целое</em>. Однако всегда нужно обдумывать, куда в первую очередь должен смотреть наблюдатель.</p>
</body>
</html>Посмотрите на результат в браузере.
Цвет фона заголовка h1 сигнализирует, что элемент простирается на всю ширину. Ширина определяется родительским элементом body.
Теперь вступает в игру свойство display.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
h1 {
display:inline;
background-color:#00CCFF;
}
</style>
</head>
<body>
<h1>Digital Painting & Matte Painting</h1>
<p>Модуль 2 - Часть 2: <em>Изображение всегда целое</em>. Однако всегда нужно обдумывать, куда в первую очередь должен смотреть наблюдатель.</p>
</body>
</html>
При использовании display: inline ширина элемента изменяется.
Фактически ширина элемента теперь автоматически подстраивается под содержимое. Вот обзор возможных значений для свойства display:
• none – не отображается
• block – элемент отображается как блочный, поэтому создается новая строка.
• inline – элемент отображается как строчный, появляется в текствовом потоке.
• inline-block – визуально выглядит как блок, для него можно указывать высоту, ширину и внешние отступы. Однако каждый элемент остаётся в текствовом потоке. Таким образом, это комбинация блочного и строчного элемента.
• list-item – элемент отображается как блочный. К нему также добавляется маркер списка перед элементом.
• run-in – в зависимости от содержимого может создать или блочный, или строчный элемент.
• table – визуально похож на элемент таблицы из HTML.
• inline-table – похож на HTML-элемент table, но визуально строчный.
• table-row – элемент содержит дочерние элементы, расположенные в строку, похож на HTML-элемент tr.
• table-cell – элемент представляет собой ячейку таблицы и похож на элементы th и td в HTML.
• table-row-group – элемент содержит группу элементов с дочерними элементами, расположенными в строку, похож на HTML-элемент tbody.
• table-header-group – элемент содержит группу элементов с дочерними элементами, расположенными в строку, похож на HTML-элемент thead.
• table-footer-group – элемент содержит группу элементов с дочерними элементами, расположенными в строку, похож на HTML-элемент tfoot.
• table-column – здесь описываются свойства ячеек столбца. table-column похож на элемент col из HTML.
• table-column-group – этот элемент содержит группу элементов, описывающих свойства ячеек столбца. Он похож на элемент colgroup из HTML.
• table-caption – с его помощью определяется заголовок таблицы. Свойство похоже на элемент caption из HTML.
Фактически CSS предоставляет различные варианты отображения для различных типов элементов. Они играют ключевую роль в контексте позиционирования элементов. Больше об этом в следующих уроках.
