Данные параметры позволяют:
- управлять выводом элемента;
- задавать положение изображения в другом элементе;
- позиционировать элемент относительно его обычного положения;
- позиционировать элемент с помощью абсолютного значения;
- управлять видимостью элемента.
Данные параметры поддерживают следующие браузеры:Internet Explorer, Firefox, Netscape.
| Параметр |
Описание |
Значения |
IE |
F |
N |
W3C |
| clear |
Задает стороны элемента, на которых не допускаются другие перемещаемые элементы |
left |
4 |
1 |
4 |
1 |
| right |
| both |
| none |
| cursor |
Задает тип выводимого курсора |
url |
4 |
1 |
6 |
2 |
| auto |
| crosshair |
| default |
| pointer |
| move |
| e-resize |
| ne-resize |
| nw-resize |
| n-resize |
| se-resize |
| sw-resize |
| s-resize |
| w-resize |
| text |
| wait |
| help |
| display |
Определяет, как в документе будет показан элемент |
none |
4 |
1 |
4 |
1 |
| inline |
| block |
| list-item |
| run-in |
| compact |
| marker |
| table |
| inline-table |
| table-row-group |
| table-header-group |
| table-footer-group |
| table-row |
| table-column-group |
| table-column |
| table-cell |
| table-caption |
| float |
Определяет, где в другом элементе появится изображение или текст |
left |
4 |
1 |
4 |
1 |
| right |
| none |
| position |
Задает статическое, относительное, абсолютное или фиксированное положение элемента |
static |
4 |
1 |
4 |
2 |
| relative |
| absolute |
| fixed |
| visibility |
Определяет, будет ли элемент видим или невидим |
visible |
4 |
1 |
6 |
2 |
| hidden |
| collapse |
Параметры форматирования в CSS: подробное рассмотрение
Параметр 'clear'
Данный параметр задает стороны элемента, где не допускаются другие плавающие элементы. Плавающие элементы - изображения и текстовые элементы, которые появляются в другом элементе.
Примечание: При использовании с параметром "float" не всегда работает как ожидается.
Наследование: нет.
Пример:
div
{
clear: both
}
div
{
clear: left
}
Может принимать следующие значения:
| Значение |
Описание |
| left |
Плавающие элементы не допускаются слева |
| right |
Плавающие элементы не допускаются справа |
| both |
Плавающие элементы не допускаются ни справа, ни слева |
| none |
Плавающие элементы допускаются с любой стороны |
Параметр 'cursor'
Данный параметр определяет тип курсора, который будет выводиться при указании на элемент.
Наследование: да.
Примеры:
pre
{
cursor: pointer
}
div
{
cursor : url("general.cur"), url("other.cur"), text;
}
Может принимать следующие значения:
| Значение |
Описание |
| url |
url специального курсора, который будет использоваться
Примечание: Всегда определяйте базовый курсор в конце списка, который будет использоваться, если ни один из определенных url курсоров невозможно использовать.
|
| default |
Курсор по умолчанию (часто стрелка) |
| auto |
Курсор задает браузер |
| crosshair |
Курсор изображается как перекрестие |
| pointer |
Курсор изображается как указатель (рука), который обозначает ссылку |
| move |
Курсор указывает объект, который можно переместить |
| e-resize |
Курсор, определяющий перемещение края бокса вправо (east) |
| ne-resize |
Курсор, определяющий перемещение края бокса вверх и вправо (north/east) |
| nw-resize |
Курсор, определяющий перемещение края бокса вверх и влево (north/west) |
| n-resize |
Курсор, определяющий перемещение края бокса вверх (north) |
| se-resize |
Курсор, определяющий перемещение края бокса вниз и вправо (south/east) |
| sw-resize |
Курсор, определяющий перемещение края бокса вниз и влево (south/west) |
| s-resize |
Курсор, определяющий перемещение края бокса вниз (south) |
| w-resize |
Курсор, определяющий перемещение края бокса влево (west) |
| text |
Курсор используемый для текста |
| wait |
Курсор, указывающий на занятость программы (часто песочные часы) |
| help |
Курсор, указывающий, что имеется справочная информация (часто знак вопроса) |
Примечания для браузеров:
Internet Explorer:
Чтобы вывести изображение руки, можно использовать нестандартное значение hand следующим образом: {cursor: hand}
Параметр 'display'
Данный параметр определяет, как в документе будет показан элемент.
Наследование: нет.
Примеры:
pre
{
display: block
}
strong
{
display: inline
}
img
{
display: none
}
h1, h3
{
display: no
}
Может принимать следующие значения:
| Значение |
Описание |
| none |
Элемент не будет выводиться |
| block |
Элемент будет выводиться как элемент уровня блока, с разрывом строки перед и после элемента |
| inline |
Элемент будет выводиться как элемент строки, без разрыва строки перед или после элемента. |
| list-item |
Элемент будет выводиться как список |
| run-in |
Элемент будет выводиться на уровне блока или как внутристрочный элемент, в зависимости от контекста. |
| compact |
Элемент будет выводиться на уровне блока или как внутристрочный элемент, в зависимости от контекста. |
| marker |
|
| table |
Элемент будет выведен как таблица блока (как <table> ), с разрывом строки перед и после таблицы |
| inline-table |
Элемент будет выведен как внутристрочная таблица (как <table> ), без разрыва строки перед или после таблицы. |
| table-row-group |
Элемент выводится как группа из одной или нескольких строк (как <tbody> ) |
| table-header-group |
Элемент выводится как группа из одной или нескольких строк (как <thead> ) |
| table-footer-group |
Элемент выводится как группа из одной или нескольких строк (как <tfoot> ) |
| table-row |
Элемент выводится как строка таблицы (как <tr> ) |
| table-column-group |
Элемент выводится как группа из одного или нескольких столбцов (как <colgroup> ) |
| table-column |
Элемент выводится как столбец ячеек (как <col> ) |
| table-cell |
Элемент выводится как ячейка таблицы (как <td> и <th> ) |
| table-caption |
Элемент выводится как заголовок таблицы (как <caption> ) |
Свойство 'float'
Данное свойство определяет, где появится в другом элементе изображение или текст.
Примечания:
- Если в строке слишком мало места для плавающего элемента, он переносится на следующую строку и продолжается пока строка имеет достаточно места.
- Перед float должны идти - содержание, фон, и границы внутристрочных элементов, содержание блочного элемента, после - фон и границы блочного элемента.
Наследование: нет.
Пример:
Может принимать следующие значения:
| Значение |
Описание |
| left |
Изображение или текст смещается в родительском элементе влево. |
| right |
Изображение или текст смещается в родительском элементе вправо. |
| none |
Изображение или текст будут выводиться в том месте, где они встретились в тексте |
Параметр 'position'
Данный параметр помещает элемент в статическое, относительное, абсолютное или фиксированное положение.
Наследование: нет.
Пример:
Может принимать следующие значения:
| Значение |
Описание |
| static |
Элемент помещается в обычное положение (согласно нормальному потоку). Со значением "static" не используются параметры "left" и "top". |
| relative |
Смещает элемент относительно его нормального положения, поэтому "left:20" добавляет 20 пикселей к позиции LEFT элемента. |
| absolute |
С помощью значения "absolute" элемент можно поместить в любом месте страницы. Позиция элемента определяется с помощью параметров "left", "top", "right", и "bottom" |
| fixed |
|
Параметр 'visibility'
Этот параметр определяет видимость или невидимость элемента.
Примечания:
- Невидимые элементы занимают место на странице. Для того, чтобы создать невидимые элементы, которые не занимают место необходимо использовать параметр "display".
- Этот параметр можно использовать со сценариями для создания Динамического HTML.
Наследование: нет.
Примеры:
pre
{
visibility: hidden
}
Может принимать следующие значения:
| Значение |
Описание |
| visible |
Элемент видим |
| hidden |
Элемент невидим |
| collapse |
При использовании в табличных элементах это значение удаляет строку или столбец, но не влияет на компоновку таблицы. Пространство, занимаемое строкой или столбцом, будет доступно для другого содержимого. Если этот параметр используется с другими элементами, он действует как "hidden" |
|
Посмотреть
порно видео в онлайне »