«Единственный способ творить великие дела – это любить то, что ты делаешь»
CSS



На данный момент, этот шаг является последним этапом изучения технологии CSS.

Здесь мы рассмотрим еще несколько свойств CSS, которые не были отнесены ни к одной из пройденных ранее тем.



Заголовок таблицы в CSS

Свойство caption-side задает положение заголовка таблицы. Оно применимо к тегу <caption>.

В основном используются два значения свойства 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. Родительским элементом является абзац - тег <p>, то есть текст. Центр пингвина выравнивается по центру текста: по базовой линии текста + половина его высоты.

Базовая линия текста - это воображаемая линия, проходящая по нижнему краю символов.

Верхний и нижний индекс в 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>

Результат




CSS по шагам

Тематические публикации

Все cвойства CSS

Тематические публикации