Позволяет браузеру самостоятельно вычислить нижнюю позицию
%
Задает нижнюю позицию в % от положения нижнего края окна
length
Задает нижнюю позицию в px, см, и т.д. от нижнего края окна. Допускаются отрицательные значения.
Параметр 'clip'
Данный параметр задает форму элемента.
В ситуации если, например, изображение больше того элемента в котором располагается, параметр позволяет определить размеры изображения, обрезать по форме и вывести.
Примечание: Этот параметр нельзя использовать для элементов с параметром "overflow", заданным как "visible".
Задает форму элемента. Допустимым значением формы является: rect (top, right, bottom, left)
auto
Браузер задает форму элемента
Параметр 'left'
Данный параметр определяет левый край элемента.
Примечание: Если параметр "position" имеет значение "static", параметр "left" не оказывает влияния.
Наследование: нет.
Примеры:
В примере показано, как задать левый край элемента pre в 50 px справа от левого края окна:
2. pre3. {4. position: absolute;5. left: 50px}
В примере показано, как задать левый край элемента pre в 50 px слева от левого края окна:
7. pre8. {9. position: absolute;10. left: -50px}
Может принимать следующие значения:
Значение
Описание
auto
Позволяет браузеру вычислить левую позицию.
%
Задает левую позицию в % от значения для левого края окна.
length
Задает левую позицию в px, см и т.д. от левого края окна. Допускаются отрицательные значения.
Параметр 'overflow'
Данный параметр определяет, что происходит, когда содержимое элемента переполняет его область.
Наследование: нет.
Пример:
div {overflow: auto}
Может принимать следующие значения:
Значение
Описание
visible
Содержимое не обрезается. Оно выводится за пределами элемента.
hidden
Содержимое обрезается, но браузер не выводит полосу прокрутки для просмотра всего содержимого.
scroll
Содержимое обрезается, но браузер выводит полосу прокрутки для просмотра всего содержимого.
auto
Если содержимое обрезается, то браузер должен вывести полосу прокрутки для просмотра всего содержимого.
Параметр 'position'
Данный параметр помещает элемент в статическое, относительное, абсолютное или фиксированное положение.
Наследование: нет.
Пример:
p{position:static;}
Может принимать следующие значения:
Значение
Описание
static
Элемент помещается в обычное положение (согласно нормальному потоку). Для значения "static" параметры "left" и "top" не используются.
relative
Перемещает элемент относительно нормального положения, так что "left:20" добавляет 20 пикселей к позиции LEFT элемента
absolute
С помощью значения "absolute" элемент можно разместить в любом месте страницы. Позиция элемента определяется параметрами "left", "top", "right", и "bottom"
fixed
Параметр 'right'
Данный параметр определяет правый край элемента.
Примечание: Если параметр "position" имеет значение "static", то параметр "right" не оказывает влияния.
Наследование: нет.
Примеры:
В примере показано, как задать правый край элемента pre на 50 px влево от правого края окна:
2. pre3. {4. position: absolute;5. right: 50px}
В примере показано, как задать правое поле элемента pre на 50 px вправо от правого края окна:
7. pre8. {9. position: absolute;10. right: -50px}
Может принимать следующие значения:
Значение
Описание
auto
Позволяет браузеру вычислить правую позицию.
%
Задает правую позицию в % от значения правого края окна.
length
Задает правую позицию в px, см, и т.д. от правого края окна. Допускаются отрицательные значения.
Параметр 'top'
Данный параметр определяет верхний край элемента.
Примечание: Если параметр "position" имеет значение "static", то параметр "top" не оказывает влияния.
Наследование: нет.
Примеры:
В примере показано, как задать верхний край элемента pre на 50 px ниже верхнего края окна:
2. pre3. {4. position: absolute;5. top: 50px}
В примере показано, как задать верхний край элемента pre на 50 px выше верхнего края окна:
7. pre8. {9. position: absolute;10. top: -50px}
Может принимать следующие значения:
Значение
Описание
auto
Позволяет браузеру вычислить верхнюю позицию.
%
Задает верхнюю позицию в % от значения верхнего края окна.
length
Задает верхнюю позицию в px, см, и т.д. от верхнего края окна. Допускаются отрицательные значения.
Параметр 'vertical-align'
Данный параметр задает вертикальное выравнивание элемента.
Наследование: нет.
Примеры:
img{ vertical-align: baseline}
Может принимать следующие значения:
Значение
Описание
baseline
Элемент размещается на базовой строке родительского элемента.
sub
Выравнивает элемент как нижний индекс
super
Выраванивает элемент как верхний индекс
top
Вершина элемента выравнивается с вершиной самого высокого элемента в строке
text-top
Вершина элемента выравнивается с вершиной шрифта родительского элемента
middle
Элемент помещается в середине родительского элемента
bottom
Нижняя часть элемента выравнивается с самым нижним элементом в строке
text-bottom
Нижняя часть элемента выравнивается с минимальной нижней точкой родительского элемента
length
%
Выравнивает элемент в % от значения параметра "line-height". Допускаются отрицательные значения.
Параметр 'z-index'
Данный параметр задает порядковый номер элемента в стеке. Элемент с большим порядковым номером стека всегда находится перед элементом с меньшим порядковым номером стека.
Примечания:
Элементы могут иметь отрицательные порядковые номера стека.
Z-index работает только с теми элементами, которые были позиционированы не как static (например, position:absolute; )!
Наследование: нет.
Пример:
img{position:absolute z-index: 1}
Может принимать следующие значения:
Значение
Описание
auto
Порядковый номер элемента в стеке равен номеру родительского элемента
number
Задает порядковый номер элемента в стеке
Лекция 13. Псевдо-классы CSS
Псевдо-классы используются для создания специальных эффектов для некоторых элементов.
Примеры:
В примере показано, как выделить гиперссылку в документе цветом.
2. <html>
3. <head>
4.
5. <style type="text/css">
6. a:link {color: #808080}
7. a:visited {color: #FFFF00}
8. a:hover {color: #00FF00}
9. a:active {color: #0000FF}
10. </style>
11.
12. </head>
13.
14. <body>
15.
16. <p><a href="index.php">This is a link</a></p>
17. <ol><b>Примечание:</b>
18. <li><i>a:hover ДОЛЖЕН следовать в определении CSS после <b>a:link</b> и
19. <b>a: visited!!</b></i></li>
20. <li><i>a:active ДОЛЖЕН следовать в определении CSS после <b>a:hover!!</b></i></li>
21. </ol>
22.
23. </body>
</html>
В примере показано, как определить для гиперссылки другой стиль.
