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

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

 

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

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

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

 

 

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


Займемся формой в целом. Чтобы изменить параметры шрифта, фона и прочие параметры для формы в целом, в качестве селектора для CSS-правила следует выбрать элемент FORM, поскольку именно он содержит все элементы формы и вспомогательные элементы вроде таблицы и заголовка. Давайте попробуем оформить нашу форму в желто-коричневых тонах.



F0RM {
color: #663300;
background: #FFFFCC;
font:0.8em Verdana, Arial, sans-serif;
}

Этим правилом зададим темно-коричневый цвет текста и светло-желтый фон для всей формы в целом, причем фон будет распространяться на всю ширину формы. Сейчас ширина явно не указана и ничем не ограничена, соответственно, ширина формы сейчас равна 100% ширины контейнера. Контейнером для нашей формы служит окно браузера. Темно-коричневого цвета будут все надписи в форме: заголовок и текст внутри ячеек таблицы. Используемая гарнитура Verdana имеет крупные буквы, и для того чтобы текст выглядел аккуратнее, мы пропорционально уменьшили размеры шрифта в форме, используя относительную единицу измерения em, равную высоте строки текущего шрифта. Значение 0.8em позволит нам на 20% уменьшить размер букв, при этом для пользователей Internet Explorer сохранится возможность изменить размер шрифта непосредственно в браузере.

В том случае, когда требуется изменить цвет только заголовка формы, а основной текст формы оставить черным, свойство color следует перенести в правило с контекстным селектором FORM H1. В результате получим два правила:



FORM {
background: #FFFFCC;
font: 0.8em Verdana, Arial, sans-serif;
}

FORM H1 {
color: #663300;
}

Теперь заголовок будет коричневым, а основной текст в форме - черным. Вернемся к рассмотрению фона формы, который сейчас желтый и распространяется на всю ширину окна браузера. Если ограничить ширину формы, задав свойство width, то фон будет ограничиваться новой шириной. Укажем для формы некоторое ограниченное значение по ширине, например 500 пикселей, добавив свойство width к стилю формы:



FORM {
background: #FFFFCC;
font: 0.8em Verdana, Arial, sans-serif;
width: 500px;
}

При этом вы заметите, что теперь фон соответствует указанной ширине, но, кроме того, в браузере "сбилось" выравнивание формы: раньше она располагалась по центру, атеперь у левого края. Давайте разбираться, что произошло? Изначально выравнивание элементов формы задавалось атрибутом ALIGN="center" элементов TABLE и H1. Выполнялось выравнивание относительно контейнера FORM, ширина которого была равна 100% окна браузера. Теперь мы ограничили ширину формы 500 пикселями, и выравнивание осуществляется относительно новой ширины. Чтобы расположить форму по центру страницы, необходимо задать выравнивание для блока самой формы, т.е. элемента FORM.

В CSS есть только одно свойство, отвечающее за горизонтальное выравнивание текста, - это text-align. Оно задает выравнивание содержимого блока, содержимого его контентной части. Оно подойдет нам для того, чтобы избавиться от атрибута ALIGN="center" элемента TABLE, поскольку он помечен в спецификации HTML как нежелательный для использования. Поэтому в CSS правило для селектора FORM лучше дополнить этим свойством, а атрибут align="center" из кода элементов TABLE и H1 убрать совсем. Аналогично можно "расправиться" с атрибутами align элементов COL: <COL ALIGN="right"><COL ALIGN="left">.

 

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

 

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

 

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

 

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