кликнете обработка събитие означава, CSS

През последните няколко години сме свидетели на забележителен разширяване на страничен уеб приложения езици клиента, особено HTML5 и CSS3.

забележка

Техниките, описани тук, не са предназначени за "истинския живот". учебни материали трябва да се разглеждат като основа за експериментиране. Особено след като някои методи лошо поддържаните браузъри. Цел на урок - сензорни характеристики на CSS граници.

използвате отметката

Сигурно вече сте се срещна с този метод. Това е най-популярният метод за обработка на CSS инструменти събитие клик.

Методът се основава на използване на отметка. Този елемент е с бинарен характер и може да бъде само в една от двете държави. Ето защо, този метод е много надежден начин да се справят събития щракнете в CSS.

Методът се основава на използването на псевдо-класа: проверява и селектор

Моля, имайте предвид, че тя ще работи с селектор +. Същността на метода се състои в това, че "ако то не е проверена, следните елементи с клас .За-се-променени ще бъдат червени."

Проверете опаковката не изглежда много привлекателна. Но можете да направите да изглежда по-интересен и крие отметка етикет, прикрепен към него. Веднъж нещо като това:

Така че ние се скрие отметка и използвайте маркера, за да отговори на събитието клик:

Ние се обърна на бутона, когато избута, тя променя цвета на текста в абзаца. При натискане на бутона се променя цвета обратно.

(Имайте предвид, че има различни методи, за да се скрият от квадратче очевидно. - показване на кандидатстване :. няма)

• Binary, има само две държави - проверява или нерегистриран
• Натискането води до възстановяване на държавата (тази позиция може да бъде отрицателна)
• Позволява ви да организира обработката на подобни случаи кликнете (ако първата отметка е маркирана, а вторият е отметнато, след което извършва следните действия)

• Елементите трябва да имат общ прародител
• Изискване на допълнителна маркиране HTML (вход, етикет, и т.н.)
• са необходими допълнителни действия, за да работи по мобилни браузъри

Метод: мишена

Има и друг метод, използващ псевдо-клас: мишена. Това псевдо-клас е подобен на псевдо-класа: мишката, която съответства само на определени условия.

Специално събитие за псевдо-класа: мишена, зависи от "идентификатор фрагмент". Казано просто, това псевдо-клас се отнася до таг, който се намира в края на URL, и става активен, когато маркер диез и ID мач.

Когато кликнете върху връзката (HREF = "# ID") променило адреса и преход на #ID етикет на страницата. Понастоящем идентификационен елемент ID могат да бъдат разпределени чрез използване на псевдо-клас: мишена.

• Simple CSS код
• Чудесно за разделяне

• Garbage в историята на браузъра
• Това се случва, превъртане на страниците
• Задължителен, линкове или сделки с URL включва таг
• Можете да работи само на един елемент (като идентификацията е уникален)
• Няма начин да се върне в първоначалното състояние, без да използвате още HASHTAG, връзки или операции от URL

Метод: фокус

Ние продължаваме нашия преглед на начина, по който с различен псевдо-класа -: фокус. Идеята е почти същият, както в предишния случай, с изключение на това, че не се очаква да се промени адреса. Тук ние разчитаме на входния фокус върху конкретен елемент.

Когато сте на страница с помощта на клавиша за табулатор, можете да се премине от един елемент към друг. Този метод е много полезен при работа с форми за прехода между елементите без помощта на мишката. Също така, се използва за хора с увредено зрение метод информацията в страницата.

Важно е, че някои елементи, могат да получат входен фокус, като връзки, параграфи, полета за въвеждане и много други. Трябва само да зададете tabindex атрибут към тях числена стойност за тях.

• Много просто CSS и HTML
• отлична навигация

• елемент се изисква с фокус или tabindex атрибут
• Възниква Спазването само ако входния фокус (чрез натискане навсякъде обърква алгоритъма на друго място на страницата)

Начин на прехода

Вероятно, този метод е най-много "мръсни" начин да се справите събитието кликване в CSS.

Идеята е да се "магазин" стил CSS в преход CSS. Ние използваме псевдо-безкрайно отлагане да се предотврати връщането към първоначалното им състояние. Звучи сложно, но всъщност е много лесна за изпълнение.

Забавянето е приблизително 116 дни. Не е безкраен, но някакво подобие на това на нашите условия. Ето защо, промените се запазват, и няма връщане към първоначалното им състояние.

• Просто и елегантно
• Спасен държава, дори и ако преходът не е свършила

• Лош подкрепа в браузъри (не IE9 и Opera Mini)
• Тя работи само с ценностите, които могат да бъдат използвани с преходи
• Няма начин да се върне в изходно положение
• Няма истинско очакване на безкрайност (ако вашият проект е свързан чака повече от 116 дни)

5 урока последната колона "CSS"

Малкият ефект с интерактивни анимационни герои.

Малък концепция за забавни съвети, които се изпълняват на SVG и anime.js. В допълнение към специалната стил в примера реализира анимация и преобразуване на графични обекти.

Експеримент: анимирани SVG писма базирани anime.js библиотека.

Cool уеб страница дисплей на експеримента, които "първо лице" чрез слънчеви очила.

пилотен сценарий падащото навигация.

До получаване на информация от два канала (зрение и слух) на ефективността на обучението далеч по-добър живот от книги. А домашните задачи и онлайн тестове ще ви позволи да мисля постоянно в целевия език и веднага провери знанията си!

Ако искате по-дълго време, за да проучи как да се HTML, че ме има, за което трябва добра новина!

Ако вече сте се научили HTML и искат да се движи напред, следващата стъпка ще бъде да се проучи CSS технологията.

Ако искате да се разбере концепцията на домейн и хостинг, да научат как да се създаде база данни, да качвате файлове към уеб сайт чрез FTP сървър, създаване на поддомейни, да конфигурирате пощенските кутии за сайта и мониторинг на посещаемостта, този курс е разработен специално за вас!