Далее на странице...
На данный момент, этот шаг является последним этапом изучения технологии CSS.
Здесь мы рассмотрим еще несколько свойств CSS, которые не были отнесены ни к одной из пройденных ранее тем.
Заголовок таблицы в CSS
Свойство caption-side задает положение заголовка таблицы. Оно применимо к тегу .
В основном используются два значения свойства caption-side: top и bottom, при которых заголовок располагается над и под таблицей соответственно.
<table border="1" width="500px" align="center">
<caption style="caption-side:top;"> Заголовок расположен над таблицей </caption>
<tr>
<td> Спасибо, что посетили мой сайт! </td>
<td> Удачи Вам! </td>
</tr>
</table>
<table border="1" width="500px" align="center">
<caption style="caption-side:bottom;"> Заголовок расположен под таблицей </caption>
<tr>
<td> Я рад! </td>
<td> Если смог Вам помочь! </td>
</tr>
</table>
Значения left и right свойства caption-side, при которых заголовок располагается соответственно слева и справа от таблицы, поддерживаются только браузером Mozilla Firefox.
Свойство не поддерживается Internet Explorer до версии 8.0.
Вертикальное выравнивание в CSS
Свойство vertical-align задает вертикальное выравнивание элемента.
При использовании свойства vertical-align для выравнивании элемента относительно текста или относительно родительского элемента, оно может принимать следующие значения baseline, middle, text-top, text-bottom, top и bottom. А также значения super и sub.
Например при значении middle центр элемента по вертикали выравнивается по базовой линии родительского элемента + половина высоты родительского элемента.
<p style="font-size: 36px; text-decoration: line-through;">
Текст <img src="img/peng_64.gif" style="vertical-align:middle;">
</p>
Текст
Пояснение к примеру: для тега <img> (изображения пингвина) применили свойство vertical-align со значением middle. Родительским элементом является абзац - тег , то есть текст. Центр пингвина выравнивается по центру текста: по базовой линии текста + половина его высоты.
Базовая линия текста - это воображаемая линия, проходящая по нижнему краю символов.
Верхний и нижний индекс в CSS
Значения super и sub свойства vertical-align используются для написания верхнего и нижнего индексов. При этом размер шрифта не меняется.
<p style="font-size: 36px;">
2 <span style="vertical-align: super;"> 2 </span> =4 и
H <span style="vertical-align: sub;"> 2 </span> O
</p>
22=4 и H2O
Числовые значения свойства vertical-align
Кроме этого, свойство vertical-align принимает числовые значения в единицах допустимых в CSS (подробнее здесь...) как положительные, так и отрицательные. В первом случае смещение элемента направлено вверх, а во втором вниз относительно базовой линии родительского элемента.
<p style="font-size: 22px; color:#0099FF;">
Все
<span style="vertical-align: 5px;"> Выше! </span>
<span style="vertical-align: 10px;"> И Выше! </span>
<span style="vertical-align: 15px;"> И Выше! </span>
</p>
Все Выше! И Выше! И Выше!
Вертикальное выравнивание в ячейках таблицы
И, наконец, свойство vertical-align используется для выравнивания элементов по вертикали в ячейках таблицы. При этом оно может принимать следующие значения: baseline, middle, top и bottom.
Подробно с подобным использованием свойства vertical-align Вы можете ознакомиться на странице с его описанием. А сейчас приведем простой пример.
<table border="1" width="500px">
<tr style="font-size:36px; height:100px;">
<td style="vertical-align:baseline;"> baseline </td>
<td style="vertical-align:middle;"> middle </td>
</tr>
<tr style="font-size:36px; height:100px;">
<td style="vertical-align:bottom;"> bottom </td>
<td style="vertical-align:top;"> top </td>
</tr>
</table>
