Справочник CSS

Используется когда стилю фона необходимо одновременно присвоить несколько значений. Может иметь от одного до пяти значений из атрибутов применяемых к стилю фона.

Атрибуты стиля фона и их возможные значения:

background-attachment - прокрутка фонового изображения.

• fixed - фиксированный фон.
• scroll - подвижный фон (по умолчанию).

background-color - определяет цвет фона элемента.

• #ff0000 - шестнадцатеричное значение цвета RGB.
• red - именное значение цвета.
• RGB(255, 0, 0) - значение цвета RGB.
• transparent - прозрачный фон.

background-image - фоновое изображение элемента.

• url - путь к файлу с изображением.
• none - изображение отсутствует.

background-position - позиция фонового изображения элемента.

по горизонтали:
• left - расположить слева.
• center - расположить по центру.
• right - расположить справа.
  
  по вертикали:
• top - расположить сверху.
• center - расположить по центру.
• bottom - расположить снизу.

background-repeat - регулирует повторение фонового изображения.

• no-repeat - не повторять, показать только одно изображение.
• repeat - повторять (по умолчанию).
• repeat-x - повторять только по горизонтали.
• repeat-y - повторять только по вертикали.

Для более детального ознакомления смотрите каждый атрибут отдельно.

Синтаксис:
Допустимые значения указываются через пробел в любой последовательности.

body{
background: url(fon.jpg) fixed repeat-y
}

Цвет может быть задан следующими методами:

• #ff0000 - шестнадцатеричное значение цвета RGB.
• red - именное значение цвета.
• RGB(255, 0, 0) - значение цвета RGB.
• transparent - прозрачный фон.

Синтаксис:

h1 { background-color: red }
h2 { background-color: #ff0000 }
h3 { background-color: RGB(255, 0, 0) }

Положение рисунка по осям х и у от краёв элемента может задаваться в процентах, пикселях а так же двумя (по вертикали и горизонтали)логическими значениями.

Значения:

по горизонтали:
• left - расположить слева.
• center - расположить по центру.
• right - расположить справа.
  
  по вертикали:
• top - расположить сверху.
• center - расположить по центру.
• bottom - расположить снизу.

Синтаксис:

body {
background-image: url(fon.jpg);
background-repeat: no-repeat;
background-position: center top
}

Атрибуты управляющие бордюром и их возможные значения:

border-style

• none - граница отсутствует (по умолчанию).
• dotted - граница из ряда точек.
• dashed - пунктирная граница.
• solid - сплошная граница
• double - двойная граница
• groove - граница "бороздка"
• ridge - граница "гребень"
• inset - вдавленная граница
• outset - выдавленная граница

border-width - устанавливает ширину границы. border-color - цвет бордюра, может быть задан одним из четырёх вариантов:

• #ff0000 - шестнадцатеричное значение цвета RGB.
• red - именное значение цвета.
• RGB(255, 0, 0) - значение цвета RGB.
• transparent - прозрачный бордюр.

Синтаксис:
Так как атрибут border является базовым то указываются только значения родственных атрибутов, в любом порядке через пробел.

div{
border: RGB(255, 0, 0) 6px double
}

border-bottom-colorr - цвет бордюра, может быть задан одним из четырёх вариантов:

• #ff0000 - шестнадцатеричное значение цвета RGB.
• red - именное значение цвета.
• RGB(255, 0, 0) - значение цвета RGB.
• transparent - прозрачный бордюр.

Синтаксис:

div{
border: red 5px solid;
border-bottom-color: #0000ff
}

Ширина границы может быть задана значением в пикселях, а так же с помощью зарезервированных слов:

• thin - тонкая граница
• medium - средняя толщина границы
• thick - толстая граница

Синтаксис:

div{
border: #00ff00 solid;
border-bottom-width: thin;
border-left-width: medium;
border-right-width: thick;
border-top-width: 12px
}

border-color - цвет бордюра, может быть задан одним из четырёх вариантов:

• #ff0000 - шестнадцатеричное значение цвета RGB.
• red - именное значение цвета.
• RGB(255, 0, 0) - значение цвета RGB.
• transparent - прозрачный бордюр.

Синтаксис:

div{
border-color: #ff0000
}

border-left-colorr - цвет бордюра, может быть задан одним из четырёх вариантов:

• #ff0000 - шестнадцатеричное значение цвета RGB.
• red - именное значение цвета.
• RGB(255, 0, 0) - значение цвета RGB.
• transparent - прозрачный бордюр.

Синтаксис:

div{
border: red 5px solid;
border-left-color: #0000ff
}

Ширина границы может быть задана значением в пикселях, а так же с помощью зарезервированных слов:

• thin - тонкая граница
• medium - средняя толщина границы
• thick - толстая граница

Синтаксис:

div{
border: #00ff00 solid;
border-bottom-width: thin;
border-left-width: medium;
border-right-width: thick;
border-top-width: 12px
}

border-right-colorr - цвет бордюра, может быть задан одним из четырёх вариантов:

• #ff0000 - шестнадцатеричное значение цвета RGB.
• red - именное значение цвета.
• RGB(255, 0, 0) - значение цвета RGB.
• transparent - прозрачный бордюр.

Синтаксис:

div{
border: red 5px solid;
border-right-color: #0000ff
}

Ширина границы может быть задана значением в пикселях, а так же с помощью зарезервированных слов:

• thin - тонкая граница
• medium - средняя толщина границы
• thick - толстая граница

Синтаксис:

div{
border: #00ff00 solid;
border-bottom-width: thin;
border-left-width: medium;
border-right-width: thick;
border-top-width: 12px
}

Атрибуты управляющие бордюром и их возможные значения:
border-style

• none - граница отсутствует (по умолчанию).
• dotted - граница из ряда точек.
• dashed - пунктирная граница.
• solid - сплошная граница
• double - двойная граница
• groove - граница "бороздка"
• ridge - граница "гребень"
• inset - вдавленная граница
• outset - выдавленная граница

border-width - устанавливает ширину границы. border-color - цвет бордюра, может быть задан одним из четырёх вариантов:

• #ff0000 - шестнадцатеричное значение цвета RGB.
• red - именное значение цвета.
• RGB(255, 0, 0) - значение цвета RGB.
• transparent - прозрачный бордюр.

Синтаксис:
Указываются значения родственных атрибутов, в любом порядке через пробел.

div{
border-top: #ff0000 5px double
}

border-top-style может иметь следующие значения:

• none - граница отсутствует (по умолчанию).
• dotted - граница из ряда точек.
• dashed - пунктирная граница.
• solid - сплошная граница
• double - двойная граница
• groove - граница "бороздка"
• ridge - граница "гребень"
• inset - вдавленная граница
• outset - выдавленная граница

Синтаксис:

p{
border: red 5px dotted;
border-top-style: solid
}

Ширина границы может быть задана значением в пикселях, а так же с помощью зарезервированных слов:

• thin - тонкая граница
• medium - средняя толщина границы
• thick - толстая граница

Синтаксис:

div{
border: #00ff00 solid;
border-width: 12px
}

Свойство clear отменяет обтекание элемента заданного с помощью параметра float для указанных сторон.

Значения:

• both - Запрещает обтекание элемента с левой и правой стороны.
• left - Запрещает обтекание элемента с левой стороны.
• right - Запрещает обтекание элемента с правой стороны.
• none - Запрет на обтекание элемента не задается.(по умолчанию)

Синтаксис:

<div style="clear:both; width:100%; background: #c0e4ff;">Верх</div>
    <div style="width:180px; float:left; background: #c5ffa0;">левая колонка</div>
    <div style="width:180px; float:right; background: #c5ffa0">правая колонка</div>
    <div style="margin:0 180px; background: #d0dfa0">центр</div>
    <div style="clear:both; width:100%; background: #c0e4ff;">подвал</div>
</div>

Цвет может быть задан следующими методами:

• #ff0000 - шестнадцатеричное значение цвета RGB.
• red - именное значение цвета.
• RGB(255, 0, 0) - значение цвета RGB.

Синтаксис:

<span style="color: red">Блок 1</span>
<span style="color: #ff0000">Блок 2</span>
<span style="color: RGB(255, 0, 0)">Блок 3</span>

Значения:

• block - Показывает элемент как блочный. Происходит перенос строк вначале и в конце элемента.
• inline - Показывает элемент как встроеный. Элемент(ты) не переносятся на следующую строку.(по умолчанию)
• list-item - Показывает элемент как блок в списке с добавлением маркера списка.
• none - Запрещает показ элемента. Элемент "удаляется" из общего потока, его занимаемое пространство на экране не резервируется.

Синтаксис:

<p style="display: inline; background: #c5ffa0; padding: 5px;">блок 1</p>
<p style="display: inline; background: #c0e4ff; padding: 5px;">блок 2</p>
<p style="display: inline; background: #c5ffa0; padding: 5px;">блок 3</p>

<p style="display: none">Скрытый блок</p>

<p style="display: block; background: #c5ffa0; padding: 5px;">блок 1</p>
<p style="display: block; background: #c0e4ff; padding: 5px;">блок 2</p>
<p style="display: block; background: #c5ffa0; padding: 5px;">блок 3</p>

font - (шрифт), являясь базовым атрибутом может определять одновременно сразу несколько параметров шрифта принимая те или иные значения от следующих атрибутов:

font-style -Стиль шрифта

• normal - обычный (по умолчанию)
• italic - курсив
• oblique - наклонный

font-variant - варианты начертания шрифта:

• normal - нормальный (по умолчанию)
• small-caps - все буквы заглавные и уменьшенные

font-weight - Жирность шрифта

• normal - обычный шрифт
• bold - полужирный шрифт
• bolder - жирный шрифт
• lighter - тонкий шрифт
• 100 - 900 - жирность шрифта выражается в числовом значении от 100 до 900 с шагом 100 (100, 200, 300... 900)

font-size - Размер шрифта в процентах или пикселях и любых других допустимых единицах измерения CSS, а так же:
значения абсолютного размера шрифта:

• xx-small - очень очень маленький
• x-small - очень маленький
• small - маленький
• medium - средний
• large - большой
• x-large - очень большой
• xx-large - очень очень большой

значения относительного размера шрифта:

• larger - больше чем размер шрифта родительского элемента
• smaller - меньше чем размер шрифта родительского элемента

font-family - Указывает одно или несколько имен шрифтов из библиотеки шрифтов. Так же можно указать семейство шрифтов.

• serif - шрифты с засечками
• sans-serif - рубленные шрифты
• cursive - курсивные шрифты
• fantasy - декоративные шрифты
• monospace - моношириные шрифты

Для более детального ознакомления смотрите каждый атрибут отдельно.

Синтаксис:
Допустимые значения указываются через пробел в любой последовательности.

p{
font: italic bold 20px Arial
}

Размер шрифта можно указывать в процентах (относительно размера шрифта элемента родителя), пикселях или любых других допустимых единицах измерения CSS, а так же используя константы:
для абсолютного размера шрифта:

• xx-small - очень очень маленький
• x-small - очень маленький
• small - маленький
• medium - средний
• large - большой
• x-large - очень большой
• xx-large - очень очень большой

для относительного размера шрифта:

• larger - больше чем размер шрифта родительского элемента
• smaller - меньше чем размер шрифта родительского элемента

Синтаксис:

<div style="background-color: #ff0000; font-size: 12pt">
   <p style="font-size: larger">этот шрифт более крупный чем остальные в этом блоке</p>
   <p>этот шрифт использует размер элемента родителя</p>
   <p style="font-size: smaller">а этот шрифт более мелкий чем остальные в этом блоке</p>
</div>
<div style="background-color: #00ff00; font-size: 18px">
   <p style="font-size: 50%">шрифт в два раза меньше</p>
   <p style="font-size: 100%">шрифт, использует размер элемента родителя</p>
   <p style="font-size: 200%">шрифт в два раза больше</p>
</div>
<div style="background-color: #0000ff">
   <p style="font-size: xx-small">очень очень маленький</p>
   <p style="font-size: medium">средний</p>
   <p style="font-size: xx-large">очень очень большой</p>
</div>

font-variant -Может преобразовать все прописные буквы в заглавные, уменьшенного размера.

• normal - Нормальный. (по умолчанию - Аа Бб Вв Гг Дд Ее)
• small-caps - Все буквы заглавные и уменьшенные (Аа Бб Вв Гг Дд Ее)

Синтаксис:
<p style="font-variant: small-caps">Аа Бб Вв Гг Дд Ее</p>

height - Устанавливает высоту блочных элементов не учитывая отступы и границы элементов. Высота элемента может быть задана следующими способами:

• auto - Высота элемента определяется его содержанием. (по умолчанию)
• % - Высота элемента задаётся в процентах от высоты элемента родителя.
• px - Высота элемента задаётся в пикселях или любых других единицах измерения принятых в CSS.

Синтаксис:

<div style="height: 300px; background-color: #ff0000; padding: 5px">
   <div style="background-color: #00ffff; height: 25%">Блок 1</div>
   <div style="background-color: #00ff00; height: 50%">Блок 2</div>
   <div style="background-color: #ffff00; height: 25%">Блок 3</div>
</div>

Если содержание элемента превышает его указанный размер, то в некоторых браузерах элемент автоматически присвоит значение auto, а в некоторых содержание "выползет" за пределы элемента.

letter-spacing определяет расстояние между символами в тексте и может быть задано следующими значениями:

• normal - Нормальное расстояние. (по умолчанию)
• px - Расстояние задаётся в пикселях или любых других единицах измерения принятых в CSS.

Синтаксис:
<p style="letter-spacing: 4px">Расстояние между буковками равно четыре пикселя</p>

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

Атрибуты стиля маркера и их возможные значения:

list-style-type - Вид маркера в списке.

• disc - Диск. (по умолчанию для <ul>)
• circle - Полый круг.
• square - Квадрат.
• decimal - Арабские цифры. (по умолчанию для <ol>)
• lower-roman - Строчные римские цифры.
• lower-alpha - Строчные буквы.
• upper-roman - Заглавные римские цифры.
• upper-alpha - Заглавные буквы.
• none - Маркер отсутствует.

list-style-position - Стиль обтекания маркера текстом.

• outside - Маркер находится в стороне от списка.(по умолчанию)
• inside - Маркер обтекается текстом.

list-style-image - Определяет в качестве маркера графическое изображение.

• none - Отменяет графическое изображение маркера.
• url - Путь к файлу с графическим изображением маркера.

Для более детального ознакомления смотрите каждый атрибут отдельно.

Синтаксис:

<div style="width: 300px; height: 200px; background: #c0e4ff">
<ul style="list-style: upper-roman inside">
<li>пункт, в котором говорится о том, что хорошо бы было сделать, что-то там, где это что-то еще не сделано.
<li>пункт, в котором говорится о том, что неплохо бы было сделать, нечто там, где это нечто еще не сделано.
<li>пункт, в котором говорится о том, что всё-таки можно бы было сделать, ещё кое-что там, где это кое-что еще не сделано.
</ul>
</div>

Значения:

• outside - Маркер находится в стороне от списка.(по умолчанию)
• inside - Маркер обтекается текстом.

Синтаксис:

<div style="width: 300px; height: 200px; background: #c0e4ff">
<ul style="list-style-position:inside">
<li>Пункт, в котором говорится о том, что хорошо бы было сделать, что-то там, где это что-то еще не сделано.
<li>Пункт, в котором говорится о том, что неплохо бы было сделать, нечто там, где это нечто еще не сделано.
<li>Пункт, в котором говорится о том, что всё-таки можно бы было сделать, ещё кое-что там, где это кое-что еще не сделано.
</ul>
</div>

Атрибут margin одновременно устанавливает все отступы вокруг элемента.

Значения:

• auto - Отступы автоматически рассчитываются браузером.
• px - Пиксели или любые другие принятые единицы измерения в CSS.
• % - Отступ выражается в процентах от размера элемента.

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

Четыре варианта указания полей:

• margin: 30px; - Указывается одно значение для отспупов со всех сторон элемента.
• margin: 20px 10px; - Указывается два значения: Первое - одновременно для верхнего и нижнего отступа, второе - одновременно для правого и левого отступа.
• margin: 20px 30px 10px; Указывается три значения: Первое - для верхнего отступа, второе - одновременно для правого и левого отступа, третье - для нижнего отступа.
• margin: 30px 15px 10px 20px; Указывается четыре значения: Первое - для верхнего отступа, второе - для правого отступа, третье - для нижнего отступа, четвертое - для левого отступа.

Синтаксис:

<div style="width: 200px; background-color: #c5ffa0; border: 2px solid #000000">
    <div style=" background-color: #c0e4ff; border: 2px solid #000000; margin: 30px">
        <p align="center">блок</p>
    </div>
</div>
<br>
<div style="width: 200px; background-color: #c5ffa0; border: 2px solid #000000">
    <div style=" background-color: #c0e4ff; border: 2px solid #000000; margin: 50px 20px 10px 40px">
        <p align="center">блок</p>
    </div>
</div>

Значения:

• auto - Отступ автоматически рассчитываются браузером.
• px - Пиксели или любые другие принятые единицы измерения в CSS.
• % - Отступ выражается в процентах от размера элемента.

Синтаксис:

<div style="width: 200px; background-color: #c5ffa0; border: 2px solid #000000; padding: 5px">
    <div style=" background-color: #c0e4ff; border: 2px solid #000000; margin-left: 30px">
        <p align="center">блок</p>
    </div>
</div>

Значения:

• auto - Отступ автоматически рассчитываются браузером.
• px - Пиксели или любые другие принятые единицы измерения в CSS.
• % - Отступ выражается в процентах от размера элемента.

Синтаксис:

<div style="width: 200px; background-color: #c5ffa0; border: 2px solid #000000; padding: 5px">
    <div style=" background-color: #c0e4ff; border: 2px solid #000000; margin-top: 30px">
        <p align="center">блок</p>
    </div>
</div>

Атрибут padding одновременно устанавливает все поля вокруг содержания элемента.

Значения:

• auto - Поля автоматически рассчитываются браузером.
• px - Пиксели или любые другие принятые единицы измерения в CSS.
• % - Поле выражается в процентах от размера элемента.

Поля указанные в пикселях или других единицах измерения, через пробел, могут присуждать отступы от разных границ элемента как показано на примерах:

Четыре варианта указания полей:

• padding: 30px; - Указывается одно значение для всех полей элемента.
• padding: 20px 10px; - Указывается два значения: Первое - одновременно для верхнего и нижнего поля, второе - одновременно для правого и левого поля.
• padding: 20px 30px 10px; Указывается три значения: Первое - для верхнего поля, второе - одновременно для правого и левого поля, третье - для нижнего поля.
• padding: 30px 15px 10px 20px; Указывается четыре значения: Первое - для верхнего поля, второе - для правого поля, третье - для нижнего поля, четвертое - для левого поля.

Синтаксис:

<div style="width: 200px; background-color: #c5ffa0; border: 2px solid #000000; padding: 30px">
   <p align="center" style="background-color: #c0e4ff; border: 2px solid #000000;">содержание</p>
</div>
<br>
<div style="width: 200px; background-color: #c5ffa0; border: 2px solid #000000; padding: 10px 5px 20px 30px">
   <p align="center" style="background-color: #c0e4ff; border: 2px solid #000000;">содержание</p>
</div>

Значения:

• auto - Поле автоматически рассчитываются браузером.
• px - Пиксели или любые другие принятые единицы измерения в CSS.
• % - Поле выражается в процентах от размера элемента.

Синтаксис:

<div style="width: 200px; background-color: #c5ffa0; border: 2px solid #000000; padding-left: 50px">
   <p align="center" style="background-color: #c0e4ff;">содержание</p>
</div>

Значения:

• auto - Поле автоматически рассчитываются браузером.
• px - Пиксели или любые другие принятые единицы измерения в CSS.
• % - Поле выражается в процентах от размера элемента.

Синтаксис:

<div style="width: 200px; background-color: #c5ffa0; border: 2px solid #000000; padding-top: 50px">
   <p align="center" style="background-color: #c0e4ff;">содержание</p>
</div>

При абсолютном позиционировании элемента, right определяет его расположение от правого края окна браузера, а при относительном от правой границы элемента родителя.

Значения:

• auto - Не меняет положения элемента. (по умолчанию)
• px - Расстояние указывается в пикселях или любых других принятых единицах измерения в CSS.
• % - Расстояние выражается в процентах от размера родительского элемента или окна браузера.

Синтаксис:

<div style="position: absolute; right: 150px; padding: 5px; background: #c0e4ff; border: solid 1px black">
    <p>Этот блок расположен в 150-ти пикселях от правого края окна браузера.</p>
</div>

Семейство свойств scrollbar определяет цветовую стилизацию полосы прокрутки. Может быть применено к любому элементу, содержащему полосу прокрутки, в том числе к основному окну браузера (элемент body).

Значения:

• #ff0000 - Шестнадцатеричное значение цвета RGB.
• red - Именное значение цвета.
• RGB(255, 0, 0) - Значение цвета RGB.

Синтаксис:

<div style="scrollbar-arrow-color: #ff0000; overflow: auto; width: 250px; height: 150px; border: solid 2px #dddddd">
<h3 align="center">Диктант</h3>
На террасе, близ конопляника, небезызвестная вдова Агриппина Саввечна, потчевала, отставного коллежского асессора Аполлона Карповича, моллюсками, под аккомпанемент виолончели.
</div>

Семейство свойств scrollbar определяет цветовую стилизацию полосы прокрутки. Может быть применено к любому элементу, содержащему полосу прокрутки, в том числе к основному окну браузера (элемент body).

Значения:

• #ff0000 - Шестнадцатеричное значение цвета RGB.
• red - Именное значение цвета.
• RGB(255, 0, 0) - Значение цвета RGB.

Синтаксис:

<div style="scrollbar-darkshadow-color: red; overflow: auto; width: 250px; height: 150px; border: solid 2px #dddddd">
<h3 align="center">Диктант</h3>
На террасе, близ конопляника, небезызвестная вдова Агриппина Саввечна, потчевала, отставного коллежского асессора Аполлона Карповича, моллюсками, под аккомпанемент виолончели.
</div>

Семейство свойств scrollbar определяет цветовую стилизацию полосы прокрутки. Может быть применено к любому элементу, содержащему полосу прокрутки, в том числе к основному окну браузера (элемент body).

Значения:

• #ff0000 - Шестнадцатеричное значение цвета RGB.
• red - Именное значение цвета.
• RGB(255, 0, 0) - Значение цвета RGB.

Синтаксис:

<div style="scrollbar-highlight-color: red; overflow: auto; width: 250px; height: 150px; border: solid 2px #dddddd">
<h3 align="center">Диктант</h3>
На террасе, близ конопляника, небезызвестная вдова Агриппина Саввечна, потчевала, отставного коллежского асессора Аполлона Карповича, моллюсками, под аккомпанемент виолончели.
</div>

Семейство свойств scrollbar определяет цветовую стилизацию полосы прокрутки. Может быть применено к любому элементу, содержащему полосу прокрутки, в том числе к основному окну браузера (элемент body).

Значения:

• #ff0000 - Шестнадцатеричное значение цвета RGB.
• red - Именное значение цвета.
• RGB(255, 0, 0) - Значение цвета RGB.

Синтаксис:

<div style="scrollbar-track-color: red; overflow: auto; width: 220px; height: 120px; border: solid 2px #dddddd">
<h3 align="center">Диктант</h3>
На террасе, близ конопляника, небезызвестная вдова Агриппина Саввечна, потчевала, отставного коллежского асессора Аполлона Карповича, моллюсками, под аккомпанемент виолончели.
</div>

Содержание в элементе может быть выровнено по левому, правому краю элемента, его центру, а также по обоим краям документа.

Значения:

• left - по левому краю элемента (по умолчанию).
• rigth - по правому краю элемента.
• center - по центру элемента.
• justify - по обоим краям элемента.

Синтаксис:

<p style="text-align: center">содержание</p>

text-indent - задаёт отступ первой строки в текстовом блоке с левой стороны, проще говоря делает "красную строку".

Отступ может быть задан:

• % - В процентах от ширины текстового блока.
• px - В пикселях или любых других единицах измерения принятых в CSS.

Синтаксис:

<div style="width: 400px; padding: 5px; border: RGB(255, 0, 0) 3px double">
    <p style="text-indent: 40px"> Осмысливая мысли в смысле смысла, есть смысл помыслить о немыслимом! </p>
    <p style="text-indent: 10%"> Мало кто знает, как много надо знать, для того что бы знать, как мало мы знаем. </p>
</div>

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

Значения:

• auto - Не меняет положения элемента. (по умолчанию)
• px - Расстояние указывается в пикселях или любых других принятых единицах измерения в CSS.
• % - Расстояние выражается в процентах от размера родительского элемента или окна браузера.

Синтаксис:

<div style="position: absolute; top: 150px; padding: 5px; background: #c0e4ff; border: solid 1px black">
    <p>Этот блок расположен в 150-ти пикселях от верхнего края окна браузера.</p>
</div>

Значения:

• inherit - Элемент отображается так как указанно в элементе родителе.
• visible - Отображает элемент.(по умолчанию).
• hidden - Скрывает элемент. Однако в отличии от display: none оставляет за элементом площадь которую он занимает. Проще говоря если display: none "удаляет" элемент hidden делает его "прозрачным".
• collapse - Скрывает колонки и строки таблицы идентично display: none, Если свойство применяется к другим элементам не имеющим отношения к таблицам то результат будет таким же, как hidden.

Синтаксис:

<div style="visibility: visible;">
    <span style="visibility: inherit; background: #c5ffa0; padding: 5px;">блок 1</span>
    <span style="visibility: hidden; background: #c0e4ff; padding: 5px;">блок 2</span>
    <span style="visibility: inherit; background: #c5ffa0; padding: 5px;">блок 3</span>
</div>

width - Устанавливает ширину блочных элементов не учитывая отступы и границы элементов. Ширина элемента может быть задана следующими способами:

• auto - Ширина элемента определяется его содержанием. (по умолчанию)
• % - Ширина элемента задаётся в процентах от высоты элемента родителя.
• px - Ширина элемента задаётся в пикселях или любых других единицах измерения принятых в CSS.

Синтаксис:

<div style="width: 600px; background-color: #ff0000; padding: 5px">
   <div style="background-color: #00ffff; float:left; width: 25%">Блок 1</div>
   <div style="background-color: #00ff00; float:left; width: 50%">Блок 2</div>
   <div style="background-color: #ffff00; float:left; width: 25%">Блок 3</div>
</div>

Если содержание элемента превышает его указанный размер, то в некоторых браузерах элемент автоматически присвоит значение auto, а в некоторых содержание "выползет" за пределы элемента.

CSS дает возможность с помощью позиционирования накладывать одни элементы на другие тем самым, имитируя трёхмерность изображения. Свойство z-index регулирует очерёдность данных слоёв в глубину экрана.

Значения:

• auto - Элементы накладываются друг на друга в том порядке каком они указаны в коде HTML.
• целое число - Чем выше данное значение тем более высокую позицию занимает элемент по отношению к тем элементов, значение которых ниже.

Синтаксис:

<html>
<body>
   <div align="center" style="position: absolute; z-index:5; width: 350px; height: 100px; top: 120px; left: 0px; color: #0000ff; font-size:100px">z-index</div>
   <div style="position: absolute; z-index:3; width: 150px; height: 150px; top: 0px; left: 100px; background-color: #ff00ff">&nbsp;</div>
   <div style="position: absolute; z-index:4; width: 150px; height: 150px; top: 100px; left: 0px; background-color: #ff0000">&nbsp;</div>
   <div style="position: absolute; z-index:2; width: 150px; height: 150px; top: 100px; left: 200px; background-color: #ffff00">&nbsp;</div>
   <div style="position: absolute; z-index:1; width: 150px; height: 150px; top: 200px; left: 100px; background-color: #00ff00">&nbsp;</div>
</body>
</html>