Использование стилей для формНаверняка у вас на сайте будет страница, на которой будут находиться формы, и хотелось бы сделать не просто формы, а красивые формы. Об этом и пойдет речь в этой статье. Начнем разбирать все по порядку.1.Создание текстового поля. Для тех, кто не знает: текстовое поле создается тегом <input type=text>. И так, вы создали текстовое поле на web-странице. Для использования стилей для нег нам потребуется создать стилевой класс, можно назвать его: text. Кроме того, желательно задать его начальное, для просмотра используемого шрифта (оно задается атрибутом value). В итоге, вы должны получить примерно такой HTML-код: <input type=text value="Текстовое поле" class=text> Для поля доступны следующие стилевые свойства (возможно и некоторые другие, но я приведу список наиболее часто используемых): фон (цвет, картинка), шрифт (размер, тип, цвет, оформление), рамка, отступы, его размеры. Итак попробуем создать для него стиль: .text { border:1px silver solid; font-family:verdana; font-size:12px; padding-left:3px; background-image:url("textbg.jpg"); height:20px; } Это следует поместить в разделе <style>. Теперь разберем каждую строчку: Border:1px silver solid - задает тип рамки (толщина - 1 пиксель, цвет - серый, стиль - сплошная линия); Font-family:verdana - задает тип шрифта (в данном случае Verdana); Font-size:12px - размер шрифта (12 пикселей); Padding-left:3px - отступ слева (3 пикселя); Background-image:url("textbg.jpg") - фоновая картинка (берется из файла textbg.jpg); Height:20px - понятно, что это высота (20 пикселей). 2.Оформление кнопки. Кнопка задается тегом <input type=button value=Надпись на кнопке>. Система обсолютно такая же, как и в предыдущем пункте. Кроме использования стилей есть всем известный тег <button>, в котором записывается некое содержимое с оформление, картинки. Нельзя вставлять ссылки и элементы форм. 3.Создание выпадающих списков. Для списков можно задавать только его размеры, тип и размер шрифта. А вот для его отдельных элементов можно задавать еще цвет фона и цвет шрифта. Вот пример такого списка: <select> <option>Обычный список</option> <option style="color:white; background-color:black;">Черный цвет</option> <option style="color:yellow; background-color:blue;">Синий цвет</option> <option style="color:white; background-color:red;">Красный цвет</option> <option style="color:white; background-color:green;">Зеленый цвет</option> </select> Здесь color - цвет текста, а , background-color - цвет фона. Через двоеточие записывается значения цветов. 4.Использование стилей для элементов Textarea. Элемент <textarea> представляет собой большое текстовое поле. Для этого поля существуют такие же свойства, как и для обычного текстового поля. Плюс к этому, так как в него можно занести несколько строк, а его размеры ограничены, то появляется полоса прокрутки, для которой также существуют стилевые свойства. Вот они: scrollbar-3dlight-color: #3183ae; scrollbar-arrow-color: #3183ae; scrollbar-base-color: #f8fcff; scrollbar-darkshadow-color: #3183ae; scrollbar-face-color: #f8fcff; scrollbar-highlight-color: #71d3fe; scrollbar-shadow-color: #71d3fe; scrollbar-track-color: #f8fcff; Объяснять каждую сроку смысла нет, так как это очень сложно, лучше просто изменять цвета, и просматривать что получилось. Кроме описанных элементов существуют еще некоторые элементы, такие как: флажки, радиокнопки и другие. Для них доступны только изменения размеров. Источник: frnet.narod.ru |
КОНТАКТЫ
г. Екатеринбург info@vismech.ru |
текущее: НОВОСТИ 05.12.2013 - Уход за флэш-накопителем 05.12.2013 - Компьютер самопроизвольно выключается 05.12.2013 - Почему не запускается компьютер? 27.11.2013 - Canon Legria HF R406 - Описание видеокамеры 27.11.2013 - TravelMate P645 новый лэптоп бизнес-класса от Acer |