Каскадные таблицы стилей CSS

Синтаксис CSS

Форматирование блоков
Область содержимого
Поля
Границы
Отступы

Форматирование блоков. Поля
Это специальные области, позволяющие задать некое свободное, ничем не занятое пространство вокруг границы блока. Регулируя величину полей, можно управлять расстоянием между блоками, например, уменьшить или увеличить абзацный отступ между абзацами.
margin-top - задает ширину верхнего поля;
margin-right - задает ширину правого поля;
margin-bottom - задает ширину нижнего поля;
margin-left - задает ширину левого поля.
Свойства

Форматирование блоков. Отступы
Отступы позволяют отделить основное содержимое блока от границы таким образом, чтобы граница располагалась на некотором расстоянии от содержимого.
padding-top - ширина верхнего поля.
padding-right - ширина правого поля.
padding-bottom - ширина нижнего поля.
padding-left - ширина левого поля.
Свойства

Использование блоков. Блоковая модель.
Знание блоковой модели CSS позволяет нам верстать сайты без использования HTML-таблиц.
Свойство display
none - отключает отображение блока в окне браузера
block – показывает блока (видимость)
inline - значение определяет строчный блок
list-item - элемент становится частью списка

Управление видимостью и переполнением блоков.
Свойство visibility
visible - обычное состояние блока (по умолчанию), когда он нормально виден на экране
hidden - блок становится прозрачным, т.е. невидимым.
Свойство overflow
visible
hidden
scroll
<br>#small{
border: 1px dotted #660033;
padding: 0.5em;
height: 60px;
width: 150px;
overflow: visible; <br>}
Ширина данного блока 150 пикселей, а высота 60 пикселей. Проверим, удастся ли контролировать ситуацию с переполнением?

Схемы позиционирования
Нормальный поток.
Относительное позиционирование.
Абсолютное позиционирование.
Плавающая блоковая модель.
Схемы позиционирование

Схемы позиционирования.
Нормальный поток

Схемы позиционирования.
Свойство POSITION
static - блок будет считаться обычным, и позиционироваться в соответствии с правилами нормального потока.
relative - относительное позиционирование (относительно нормального потока).
absolute - абсолютное позиционирование.
fixed - фиксированное позиционирование. Блок позиционируется абсолютно, а потом его положение фиксируется относительно области просмотра - такой блок не перемещается при прокрутке.

Относительное позиционирование
left - смещение левого края блока от левого края контейнера;
right - смещение правого края блока относительно правого края контейнера;
top - смещение верхнего края блока относительно верхнего края контейнера;
bottom - смещение нижнего края блока относительно нижнего края контейнера.
Чтобы создать относительно позиционированный блок, необходимо записать свойство position:relative. В этом случае положение блока сначала будет вычислено относительно нормального потока, а затем блок будет смещен относительно этого места.
.move {
position:relative;
left:20px;
top:10px;
}
первый блок
второй блок
третий блок

Абсолютное позиционирование
Если при относительном позиционировании блок не "вырывается" из нормального потока, а только смещается относительного нормального положения, то при абсолютном позиционировании все совершенно иначе: абсолютно позиционируемый блок полностью "вырывается" из нормального потока.
left - смещение левого края блока относительно левого края контейнера;
right - смещение правого края блока относительно правого края контейнера;
top - смещение верхнего края блока относительно верхнего края контейнера;
bottom - смещение нижнего края блока относительно нижнего края контейнера.
#abs {
position: absolute;
left:50px;
top:100px;
}
первый блок
второй блок
третий блок

Фиксированные блоки
#fix{
position: fixed;
left:0px;
top:0px;
widht:100px;
}
#move {
position: absolute;
left:100px;
top:0px;
}
Пункт 1
Пункт 2
Пункт 3
Пункт 4

Плавающие блоки
Для того чтобы в CSS реализовать "резиновую" верстку, были придуманы плавающие блоки. Их нельзя позиционировать с точностью до пикселя, как, например, абсолютно позиционируемые. Они могут свободно перемещаться и "прижиматься" к краю своего контейнера.
Подобным образом себя ведут рисунки в HTML, для которых задано выравнивание при помощи атрибута align.
Свойства FLOAT
left - структурный блок перемещается влево. Остальное содержимое документа будет выводиться вдоль правой стороны блока, начиная с самого верха.
right - структурный блок перемещается вправо. Остальное содержимое документа выводится вдоль левой стороны блока, начиная с самого верха.
none - блок не перемещается (значение по умолчанию), т.е. позиционируется согласно алгоритму, заданному свойством position. Если свойство position не задано, то предполагается нормальный поток.

Плавающие блоки
Плавающий блок может "прилипать" к левой или правой стороне контейнера, сторона задается свойством
float
.