Курс CSS. Урок 29. CSS и формы. Часть 2.
На прошлом уроке
CSS, урок 28
мы с вами начали изучать работу с формами с привлечением технологии CSS.
На данном уроке мы продолжим эту тему.
Для начала немного теоретического материала.
Псевдо-классы :: используются для добавления специальных эффектов в некоторые селекторы.
ПсевдоСелекторы (ПсевдоКлассы) ссылок мы уже изучали на уроке 06.
Сейчас теорию вопроса мы рассмотрим в более развернутом и общем плане.
На практике текущего урока из всего данного теоретического материала мы будем использовать конструкции:
input:focus
textarea:focus
чтобы особым образом выделить поля текущего ввода данных.
Свойство cursor (курсор) определяет тип курсора, который будет использоваться при наведении на элемент.
На практике текущего урока из всего данного теоретического материала мы будем использовать конструкции:
cursor:pointer;
чтобы в нужный момент курсор принял вид указателя (кисти руки).
Затем рисуем правила для стилей в файле css_029_001.css -
В результате получаем вот такую форму:
Теперь созданные классы в файле стилей CSS мы можем использовать в нашем учебном тестовом примере.
css_029_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_029_001.zip ← скачайте пример, чтобы установить на свой сайт...
На данном уроке мы продолжим эту тему.
Для начала немного теоретического материала.
Псевдо-классы :: используются для добавления специальных эффектов в некоторые селекторы.
ПсевдоСелекторы (ПсевдоКлассы) ссылок мы уже изучали на уроке 06.
Сейчас теорию вопроса мы рассмотрим в более развернутом и общем плане.
Селектор | Пример | Пояснение |
---|---|---|
:link | a:link | Выборка всех непосещенных ссылок. |
:visited | a:visited | Выборка всех посещенных ссылок. |
:active | a:active | Выборка активной (кликнутой) ссылки. |
:hover | a:hover | Выборка ссылки, при наведении мыши. |
:focus | input:focus | Выборка элемента инпута, на который наведен фокус. |
:first-letter | p:first-letter | Выборка первой буквы каждого тега <p> |
:first-line | p:first-line | Выборка первой строки каждого тега <p> |
:first-child | p:first-child | Выборка каждого тега <p>, который является первым ребенком своего родителя |
:before | p:before | Вставка контента перед каждым элементом <p> |
:after | p:after | Вставка контента после каждого элемента <p> |
:lang(language) | p:lang(it) | Выбирает каждый элемент <p> с аттрибутом lang, у которого значение начинается на "it" Italiano? Perke? |
input:focus
textarea:focus
чтобы особым образом выделить поля текущего ввода данных.
Свойство cursor (курсор) определяет тип курсора, который будет использоваться при наведении на элемент.
Значение | Пояснение |
---|---|
URL | Список файлов для курсоров, разделенными запятыми. Примечание: всегда в конце списка используйте общий курсор на случай, если ни один курсор из файлов не может быть использован. |
cursor:auto; | По умолчанию. Вид курсора устанавливает браузер. |
cursor:crosshair; | Курсор имеет вид креста, пересечение двух линий ровно посередине. |
cursor:default; | Курсор по умолчанию. |
cursor:e-resize; | Курсор намекает, что край блока будет двигаться направо (на Восток). |
cursor:help; | Курсор намекает, что здесь может быть оказана помощь (консультация). |
cursor:move; | Курсор намекает, что здесь есть что-то такое, что можно подвигать. |
cursor:n-resize; | Курсор намекает, что край блока будет двигаться на верх (на Север). |
cursor:ne-resize; | Курсор намекает, что край блока будет двигаться на верх/ на право (на Северо-Восток). |
cursor:nw-resize; | Курсор намекает, что край блока будет двигаться на верх/ на лево (на Северо-Запад). |
cursor:pointer; | Курсор имеет вид указателя (кисть руки). |
cursor:progress; | Курсор намекает, что программа выполняется или зависла (стрелка и песочные часы). |
cursor:s-resize; | Курсор намекает, что край блока будет двигаться вниз (на Юг). |
cursor:se-resize; | Курсор намекает, что край блока будет двигаться вниз/ на право (на Юго-Восток). |
cursor:sw-resize; | Курсор намекает, что край блока будет двигаться вниз/ на лево (на Юго-Запад). |
cursor:text; | Курсор намекает, что здесь текст. |
cursor:w-resize; | Курсор намекает, что край блока будет двигаться налево (на Запад). |
cursor:wait; | Курсор намекает, что программа выполняется или зависла (песочные часы). |
cursor:inherit; | Значение свойства cursor (Курсор) будет унаследовано от родительского элемента. |
cursor:pointer;
чтобы в нужный момент курсор принял вид указателя (кисти руки).
Затем рисуем правила для стилей в файле css_029_001.css -
.body_css_029 { font: 11px Verdana, sans-serif; color: #333333; /* background-image: url('images/pattern03invert.gif'); */ } .wrapper_css_029 { width:500px; outline: 0px solid #FAA21A; } .question_css_029 { font-weight:bold; } .fieldset_css_029 { padding:10px; margin:10px; border: 1px solid #CCCCCC; background-color:#FCFCFC; } .textarea_css_029 { font: 12px Verdana, sans-serif; border: 1px solid #333333; background-color:#F4F9FF; width:480px; margin:2px 10px; padding:0 7px; } .textarea_css_029:focus { border: 1px solid #1351B4; background-color:#FFFFFF; } .tp_css_029 { margin-left:10px; } .input_css_029 { font: 12px Verdana, sans-serif; border: 1px solid #333333; height:27px; line-height:27px; background-image: url('images/inputbg.jpg'); background-repeat:repeat-x; width:300px; padding:0 7px; } .input_css_029:focus { border: 1px solid #1351B4; background:none; background-color:#FFFFFF; } .label_css_029 { cursor:pointer; } p.css_029_first_letter:first-letter { font-size:200%; color:#8A2BE2; } p.css_029_first_line:first-line { font-size:200%; color:#8A2BE2; } p.css_029_before:before { font-size:200%; color:#8A2BE2; content:"$ - "; } p.css_029_after:after { font-size:200%; color:#8A2BE2; content:" - $"; } p.css_029_lang_it:lang(it) { font-size:200%; color:#8A2BE2; }
css_029_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_029_001.zip ← скачайте пример, чтобы установить на свой сайт...
***** Машина-Функционал для передвижения по страничкам курса CSS *****
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.