Стили позиционирования элементов.
При позиционировании элемента, он занимает свой слой и может перекрыть другие элементы.
Стиль position задает способ позиционирования элемента (как он туда попал)
position:static (по умолчанию) позиция текущего определяется позициями предшествующего
relative смещение элемента задается относительно его исходной позиции (недостаток- если рисунок смещается на его бывшем месте остается пустота)
absolute смещение элемента задается относительно левого верхнего угла клиентской области браузера (каждый элемент на отдельном слое)
t
задают смещение на указанную длину
относительно определенной стороны
браузера
op:100px
left:2cm
bottom:50%
right:11n
Нельзя использовать одновременно top-bottom, left-right
z-index:число управляет уровнем слоя ( обычно10, 20, 30, 40, 50, чтобы была возможность вставить промежуточные слои)
20 выше 10
Пример:
<img src="./red_t.gif" style="position:absolute; top:100; left:100; z-index:30"/>
<img src="./red_b.gif" style="position:absolute; top:175; left:100; z-index:40"/>
Стили, управляющие отображением элементов.
display:none элемент не отображается, место не выделяется
inline отображается как линейный
block отображается как блочный
visibility:visible элемент видимый (отображается)
hidden не отображается на экране, но под него выделяется место
float:left элемент располагается слева, а текст справа и снизу
right элемент располагается справа
overflow определяет как будет отображаться содержимое элемента, если оно не помещается внутри элемента
overflow:visible отображается полностью, увеличивая размер элемента
hidden части содержимого, которые не помещаются скрываются
scroll у элемента появляются полосы прокрутки
width:ширина
height:высота
Стили курсора.
cursor:default 
move 
help ?
hand 
wait 
text 
crosshair 
…
url(имя.cur)
Псевдоклассы ссылок (стандартные)
a:link вид исходных ссылок
{
стили;
}
a:active вид активных ссылок
{
стили;
}
a:visited вид посещенных ссылок
{
стили;
}
a:hover вид при наведении на ссылку курсора мыши
{
стили;
}
Помните о порядке описания ссылок.
Задавая псевдоклассы для ссылок, делайте это всегда вот в таком порядке: Link, Visited, Hover, Active (запомните этот порядок с помощью слов "LoVe/HAte"). Любые другие комбинации не работают так, как надо. Если требуется использовать также и псевдокласс :focus, то порядок описания будет таким: Link, Visited, Hover, Focus, Active (LVHFA для запоминания чего Мэтт Холи придумал фразу "Lord Vader's Handle Formerly Anakin")
Стили полос прокрутки.
scrollbar-base-color:цвет базовый цвет для полос прокрутки
scrollbar-arrow-color:цвет цвет стрелок на полосе прокрутки
элемент div
Блочный элемент.
Примеры:
<body style=”margin:0px”>
<div style=”width:100%; height:50%; background:blue”></div>
<div style=”width:100%; height:50%; background:yellow”></div>
</body>
<body style=”margin:0px”>
<div style=”width:50%; height:100%; background:green; float:left”></div>
<div style=”width:100%; height:50%; background:yellow”></div>
</body>