Панель Управления





Курс CSS. Урок 28. CSS и формы. Часть 1.
Стиль сайта. Онлайновый курс по теме CSS. Сделано в kocby.ru Курс CSS. Урок 28. CSS и формы. Часть 1. Формы мы с вами уже изучали на курсе HTML. Теперь настало время нашу форму, созданную на курсе HTML с помощью технологии CSS привести в более привлекательный вид. Для начала удаляем все "костыли" для несостоявшихся CSS дизайнеров (задания свойств в тегах style="..."), которые так любят HTML кодировщики. Затем рисуем правила для стилей в файле css. Затем созданные классы в файле стилей CSS мы можем использовать в нашем учебном тестовом примере.
© Перепечатка разрешается с установкой ссылки на ресурс http://kocby.ru
Курс CSS. Урок 28. CSS и формы. Часть 1.
Формы мы с вами уже изучали на курсе HTML, см формы (основы).

Теперь настало время нашу форму, созданную на курсе HTML с помощью технологии CSS привести в более привлекательный вид.

В курсе НТМЛ последний урок, посвященный формам был урок 37. Но для облегчения процесса изучения мы пока не будем затрагивать новые теги стандарта HTML5 и оттолкнемся от разработок урока 23.

Наработки с этого урока мы и будем использовать для продолжения, теперь уже с привлечением технологии CSS.

Для начала удаляем все "костыли" для несостоявшихся CSS дизайнеров (задания свойств в тегах style="..."), которые так любят HTML кодировщики.

Затем рисуем правила для стилей в файле css_028_001.css -
.body_css_028 {
	font: 11px Verdana, sans-serif;
	color: #333333;
/*	background-image: url('images/pattern03invert.gif'); */
}

.wrapper_css_028 {
	width:500px;
	outline: 0px solid #FAA21A;
}

.question_css_028 {
	font-weight:bold;
}

.fieldset_css_028 {
	padding:10px;
	margin:10px;
	border: 1px solid #CCCCCC;
	background-color:#FCFCFC;
}

.textarea_css_028 {
	border: 1px solid #333333;
	background-color:#F4F9FF;
	width:480px;
	margin:2px 10px;
}

.tp_css_028 {
	margin-left:10px;
}
В результате получаем вот такую форму:
Ввод личных данных

Вопросы

Любите ли Вы экономить время?

... или ...

Какими инструментами для экономии времени Вы пользуетесь?

Теперь созданные классы в файле стилей CSS мы можем использовать в нашем учебном тестовом примере.
css_028_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_028_001.zip ← скачайте пример, чтобы установить на свой сайт...

Обратите внимание на следующие моменты:
  1. Можно использовать несколько классов в одном теге class - например, мы использовали несколько классов для одного элемента вот таким образом: class="question_css_028 tp_css_028"
  2. Классы называем question_css_028, fieldset_css_028 и т.д. - причина таких названий, кроме всего прочего, заключается еще и в том, чтобы гарантировать отсутствие совпадений с служебными словами, классами, подключаемыми из других файлов и т.д. Это типичная ловушка для новичков - когда невозможно понять, почему такой-то класс отрабатывается криво, а разгадка проста- работает совсем другой класс.
  3. Один и тот же файл css можно подключать к разным страничкам - например, мы один и тот же файл css_028_001.css подключаем к данной страничке и к учебному примеру.
Что касается последнего пункта, то можно пойти и дальше: подключить css_028_001.css с другого хостинга. Проведите такой эксперимент, подключите файл стилей следующим образом:
<link rel="stylesheet" href="http://kocby.ru/css/css_028_001.css" type="text/css" />
Если стили у вас будут работать ок, то... Значит, тут просто потрясающие перспективы в экономическом плане - один CSS дизайнер может создавать разные стили для многих сайтов и просто выкладывать на свой хостинг с соответствующей документацией.
***** Машина-Функционал для передвижения по страничкам курса CSS *****
:: :: /


Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.

Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.


Если вы планируете вернуться сюда позднее...
Пожалуйста, запомните эту страничку -
URL: http://kocby.ru/css/p028.html
Спасибо за посещение этой странички и внимательное отношение к ее контенту и дизайну. Удачи и успеха!
© KOCBY.RU :: перепечатка материалов разрешается с указанием ссылки на домен KOCBY.RU ©
Basket is empty :: Корзина пустая
Close and hide in basket :: Закрыть и спрятать в корзину
***** Реклама *****
Посмотри в зеркало! Что там видно?
Красивая девушка брюнетка слева Красивая девушка блондинка справа
Красивая девушка блондинка слева Красивая девушка брюнетка справа
Наверх ↑