В этом уроке вы узнаете, как с помощью каскадных таблиц стилей привести веб-форму в порядок, а также сделать ее более привлекательной. Если вы откроете в браузере страницу form.html из папки 11\form, то увидите, что на ней опубликована простая веб-форма для регистрации подписчика на вымышленном сайте. Форма задает несколько вопросов, и в ней используются несколько элементов ввода, таких как текстовые поля, переключатели и раскрывающиеся списки. Если рассматривать ее в качестве веб-формы для подписки, выглядит она вполне нормально, но слегка мрачновато. На следующих страницах мы отформатируем текст, выделим вопросы и элементы веб-формы, а также добавим несколько других улучшений.
- Откройте файл global.css, расположенный в папке 11\form, в редакторе HTML- кода. Сейчас вы добавите новый стиль к внешней таблице стилей, связанной с файлом form.html. Начнем с увеличения размера шрифта, используемого в веб-форме, чтобы сделать ее более читабельной.
- Добавьте следующий стиль в нижней части таблицы стилей:
Этой веб-форме присвоен класс subForm, поэтому новый стиль изменяет шрифт, его размер и цвет для всего текста между открывающим и закрывающим тегами элемента form. Пришло время поработать над макетом. Чтобы удачнее скомпоновать элементы веб-формы, воспользуемся двумя столбцами, в одном из которых будут находиться вопросы (текстовые метки), а в другом — ответы (элементы веб-формы).
.subform { font-size: 1.2em; color: white; font-family:Tahoma, Geneva, sans-serif; } - Добавьте следующий код в таблицу стилей:
Этот селектор потомков используется для всех элементов класса .label, расположенных в веб-форме. Стиль превращает метки из строчных элементов (которые не поддерживают изменение ширины) в блочные. Свойство width устанавливает для области меток значение ширины, равное 200 пикселам, а свойство vertical-align: top; выравнивает текст меток по верхнему краю соответствующих элементов веб-формы. В результате после применения этого стиля к каждому вопросу в веб-форме вы получите выровненный по ширине столбец. Чтобы оценить полученный результат, вам необходимо применить созданный класс к соответствующим элементам веб-формы.
.subform .label { display: inline-block; width: 200px; vertical-align: top; } - Откройте файл form.html. Найдите следующий код
<label for="name">и добавьте класс class="label" таким образом:<label for="name" class="label">. Вы должны повторить то же самое для всех вопросов на веб-форме. - Повторите шаг 4 для следующих фрагментов HTML-кода:
<label for="email">,<label for="refer">и<label for="comments">. В веб-форме есть еще один дополнительный вопрос — Навыки квартирного ремонта. Он не размещен в элементе label, так как для ответа на него используется одно из положений переключателя, каждое из которых имеет отдельную метку. Вам нужно добавить элемент span к тексту, чтобы можно было воспользоваться стилем label. - Найдите текст
Навыки квартирного ремонтаи поместите его в элемент span, использующий класс label:<span class="label"> Навыки квартирного ремонта </span>Теперь вопросы размещены в отдельном столбце. Но они бы выглядели лучше, если бы были немного смещены и выделены соответствующим образом. - В файле global.css измените стиль #subForm .label, который вы создали в шаге 3,
следующим образом:
Просмотрите страницу в браузере. Веб-форма выглядит уже намного лучше, но кнопка Subscribe, размещенная у левого края, смотрится не на своем месте. Выровняем ее, как и остальные элементы веб-формы.
.subform .label { display: inline-block; width: 200px; vertical-align: top; text-align: right; margin-right: 10px; font-weight: bold; color: rgba(255,255,255,.5); } - Добавьте еще один стиль в файл global.css.
Поскольку кнопки отправки данных создаются путем добавления к элементу input атрибута type="submit", выбрать их можно с помощью селектора атрибута. Тогда не придется создавать класс и применять его к кнопкам отправки данных.
.subform input[type="submit"] { margin-left: 220px; } - Измените только что созданный стиль кнопки Subscribe, добавив дополнительные свойства:
Свойство padding добавляет пространство между текстом и краями кнопки, а свойства font-size и color форматируют шрифт текста кнопки. Теперь можно проявить изобретательность и добавить к кнопке градиент.
.subform input[type="submit"] { margin-left: 220px; padding: 10px 25px; font-size: 1em; color: white; } - Отредактируйте стиль кнопки Subscribe следующим образом:
С помощью данного кода установлен стандартный цвет фона (для Internet Explorer 9 и более ранних версий), а затем — линейный градиент. В нем заданы два цветовых узла. Первый цвет простирается от верхнего края до 40 % внутрь кнопки, затем начинается плавный переход цвета. И наконец, еще немного скорректируйте внешний вид. Удалите стандартную рамку, скруглите углы и задайте эффект свечения вокруг блока.
.subform input[type="submit"] { margin-left: 220px; padding: 10px 25px; font-size: 1em; color: white; background: rgb(0,102,153); background: linear-gradient(to bottom, rgba(255,255,255,.1) 40%, rgba(255,255,255,.5)); } - Отредактируйте стиль кнопки Subscribe в последний раз:
Присвоение свойству border значения none удаляет рамку, которую браузер обычно визуализирует вокруг кнопки, а свойство border-radius скругляет углы кнопки. И наконец, добавление тени без горизонтального или вертикального смещения (имеется в виду часть 0 0) позволяет получить эффект свечения элемента, которое выглядит как легкая белая подсветка, исходящая из-под кнопки.
.subform input[type="submit"] { margin-left: 220px; padding: 10px 25px; font-size: 1em; color: white; background: rgb(0,102,153); background: linear-gradient(to bottom, rgba(255,255,255,.1) 40%, rgba(255,255,255,.5)); border-radius: 5px; box-shadow: 0 0 4px white; }ПРИМЕЧАНИЕ Усовершенствование дизайна кнопки можно продолжить. Создайте эффект ролловера — .subform input[type="submit"]:hover — и измените фоновый цвет. Теперь текстовые метки и кнопка Subscribe смотрятся великолепно, но зачем на этом останавливаться? Настало время приукрасить элементы веб-формы. Начнем с изменения их шрифта и фонового цвета.
- Отформатируйте раскрывающийся список:
Этот стиль немного укрупняет текст. Можно выбрать шрифт, добавить цвет фона и внести другие изменения. Но некоторые браузеры (например, Safari) не позволяют вносить существенные изменения в форматирование раскрывающихся списков, поэтому все внесенные в них изменения стилей нужно тестировать. Теперь пришла пора внести изменения в текстовые поля.
.subform select { font-size: 1.2em; } - Создайте новый групповой селектор для трех текстовых полей:
Этот групповой стиль выбирает все элементы input, имеющие тип text, а также многострочные текстовые области (элемент textarea). В нем применяются различные свойства, с которыми вы уже должны быть знакомы, такие как border-radius, background-color, font-size и box-shadow. Текстовые поля выглядят мелковато, поэтому для них устанавливается ширина и к ним добавляются небольшие отступы.
.subform input[type="text"], .subform textarea { border-radius: 5px; border: none; background-color: rgba(255,255,255,.5); color: rgba(255,255,255,1); font-size: 1.2em; box-shadow: inset 0 0 10px rgba(255,255,255,.75); } - Отредактируйте только что созданный стиль, изменив ширину и применив отступы:
Вы можете сделать форму более удобной для пользователей, выделив активные элементы с помощью специального псевдокласса :focus. Мы добавим его на следующем шаге.
.subform input[type="text"], .subform textarea { border-radius: 5px; border: none; background-color: rgba(255,255,255,.5); color: rgba(255,255,255,1); font-size: 1.2em; box-shadow: inset 0 0 10px rgba(255,255,255,.75); width: 500px; padding: 5px; } - В конце внутренней таблицы стилей добавьте стиль для раскрывающегося списка и трех текстовых полей:
Просмотрите страницу в браузере.
.subform input[type="text"]:focus, .subform textarea:focus { background-color: white; color: black; }