caption-side
|
Internet Explorer |
|
|
|
Netscape |
|
|
Opera |
|
|
|
Safari |
|
|
|
Firefox |
|
|||
6.0 |
7.0 |
|
8.0 |
8.0 |
9.0 |
8.0 |
9.2 |
9.5 |
1.3 |
2.0 |
3.1 |
1.5 |
2.0 |
3.0 |
||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Нет |
|
Нет |
|
Да |
|
Да |
|
Да |
|
Да |
Да |
Да |
|
Да |
Да |
Да |
|
Да |
Да |
Да |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Краткая информация
CSS
Значение по умолчанию
Наследуется
Применяется
Аналог HTML
Ссылка на спецификацию
CSS2, CSS2.1
top
Да
К <CAPTION> или ко всем элементам, у которых значение display установлено ка table-caption.
<caption align="top | bottom">
http://www.w3.org/TR/CSS21/tables.html#propdef-caption-side
Описание
Определяет положение заголовка таблицы, который задается с помощью тега <CAPTION>, относительно
самой таблицы. Свойство caption-side выводит заголовок до или после таблицы, а выравнивание текста по правому или левому краю устанавливается через свойство text-align. Браузер Firefox также поддерживает расположение заголовка слева или справа от таблицы, но эти значения не входят в спецификацию CSS.
Синтаксис
caption-side: top | bottom
Значения
top |
Располагает заголовок по верхнему краю таблицы. |
bottom |
Заголовок располагается под таблицей. |
right |
Заголовок размещается справа от таблицы. Это значение работает только в браузерах |
|
Firefox. |
left |
Заголовок размещается слева от таблицы. Это значение работает только в браузерахFirefox. |
Пример
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Расположение заголовка</title>
<style type="text/css"> table {
width: 350px; /* Ширина таблицы */
border-collapse: collapse; /* Убираем двойную рамку между ячейками */
}
td {
border: 1px solid green; /* Параметры границы */ padding: 5px; /* Поля в ячейке */
}
caption {
caption-side: bottom; /* Заголовок под таблицей */
}
</style>
</head>
<body>
<table>
<caption>Расклад карт</caption>
<tr> <td> </td> <td>♠</td> <td>♣</td> <td>♥</td> <td>♦</td>
</tr>
<tr> <td>Чебурашка</td> <td>6</td><td>3</td> <td>1</td><td>3</td>
</tr>
<tr>
<td>Крокодил Гена </td> <td>1</td><td>5</td> <td>5</td><td>2</td>
</tr>
<tr> <td>Шапокляк</td> <td>3</td> <td>4</td> <td>6</td> <td>0</td>
</tr>
<tr>
<td>Крыса Лариса </td> <td>3</td>
<td>1</td> <td>1</td> <td>8</td>
</tr>
</table>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Результат использования caption-side
Объектная модель
[window.]document.getElementById("elementID").style.captionSide
clear
|
Internet Explorer |
|
|
|
Netscape |
|
|
Opera |
|
|
|
Safari |
|
|
|
Firefox |
|
||
6.0 |
7.0 |
8.0 |
8.0 |
9.0 |
8.0 |
9.2 |
9.5 |
1.3 |
2.0 |
3.1 |
1.5 |
2.0 |
3.0 |
||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Ошибки |
|
Ошибки |
Да |
|
Да |
|
Да |
|
Да |
Да |
Да |
|
Да |
Да |
Да |
|
Да |
Да |
Да |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Краткая информация
CSS |
CSS1 |
|
none |
Значение по умолчанию |
|
|
Нет |
Наследуется |
|
|
К блочным и плавающим элементам |
Применяется |
|
|
<br clear=none | left | right | all> |
Аналог HTML |
|
|
http://www.w3.org/TR/CSS21/visuren.html#propdef-clear |
Ссылка на спецификацию |
|
|
|
Описание
Устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если задано обтекание элемента с помощью свойства float, то clear отменяет его действие для указанных сторон.
Синтаксис
clear: none | left | right | both | inherit
Значения
none |
Отменяет действие свойства clear, при этом обтекание элемента происходит, как задано с |
|
помощью свойства float или другихнастроек. |
both |
Отменяет обтекание элемента одновременно с правого и левого края. Это значение |
|
рекомендуется устанавливать, когда требуется снять обтекание элемента, но неизвестно |
|
точно с какой стороны. |
left |
Отменяет обтекание с левого края элемента. При этом все другие элементы на этой стороне |
|
будут опущены вниз, и располагаться под текущим элементом. |
right |
Отменяет обтекание с правой стороны элемента. |
inherit |
Устанавливает значение родителя. |
Пример
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>clear</title>
<style type="text/css"> #layer {
float: left; /* Обтекание блока по правому краю */ background: #fd0; /* Цвет фона */
border: 1px solid black; /* Параметры рамки */ padding: 10px; /* Поля вокруг текста */ width: 40%; /* Ширина блока */
}
</style>
</head>
<body>
<div id="layer">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>
<div style="clear: left"></div>
<p>Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</p>
</body>
</html>
Результат данного примера показан ни рис. 1.
Рис. 1. Применение свойства clear
Объектная модель
[window.]document.getElementById("elementID").style.clear
Браузеры
Вбраузере Internet Explorer 6 наблюдается ошибка под названием «эффект ку-ку», когда элементы c clear, соприкасающиеся с плавающими элементами (у которых задано свойство float) могут исчезать.
Вбраузере Internet Explorer 7 свойство clear не действует для элементов, у которых одновременно задано float со значением, не совпадающим с clear.
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.