Курс 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 *****
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
