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





Курс CSS. Урок 29. CSS и формы. Часть 2.
Стиль сайта. Онлайновый курс по теме CSS. Сделано в kocby.ru Курс CSS. Урок 29. CSS и формы. Часть 2. Псевдо-классы используются для добавления специальных эффектов в некоторые селекторы. На практике текущего урока мы будем использовать конструкции: input:focus и textarea:focus, чтобы особым образом выделить поля текущего ввода данных. Свойство cursor (курсор) определяет тип курсора, который будет использоваться при наведении на элемент. На практике текущего урока из всего данного теоретического материала мы будем использовать конструкцию cursor:pointer; чтобы в нужный момент курсор принял вид указателя (кисти руки).
© Перепечатка разрешается с установкой ссылки на ресурс http://kocby.ru
Курс CSS. Урок 29. CSS и формы. Часть 2.
На прошлом уроке CSS, урок 28 мы с вами начали изучать работу с формами с привлечением технологии CSS.

На данном уроке мы продолжим эту тему.

Для начала немного теоретического материала.

Псевдо-классы :: используются для добавления специальных эффектов в некоторые селекторы.

ПсевдоСелекторы (ПсевдоКлассы) ссылок мы уже изучали на уроке 06.

Сейчас теорию вопроса мы рассмотрим в более развернутом и общем плане.

Все CSS Псевдо-классы / Элементы
Селектор Пример Пояснение
: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 мы можем использовать в нашем учебном тестовом примере.
css_029_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_029_001.zip ← скачайте пример, чтобы установить на свой сайт...
***** Машина-Функционал для передвижения по страничкам курса CSS *****
:: :: /


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

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


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