Курс CSS. Урок 28. CSS и формы. Часть 1.
Формы мы с вами уже изучали на
курсе HTML, см
формы (основы).
Теперь настало время нашу форму, созданную на курсе HTML с помощью технологии CSS привести в более привлекательный вид.
В курсе НТМЛ последний урок, посвященный формам был урок 37. Но для облегчения процесса изучения мы пока не будем затрагивать новые теги стандарта HTML5 и оттолкнемся от разработок урока 23.
Наработки с этого урока мы и будем использовать для продолжения, теперь уже с привлечением технологии CSS.
Для начала удаляем все "костыли" для несостоявшихся CSS дизайнеров (задания свойств в тегах style="..."), которые так любят HTML кодировщики.
Затем рисуем правила для стилей в файле css_028_001.css -
В результате получаем вот такую форму:
Теперь созданные классы в файле стилей CSS мы можем использовать в нашем учебном тестовом примере.
css_028_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_028_001.zip ← скачайте пример, чтобы установить на свой сайт...
Обратите внимание на следующие моменты:
<link rel="stylesheet" href="http://kocby.ru/css/css_028_001.css" type="text/css" />
Если стили у вас будут работать ок, то... Значит, тут просто потрясающие перспективы в экономическом плане - один CSS дизайнер может создавать разные стили для многих сайтов и просто выкладывать на свой хостинг с соответствующей документацией.
Теперь настало время нашу форму, созданную на курсе 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_028_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_028_001.zip ← скачайте пример, чтобы установить на свой сайт...
Обратите внимание на следующие моменты:
- Можно использовать несколько классов в одном теге class - например, мы использовали несколько классов для одного элемента вот таким образом: class="question_css_028 tp_css_028"
- Классы называем question_css_028, fieldset_css_028 и т.д. - причина таких названий, кроме всего прочего, заключается еще и в том, чтобы гарантировать отсутствие совпадений с служебными словами, классами, подключаемыми из других файлов и т.д. Это типичная ловушка для новичков - когда невозможно понять, почему такой-то класс отрабатывается криво, а разгадка проста- работает совсем другой класс.
- Один и тот же файл css можно подключать к разным страничкам - например, мы один и тот же файл css_028_001.css подключаем к данной страничке и к учебному примеру.
<link rel="stylesheet" href="http://kocby.ru/css/css_028_001.css" type="text/css" />
Если стили у вас будут работать ок, то... Значит, тут просто потрясающие перспективы в экономическом плане - один CSS дизайнер может создавать разные стили для многих сайтов и просто выкладывать на свой хостинг с соответствующей документацией.
***** Машина-Функционал для передвижения по страничкам курса CSS *****
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.