2. Позиционирование. Фон. Рамки и отступы. Психология дизайна. Позиционирование

CSS позволяет определить точное положения HTML-элементов.

С помощью CSS программист может размещать содержимое двумя способами:

1. абсолютное позиционирование позволяет указывать положение содержимого по отношению окна браузера.

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

position

Определяет используемый метод позиционирования. Значение:

static - обычный элемент, использующий установленную по умолчанию HTML-структуру (по умолчанию).

relative - позиционирование элемента является смещением по отношению к его обычному положению в общей структуре страницы.

absolute - позиционирование элемента определяется смещением по отношению к положению содержащего его элемента, и они не влияют на общую структуру.

fixed - позиционирование элемента является смещением, как и в случае со значением absolute, но сам элемент фиксируется в окне браузера и при прокрутке окна не перемещается.

inherit - принимается значение родительского элемента.

   p {position: absolute}

top, right, bottom, left

Определяет величину смещения от определенного края (соответственно верхнего, правого, нижнего и левого). Значение:

auto - величина смещения выбирается браузером так, чтобы можно было разместить все элементы (по умолчанию).

любая соответствующая стандарту длина - число, представляющее величину смещения от края.

любое соответствующее стандарту процентное значение - отношение в процентах длины смещения к ширине элемента (для левого и правого края) или его высоте (для верхнего и нижнего края).

inherit - принимается значение родительского элемента.

   p {top: 20px; right: 40px}

Рамки

Свойство border позволяет облечь в рамку любой элемент Вэб-страницы.

Для задания толщины border-width рамки применяются константы thin(тонкая), medium(средняя), thick(толстая). В качестве значений размера можно задавать величины, выраженные в пунктах, пикселях, миллиметрах, сантиметрах, дюймах, пиках, а также единицах ex, em. При задании размера при помощи единиц ex, функцию единицы измерения выполняет высота строчной буквы "x" текущего шрифта. em - позволяет указать размер относительно высоты шрифта в целом.

Задавая параметры рамки, надо определить стиль ее представления border-style - solid, double, groove, ridge, inset, outset, dotted, dashed.

Цвет рамки border-color может задаваться посредством наименования (red, yellow), шестнадцатеричным значением (#FF00AA), функцией RGB (25%,50%,0%), выражающей абсолютное или процентное содержание красной, зеленой и синей составляющих цвета.

Все вышеуказанные свойства можно детализировать для верхней (top), нижней (bottom), левой (left), правой (right) частей рамки.

Т.е.: border-top, border-right, border-left, border-bottom.

Отступы (padding)

Сокращённое свойство padding устанавливает размер отступа для всех четырёх сторон, а другие свойства padding-top, padding-right, padding-bottom, padding-left устанавливают соответствующие стороны.

padding: сверху справа снизу слева;