«Единственный способ творить великие дела – это любить то, что ты делаешь»
CSS
site.komp36.ru Создание сайтов. Твой сайт фотографа Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Продающий лендинг. Создание сайтов Установка и продажа окон, установка дверей, перегородок. Одностраничный продающий сайт. Заявки прямо с сайта
site.komp36.ru Универсальный лендинг. Выбрать тему для сайта! Лендинг адаптируется под любую тему: ремонт, отделка, продажа окон, дверей, лестниц, мебели и многое другое
site.komp36.ru Создание сайтов. Сайт сервисного центра. Сайт компании. Новости и отзывы. Несколько прайс-листов – под каждый отдельная страница. Возможность размещения статей


На данный момент, этот шаг является последним этапом изучения технологии 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>

Результат

site.komp36.ruТвой сайт фотографа. Создание сайтов Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Акция Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Акция Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

CSS по шагам
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

Все cвойства CSS
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта