Π Π°Π·Π½ΠΎΠ΅

Css ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ: МСняСм Ρ†Π²Π΅Ρ‚ элСмСнта ΠΏΠΎ навСдСнию ΠΌΡ‹ΡˆΠΊΠΈ. ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€, простой CSS

05.10.1985

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

Как ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π² css

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ красивыС эффСкты для ссылок Π½Π° CSS3, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΏΠ»Π°Π²Π½ΠΎΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΈ ΠΏΠ»Π°Π²Π½Ρ‹ΠΉ сдвиг Π²ΠΏΡ€Π°Π²ΠΎ.

ΠŸΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ Вас, Π΄ΠΎΡ€ΠΎΠ³ΠΈΠ΅ Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»ΠΈ Π±Π»ΠΎΠ³Π° beloweb.ru. Π’ этот дСнь я Ρ…ΠΎΡ‡Ρƒ Ρ€Π°ΡΡΠΊΠ°Π·Π°Ρ‚ΡŒ Π’Π°ΠΌ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΠ°Ρ€Ρƒ красивых Π½ΠΎ ΠΎΡ‡Π΅Π½ΡŒ простых эффСктов для ссылок Π½Π° сайтС. А ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΏΠ»Π°Π²Π½ΠΎΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΈ ΠΏΠ»Π°Π²Π½Ρ‹ΠΉ сдвиг тСкста ссылки. Π’ ΠΎΠ±Ρ‰Π΅ΠΌ красиво получаСтся. Π’Π΅ΠΌ Π±ΠΎΠ»Π΅Π΅ я часто Π²ΠΈΠΆΡƒ эти эффСкты Π½Π° Ρ€Π°Π·Π½Ρ‹Ρ… сайтах.

ΠŸΠΎΡ‡Π΅ΠΌΡƒ этот способ простой? ΠŸΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½ дСлаСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS. Никаких скриптов Ρ‚ΠΎΠ»ΡŒΠΊΠΎ стили.

Π’ ΠΎΠ±Ρ‰Π΅ΠΌ, Π΄ΠΎΡ€ΠΎΠ³ΠΈΠ΅ Π΄Ρ€ΡƒΠ·ΡŒΡ, Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΡ€ΠΈΡΡ‚ΡƒΠΏΠ°Ρ‚ΡŒ.

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€

ПлавноС ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

Для всСх ссылок

Π”Ρ€ΡƒΠ·ΡŒΡ, для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ этот эффСкт Ρ€Π°Π±ΠΎΡ‚Π°Π» Π½Π° всСх ссылках Π½Π° сайтС, Ρ‚ΠΎΠ³Π΄Π° просто Π½ΡƒΠΆΠ½ΠΎ Π² Π’Π°ΡˆΠ΅ΠΌ CSS Ρ„Π°ΠΉΠ»Π΅ ΠΊ классу Π°(ссылки) Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚Π΅Π³ transition. Π–Π΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ с прСфиксами для Ρ€Π°Π·Π½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ², это такая страховка. Π’ ΠΎΠ±Ρ‰Π΅ΠΌ Π²ΠΎΡ‚ ΠΊΠ°ΠΊ всё Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ:

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ здСсь стоит 0,2 сСкунды ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора ΠΈ 0. 02 сСкунды послС убирания. Π”Ρ€ΡƒΠ³ΠΈΠΌΠΈ словами здСсь выставляСтся ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΊΠ°ΠΊ ΡƒΠ³ΠΎΠ΄Π½ΠΎ, ΠΎΠ½ΠΈ стоят Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅.

Π’ классС a:hover выставляСтся Ρ†Π²Π΅Ρ‚ ссылки, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ»Π°Π²Π½ΠΎ ΠΏΠΎΡΠ²Π»ΡΡ‚ΡŒΡΡ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Ρ‘. По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ стоит этот Ρ†Π²Π΅Ρ‚ #1FA2E1.

Для ΠΎΠ΄Π½ΠΎΠΉ ссылки Π½Π° страницС (ΠΈΠ»ΠΈ Ρ€Π°Π·Π½Ρ‹Π΅ Ρ†Π²Π΅Ρ‚Π°)

Π§Ρ‚ΠΎΠ±Ρ‹ этот CSS эффСкт ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ для ΠΎΠ΄Π½ΠΎΠΉ ссылки Π½Π° сайтС, Π½ΡƒΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ класс ΠΊ ΠΊΠ°ΠΊΠΎΠΌΡƒ Π»ΠΈΠ±ΠΎ Ρ‚Π΅Π³Ρƒ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, h2 ΠΈΠ»ΠΈ li. Π’ Π΄Π°Π½Π½ΠΎΠΌ случаС ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΏΡ€Π΅ΡΠ²Π°Π΅Π²Π°Ρ‚ΡŒ класс ΠΊ Ρ‚Π΅Π³Ρƒ li. Выглядит это ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

HTML

Π—Π΄Π΅ΡΡŒ ΠΌΡ‹ ΠΏΡ€ΠΈΠ΄ΡƒΠΌΠ°Π»ΠΈ класс s1

CSS

Всё. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Ρƒ нас ΠΏΠ»Π°Π²Π½ΠΎΡΡ‚ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° Ρ‚ΠΎΠΉ ссылкС Π³Π΄Π΅ присвоСн этот класс s1

Π Π°Π·Π½Ρ‹Π΅ Ρ†Π²Π΅Ρ‚Π° ссылок

Для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ссылки Ρ€Π°Π·Π½Ρ‹Ρ… Ρ†Π²Π΅Ρ‚ΠΎΠ² ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΎΠ΄Π½ΠΎΠΉ страницС, ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ Ρ‚Π΅Π³Ρƒ с ссылкой присваСваСм Ρ€Π°Π·Π½Ρ‹Π΅ классы Π² стилях. Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим Π½Π° ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅:

HTML

Как Π²ΠΈΠ΄ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΉ Ρ‚Π΅Π³ li ΡƒΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ класс s2.

CSS

Одним словом здСсь ΠΌΡ‹ Π·Π°Π΄Π°Ρ‘ΠΌ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ссылкС ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ, Π° ΠΏΠΎΡ‚ΠΎΠΌ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ класс Π·Π°Π΄Π°Ρ‘ΠΌ Ρ‚Π΅Π³Ρƒ (li) Π½Π° страницС.

ПлавноС смСщСниС ссылки Π²ΠΏΡ€Π°Π²ΠΎ Π½Π° страницС

Π“ΠΎΠ²ΠΎΡ€ΡŽ сразу, Ρ‡Ρ‚ΠΎ Π΄Π°Π½Π½Ρ‹ΠΉ эффСкт, скорСС всСго ΠΌΠ½ΠΎΠ³ΠΈΠΌ Π½Π΅ ΠΏΠΎΠ½Ρ€Π°Π²ΠΈΡ‚ΡŒΡΡ, Π½ΠΎ Π½Π° ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅ я Π΅Π³ΠΎ часто Π·Π°ΠΌΠ΅Ρ‡Π°ΡŽ. МнС ΠΎΠ½ нравится ΠΈ я Ρ…ΠΎΡ‡Ρƒ ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ ΠΈΠΌ с Π’Π°ΠΌΠΈ.

ДСлаСтся этот ΠΏΠ»Π°Π²Π½Ρ‹ΠΉ сдвиг довольно просто. ВсСго лишь Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΈΡΠ²ΠΎΠΈΡ‚ΡŒ ΠΊ списку Π½Π° страницС Ρ‚Π΅Π³ div с ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌ классом.

Для Π½Π°Ρ‡Π°Π»Π° Π½Π°ΠΌ Π½ΡƒΠΆΠ΅Π½ сам html ΠΊΠΎΠ΄ списка, Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΌΡ‹ Π΅Π³ΠΎ Π±ΡƒΠ΄Π΅ΠΌ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π΅Π³ΠΎΠ² ul ΠΈ li:

HTML

Как Π’Ρ‹ ΡƒΠΆΠ΅ Π·Π°ΠΌΠ΅Ρ‚ΠΈΠ»ΠΈ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ ΠΊ списку Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ Ρ‚Π΅Π³ <div> с классом sdvig.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ всё Π·Π°Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΎ Π² стили Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:

CSS

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ (ΠΊΠ°ΠΊ Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅) ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ стоит 0.1 сСкунд, Π° расстояниС сдвига Π² 8px. ЕстСствСнно эти значСния Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ, ΠΏΠΎΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, Ρ‚Π°ΠΊ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ. πŸ™‚

Как Π·Π°Π΄Π°Ρ‚ΡŒ ΠΏΠ»Π°Π²Π½ΡƒΡŽ смСну Ρ†Π²Π΅Ρ‚Π° ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ?

БСгодня ΠΏΠ΅Ρ€Π΅Π΄ Π½Π°ΠΌΠΈ стоит Π·Π°Π΄Π°Ρ‡Π° измСнСния Ρ†Π²Π΅Ρ‚Π° элСмСнта, ΠΊΠΎΠ³Π΄Π° Π½Π° Π½Π΅Π³ΠΎ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ курсор ΠΌΡ‹ΡˆΠΈ.

Рассмотрим Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ нашСй Π·Π°Π΄Π°Ρ‡Π΅ Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ссылки. Допустим, для Π΅Π΅ тСкста установлСн ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ – это дСлаСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства color. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ Ρ€Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Π» Π½Π° Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ курсора, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΊ этому ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρƒ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ псСвдокласс :hover. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΌΡ‹ добьСмся измСнСния Ρ†Π²Π΅Ρ‚Π°, Π½ΠΎ ΠΎΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΠΈΡΡ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎ. Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Π²Ρ€Π΅ΠΌΠ΅Π½Π΅ΠΌ измСнСния, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒΡΡ ΠΊ свойству transition. Π§Π΅Ρ€Π΅Π· Π½Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ врСмя измСнСния Ρ†Π²Π΅Ρ‚Π° Π² миллисСкундах ΠΈΠ»ΠΈ Π² сСкундах.

Π’ ΠΊΠΎΠ΄Π΅ ΡƒΠΊΠ°Π·Π°Π½Π° синяя ссылка, которая Π² ΠΌΠΎΠΌΠ΅Π½Ρ‚ навСдСния курсора ΠΌΡ‹ΡˆΠΈ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ»Π°Π²Π½ΠΎ ΠΌΠ΅Π½ΡΡ‚ΡŒ свой Ρ†Π²Π΅Ρ‚ Π½Π° красный.

:hoverΒΆ

ПсСвдокласс :hover срабатываСт, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚ Π½Π° элСмСнт ΠΌΡ‹ΡˆΡŒΡŽ, Π½ΠΎ Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΡƒΠ΅Ρ‚ Π΅Π³ΠΎ.

Π­Ρ‚ΠΎΡ‚ ΡΡ‚ΠΈΠ»ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡ‚ΡŒΡΡ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ относящимися ΠΊ ссылкам псСвдоклассами, Ρ‚Π°ΠΊΠΈΠΌΠΈ ΠΊΠ°ΠΊ :link , :visited ΠΈ :active , ΠΏΠΎΡΠ²Π»ΡΡŽΡ‰ΠΈΠΌΠΈΡΡ Π² ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΌ порядкС. Π§Ρ‚ΠΎΠ±Ρ‹ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ссылки Π΄ΠΎΠ»ΠΆΠ½Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π²ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ :hover Π΄ΠΎ ΠΏΡ€Π°Π²ΠΈΠ» :link ΠΈ :visited , Π½ΠΎ послС :active , ΠΊΠ°ΠΊ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΎ Π² LVHA-порядкС: :link β€” :visited β€” :hover β€” :active .

ПсСвдокласс :hover ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ ΠΊ Π»ΡŽΠ±ΠΎΠΌΡƒ псСвдоэлСмСнту.

Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Firefox, Internet Explorer, Safari, Opera ΠΈΠ»ΠΈ Chrome, ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ ΡΡ‚ΠΈΠ»ΡŒ, ΠΊΠΎΠ³Π΄Π° курсор (ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ) наводится Π½Π° элСмСнт.

ЗамСчания ΠΏΠΎ использованию

На сСнсорных экранах :hover ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ½Ρ‹ΠΉ ΠΈΠ»ΠΈ Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚. Π’ зависимости ΠΎΡ‚ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, псСвдокласс :hover ΠΌΠΎΠΆΠ΅Ρ‚ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΡΡ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ, ΠΈΠ»ΠΈ ΡΡ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π° Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ врСмя послС наТатия Π½Π° элСмСнта, ΠΈΠ»ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Ρ‚ΡŒ Π΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Π΄Π°ΠΆΠ΅ ΠΎΡΡ‚Π°Ρ‚ΡŒΡΡ послС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ коснулся элСмСнта Π΄ΠΎ наТатия Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ элСмСнт. Π’Π°ΠΊ ΠΊΠ°ΠΊ сСнсорныС устройства ΠΎΡ‡Π΅Π½ΡŒ распространСны, Ρ‚ΠΎ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ ΠΎΡ‡Π΅Π½ΡŒ Π²Π°ΠΆΠ½ΠΎ Π½Π΅ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, доступный Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Ρ‚Π°ΠΊΠΎΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π½Π΅ΡƒΠ΄ΠΎΠ±Π½ΠΎ ΠΈΠ»ΠΈ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° Ρ‚Π°ΠΊΠΈΡ… устройствах.

Бинтаксис¢

Π‘ΠΏΠ΅Ρ†ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈΒΆ

ОписаниС ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ΒΆ

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 1. Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню¢

Π‘ псСвдоклассом :hover Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ слоТныС каскадныС Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌΡ‹. Π­Ρ‚Π° Ρ‚Π΅Ρ…Π½ΠΈΠΊΠ° часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠ΅ мСню Π½Π° чистом CSS (Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° CSS, Π±Π΅Π· использования JavaScript). Π‘ΡƒΡ‰Π½ΠΎΡΡ‚ΡŒ этой Ρ‚Π΅Ρ…Π½ΠΈΠΊΠΈ β€” созданиС ΠΏΡ€Π°Π²ΠΈΠ», Ρ‚ΠΈΠΏΠ° ΡΠ»Π΅Π΄ΡƒΡŽΡˆΠ΅Π³ΠΎ:

Π‘ΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ ΠΏΠΎΠ»Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню, основанный Π½Π° CSS.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 2. ГалСрСя ΠΏΠΎΠ»Π½ΠΎΡ€Π°Π·ΠΌΠ΅Ρ€Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ ΠΏΡ€Π΅Π²ΡŒΡŽΒΆ

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ псСвдокласс :hover , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π³Π°Π»Π΅Ρ€Π΅ΡŽ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с ΠΏΠΎΠ»Π½ΠΎΡ€Π°Π·ΠΌΠ΅Ρ€Π½Ρ‹ΠΌΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌΠΈ, ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌΡ‹ΠΌΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½ΠΈΡ… ΠΌΡ‹ΡˆΠΈ. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ это Π΄Π΅ΠΌΠΎ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 3ΒΆ

Π’ Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ псСвдокласс :hover примСняСтся ΠΊ ссылкС (Ρ‚Π΅Π³Ρƒ <a> ), ΠΏΡ€ΠΈ этом мСняСтся Ρ†Π²Π΅Ρ‚ ссылки ΠΈ Ρ„ΠΎΠ½Π° ΠΏΠΎΠ΄ Π½Π΅ΠΉ. Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 4ΒΆ

Π’ Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ псСвдокласс :hover добавляСтся ΠΊ элСмСнту списка (Ρ‚Π΅Π³ <li> ) для создания Π΄Π²ΡƒΡ…ΡƒΡ€ΠΎΠ²Π½Π΅Π²ΠΎΠ³ΠΎ мСню. Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

Как ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ css

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° мСнялась ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Π΅ курсора ΠΌΡ‹ΡˆΠΈ?

Π—Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΎΠ΄Π½Ρƒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π½Π° Π΄Ρ€ΡƒΠ³ΡƒΡŽ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Ρ‘ курсора ΠΌΡ‹ΡˆΠΈ.

РСшСниС

Π‘ΠΌΠ΅Π½Π° ΠΎΠ΄Π½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π½Π° Π΄Ρ€ΡƒΠ³ΡƒΡŽ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Ρ‘ курсора ΠΌΡ‹ΡˆΠΈ называСтся эффСктом пСрСкатывания. ΠžΠ±Ρ‹Ρ‡Π½ΠΎ для создания эффСкта пСрСкатывания примСняСтся JavaScript, Π½ΠΎ Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв Π²ΠΏΠΎΠ»Π½Π΅ достаточно ΠΈ CSS.

ПсСвдокласс :hover

Π’Π½Π°Ρ‡Π°Π»Π΅ Ρ€Π°Π·Π±Π΅Ρ€Ρ‘ΠΌ, ΠΊΠ°ΠΊ дСлаСтся собствСнно сам эффСкт. Для этой Ρ†Π΅Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ псСвдокласс :hover , ΠΎΠ½ добавляСтся ΠΊ ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠΌΡƒ сСлСктору. Π­Ρ‚ΠΎΡ‚ псСвдокласс опрСдСляСт ΡΡ‚ΠΈΠ»ΡŒ элСмСнта, ΠΊΠΎΠ³Π΄Π° Π½Π° Π½Π΅Π³ΠΎ наводится курсор ΠΌΡ‹ΡˆΠΈ, Ρ‡Ρ‚ΠΎ Π½Π°ΠΌ ΠΊΠ°ΠΊ Ρ€Π°Π· ΠΈ трСбуСтся. Π‘Ρ€Π°Π·Ρƒ ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΠΌ, Ρ‡Ρ‚ΠΎ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ Internet Explorer вСрсии 6 ΠΈ Π½ΠΈΠΆΠ΅ :hover Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ со ссылками, Ρ‚ΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡŽΡ‚ :hover ΠΈ для Π΄Ρ€ΡƒΠ³ΠΈΡ… элСмСнтов. Π’Π°ΠΊ Ρ‡Ρ‚ΠΎ для ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ придётся ΠΏΠΎΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π½ΡƒΡ‚Ρ€ΡŒ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° <a> . Π‘Π°ΠΌ рисунок добавляСтся ΠΈ мСняСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ стилСвого свойства background . Алгоритм дСйствий ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ.

  1. Готовятся Π΄Π²Π° изобраТСния ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, ΠΎΠ΄Π½ΠΎ для исходного Π²ΠΈΠ΄Π°, Π° Π²Ρ‚ΠΎΡ€ΠΎΠ΅ β€” для Π΅Π³ΠΎ Π·Π°ΠΌΠ΅Π½Ρ‹ ΠΏΡ€ΠΈ эффСктС пСрСкатывания.
  2. Π˜ΡΡ…ΠΎΠ΄Π½Π°Ρ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° добавляСтся Π² качСствС Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ рисунка ΠΊ сСлСктору A Ρ‡Π΅Ρ€Π΅Π· стилСвоС свойство background со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ url(URI) , здСсь URI β€” ΠΏΡƒΡ‚ΡŒ ΠΊ графичСскому Ρ„Π°ΠΉΠ»Ρƒ.
  3. ΠŸΡ€ΠΈΡΠΎΠ΅Π΄ΠΈΠ½ΡΠ΅ΠΌ псСвдокласс ΠΊ сСлСктору A ΠΈ снова Π²ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ свойство background , Π½ΠΎ Π² качСствС значСния ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ Π·Π°ΠΌΠ΅Ρ‰Π°ΡŽΡ‰Π΅Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.
  4. Π§Ρ‚ΠΎΠ±Ρ‹ ссылка Π±Ρ‹Π»Π° ΠΏΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, Π΅Ρ‘ слСдуСт ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π² Π±Π»ΠΎΡ‡Π½Ρ‹ΠΉ элСмСнт с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства display со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ block , Π° Ρ‚Π°ΠΊΠΆΠ΅ Π·Π°Π΄Π°Ρ‚ΡŒ высоту ΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ссылки.

На рис. 1 ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Ρ‹ Π΄Π²Π° изобраТСния: исходноС (рис. 1Π°) ΠΈ Π·Π°ΠΌΠ΅Ρ‰Π°ΡŽΡ‰Π΅Π΅ (рис. 1Π±).

Π° Π±

Рис. 1. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ для создания эффСкта пСрСкатывания

ΠžΡΡ‚Π°Ρ‘Ρ‚ΡΡ ΡΠΎΠ±Ρ€Π°Ρ‚ΡŒ вСсь ΠΊΠΎΠ΄ Π²ΠΎΠ΅Π΄ΠΈΠ½ΠΎ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ 1. Π§Ρ‚ΠΎΠ±Ρ‹ ссылка Π½Π΅ Π²Π΅Π»Π° Π½Π° ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ Ρ„Π°ΠΉΠ», Ρ‡Ρ‚ΠΎ Π² Π΄Π°Π½Π½ΠΎΠΌ случаС излишнС, Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Β«Π·Π°Π³Π»ΡƒΡˆΠΊΡƒΒ» Π² Π²ΠΈΠ΄Π΅ символа Ρ€Π΅ΡˆΠ΅Ρ‚ΠΊΠΈ (#) ΠΊ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρƒ href Ρ‚Π΅Π³Π° <a> .

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 1. ИспользованиС псСвдокласса :hover

HTML5 CSS 2.1 IE Cr Op Sa Fx

ΠŸΡ€ΠΈΠ²Π΅Π΄Ρ‘Π½Π½Ρ‹ΠΉ способ хотя ΠΈ прост Π² Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ, Π½ΠΎ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½Ρ‹ΠΉ нСдостаток. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π²Ρ‚ΠΎΡ€ΠΎΠΉ рисунок загруТаСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° ссылку, Ρ‚ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ происходит с Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΏΠ°ΡƒΠ·ΠΎΠΉ. Для устранСния этой Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π΅ Π΄Π²Π° изобраТСния, Π° лишь ΠΎΠ΄Π½ΠΎ.

Π­Ρ„Ρ„Π΅ΠΊΡ‚ пСрСкатывания с ΠΎΠ΄Π½ΠΈΠΌ рисунком

Казалось Π±Ρ‹ имССтся ΠΏΡ€ΠΎΡ‚ΠΈΠ²ΠΎΡ€Π΅Ρ‡ΠΈΠ΅, вСдь эффСкт пСрСкатывания состоит Π² Π·Π°ΠΌΠ΅Π½Π΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ рисунка Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ, ΠΊΠ°ΠΊ ΠΆΠ΅ Ρ‚ΠΎΠ³Π΄Π° ΠΎΠ±ΠΎΠΉΡ‚ΠΈΡΡŒ ΠΎΠ΄Π½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΎΠΉ? На самом Π΄Π΅Π»Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π±ΡƒΠ΄Π΅Ρ‚ Π΄Π²Π° (рис. 2), Π½ΠΎ Ρ…Ρ€Π°Π½ΠΈΡ‚ΡŒΡΡ ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ Π² ΠΎΠ΄Π½ΠΎΠΌ графичСском Ρ„Π°ΠΉΠ»Π΅.

Рис. 2. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с двумя ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌΠΈ

Π‘ΠΌΠ΅Π½Π° ΠΎΠ΄Π½ΠΎΠ³ΠΎ рисунка Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ происходит сдвигом изобраТСния ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ Π·Π° счёт использования ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ свойства background ΠΈΠ»ΠΈ background-position , ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ 2.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 2. ИзмСнСниС полоТСния рисунка

HTML5 CSS 2.1 IE Cr Op Sa Fx

Для сСлСктора A устанавливаСтся Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ‡Π΅Ρ€Π΅Π· свойство background , ΡˆΠΈΡ€ΠΈΠ½Π° ( width ) совпадаСт с рисунком, Π° высота (свойство height ) Ρ€Π°Π²Π½Π° ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Π΅ высоты изобраТСния. Π’ ΠΈΡ‚ΠΎΠ³Π΅ ΠΏΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½Π° ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ зСлСная Π²ΠΊΠ»Π°Π΄ΠΊΠ° Ρ†Π΅Π»ΠΈΠΊΠΎΠΌ.

ΠŸΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ссылку Ρ„ΠΎΠ½ смСщаСтся Π²Π²Π΅Ρ€Ρ… Π½Π° ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρƒ высоты ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ (40 пиксСлов) с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ background-position ΠΈ становится Π²ΠΈΠ΄Π½Π° оранТСвая Π²ΠΊΠ»Π°Π΄ΠΊΠ°.

Как ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ css

Π’ этой Ρ€ΡƒΠ±Ρ€ΠΈΠΊΠ΅ Π’Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ ΡƒΡ€ΠΎΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ относятся ΠΊ Ρ‚Π΅ΠΌΠ΅ создания сайта, Π½ΠΎ Π½Π΅ ΠΏΠΎΠΏΠ°Π»ΠΈ Π½ΠΈ Π² ΠΎΠ΄ΠΈΠ½ Ρ€Π°Π·Π΄Π΅Π».

Как Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ хостинг для своСго сайта?

Π’Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ хостинг для своСго сайта достаточно слоТная Π·Π°Π΄Π°Ρ‡Π°. ОсобСнно сСйчас, ΠΊΠΎΠ³Π΄Π° Π½Π° Ρ€Ρ‹Π½ΠΊΠ΅ услуг хостинга дСйствуСт нСсколько сотСн ΠΈΠ³Ρ€ΠΎΠΊΠΎΠ² с ΠΎΡ‡Π΅Π½ΡŒ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ прСдлоТСниями. Π₯ΠΎΡ€ΠΎΡˆΠΈΠΌ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠΌ являСтся Π»ΠΈΠ΄Π΅Ρ€ Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³Π° Π₯остинг Ниндзя β€” ΠœΠ°ΠΊΡ…ΠΎΡΡ‚.

Как Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ свой сайт Π½Π° хостингС? ΠŸΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹ΠΉ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ хостинг β€” это Π±ΡƒΠ΄ΡƒΡ‰Π΅Π΅ Π’Π°ΡˆΠΈΡ… сайтов

ΠŸΡ€ΠΎΠ΅ΠΊΡ‚ Π³ΠΎΡ‚ΠΎΠ², ВсС ΠΏΡ€ΠΎΠ²Π΅Ρ€Π΅Π½ΠΎ Π½Π° локальном сСрвСрС OpenServer ΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅Π½ΠΎΡΠΈΡ‚ΡŒ сайт Π½Π° хостинг. Π’ΠΎΡ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊΠ°ΠΊΡƒΡŽ компанию Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ? ΠŸΡ€Π΅Π΄Π»Π°Π³Π°ΡŽ Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ хостинг fornex.com. ΠžΡ‚Π»ΠΈΡ‡Π½ΠΎΠ΅ мСсто для Ρ‚Π²ΠΎΠ΅Π³ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° с пСрспСктивами Π±ΡƒΡ€Π½ΠΎΠ³ΠΎ роста.

Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° Π²Π΅Π±-сайтов с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΎΠ½Π»Π°ΠΉΠ½ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹ Wrike

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ вСбсайта β€” процСсс Ρ‚Ρ€ΡƒΠ΄ΠΎΡ‘ΠΌΠΊΠΈΠΉ, Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‰ΠΈΠΉ слаТСнного взаимодСйствия ΠΌΠ΅ΠΆΠ΄Ρƒ Π·Π°ΠΊΠ°Π·Ρ‡ΠΈΠΊΠΎΠΌ ΠΈ исполнитСлСм, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠ΅ΠΆΠ΄Ρƒ всСми Ρ‡Π»Π΅Π½Π°ΠΌΠΈ ΠΊΠΎΠ»Π»Π΅ΠΊΡ‚ΠΈΠ²Π°, Π²ΠΎΠ²Π»Π΅Ρ‡Ρ‘Π½Π½Ρ‹ΠΌΠΈ Π² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚. И Π² этом ΠΎΡ‡Π΅Π½ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠ΅Π΅ ΠΏΠΎΠ΄ΡΠΏΠΎΡ€ΡŒΠ΅ ΠΎΠΊΠ°ΠΆΠ΅Ρ‚ ΠΎΠ½Π»Π°ΠΉΠ½ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ° Wrike.

20 рСсурсов для прототипирования

ΠŸΠΎΠ΄Π±ΠΎΡ€ΠΊΠ° ΠΈΠ· Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… дСсятков рСсурсов для создания ΠΌΠΎΠΊΠ°ΠΏΠΎΠ² ΠΈ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ².

Π’ΠΎΠΏ 10 бСсплатных хостингов

НСбольшая ΠΏΠΎΠ΄Π±ΠΎΡ€ΠΊΠ° ΠΏΡ€ΠΎΠ²Π°ΠΉΠ΄Π΅Ρ€ΠΎΠ² бСсплатного хостинга с ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Ρ‹ΠΌ описаниСм.

Быстрая Π·Π°ΠΌΠ΅Ρ‚ΠΊΠ°: массовый UPDATE Π² MySQL

Ни для ΠΊΠΎΠ³ΠΎ Π½Π΅ сСкрСт ΠΊΠ°ΠΊ Π² MySQL Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ массовый INSERT, Π° Π²ΠΎΡ‚ с UPDATE-ΠΎΠΌ ΠΌΠΎΠ³ΡƒΡ‚ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡƒΡ‚ΡŒ слоТности. Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ ΠΏΡ€ΠΈΠ±Π΅Π³Π°Ρ‚ΡŒ ΠΊ манипуляциям события ON_DUPLICATE ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΉ конструкциСй CASE … WHEN … THEN.

РаспознаваниС тСкста ΠΈΠ· ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Ρ‡Π΅Ρ€Π΅Π· ΠΊΠΎΠΌΠ°Π½Π΄Π½ΡƒΡŽ строку

Для Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊΠ° Π½Π΅ составляСт особого Ρ‚Ρ€ΡƒΠ΄Π° ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ прСдставлСнный тСкст. Для ΠΌΠ°ΡˆΠΈΠ½Ρ‹ Π΄Π°Π½Π½Ρ‹ΠΉ процСсс Π½Π΅ Ρ‚Π°ΠΊ прост. Однако с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ imgclip Π²Ρ‹ смоТСтС быстро Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ Π΄Π°Π½Π½ΡƒΡŽ ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΡŽ.

Как ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ css

Как Π²Ρ‹ Π·Π½Π°Π΅Ρ‚Π΅, Ρ‡Ρ‚ΠΎ сущСствуСт Β«3 способа cssΒ» использованиС β€” для псСвдокласса β€” доступно Ρ‚ΠΎΠ»ΡŒΠΊΠΎ 2. (Π½ΠΎ ΠΎΠ± этом ΠΏΠΎΠ·ΠΆΠ΅!)

ΠŸΡ€ΠΎΡΡ‚ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ использования Β«

hoverΒ«:

Hover html css эффСкт ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

ИзмСнСниС Ρ†Π²Π΅Ρ‚Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Β«

hoverΒ«

Для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΌΡ‹ΡˆΠΊΠΈ β€” Π½Π°Π²Π΅Π΄ΠΈΡ‚Π΅ Π΅Ρ‘ Π½Π° элСмСнт Π½ΠΈΠΆΠ΅:

Как Π² этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ hover!?

Для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π΄Π°Π½Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π½Π°ΠΌ потрСбуСтся:

Π’ Π΄Π°Π½Π½ΠΎΠΌ случаС использовался Ρ‚Π΅Π³ ссылки Β«aΒ»:

Π’ΠΎ Π²Π½ΡƒΡ‚Ρ€ΡŒ элСмСнта ΠΏΠΎΠΌΠ΅Ρ‰Π°Π΅ΠΌ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π΅Π³ΠΎ ΠΎΡ‚Π»ΠΈΡ‡Π°Ρ‚ΡŒ ΠΎΡ‚ Π΄Ρ€ΡƒΠ³ΠΈΡ… элСмСнтов Π½Π° страницС, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ класс ΠΈ добавляСм Π΅ΠΌΡƒ Β«hoverΒ«. Π’ Ρ„ΠΈΠ³ΡƒΡ€Π½Ρ‹Ρ… скобках прописываСм свойство, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ β€” ΠΌΡ‹ Π²Ρ‹Π±Ρ€Π°Π»ΠΈ Ρ†Π²Π΅Ρ‚.

Π”Π°Π»Π΅Π΅ Π½Π°ΠΌ понадобится css β€” Π±ΡƒΠ΄Π΅ΠΌ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ прямо здСсь Π½Π° страницС, поэтому Π½Π°ΠΌ Π½ΡƒΠΆΠ΅Π½ style ΠΈ Π² Π½Π΅Π³ΠΎ ΠΏΠΎΠΌΠ΅Ρ‰Π°Π΅ΠΌ Π²Ρ‹ΡˆΠ΅ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹ΠΉ эффСкт измСнСния

html a href color — ComputerMaker.info

Автор admin На Ρ‡Ρ‚Π΅Π½ΠΈΠ΅ 4 ΠΌΠΈΠ½. ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ΠΎΠ² 14 ΠžΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½ΠΎ

ЗдравствуйтС ΡƒΠ²Π°ΠΆΠ°Π΅ΠΌΡ‹Π΅ Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»ΠΈ. БСгодня ΠΌΡ‹ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΊΠ°ΠΊ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ html ΠΈ css ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ссылку Π½Π° Π’Π°ΡˆΠ΅ΠΌ сайтС: ΠΏΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΈΠ»ΠΈ ΡƒΠ±Ρ€Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅.

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

  1. Как ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ ссылки с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ HTML.
  2. Как ΡƒΠ±Ρ€Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅.
  3. Как ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ ссылки с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS.
  4. Π—Π°Π΄Π°Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° всСх ссылок Π½Π° страницС
  5. Π—Π°Π΄Π°Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… ссылок Π½Π° страницС

Как ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ ссылки с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ HTML.

Как Π²Ρ‹ ΠΏΠΎΠΌΠ½ΠΈΡ‚Π΅, ссылка вставляСтся ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ссылка синСго Ρ†Π²Π΅Ρ‚Π° с ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ. ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠ΅ΠΌ c ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ html ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ ссылки. Для этого добавляСм Π² ΠΊΠΎΠ΄ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ тСкст:

Как Π²ΠΈΠ΄ΠΈΠΌ, ссылка помСняла свой Ρ†Π²Π΅Ρ‚. Какой Ρ†Π²Π΅Ρ‚ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ Ρƒ ссылки, зависит ΠΎΡ‚ #FF0000. Π­Ρ‚ΠΎ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ ΠΊΠΎΠ΄ html, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ присваиваСтся ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ Ρ†Π²Π΅Ρ‚Ρƒ всСй Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ ΠΏΠ°Π»ΠΈΡ‚Ρ€Ρ‹. Для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠΉ ΠΊΠΎΠ΄ ΠΈΠΌΠ΅Π΅Ρ‚ Ρ‚ΠΎΡ‚ ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠΉ Ρ†Π²Π΅Ρ‚ ,ΡΠΎΠ²Π΅Ρ‚ΡƒΡŽ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ ΡΡ‚Π°Ρ‚ΡŒΡŽ ΠΏΠ°Π»ΠΈΡ‚Ρ€Π° Ρ†Π²Π΅Ρ‚Π° html.

Как ΡƒΠ±Ρ€Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅.

Для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ±Ρ€Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π² ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²ΠΊΡƒ html ссылки Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ:

Как Π²ΠΈΠ΄ΠΈΡ‚Π΅, ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ исчСзло.

Как ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ ссылки с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS.

Π’Ρ‹ΡˆΠ΅ΠΎΠΏΠΈΡΠ°Π½Π½Ρ‹ΠΉ ΠΌΠ΅Ρ‚ΠΎΠ΄, нСсмотря Π½Π° всю свою простоту, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΊΡ€Π°ΠΉΠ½Π΅ Ρ€Π΅Π΄ΠΊΠΎ. Как ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, для оформлСния Π²Π΅Π±-страницы ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Ρ‚Π°Π±Π»ΠΈΡ†Π° ститСй style.css Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ прописываСтся ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ всСх элСмСнтов страницы, Π² Ρ‚ΠΎΠΌ числС, ΠΈ ссылок.

Для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ всСх ссылок Π² тСкстС, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΡƒΠ±Ρ€Π°Ρ‚ΡŒ подчСркивания достаточно ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ Π² Ρ„Π°ΠΉΠ»Π΅ css ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄:

Ну Π²ΠΎΡ‚ ΠΈ всС. НС Π·Π°Π±Ρ‹Π²Π°ΠΉΡ‚Π΅ ΠΎΡ†Π΅Π½ΠΈΠ²Π°Ρ‚ΡŒ ΡΡ‚Π°Ρ‚ΡŒΡŽ ΠΈ ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π»Π°ΠΉΠΊΠΈ. Ну ΠΈ, разумССтся, ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅.

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ HTML ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚Π° всСх ссылок Π½Π° страницС, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚Π° для ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… ссылок.

Π—Π°Π΄Π°Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° всСх ссылок Π½Π° страницС

Π¦Π²Π΅Ρ‚Π° ссылок Π·Π°Π΄Π°ΡŽΡ‚ΡΡ Π² качСствС Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² Ρ‚Π΅Π³Π° . Атрибуты ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΈ Ссли ΠΎΠ½ΠΈ Π½Π΅ ΡƒΠΊΠ°Π·Π°Π½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ значСния ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.

link β€” опрСдСляСт Ρ†Π²Π΅Ρ‚ ссылок Π½Π° Π²Π΅Π±-страницС (Ρ†Π²Π΅Ρ‚ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ синий, #0000FF).

alink β€” Ρ†Π²Π΅Ρ‚ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΉ ссылки. Π¦Π²Π΅Ρ‚ ссылки мСняСтся ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° Π½Π΅ΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΡ‹ΡˆΠΈ. Π¦Π²Π΅Ρ‚ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ красный, #FF0000.

vlink β€” Ρ†Π²Π΅Ρ‚ ΡƒΠΆΠ΅ посСщСнных ссылок. Π¦Π²Π΅Ρ‚ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Ρ„ΠΈΠΎΠ»Π΅Ρ‚ΠΎΠ²Ρ‹ΠΉ, #800080.

Π’ HTML Ρ†Π²Π΅Ρ‚Π° Π·Π°Π΄Π°ΡŽΡ‚ΡΡ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Ρ†ΠΈΡ„Ρ€Π°ΠΌΠΈ Π² ΡˆΠ΅ΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚Π΅Ρ€ΠΈΡ‡Π½ΠΎΠΌ ΠΊΠΎΠ΄Π΅, Π² Π²ΠΈΠ΄Π΅ #rrggbb , Π³Π΄Π΅ r, g ΠΈ b ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π°ΡŽΡ‚ соотвСтствСнно ΠΊΡ€Π°ΡΠ½ΡƒΡŽ, Π·Π΅Π»Π΅Π½ΡƒΡŽ ΠΈ синюю ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΡƒΡŽ. Для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚Π° задаСтся ΡˆΠ΅ΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚Π΅Ρ€ΠΈΡ‡Π½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΎΡ‚ 00 Π΄ΠΎ FF, Ρ‡Ρ‚ΠΎ соотвСтствуСт Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Ρƒ ΠΎΡ‚ 0 Π΄ΠΎ 255 Π² дСсятичном исчислСнии. Π—Π°Ρ‚Π΅ΠΌ эти значСния ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΡŽΡ‚ΡΡ Π² ΠΎΠ΄Π½ΠΎ число, ΠΏΠ΅Ρ€Π΅Π΄ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ставится символ # (ΠΏΡ€ΠΈΠΌΠ΅Ρ€ 1).

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 1. Π—Π°Π΄Π°Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚ΠΎΠ² ссылок

Π¦Π²Π΅Ρ‚ Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ Π² ΡˆΠ΅ΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚Π΅Ρ€ΠΈΡ‡Π½ΠΎΠΌ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ слова. Π’ Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° Π²Π΅Π±-страницы установлСн Ρ‡Π΅Ρ€Π½Ρ‹ΠΌ, Π° Ρ†Π²Π΅Ρ‚ ссылок β€” красным.

Для измСнСния Ρ†Π²Π΅Ρ‚Π° ссылок ΡƒΠ΄ΠΎΠ±Π½Π΅Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ CSS. Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ для всСх ссылок Π½Π° Π²Π΅Π±-страницС ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ псСвдоклассы, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ΡΡ ΠΊ сСлСктору A .

visited β€” Π‘Ρ‚ΠΈΠ»ΡŒ для посСщСнной ссылки.

active β€” Π‘Ρ‚ΠΈΠ»ΡŒ для Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΉ ссылки. Активной ссылка становится ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° Π½Π΅Π΅.

hover β€” Π‘Ρ‚ΠΈΠ»ΡŒ для ссылки ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Π΅ ΠΌΡ‹ΡˆΡŒΡŽ.

Π’ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ 2 ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ ссылок Π½Π° Π²Π΅Π±-страницС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ стилСй. Для этого Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡΡ стилСвым свойством color , ΠΎΠ½ΠΎ Π·Π°Π΄Π°Π΅Ρ‚ Ρ†Π²Π΅Ρ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ тСкста, Π² Π΄Π°Π½Π½ΠΎΠΌ случаС, ссылок.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 2. Π¦Π²Π΅Ρ‚ ссылок, Π·Π°Π΄Π°Π½Π½Ρ‹Ρ… Ρ‡Π΅Ρ€Π΅Π· стили

Π—Π°Π΄Π°Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… ссылок Π½Π° страницС

Π’Ρ‹ΡˆΠ΅ΠΎΠΏΠΈΡΠ°Π½Π½Ρ‹ΠΉ способ задания Ρ†Π²Π΅Ρ‚ΠΎΠ² Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ для всСх ссылок Π²Π΅Π±-страницы. Однако, ΠΈΠ½ΠΎΠ³Π΄Π° Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ Ρ†Π²Π΅Ρ‚Π°. Π‘Π²Π΅Ρ‚Π»Ρ‹Π΅, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, для Ρ‚Π΅ΠΌΠ½Ρ‹Ρ… областСй Π²Π΅Π±-страницы, Π° Ρ‚Π΅ΠΌΠ½Ρ‹Π΅ Ρ†Π²Π΅Ρ‚Π° β€” соотвСтствСнно для свСтлых. Для этого Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ стилями.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 3. ИзмСнСниС Ρ†Π²Π΅Ρ‚Π° ссылки с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ стилСй

Π’ Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Ρ‹ Ρ‚Ρ€ΠΈ Ρ€Π°Π·Π½Ρ‹Ρ… способа задания Ρ†Π²Π΅Ρ‚Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ стилСй.

Бсылка Π² HTML выглядит ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π΅Π΅ Ρ†Π²Π΅Ρ‚ синий ΠΈ ΠΎΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π΅Π΅ Ρ†Π²Π΅Ρ‚ ΠΈ ΡƒΠ±Ρ€Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅, просто Π΄ΠΎΠ±Π°Π²ΠΈΠ² Π²Π½ΡƒΡ‚Ρ€ΡŒ Ρ‚Π΅Π³Π° свойство style с ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌΠΈ значСниями. Π’ΠΎΡ‚ Ρ‚Π°ΠΊ:

Π•ΡΡ‚ΡŒ ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠΉ способ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ внСшний Π²ΠΈΠ΄ ссылки. Для этих Ρ†Π΅Π»Π΅ΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй CSS. ΠŸΡ€ΠΈΡ‡Π΅ΠΌ Π²Ρ‹ смоТСтС Π·Π°Π΄Π°Ρ‚ΡŒ значСния для ссылок ΠΏΡ€ΠΈ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… условиях, Π±ΡƒΠ΄ΡŒ-Ρ‚ΠΎ активная ссылка (a:active), посСщСнная ссылка(a:visited) Π»ΠΈΠ±ΠΎ ссылка ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΌΡ‹ΡˆΠΈ (a:hover). Π’ΠΎΡ‚ ΠΊΠ°ΠΊ это дСлаСтся:

a color:#FF0000;
text-decoration:none
>

a:active color:#FF0000;
text-decoration:none
>

a:visited color:#666666;
text-decoration:none
>

a:hover color:#339900;
text-decoration: underline
>

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ссылки Π² html мСнялся Ρ†Π²Π΅Ρ‚

Как ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π²ΠΈΠ΄ ссылки ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Π΅ курсора ΠΌΡ‹ΡˆΠΈ?

Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ тСкстовой ссылки, ΠΊΠΎΠ³Π΄Π° Π½Π° Π½Π΅Ρ‘ наводится курсор ΠΌΡ‹ΡˆΠΈ ΠΈ Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎ ΠΏΡ€ΠΈ ΡƒΠ²Π΅Π΄Π΅Π½ΠΈΠΈ курсора.

РСшСниС

ПсСвдокласс :hover , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ добавляСтся ΠΊ сСлСктору A , опрСдСляСт состояниС ссылки ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Ρ‘Π½Π½ΠΎΠΌ Π½Π° Π½Π΅Ρ‘ курсорС ΠΌΡ‹ΡˆΠΈ. Π’ стилях Π²Π½Π°Ρ‡Π°Π»Π΅ указываСтся сСлСктор A , ΠΏΠΎΡ‚ΠΎΠΌ :hover (ΠΏΡ€ΠΈΠΌΠ΅Ρ€ 1).

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 1. ИзмСнСниС Π²ΠΈΠ΄Π° ссылки

HTML5 CSS 2.1 IE Cr Op Sa Fx

Π’ Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ссылка становится ΠΏΠΎΠ΄Ρ‡Ρ‘Ρ€ΠΊΠ½ΡƒΡ‚ΠΎΠΉ ΠΈ мСняСт свой Ρ†Π²Π΅Ρ‚, ΠΊΠΎΠ³Π΄Π° Π½Π° Π½Π΅Ρ‘ наводится ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ (рис. 1). Π—Π°ΠΌΠ΅Ρ‚ΡŒΡ‚Π΅, Ρ‡Ρ‚ΠΎ псСвдокласс :hover Π² ΠΊΠΎΠ΄Π΅ ΠΈΠ΄Ρ‘Ρ‚ послС :visited . Π­Ρ‚ΠΎ ΠΈΠΌΠ΅Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΠΈΠ½Π°Ρ‡Π΅ посСщённыС ссылки Π² Π΄Π°Π½Π½ΠΎΠΌ случаС Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ свой Ρ†Π²Π΅Ρ‚.

Рис. 1. Π’ΠΈΠ΄ ссылки ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Ρ‘ курсора ΠΌΡ‹ΡˆΠΈ

Аналогично ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΈ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° ΠΏΠΎΠ΄ ссылкой ΠΏΡ€ΠΈ Π΅Ρ‘ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² свойство background ΠΊ сСлСктору A:hover , ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ 2.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 2. ИзмСнСниС Ρ†Π²Π΅Ρ‚Π° Ρ„ΠΎΠ½Π° ссылки

HTML5 CSS 2.1 IE Cr Op Sa Fx

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° рис. 2. Π§Ρ‚ΠΎΠ±Ρ‹ тСкст ΠΏΠ»ΠΎΡ‚Π½ΠΎ Π½Π΅ ΠΏΡ€ΠΈΠ»Π΅Π³Π°Π» ΠΊ Ρ„ΠΎΠ½Ρƒ, ΠΊ сСлСктору A Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΎ свойство padding .

Как ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ ссылки ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ?

Для измСнСния Ρ†Π²Π΅Ρ‚Π° тСкстовой ссылки ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Ρ‘ курсора ΠΌΡ‹ΡˆΠΈ примСняСтся псСвдокласс :hover, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ добавляСтся ΠΊ сСлСктору A . Π‘ΠΏΠ΅Ρ€Π²Π° Ρ‡Π΅Ρ€Π΅Π· сСлСктор A Π·Π°Π΄Π°Ρ‘ΠΌ Ρ†Π²Π΅Ρ‚ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Ρ… ссылок, Π·Π°Ρ‚Π΅ΠΌ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ :hover Π·Π°Π΄Π°Ρ‘ΠΌ Ρ†Π²Π΅Ρ‚ ссылок ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ (ΠΏΡ€ΠΈΠΌΠ΅Ρ€ 1).

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 1. ИзмСнСниС Π²ΠΈΠ΄Π° ссылки

Π’ Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ссылка становится ΠΏΠΎΠ΄Ρ‡Ρ‘Ρ€ΠΊΠ½ΡƒΡ‚ΠΎΠΉ ΠΈ мСняСт свой Ρ†Π²Π΅Ρ‚, ΠΊΠΎΠ³Π΄Π° Π½Π° Π½Π΅Ρ‘ наводится ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ (рис. 1). Π—Π°ΠΌΠ΅Ρ‚ΡŒΡ‚Π΅, Ρ‡Ρ‚ΠΎ псСвдокласс :hover Π² ΠΊΠΎΠ΄Π΅ ΠΈΠ΄Ρ‘Ρ‚ послС :visited . Π­Ρ‚ΠΎ ΠΈΠΌΠ΅Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΠΈΠ½Π°Ρ‡Π΅ посСщённыС ссылки Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΌΠ΅Π½ΡΡ‚ΡŒ свой Ρ†Π²Π΅Ρ‚.

Рис. 1. Π’ΠΈΠ΄ ссылки ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

Аналогично ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΈ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° ΠΏΠΎΠ΄ ссылкой ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Ρ‘, Π΄ΠΎΠ±Π°Π²ΠΈΠ² свойство background ΠΊ сСлСктору a:hover , ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ 2.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 2. ИзмСнСниС Ρ†Π²Π΅Ρ‚Π° Ρ„ΠΎΠ½Π° ссылки

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° рис. 2. Π§Ρ‚ΠΎΠ±Ρ‹ тСкст ΠΏΠ»ΠΎΡ‚Π½ΠΎ Π½Π΅ ΠΏΡ€ΠΈΠ»Π΅Π³Π°Π» ΠΊ Ρ„ΠΎΠ½Ρƒ, ΠΊ сСлСктору A Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΎ свойство padding.

Как ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π²ΠΈΠ΄ ссылки ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

ΠŸΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ссылку (Ρ‚Π΅Π³ <a>) ΠΎΠ½Π° ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ измСняСт свой Π²ΠΈΠ΄ (становится Π² фокусС). Π§Π°Ρ‰Π΅ всСго это простоС ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° ΠΈΠ»ΠΈ добавлСния подчСркивания. Π’Π°ΠΊΠΆΠ΅ измСняСтся курсор Π½Π° ΠΊΠΈΡΡ‚ΡŒ Ρ€ΡƒΠΊΠΈ. Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ рассмотрим ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΊΠ°ΠΊ красиво Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ стиля ссылки ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора.

Π’ Ρ‚Π°Π±Π»ΠΈΡ†Π΅ стилСй Ρƒ ссылки Π΅ΡΡ‚ΡŒ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ псСвдокласс :hover . Он ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ Π·Π° ΡΡ‚ΠΈΠ»ΡŒ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. Как Ρ‚ΠΎΠ»ΡŒΠΊΠΎ курсор Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΠ±Ρ€Π°Π½ с ссылки, ΠΎΠ½Π° вСрнСтся Π² исходноС состояниС.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ с ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ Π²ΠΈΠ΄Π° ссылки ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 1. Как ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ ΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

ΠŸΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΡƒΠ΅Ρ‚ΡΡ Π½Π° страницС Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 2. Как ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ ссылки ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

ΠŸΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΡƒΠ΅Ρ‚ΡΡ Π½Π° страницС Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 3. Как ΠΏΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ курсор ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ссылку

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Ρƒ ссылок курсор ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΈΠΌΠ΅Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ cursor : pointer . Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠΌ Π΅Π³ΠΎ Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ.

ΠŸΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΡƒΠ΅Ρ‚ΡΡ Π½Π° страницС Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 4. Π‘Π³Π»Π°ΠΆΠ΅Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ стилСй ссылки

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства transition ΠΌΡ‹ сгладим ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ измСнСния Ρ„ΠΎΠ½Π° ΠΈ Ρ†Π²Π΅Ρ‚Π° ссылки.

МСняСм Ρ†Π²Π΅Ρ‚Π° ссылок

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ измСнСния Ρ†Π²Π΅Ρ‚Π° ссылок ΠΎΠ΄Π½Π° ΠΈΠ· Π²Π°ΠΆΠ½Ρ‹Ρ… ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΠΈΡ… HTML-вСрстки. Π’Π΅Π΄ΡŒ это позволяСт Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π³Ρ€Π°ΠΌΠΎΡ‚Π½ΠΎ Π²ΠΏΠΈΡΠ°Ρ‚ΡŒ ссылки Π² Π΄ΠΈΠ·Π°ΠΉΠ½ сайта, Π½ΠΎ ΠΈ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ посСтитСлям ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π² Π΅Π³ΠΎ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ. Π’ ΡƒΡ€ΠΎΠΊΠ΅ Бсылки ΠΈ ΠΈΡ… разновидности Π²Ρ‹ ΡƒΠ·Π½Π°Π»ΠΈ, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ посСщСнныС, нСпосСщСнныС, Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ ссылки ΠΈ ссылки ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора ΠΌΡ‹ΡˆΠΈ. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ Π½Π°ΡƒΡ‡ΠΈΡ‚Π΅ΡΡŒ ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ ссылок Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΈΠ· этих состояний.

Π’ старых вСрсиях HTML сущСствовали ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ Ρ‚Π΅Π³Π° <BODY> , ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ ссылок Π½Π° HTML-страницС, это link , alink ΠΈ vlink , Π½ΠΎ Π² соврСмСнном HTML ΠΈΡ… Π½Π΅Ρ‚. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ ΠΌΡ‹ ΠΎΠΏΡΡ‚ΡŒ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ стили (CSS), Π° Π·Π½Π°Ρ‡ΠΈΡ‚ Ρ‡Ρ‚ΠΎ? Π’ΠΎΡ‚ ΠΈ Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ, Π½Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ style , Π° Ρ‚Π°ΠΊ Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΡ‹Π΅ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ стили. Для этого Π½Π°ΠΌ Π½Π°Π΄ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π² Β«ΡˆΠ°ΠΏΠΊΡƒΒ» страницы ( <HEAD> ) Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ‚Π΅Π³ <STYLEΒ  type= «text/css» > . </STYLE> , Π° Π²Π½ΡƒΡ‚Ρ€ΠΈ Π½Π΅Π³ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ нСсколько ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… стилСй:

C Ρ‚Π΅Π³ΠΎΠΌ <STYLE> Π²Ρ‹ ΠΏΠΎΠΊΠ° Π΅Ρ‰Π΅ Π½Π΅ Π·Π½Π°ΠΊΠΎΠΌΡ‹, Π½ΠΎ Ρ‚ΡƒΡ‚ ΠΈ ΡƒΡ‡ΠΈΡ‚ΡŒ Π½Π΅Ρ‡Π΅Π³ΠΎ. Он ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΡ… стилСй, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Π΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Π² ΠΏΡ€Π΅Π΄Π΅Π»Π°Ρ… всСй страницы. А Π΅Π³ΠΎ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ type ΠΊΠ°ΠΊ Ρ€Π°Π· ΠΈ Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π²Π½ΡƒΡ‚Ρ€ΠΈ находятся стили (CSS), Π° Π½Π΅ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ тСкст.

Π§Ρ‚ΠΎ касаСтся самих стилСй, Ρ‚ΠΎ сначала Ρ‚Π°ΠΌ ΠΈΠ΄Π΅Ρ‚ имя Ρ‚Π΅Π³Π°, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ примСняСтся ΡΡ‚ΠΈΠ»ΡŒ (Π² нашСм случаС это <A> ), Π·Π°Ρ‚Π΅ΠΌ послС двоСточия указываСтся ΠΊ ΠΊΠ°ΠΊΠΎΠΉ ΠΈΠΌΠ΅Π½Π½ΠΎ ссылкС примСняСтся ΡΡ‚ΠΈΠ»ΡŒ (link, visited, hover, active). Ну Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ находится Π² Ρ„ΠΈΠ³ΡƒΡ€Π½Ρ‹Ρ… скобках Π²Π°ΠΌ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ ΡƒΠΆΠ΅ Ρ…ΠΎΡ€ΠΎΡˆΠΎ извСстно ΠΏΠΎ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠΌ ΡƒΡ€ΠΎΠΊΠ°ΠΌ. И Π½Π΅ Π·Π°Π±Ρ‹Π²Π°ΠΉΡ‚Π΅ ΠΏΡ€ΠΎ совСт: Π»ΡƒΡ‡ΡˆΠ΅ всСгда Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚ Π² HEX-Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ со Π·Π½Π°ΠΊΠΎΠΌ Ρ€Π΅ΡˆΠ΅Ρ‚ΠΊΠ° (#) Π²ΠΏΠ΅Ρ€Π΅Π΄ΠΈ, Π° Π½Π΅ ΠΏΠΈΡΠ°Ρ‚ΡŒ имя Ρ†Π²Π΅Ρ‚Π°.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ измСнСния Ρ†Π²Π΅Ρ‚Π° ссылок Π² HTML-страницС

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅

Если Π²Ρ‹ Π½Π΅Π΄Π°Π²Π½ΠΎ Π±Ρ‹Π»ΠΈ Π½Π° страницах ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Ρ… Π² ссылках, Ρ‚ΠΎ СстСствСнно ссылки Π±ΡƒΠ΄ΡƒΡ‚ сразу ΠΎΠΊΡ€Π°ΡˆΠ΅Π½Ρ‹ Π² «посСщСнный» Ρ†Π²Π΅Ρ‚.

ИзмСняСм Ρ†Π²Π΅Ρ‚ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… ссылок

Иногда Π²Π°ΠΌ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ†Π²Π΅Ρ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ссылки отличался ΠΎΡ‚ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ…. Π’ΠΎΠ³Π΄Π° ΡƒΠΊΠ°ΠΆΠΈΡ‚Π΅ Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ‚Π΅Π³Π° <A> Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ style= «color:Ρ†Π²Π΅Ρ‚» ΠΈ Π·Π°Π΄Π°ΠΉΡ‚Π΅ Π½ΡƒΠΆΠ½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚.

Когда ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ псСвдоклассы :hover, :focus ΠΈ :active?

Когда ΠΌΡ‹ Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ элСмСнт ΠΏΠΎ Π΅Π³ΠΎ . class ΠΈΠ»ΠΈ #id , ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ ΠΏΡ€Π΅Π΄ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ ΠΈ Π½Π΅ΠΈΠ·ΠΌΠ΅Π½Π½Ρ‹Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π·Π°ΠΏΠ΅ΠΊΠ°ΡŽΡ‚ΡΡ Π² DOM. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ псСвдоклассов ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ элСмСнты, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π΅Ρ‰Π΅ Π½Π΅Ρ‚ Π² DOM, ΠΈ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ Π² зависимости ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ взаимодСйствуСт со страницСй.

:hover , :focus ΠΈ :active β€” это псСвдоклассы, опрСдСляСмыС дСйствиями ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· Π½ΠΈΡ… соотвСтствуСт ΠΎΡ‡Π΅Π½ΡŒ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠ΅ взаимодСйствия ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ с элСмСнтом Π½Π° страницС, Ρ‚Π°ΠΊΠΈΠΌ ΠΊΠ°ΠΊ ссылка, ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΈΠ»ΠΈ ΠΏΠΎΠ»Π΅ Π²Π²ΠΎΠ΄Π°.

ΠŸΡ€ΠΈ Ρ‚ΠΎΠΌ Ρ€Π°Π·Π½ΠΎΠΎΠ±Ρ€Π°Π·ΠΈΠΈ устройств Π²Π²ΠΎΠ΄Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ ΠΈΠΌΠ΅Π΅ΠΌ сСгодня, эти псСвдоклассы Ρ‚Π°ΠΊΠΆΠ΅ Π²Π΅Π΄ΡƒΡ‚ сСбя Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎ-Ρ€Π°Π·Π½ΠΎΠΌΡƒ Π² зависимости ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, взаимодСйствуСт Π»ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ с элСмСнтом с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΡ‹ΡˆΠΈ 🐭, ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ ⌨️ ΠΈΠ»ΠΈ сСнсорного экрана πŸ“±, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π·Π°Ρ‚Ρ€ΡƒΠ΄Π½ΠΈΡ‚ΡŒ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΈ ΠΊΠΎΠ³Π΄Π° ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ эти ситуации.

Когда примСняСтся

:hover

ПсСвдокласс :hover , Ρ‚Π°ΠΊΠΆΠ΅ Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΡ‹ΠΉ «псСвдоклассом навСдСния указатСля», примСняСтся, ΠΊΠΎΠ³Π΄Π° ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ устройство взаимодСйствуСт с элСмСнтом, Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ активируя Π΅Π³ΠΎ.

Π’ΠΈΠΏΠΈΡ‡Π½Ρ‹ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ этого являСтся Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΌΡ‹ΡˆΠΈ 🐭 Π½Π° элСмСнт. Если Π²Ρ‹ Π½Π°Π²Π΅Π΄Π΅Ρ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ Π½ΠΈΠΆΠ΅, Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ ΠΎΠ½Π° стала ΠΆΠ΅Π»Ρ‚ΠΎΠΉ.

 ΠΊΠ½ΠΎΠΏΠΊΠ°: hover { background-color: #ffdb3a; }
 

Β 

На мобильном устройствС πŸ“± с Π»ΡŽΠ±Ρ‹ΠΌ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌ элСмСнтом ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ²Π΅Ρ€ΡˆΠΈΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½ΠΎ дСйствиС β€” ΠΊΠΎΡΠ½ΡƒΡ‚ΡŒΡΡ/Ρ‰Π΅Π»ΠΊΠ½ΡƒΡ‚ΡŒ Π΅Π³ΠΎ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ссли Π²Ρ‹ Π½Π°ΠΆΠΌΠ΅Ρ‚Π΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ Π²Ρ‹ΡˆΠ΅, ΠΎΠ½Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ Ρ†Π²Π΅Ρ‚, нСсмотря Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π½Π΅ «просто» Π½Π°Π²ΠΎΠ΄ΠΈΡ‚Π΅ Π½Π° Π½Π΅Π΅ курсор. Π­Ρ‚ΠΎ связано с Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах события, Π·Π°ΠΏΡƒΡΠΊΠ°ΡŽΡ‰ΠΈΠ΅ эти псСвдоклассы, ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½Π΅Π½Ρ‹. посмотрим с

:focus ΠΈ :active Ρ‚Π°ΠΊΠΆΠ΅ псСвдоклассы.

НаконСц, для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Π½Ρ‹Ρ… устройств ⌨️ псСвдокласс :hover Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ запускаСтся. ΠšΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Π° Π½Π΅ считаСтся Β«ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΒ» устройством ΠΈ поэтому Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ ΠΊ этому псСвдоклассу навСдСния указатСля.

Когда примСняСтся

:focus

ПсСвдокласс :focus примСняСтся, ΠΊΠΎΠ³Π΄Π° элСмСнт находится Π² состоянии, Π³ΠΎΡ‚ΠΎΠ²ΠΎΠΌ для взаимодСйствия, Ρ‚.

Π΅. ΠΎΠ½ ΠΈΠΌΠ΅Π΅Ρ‚ фокус устройства Π²Π²ΠΎΠ΄Π°. Когда это ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌΠΎ, это довольно сильно отличаСтся ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ устройствами Π²Π²ΠΎΠ΄Π°.

ΠŸΡ€ΠΈ использовании ΠΌΡ‹ΡˆΠΈ 🐭 ΠΈΠ»ΠΈ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎΠ³ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎ устройства псСвдокласс :focus Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ, ΠΊΠ°ΠΊ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°Ρ‡Π½Π΅Ρ‚ Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ элСмСнт, ΠΈ, Ρ‡Ρ‚ΠΎ Π²Π°ΠΆΠ½ΠΎ, ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Ρ‚ΡŒ ΠΎΡΡ‚Π°Π²Π°Ρ‚ΡŒΡΡ Π² фокусС, ΠΏΠΎΠΊΠ° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π΅ Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΡƒΠ΅Ρ‚ Π΄Ρ€ΡƒΠ³ΠΎΠΉ элСмСнт. НапримСр, Ссли Π²Ρ‹ Π½Π°ΠΆΠΌΠ΅Ρ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π½ΠΈΠΆΠ΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΡ‹ΡˆΠΈ, Π²Ρ‹ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ ΠΎΠ½Π° становится ΠΆΠ΅Π»Ρ‚ΠΎΠΉ, ΠΊΠ°ΠΊ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Ρ‹ Π½Π°Ρ‡Π½Π΅Ρ‚Π΅ взаимодСйствиС с Ρ‰Π΅Π»Ρ‡ΠΊΠΎΠΌ. Кнопка вСрнСтся Π² состояниС ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² Ρ‚ΠΎΠΌ случаС, Ссли Π²Ρ‹ Ρ‰Π΅Π»ΠΊΠ½Π΅Ρ‚Π΅ Π³Π΄Π΅-Π½ΠΈΠ±ΡƒΠ΄ΡŒ Π΅Ρ‰Π΅ Π½Π° страницС.

 ΠΊΠ½ΠΎΠΏΠΊΠ°: фокус { background-color: #ffdb3a; }
 

Β 

Для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ ⌨️ фокусировка Π½Π° элСмСнтС ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΡ…ΠΎΠΆΠ° Π½Π° Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π½Π° Π½Π΅Π³ΠΎ курсора для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΌΡ‹ΡˆΠΈ. МнС нравится Π΄ΡƒΠΌΠ°Ρ‚ΡŒ ΠΎ псСвдоклассС :focus ΠΊΠ°ΠΊ ΠΎ состоянии навСдСния для ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Π½Ρ‹Ρ… устройств, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ это сигнализируСт ΠΎ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠΌ Π½Π°ΠΌΠ΅Ρ€Π΅Π½ΠΈΠΈ взаимодСйствия.

Для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ с сСнсорным экраном πŸ“± псСвдокласс :focus примСняСтся снова, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ‚ Π½Π° элСмСнт. Однако слСдуСт ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ это Π½Π΅ относится ΠΊ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½ΠΎΠΌΡƒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ Safari.

Когда

:active примСняСтся

НаконСц, псСвдокласс :active примСняСтся Π² ΠΏΠ΅Ρ€ΠΈΠΎΠ΄, ΠΊΠΎΠ³Π΄Π° элСмСнт активируСтся. НапримСр, ΠΏΡ€ΠΈ использовании ΠΌΡ‹ΡˆΠΈ 🐭 это Π±ΡƒΠ΄Π΅Ρ‚ врСмя ΠΌΠ΅ΠΆΠ΄Ρƒ Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ΠΌ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΡ‹ΡˆΠΈ ΠΈ Π΅Π΅ отпусканиСм.

Если Π²Ρ‹ быстро Π½Π°ΠΆΠΌΠ΅Ρ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π½ΠΈΠΆΠ΅, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π΅ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ ΠΊΡ€Π°Ρ‚ΠΊΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ измСнСния Ρ†Π²Π΅Ρ‚Π°, Π½ΠΎ Ссли Π²Ρ‹ Π½Π°ΠΆΠΌΠ΅Ρ‚Π΅ ΠΈ ΡƒΠ΄Π΅Ρ€ΠΆΠΈΡ‚Π΅, Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅, ΠΊΠΎΠ³Π΄Π° псСвдокласс Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½.

 ΠΊΠ½ΠΎΠΏΠΊΠ°: активная {Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: #ffdb3a; }
 

Β 

ПсСвдокласс :active Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ‚Π°ΠΊΠΈΠΌ ΠΆΠ΅ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ для взаимодСйствия с ΠΌΡ‹ΡˆΡŒΡŽ ΠΈ ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€ΠΎΠΉ ⌨️.

На ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах πŸ“±, ΠΊΠ°ΠΊ ΠΈ псСвдокласс :focus , псСвдокласс :active примСняСтся ΠΏΡ€ΠΈ касании элСмСнта. И ΠΎΠΏΡΡ‚ΡŒ ΠΆΠ΅, это Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌΠΎ Π² мобильном Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ Safari.

ОбъСдинСниС

:hover , :focus ΠΈ :active

Π’Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ условия, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· этих псСвдоклассов, Π½Π΅ ΠΈΡΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ Π΄Ρ€ΡƒΠ³ Π΄Ρ€ΡƒΠ³Π°. На самом Π΄Π΅Π»Π΅, Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв, ΠΊΠΎΠ³Π΄Π° элСмСнт щСлкаСтся ΠΌΡ‹ΡˆΡŒΡŽ, Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡŽΡ‚ΡΡ всС Ρ‚Ρ€ΠΈ условия: ΠΌΡ‹ΡˆΡŒ находится Π½Π°Π΄ элСмСнтом, элСмСнт находится Π² фокусС ΠΈ элСмСнт активируСтся.

ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ это, ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ² Ρ„ΠΎΠ½ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ссли Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡŽΡ‚ΡΡ всС Ρ‚Ρ€ΠΈ условия.

 ΠΊΠ½ΠΎΠΏΠΊΠ°: Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅: фокус: Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ {
  Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: #ffdb3a;
}
 

Если Π½Π°ΠΆΠ°Ρ‚ΡŒ ΠΈ ΡƒΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π½ΠΈΠΆΠ΅, ΠΎΠ½Π° станСт ΠΆΠ΅Π»Ρ‚ΠΎΠΉ. Но Ссли Π²Ρ‹ Ρ‰Π΅Π»ΠΊΠ½Π΅Ρ‚Π΅ ΠΈ ΡƒΠ΄Π΅Ρ€ΠΆΠΈΡ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ, ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΠ² Π΅Π³ΠΎ, Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ ΠΎΠ½ тСряСт Ρ†Π²Π΅Ρ‚.

Β 

Π­Ρ‚Π° Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ псСвдоклассы ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ для Ρ‚ΠΎΠ½ΠΊΠΎΠΉ настройки Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ состояния.

ΠŸΠΎΡ€ΡΠ΄ΠΎΠΊ стилСй —

:hover Π·Π°Ρ‚Π΅ΠΌ :focus Π·Π°Ρ‚Π΅ΠΌ :active

Из-Π·Π° Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ эти условия ΠΌΠΎΠ³ΡƒΡ‚ ΠΈ часто ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ, Π²Π°ΠΆΠ΅Π½ порядок, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΌΡ‹ добавляСм эти стили.

Допустим, Ρƒ нас Π΅ΡΡ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ стили:

 button:active {
  Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: Π·Π΅Π»Π΅Π½Ρ‹ΠΉ;
}
ΠΊΠ½ΠΎΠΏΠΊΠ°: фокус {
  Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: синий;
}
ΠΊΠ½ΠΎΠΏΠΊΠ°:Π½Π°Π²Π΅Π΄ΠΈΡ‚Π΅ {
  Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: красный;
}
 

Π‘ΡƒΠ΄ΡƒΡ‚ Π²ΠΈΠ΄Π½Ρ‹ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ стили :hover

Β 

Когда Π²Ρ‹ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚Π΅ курсор ΠΈ взаимодСйствуСтС с элСмСнтом Π²Ρ‹ΡˆΠ΅, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ стили, ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½Π½Ρ‹Π΅ ΠΊ :hover , Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€Π΅ΠΎΠ±Π»Π°Π΄Π°Ρ‚ΡŒ, ΠΏΠΎΠΊΠ° Π²Ρ‹ всС Π΅Ρ‰Π΅ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚Π΅ Π½Π° Π½Π΅Π³ΠΎ курсор. Как ΠΌΡ‹ Π²ΠΈΠ΄Π΅Π»ΠΈ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ всС Ρ‚Ρ€ΠΈ события ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ Π²ΠΎ врСмя Ρ‚ΠΈΠΏΠΈΡ‡Π½ΠΎΠ³ΠΎ события Ρ‰Π΅Π»Ρ‡ΠΊΠ°, каскад Π±Π΅Ρ€Π΅Ρ‚ Π²Π΅Ρ€Ρ…, ΠΈ ΠΏΠΎΠ±Π΅ΠΆΠ΄Π°Π΅Ρ‚ ΡΡ‚ΠΈΠ»ΡŒ, ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ послСдним.

Π’ΠΎΡ‚ ΠΏΠΎΡ‡Π΅ΠΌΡƒ Π²Π°ΠΆΠ½ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡ‚ΡŒ эти стили Π² Ρ‚ΠΎΠΌ порядкС, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΎΠ½ΠΈ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ происходят, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ Π±Ρ‹Π»ΠΎ понятно, ΠΊΠΎΠ³Π΄Π° распознаСтся Π½ΠΎΠ²ΠΎΠ΅ взаимодСйствиС. Как ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ сначала Π½Π°Π²ΠΎΠ΄ΠΈΡ‚ курсор Π½Π° элСмСнт, Π·Π°Ρ‚Π΅ΠΌ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚ Π½Π° Π½Π΅Π³ΠΎ фокус, Π° Π·Π°Ρ‚Π΅ΠΌ Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΡƒΠ΅Ρ‚ Π΅Π³ΠΎ. Π˜Ρ‚Π°ΠΊ, Π»ΡƒΡ‡ΡˆΠΈΠΉ способ ΡƒΠΏΠΎΡ€ΡΠ΄ΠΎΡ‡ΠΈΡ‚ΡŒ стили псСвдокласса β€” это : Π½Π°Π²Π΅Π΄ΠΈΡ‚Π΅ курсор Π½Π° , Π·Π°Ρ‚Π΅ΠΌ : фокус , Π·Π°Ρ‚Π΅ΠΌ : Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΡƒΠΉΡ‚Π΅ .

 ΠΊΠ½ΠΎΠΏΠΊΠ°: Π½Π°Π²Π΅Π΄ΠΈΡ‚Π΅ {
  Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: Π·Π΅Π»Π΅Π½Ρ‹ΠΉ;
}
ΠΊΠ½ΠΎΠΏΠΊΠ°: фокус {
  Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: синий;
}
ΠΊΠ½ΠΎΠΏΠΊΠ°: активная {
  Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: красный;
}
 

ВсС стили Π±ΡƒΠ΄ΡƒΡ‚ Π²ΠΈΠ΄Π½Ρ‹

Β 

РСзюмС

ΠŸΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ‹ :hover , :focus ΠΈ :active ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π½Π°ΠΌ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ элСмСнты Π² ΠΎΡ‚Π²Π΅Ρ‚ Π½Π° Ρ‚ΠΎ, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ взаимодСйствуСт с Π½ΠΈΠΌΠΈ. Π’ зависимости ΠΎΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠ³ΠΎ устройства эти псСвдоклассы становятся Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ Π² Ρ€Π°Π·Π½Ρ‹Π΅ ΠΌΠΎΠΌΠ΅Π½Ρ‚Ρ‹ (ΠΈΠ»ΠΈ Π½Π΅ Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΡƒΡŽΡ‚ΡΡ Π²ΠΎΠΎΠ±Ρ‰Π΅).

Β  :Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ :фокус :Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ
ΠœΡ‹ΡˆΡŒ 🐭 Π”Π° Π”Π° Π”Π°
ΠšΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Π° ⌨️ β„– Π”Π° Π”Π°
БСнсорный экран πŸ“± Π”Π° (ΠΏΠΎ Ρ‰Π΅Π»Ρ‡ΠΊΡƒ) Π”Π°* (ΠΏΠΎ Ρ‰Π΅Π»Ρ‡ΠΊΡƒ) Π”Π°* (ΠΏΠΎ Ρ‰Π΅Π»Ρ‡ΠΊΡƒ)

* НС Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах (iOS) Safari

Как Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ссылки ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ (ΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ + Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ CSS) β€” Big Cat Creative

Squarespace TipsΠ‘ΠΎΠ²Π΅Ρ‚Ρ‹ ΠΏΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ

Автор Erica Hartwick

Π­Ρ‚ΠΎΡ‚ пост ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ партнСрскиС ссылки. ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ΡŒ комиссию Π·Π° ΠΏΠΎΠΊΡƒΠΏΠΊΠΈ, сдСланныС ΠΏΠΎ этим ссылкам (бСсплатно для вас, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ! πŸ™‚)

Быстрый ΠΈ простой способ ΠΏΠΎΠ΄Π½ΡΡ‚ΡŒ ваш сайт Π½Π° Π½ΠΎΠ²Ρ‹ΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ β€” ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ состояниС навСдСния Π²Π°ΡˆΠΈΡ… гипСрссылок (гипСрссылки β€” это просто красивоС Π½Π°Π·Π²Π°Π½ΠΈΠ΅). для ссылок Π½Π° вашСм сайтС). ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ внСсти ряд ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ, Π½ΠΎ ΠΌΡ‹ ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΠΌ вас с Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ ΠΈΠ· самых простых ΠΈ эффСктивных:

  • Π’Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ссылок курсивом ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

  • ИзмСнСниС Ρ†Π²Π΅Ρ‚Π° ссылок ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

  • Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ подчСркивания ΠΊ ссылкам ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

ΠŸΡ€ΠΈΡΡ‚ΡƒΠΏΠΈΠΌ

9024!


Π˜Π΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΡ вашСго Ρ‚ΠΈΠΏΠ° ΡˆΡ€ΠΈΡ„Ρ‚Π° Π² Squarespace 7.0 ΠΈ 7.1

НСзависимо ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊΠΎΠΉ ΠΊΠΎΠ΄ Π²Ρ‹ примСняСтС, Π²Π°ΠΌ сначала Π½ΡƒΠΆΠ½ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ, ΠΊ ΠΊΠ°ΠΊΠΈΠΌ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΌ ΠΈΠ»ΠΈ Π°Π±Π·Π°Ρ†Π°ΠΌ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ ваш ΡˆΡ€ΠΈΡ„Ρ‚.

Π’ Squarespace 7.0 Π΅ΡΡ‚ΡŒ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° стиля Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°/Π°Π±Π·Π°Ρ†Π°:

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *