- •Синтаксис
- •Селектор класса (class)
- •Селектор идентификатора (id)
- •Комментарии css
- •Примеры использования css
- •Подключение таблицы стилей
- •Несколько таблиц стилей
- •Примеры
- •Параметры фона в css: подробное рассмотрение
- •Параметр 'background'
- •Параметр 'background-attachment'
- •Параметр 'background-color'
- •Параметр 'background-image'
- •Параметр 'background-position'
- •Параметр 'background-repeat'
- •Примеры
- •Параметр 'text-align'
- •Параметр 'text-decoration'
- •Параметр 'text-indent'
- •Параметр 'text-transform'
- •Параметр 'white-space'
- •Параметр 'word-spacing'
- •Параметры границы в css
- •Границы в css: подробное рассмотрение Параметр 'border'
- •Параметр 'border-bottom'
- •Параметр 'border-bottom-color'
- •Параметр 'border-bottom-style'
- •Параметр 'border-bottom-width'
- •Параметр 'border-color'
- •Параметр 'border-left'
- •Параметр 'border-left-color'
- •Параметр 'border-left-style'
- •Параметр 'border-left-width'
- •Параметр 'border-right'
- •Параметр 'border-right-color'
- •Параметр 'border-right-style'
- •Параметр 'border-right-width'
- •Параметр 'border-style'
- •Параметр 'border-top'
- •Параметр 'border-top-color'
- •Параметр 'border-top-style'
- •Параметр 'border-top-width'
- •Параметр 'border-width'
- •Примеры
- •Отступы в css
- •Отступы в css: подробное рассмотрение Параметр 'margin'
- •Параметр 'margin-bottom'
- •Параметр 'margin-left'
- •Параметр 'margin-right'
- •Параметр 'margin-top'
- •Примеры
- •Параметры полей в css
- •Поля в css: подробное рассмотрение Параметр 'padding'
- •Параметр 'padding-bottom'
- •Параметр 'padding-left'
- •Параметр 'padding-right'
- •Параметр 'padding-top'
- •Примеры:
- •Параметры списков в css
- •Списки в css: подробное рассмотрение Параметр 'list-style'
- •Параметр 'list-style-image'
- •Параметр 'list-style-position'
- •Параметр 'list-style-type'
- •Пример:
- •Параметры размеров элементов css
- •Размеры элементов в css: подробное рассмотрение Параметр 'height'
- •Параметр 'line-height'
- •Параметр 'max-height'
- •Параметр 'max-width'
- •Параметры форматирования в css: подробное рассмотрение Параметр 'clear'
- •Параметр 'cursor'
- •Параметр 'display'
- •Свойство 'float'
- •Параметр 'position'
- •Параметр 'visibility'
- •Примеры:
- •Параметры позиционирования в css
- •Параметры позиционирования в css: подробное рассмотрение Параметр 'bottom'
- •Параметр 'clip'
- •Параметр 'left'
- •Параметр 'overflow'
- •Параметр 'position'
- •Параметр 'right'
- •Параметр 'top'
- •Параметр 'vertical-align'
- •Параметр 'z-index'
Параметры позиционирования в css
Параметры позиционирования в CSS позволяют:
определить левую, правую, верхнюю и нижнюю позиции элемента:
задать форму элемента:
поместить элемент позади другого:
определить, что будет происходить, когда содержимое элемента слишком большое для размещения в указанной области.
Данные параметры поддерживаются следующими браузерами: Internet Explorer, Firefox, Netscape.
Параметр |
Описание |
Значения |
IE |
F |
N |
W3C |
bottom |
Задает, насколько далеко нижний край элемента находится выше/ниже нижнего края родительского элемента |
auto |
5 |
1 |
6 |
2 |
% |
||||||
length |
||||||
clip |
Задает форму элемента. Элемент вырезается по форме и выводится. |
shape |
4 |
1 |
6 |
2 |
auto |
||||||
left |
Задает, насколько далеко левый край элемента находится правее/левее левого края родительского элемента |
auto |
4 |
1 |
4 |
2 |
% |
||||||
length |
||||||
overflow |
Определяет, что происходит, когда содержимое элемента переполняет его область |
visible |
4 |
1 |
6 |
2 |
hidden |
||||||
scroll |
||||||
auto |
||||||
position |
Помещает элемент в статическое, относительное, абсолютное или фиксированное положение |
static |
4 |
1 |
4 |
2 |
relative |
||||||
absolute |
||||||
fixed |
||||||
right |
Задает, насколько далеко правый край элемента находится левее/правее правого края родительского элемента |
auto |
5 |
1 |
6 |
2 |
% |
||||||
length |
||||||
top |
Задает, насколько далеко верхний край элемента находится выше/ниже верхнего края родительского элемента |
auto |
4 |
1 |
4 |
2 |
% |
||||||
length |
||||||
vertical-align |
Задает выравнивание элемента по вертикали |
baseline |
4 |
1 |
4 |
1 |
sub |
||||||
super |
||||||
top |
||||||
text-top |
||||||
middle |
||||||
bottom |
||||||
text-bottom |
||||||
length |
||||||
% |
||||||
z-index |
Задает порядковый номер элемента в стеке |
auto |
4 |
1 |
6 |
2 |
number |
Параметры позиционирования в css: подробное рассмотрение Параметр 'bottom'
Данный параметр определяет нижний край элемента.
Примечание:Если параметр "position" имеет значение "static", параметр "bottom" не оказывает влияния.
Наследование: нет.
Примеры:
В примере показано, как задать нижний край элемента pre на 50 px выше нижнего края окна:
pre
{
position: absolute;
bottom: 50px
}
В примере показано, как задать нижний край элемента pre на 50 px ниже нижнего края окна:
pre
{
position: absolute;
bottom: -50px
}
Может принимать следующие значения:
Значение |
Описание |
auto |
Позволяет браузеру самостоятельно вычислить нижнюю позицию |
% |
Задает нижнюю позицию в % от положения нижнего края окна |
length |
Задает нижнюю позицию в px, см, и т.д. от нижнего края окна. Допускаются отрицательные значения. |