Со стилем по жизни (все еще продолжение)

Со стилем по жизни (все еще продолжение) Итак, @ лает, караван идет. Теперь пришло время подробнее остановиться на применении CSS для стилизации HTML-форм (ну там всякие текстовые поля, кнопки-пупки и т.д.), параграфов и межстрочных расстояний.

Следим за формой
Для начала хочется сделать поправку на особенности Netscape Navigator. Здесь формы <INPUT..> поддаются стилизации частично. Если задан стиль для текста в <TABLE> или <TD>, то размер и шрифт текста форм будет аналогичным. Цвет нет.
Да и сами формы в NN выглядят почему-то больше, чем в IE. Такие сюрпризы могут слегка подпортить дизайн сайта, если ячейка, в которой стоит форма, должна быть фиксированной ширины. Только представьте себе "чудную" картину — форма растягивает ячейку, а вместе с ней и таблицу. Страшно? Тогда необходимо прямо в HTML задавать размер формы <input size="размер"> . Подобрать его с пылу с жару, разумеется, не получится (если только не повезет). Придется перебирать варианты и тестировать в обоих браузерах.
Вне зависимости от типа браузера я настоятельно не рекомендую стилизовать радио-формы <input type=radio> и чекбоксы <input type=checkbox> . Просто НЕ СТОИТ этого делать.
Оформление основной части форм начинается с создания класса для каждой из них. В CSS-таблице это будет выглядеть так:.название класса {характеристики_формы}, в HTML: <input=название_класса> .
Существуют следующие характеристики для элементов форм:
Текст — все свойства шрифта аналогичны обычному тексту, о котором речь шла в предыдущих статьях. Однако следует помнить, что параметр COLOR: #?????? задает цвет не только для шрифта, но и для бордеров формы;
Фон — .название класса {BACKGROUND: #??????};
Высота-ширина формы — .название класса {HEIGHT:?px; WIDHT:?px};
Положение текста по вертикали — .название класса {LINE-HEIGHT:?px};
Толщина бордеров — .название класса {border: outset?px}. Outset означает, что форма (в особенности это касается кнопок) будет с объемными бордерами (границами). Указывать это, в принципе, не обязательно. Вместо outset можно поставить solid — необъемные бордеры.
Итак, гипотетический стиль для некой формы можно представить следующим образом:
.название класса {width:?px; height:?px; background: #??????; border 1px solid; color: #??????; font-size:?px; line-height:?px; font-family: Verdana, Arial, Sans-serif}.
Известно, что Netscape Navigator создает чудаковатые расстояния от формы до следующей нижней строки. При помощи стиля FORM {margin-bottom:?px; margin-top:?px; margin-right:?; margin-left:?} регулируются расстояния от форм до ближайших объектов или строк по всем четырем направлениям: вверх, вниз, вправо, влево. Актуальна такая хитроумная комбинация и для IE.

Эх, параграфы и строки
Для начала можно регулировать величину межстрочного растояния при помощи стилизации тэга разрыва строки <BR>, установив BR {font-size: px}. Что касается параграфа <P>, для него вполне достаточно установить характеристики, как в этом примере: p {text-align:; margin-bottom:?px; margin-top:?px; margin-right:?; margin-left:?}.
Параметр выравнивания текста text-align может принимать значения как и в стилях для TD, то есть center, left, right, justify.
Вот, собственно, и все. "А разогнался-то..." — скажете.
И рисунки вместе с ними...
Хорошо, когда рисунки обтекают текстом. Хорошо и удобно.
А делается все элементарно. Создаем в стилях класс:.название_класса {float: }. Затем в html в тэге рисунка указываем этот класс <kg04315a. class=название_класса> . Как нетрудно догадаться, float может принимать значения right, left.
Вот так коротко и стремительно завершается трилогия, посвященная CSS.
Далее я хотел бы рассмотреть некоторые вопросы создания таблиц и, в частности, так называемых резиновых сайтов.

Максим Костюченко

(c) компьютерная газета