... главная страницаКарта сайтаКонтакты

Главная
Синтаксис CSS
Свойства CSS
Форматирование блоков
Списки
Пример применения стилей
Оптимизация стилей
Оформление текстов
Использование блоков
Позиционирование
Слои в CSS
Готовые решения
Дополнительные возможности CSS
Программа TopStyle
Таблица цветов

 

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

 
Яндекс.Метрика
 
 

Оформление элементов форм при помощи CSS (стр.2)

 

 

Оформление элементов форм с CSS ||  Изменение стиля полосы прокрутки ||  Использование нескольких стилей
Создание ссылок-кнопок


Кроме этого, по ходу написания таблицы стилей мы будем вносить коррективы и в HTML-код, чтобы по возможности полностью разделить содержимое и описание его визуального отображения для документа. Без использования таблиц стилей исходная форма выглядит так, как показано на рисунке - ОТКРЫТЬ ПРИМЕР

Прежде всего хотелось бы отрегулировать расстояние между объектами формы. Сейчас, из-за того что для таблицы установлен атрибут cellpadding="5", расстояние между объектами внутри строки равно 10 пикселей (например, между надписью "Логин:" и самим текстовым полем для ввода), что нас в принципе устраивает. Однако расстояние между строками также равно 10 пикселей, и вот его хотелось бы сократить. Если просто установить значение атрибута CELLPADDING равным 0, то отступов внутри ячеек таблицы не будет вовсе, и все элементы вплотную примкнут друг к другу, как показано на рисунке - ОТКРЫТЬ ПРИМЕР

Исправить ситуацию можно при помощи CSS и свойства padding, которое позволяет задать разные значения для отступов с каждой из четырех сторон. Поскольку нам требуется отрегулировать отступы внутри ячеек, в качестве селектора может выступать название элемента TD. Но в этом случае правило будет применяться ко всем таблицам в данном HTML-документе, тогда как для других таблиц могут потребоваться совсем другие параметры и стиль оформления. Поэтому здесь уместнее воспользоваться контекстным селектором - например, FORM TD. В этом случае указанное правило будет относиться только к тем таблицам, которые находятся внутри формы, и не будет затрагивать остальных таблиц документа.

Контекстный селектор FORM TD в данном случае "перескакивает" через несколько элементов в дереве элементов документа. Иерархия элементов здесь такова: form-table-tr-td, но контекстный селектор позволяет пропустить в иерархии два элемента (TABLE и TR) для достижения желаемого результата.



Примечание. В CSS 2 есть селектор, который обозначает непосредственного предка элемента. Записывается он следующим образом: FORM>TABLE или TR>TD. В первом случае CSS-правило будет применяться к таблицам, находящимся непосредственно внутри тегов <FORM></FORM>. А если конструкция будет отличаться, например будет следующей:

<FORM>
<DIV ALIGN="center">
<TABLE>
... код таблицы...
</TABLE>
</DIV> </FORM>

то данное правило к таблице уже применяться не будет, поскольку элемент TABLE в этом случае является непосредственным потомком элемента DIV, а не FORM.

Второй селектор tr>td, по сути, смысла не несет, поскольку все элементы TD являются непосредственными потомками элемента TR.

Все бы хорошо, только такой селектор поддерживается не всеми браузерами, в частности его не поддерживает Internet Explorer, поэтому на практике его применение сильно ограничено. Одна из областей применения такого селектора заключается в написании кроссбраузерного CSS по методу Целика, который мы рассматривали ранее. Итак, чтобы наше правило коснулось только нужной таблицы и чтобы не вводить новый класс, будем использовать контекстный селектор FORM TD. Получим правило:

FORM TD {
padding: 2рх 5рх;
}

которое устанавливает отступы сверху и снизу по 2 пикселя, а справа и слева по 5 пикселей. Кроме отступов, также требуется задать вертикальное выравнивание для ячеек по верхнему краю, чтобы слово "Адрес:" располагалось не по центру, как сейчас (это значение по умолчанию), а у верхнего края ячейки. Для этого воспользуемся свойством vertical-align:

FORM TD {
padding: 2px 5px;
vertical-align: top;
}

Теперь самые очевидные недостатки формы устранены, и можно приступать к ее оформлению. Будем исходить из предположения, что все формы на нашем сайте должны быть оформлены одинаково, поэтому везде будем использовать селекторы по элементу.

 

Оформление элементов форм с CSS ||  Изменение стиля полосы прокрутки ||  Использование нескольких стилей
Создание ссылок-кнопок

 

Страница: - 1 - | - 2 - | - 3 - | - 4 - | - 5 -

 

Наверх страницы

 

Уроки CSS © 2007 - 2017 г. Все права защищены