- •Вступление
- •Обозначения
- •Введение в CSS
- •Инструменты
- •Введение в CSS
- •Способы добавления стилей на страницу
- •Типы носителей
- •Базовый синтаксис CSS
- •Значения стилевых свойств
- •Селекторы тегов
- •Классы
- •Идентификаторы
- •Контекстные селекторы
- •Соседние селекторы
- •Дочерние селекторы
- •Селекторы атрибутов
- •Универсальный селектор
- •Псевдоклассы
- •Псевдоэлементы
- •Группирование
- •Наследование
- •Каскадирование
- •Валидация CSS
- •Идентификаторы и классы
- •Написание эффективного кода
- •Режимы браузеров
- •Стандартный режим
- •Почти стандартный режим
- •Режим совместимости
- •MIME-тип документа
- •Доктайп
- •Режимы Internet Explorer
- •Рекомендации
- •Принципы вёрстки слоями
- •Блочная модель
- •Схлопывающиеся отступы
- •Поток документа
- •Блочные элементы
- •Строчные элементы
- •Строчно-блочные элементы
- •Плавающие элементы
- •Позиционирование элементов
- •Наложение и порядок слоёв
- •Вёрстка с помощью таблиц
- •Особенности таблиц
- •Таблицы и стили
- •Разница между таблицами и слоями
- •Разрезание и склейка изображений
- •Макет из двух колонок
- •Макет из трех колонок
- •Тестирование в IE
- •Условные комментарии
- •Загадочное свойство hasLayout
- •Отображение в IE
- •Ошибки IE8
- •Ошибки IE7
- •Фиксированный макет с одной колонкой
- •Фиксированный двухколоночный макет
- •Фиксированный трёхколоночный макет
- •Резиновый двухколоночный макет
- •Резиновый трёхколоночный макет
- •Колонки одинаковой высоты
- •Вёрстка типовых элементов веб-страницы
- •Меню
- •Горизонтальное меню
- •Вертикальное меню
- •Меню и подменю
- •Ниспадающее меню
- •Вкладки
- •Формы
- •Нестандартный вид текстовых полей
- •Выравнивание элементов форм
- •Вёрстка сайта на практике
- •Шапка страницы
- •Основная часть
- •Подвал страницы
- •Главная страница
- •Внутренняя страница
- •Заключение
- •Структура кода
- •Новые теги
- •Применение HTML5 на практике
- •Валидация HTML5
- •Тестирование и отладка готового кода
- •Web Developer
- •Отладка кода с помощью расширения Firebug
- •Использование Firebug на практике
- •Веб-инспектор Safari
- •Opera Dragonfly
- •Средства разработчика Internet Explorer
- •Термины
Формы
Формы предназначены для пересылки данных от пользователя к серверу и реализуют различную обратную связь на сайте вроде комментариев, регистрации, входа в свой аккаунт, голосования и многого другого. Элементы форм обычно включают в себя текстовые поля, кнопки, переключатели, флажки, поле для загрузки файла, списки и могут различаться в зависимости от операционной системы и браузера, но в целом похожи друг на друга. С помощью CSS их хорошо стилизовать, придавая им нужный вид в зависимости от дизайна сайта. Далее представлен краткий обзор элементов форм и как их можно оформить через стили.
Текстовые поля
Текстовое поле предназначено для ввода символов с клавиатуры. Различают три элемента формы, которые используются для этой цели, — однострочное текстовое поле, поле для ввода пароля и многострочное текстовое поле. Это самый гибкий элемент формы, для него можно задавать практически любые стилевые свойства, например, background для фона, border для границ, width и height для ширины и высоты и др. В примере 7.15 показано изменение вида поля для текста и пароля.
Пример 7.15. Вход на сайт XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Вход на сайт</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css">
input[type="text"], input[type="password"] { padding-left: 24px; /* Смещаем текст вправо */
}border: 1px solid #ccc; /* Параметры рамки */
input[type="text"] {
}background: url(images/user.png) no-repeat 3px center; /* Рисунок */
input[type="password"] {
}background: url(images/password.png) no-repeat 3px center;
</style>
</head>
<body>
<form action="handler.php">
<p>Логин <input type="text" name="user" /></p> <p>Пароль <input type="password" name="pass" /></p> <p><input type="submit" value="Войти" /></p>
</form>
</body>
</html>
В данном примере вокруг текстового поля и поля с паролем устанавливается рамка и небольшой рисунок. Чтобы текст не накладывался на него, сделан его сдвиг с помощью свойства padding-left. Результат примера показан на рис. 7.15.
Рис. 7.22. Текстовые поля
Кнопки
Кнопки являются одним из самых понятных и интуитивных элементов интерфейса. По их виду сразу становится понятно, что единственное действие, которое с ними можно производить, — это нажимать на них. За счёт этой особенности кнопки часто применяются в формах.
Кнопка на странице создаётся двумя способами — с помощью тега <input> и <button>. Разница между ними в том, что на <button> можно размещать любые элементы HTML, в том числе
изображения и таблицы.
Вид кнопки задаётся браузером по умолчанию и совпадает с кнопками в операционной системе. Добавление в стилях рамки или фона сразу же отменяет стандартный вид, как показано в примере 7.16.
Пример 7.16. Разные виды кнопок XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <title>Кнопки</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css">
input[type="submit"] {
}background: #688a7e; color: #fff; /* Цвет фона и текста */
input[type="reset"] {
}border: 1px solid #000; /* Параметры рамки */
button img {
}vertical-align: bottom; /* Выравнивание */
</style>
</head>
<body>
<form action="handler.php">
<p><input type="submit" value="Кнопка для отправки формы" /> <input type="reset" value="Кнопка для очистки формы" /> <input type="button" value="Стандартная кнопка" /> <button><img src="images/user.png" />
Кнопка с рисунком</button></p>
</form>
</body>
</html>
В данном примере имеется несколько кнопок, созданных разными способами. Независимо от этого добавление цвета фона превращает кнопку в «трёхмерный брусок», включение рамки вокруг кнопки делает её плоской (рис. 7.23).
Рис. 7.23. Вид кнопок после применения стилей
К кнопке, созданной с помощью тега <button>, относятся те же принципы, свойства background и border отменяют встроенный стиль браузера.
Переключатели и флажки
Переключатели (radiobutton) используют, когда необходимо выбрать единственный вариант из нескольких предложенных.
Флажки (checkbox) используют, когда необходимо выбрать два или более варианта из предложенного списка. Если требуется выбрать лишь один вариант, то для этого следует предпочесть переключатели
(radiobutton).
По части оформления переключатели и флажки не дают особо разгуляться фантазии. С помощью стилей допустимо устанавливать размер занимаемого места, добавлять поля и отступы и, в общем-то, всё.
Поле для загрузки файлов
Для того чтобы можно было отправить на сервер файл, используется специальное поле, которое задается как <input type="file">. Такой элемент формы отображается как текстовое поле, рядом с
которым располагается кнопка Обзор. При нажатии на эту кнопку открывается окно для выбора файла, в котором пользователь может указать нужный файл. Название кнопки и вид поля зависит от операционной системы и браузера и может довольно существенно различаться между собой. Напрямую изменить вид этого поля нельзя, для этого существуют косвенные методы, к примеру, через скрипты или наложением поверх поля своего рисунка. Интересующимся рекомендую эти ссылки.
Делаем красивый input[type=file] с помощью jQuery
Кастомизация input type=”file” с помощью CSS 
Нестандартные поля выбора файла
Списки
Поле со списком, называемое еще ниспадающее меню, — один из гибких и удобных элементов формы. В зависимости от настроек в списке можно выбирать одно или несколько значений. Преимущество списка состоит в его компактности: он может занимать всего одну строку, а чтобы просмотреть весь список, нужно на него нажать. Однако это является и недостатком, ведь пользователю сразу не виден весь выбор.
Списки подобно текстовым полям хорошо поддаются стилизации, к ним можно применять цвет фона, текста, указывать размеры, отступы и поля (рис. 7.24). Кнопка для раскрытия списка модификации через стили не подлежит.
Рис. 7.24. Оформление списка
В примере 7.17 показано изменение вида списка.
Пример 7.17. Список
XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Список</title>
<style type="text/css"> SELECT {
width: 200px; /* Ширина списка */ background: #f0f0f0; /* Цвет фона */
color: #800; /* Цвет текста */ |
|
}border: |
1px solid #333; /* Параметры рамки */ |
</style> |
|
</head> |
|
<body> |
|
<form action="handler.php"> |
|
<p><select> |
|
<option |
disabled="disabled">Выберите героя</option> |
<option |
value="Чебурашка">Чебурашка</option> |
<option |
value="Крокодил Гена">Крокодил Гена</option> |
<option |
value="Шапокляк">Шапокляк</option> |
<option |
value="Крыса Лариса">Крыса Лариса</option> |
</select></p> |
|
<p><input |
type="submit" value="Отправить" /></p> |
</form> |
|
</body> |
|
</html> |
|
Поле с изображением
Поля с изображениями аналогичны по своему действию кнопке <input type="submit">, но представляют собой рисунок, что расширяет возможности дизайнерских изысков по оформлению формы. Когда пользователь нажимает на рисунок, данные формы отправляются на сервер и обрабатываются программой, заданной атрибутом action тега <form>.