ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΡΠ»ΠΊΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΊΡ ΡΡΡΠ»ΠΊΡ Π½Π° HTML? ΠΠΎ 3 ΡΠΏΠΎΡΠΎΠ±Π°! —
ΠΠΎΠ±ΡΠΎΠ³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ ΡΡΡΠΎΠΊ! ΠΠ°ΠΆΠ΄ΡΠΉ Π²Π΅Π± ΠΌΠ°ΡΡΠ΅Ρ Π·Π°Π΄Π°Π²Π°Π»ΡΡ Π²ΠΎΠΏΡΠΎΡΠΎΠΌ ΠΊΠ°ΠΊ ΠΆΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΏΠΎ ΠΊΠ»ΠΈΠΊΡ Π½Π° ΠΊΠΎΡΠΎΡΡΡ ΡΠ΅Π»ΠΎΠ²Π΅ΠΊ ΡΡΠ°Π·Ρ ΠΏΠ΅ΡΠ΅ΠΉΠ΄Π΅Ρ ΠΏΠΎ Π½ΡΠΆΠ½ΠΎΠΌΡ Π°Π΄ΡΠ΅ΡΡ. ΠΡΠΎΡΡΠ°Ρ ΡΡΡΠ»ΠΊΠ° «a href=»Π°Π΄ΡΠ΅Ρ»>Π‘ΡΡΠ»ΠΊΠ°» Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π½Π΅ ΠΊΡΠ°ΡΠΈΠ²ΠΎ, ΠΈ Π½Π΅ Π²ΡΠ΅Π³Π΄Π° ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ ΠΏΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°. Π’Π°ΠΊ ΠΆΠ΅ ΠΈΠ½ΠΎΠ³Π΄Π° Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΡ ΡΠ΄Π΅Π»Π°ΡΡ ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠ΅. ΠΠ· ΠΎΠ±ΡΡΠ½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΡΠ΄Π΅Π»Π°ΡΡ Π°Π½Π°Π»ΠΎΠ³ ΡΡΡΠ»ΠΊΠΈ, ΠΏΠΎ ΠΊΠ»ΠΈΠΊΡ Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΉ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΠΏΠΎ Π½ΡΠΆΠ½ΠΎΠΌΡ Π°Π΄ΡΠ΅ΡΡ.
ΠΠ»Ρ Π΄Π°Π½Π½ΡΡ Π·Π°Π΄Π°Ρ, ΠΊΠ°ΠΊ Π²ΡΠ΅Π³Π΄Π°, ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΠΉ. ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ°Π·Π±Π΅ΡΠ΅ΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΠ· Π½ΠΈΡ .
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΡΠ»ΠΊΡ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ
ΠΠ΅ΡΠ²ΡΠΉ ΡΠΏΠΎΡΠΎΠ±
Π‘Π΄Π΅Π»Π°ΡΡ ΠΎΠ±ΡΡΠ½ΡΡ ΡΡΡΠ»ΠΊΡ, Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ ΠΏΠΎΡ ΠΎΠΆΠ΅ΠΉ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ, ΠΌΠΎΠΆΠ½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ ΡΠ²ΠΎΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ CSS.
ΠΡΠ°ΠΊ, ΡΠΎΠ·Π΄Π°Π΅ΠΌ ΠΎΠ±ΡΡΠ½ΡΡ ΡΡΡΠ»ΠΊΡ. Π ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ Π°Π΄ΡΠ΅Ρ ΠΊ Π½Π°ΡΠΈΠΌ ΡΡΠΈΠ»ΡΠΌ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π°ΠΏΠΈΡΠ΅ΠΌ ΡΡΡΡ-ΡΡΡΡ Π½ΠΈΠΆΠ΅.
<link rel="stylesheet" href="link_button.css">
<a href="https://you-hands.ru">ΠΠ°ΡΠ° ΡΡΡΠ»ΠΊΠ°</a>
Π Π²ΠΎΡ ΠΈ ΠΎΠ½ΠΈ, Π²ΠΈΠ½ΠΎΠ²Π½ΠΈΠΊΠΈ Π½Π°ΡΠ΅ΠΉ ΠΏΠΎΠ±Π΅Π΄Ρ Π½Π°Π΄ ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠΉ ΡΡΡΠ»ΠΊΠΎΠΉ, ΡΡΠΈΠ»ΠΈ. ΠΠ½ΠΈ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΡΡΡ Π΅Π΅ Π² ΠΊΠ½ΠΎΠΏΠΊΡ.
a{
padding: 10px 10px;/* ΠΎΡΡΡΡΠΏΡ ΠΎΡ ΡΠ΅ΠΊΡΡΠ° Π΄ΠΎ ΠΊΡΠ°Π΅Π² */
text-decoration: none;/* ΡΠ±ΠΈΡΠ°Π΅ΠΌ Π΄Π΅ΠΊΠΎΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ */
-moz-appearance: button; /* ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ Π΄Π»Ρ Firefox */
-webkit-appearance: button; /* ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ Π΄Π»Ρ Chromium */
}
Π’Π°ΠΊΠΈΠΌ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ ΠΌΡ Π·Π°ΠΌΠ΅Π½ΠΈΠ»ΠΈ Π²ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ.
ΠΡΠΎΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ±
ΠΡΠΎΡ ΡΠΏΠΎΡΠΎΠ± Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π±Π°Π½Π°Π»Π΅Π½ ΠΈ ΠΏΡΠΎΡΡ. Π‘ΠΊΠΎΡΠ΅Π΅ Π²ΡΠ΅Π³ΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠ°ΠΊ Π²Ρ ΠΈ Ρ ΠΎΡΠ΅Π»ΠΈ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΊΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ. ΠΡΠΎΡΡΠΎ ΠΎΠ±Π΅ΡΠ½ΠΈΡΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠ΅Π³ΠΎΠΌ ««!
<a href="you-hands.ru"><img src="button.png"></a>
ΠΡΠ°Π²Π΄Π°, ΡΠ΅ΠΏΠ΅ΡΡ, Π΅ΡΠ»ΠΈ Π²Ρ Π·Π°Ρ ΠΎΡΠΈΡΠ΅ ΡΠΌΠ΅Π½ΠΈΡΡ ΡΠ΅ΠΊΡΡ, Π²Π°ΠΌ ΠΏΡΠΈΠ΄Π΅ΡΡΡ Π½Π°ΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π·Π°Π½ΠΎΠ²ΠΎ. ΠΠ»ΡΡ, ΡΠ°ΠΊΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ Π±ΠΎΠ»ΡΡΠ΅ ΠΌΠ΅ΡΡΠ°, ΡΡΠ°ΡΠΈΠΊΠ° ΠΈ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ. Π’Π°ΠΊΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ»ΠΎΠΆΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΡΠ°ΠΊΠΈΡ , ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΈΠ»ΡΠΌΠΈ CSS.
Π’ΡΠ΅ΡΠΈΠΉ ΡΠΏΠΎΡΠΎΠ±
ΠΡΠΎΡ ΡΠΏΠΎΡΠΎΠ± ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠ°ΠΊΠΎΠΉ ΠΆΠ΅ ΠΊΠ°ΠΊ ΠΈ ΠΏΠ΅ΡΠ²ΡΠΉ, Π·Π° ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΎΠ³ΠΎ, ΡΡΠΎ Π² ΠΏΠ΅ΡΠ²ΠΎΠΌ ΠΌΠ΅ΡΠΎΠ΄Π΅ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ ΡΡΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ «ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ«, ΡΠ΅ΠΉΡΠ°Ρ ΠΆΠ΅ ΠΌΡ Π½Π°ΡΠΈΡΡΠ΅ΠΌ ΡΠ²ΠΎΡ ΠΊΠ½ΠΎΠΏΠΊΡ «
<link rel="stylesheet" href="link_button_3.css">
<a href="https://you-hands.ru">ΠΠ°ΡΠ° ΡΡΡΠ»ΠΊΠ°</a>
.ssilka{
border:1px solid #ccc; /*ΡΠ°ΠΌΠΊΠ°*/
background:#eaeaea; /*ΡΠΎΠ½*/
padding: 10px 10px; /*ΠΎΡΡΡΡΠΏΡ Π²Π½ΡΡΡΠΈ*/
text-decoration: none; /*ΡΠ±ΡΠ°ΡΡ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΡΡΡΠ»ΠΊΠΈ*/
}
ΠΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊΠ°Ρ ΡΡΡΠ»ΠΊΠ° Π±ΡΠ΄Π΅Ρ ΠΊΠ°ΠΊ Π²Π°ΠΌ Π·Π°Ρ ΠΎΡΠ΅ΡΡΡ. ΠΡΠΆΠ½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈΠ΄ΡΠΌΠ°ΡΡ ΠΈ Π½Π°ΠΏΠΈΡΠ°ΡΡ ΡΡΠΈΠ»Ρ Π΄Π»Ρ Π½Π΅Π΅. Π’Π΅ΠΊΡΡ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π»Π΅Π³ΠΊΠΎ ΠΈ Π½Π΅ Π·Π°Π³ΡΠΎΠΌΠΎΠΆΠ΄Π°Π΅Ρ html ΠΊΠΎΠ΄. Π’Π°ΠΊ-ΠΆΠ΅, ΡΠ°ΠΊΠ°Ρ ΡΡΡΠ»ΠΊΠ° Π±ΡΠ΄Π΅Ρ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΠΎΠΉ Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΡΠΏΠΎΡΠΎΠ±Π°, Π³Π΄Π΅ Π·Π°ΠΌΠ΅Π½ΡΠ»ΠΈΡΡ Π²ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ.
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΡΡΡΠ»ΠΊΠΎΠΉ
ΠΠ»Ρ ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠΉ Π·Π°Π΄Π°ΡΠΈ, ΡΠ°ΠΊ-ΠΆΠ΅ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π΄Π°Π»Π΅Π΅ Π² ΡΡΠ°ΡΡΠ΅. Π’Π°ΠΊΠ°Ρ ΡΠΈΡΡΠ°ΡΠΈΡ ΠΌΠΎΠΆΠ΅Ρ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡΡΡ, Π΅ΡΠ»ΠΈ Π²Ρ Π·Π°Ρ ΠΎΡΠΈΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ ΠΎΡ ΡΠΎΡΠΌΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΡΡΠΎ Π±Ρ ΠΏΠ΅ΡΠ΅Π½Π°ΠΏΡΠ°Π²ΠΈΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π° Π΄ΡΡΠ³ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΊ ΡΡΠΎΠ± ΠΊΠ½ΠΎΠΏΠΊΠ° Π²ΡΠ³Π»ΡΠ΄Π΅Π»Π° ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°, Π° Π²Π΅Π»Π° ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ ΡΡΡΠ»ΠΊΠ°, Π° ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΎΠΎΠ±ΡΠ΅ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠΎΠ²Π°ΡΡ Π΅Π΅ Ρ ΡΡΠ΅ΡΠΎΠΌ Π»ΡΠ±ΡΡ ΡΡΠΈΠ»Π΅ΠΉ.
ΠΠ΅ΡΠ²ΡΠΉ ΡΠΏΠΎΡΠΎΠ±
ΠΠ»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎ-Π±Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Π²Π΅Π»Π° ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ ΡΡΡΠ»ΠΊΠ°, ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ Π΄Π»Ρ Π½Π΅Π΅ ΡΠΎΡΠΌΡ, Π° Π²Π½ΡΡΡΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΠΎΠ΄Π½Ρ Π»ΠΈΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ.
<form action="https://you-hands.ru" method="GET">
<button type="submit" >ΠΠ½ΠΎΠΏΠΊΠ° ΠΊΠ°ΠΊ ΡΡΡΠ»ΠΊΠ°</button>
</form>
ΠΡΠΎΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ±
Π’ΡΡ ΠΌΡ ΡΠΆΠ΅ Π·Π°Π΄Π΅ΠΉΡΡΠ²ΡΠ΅ΠΌ ΠΌΠ°Π³ΠΈΡ JavaScript! ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ, ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΡΡΠ½ΠΊΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π±ΡΠ΄Π΅Ρ ΠΏΠ΅ΡΠ΅Π½Π°ΠΏΡΠ°Π²Π»ΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΊΡΠ΄Π° Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ. Π ΡΠ΄Π΅Π»Π°Π΅ΠΌ ΡΡΠΎ ΡΠ°ΠΊ, ΡΡΠΎΠ± ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΡ ΡΡΠ½ΠΊΡΠΈΡ Π±ΡΡΡΡΠΎ ΠΈ ΡΠ΄ΠΎΠ±Π½ΠΎ Π² Π±ΡΠ΄ΡΡΠ΅ΠΌ.
<script type="text/javascript">
function GoUrl(url){
location.href=url;
}
</script>
Π§ΡΠΎ-Π±Ρ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΡΡΠ½ΠΊΡΠΈΠ΅ΠΉ Π½ΡΠΆΠ½ΠΎ Π»ΠΈΡΡ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ onClick Π΄Π»Ρ Π»ΡΠ±ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
<button type="submit">ΠΠ½ΠΎΠΏΠΊΠ° ΠΊΠ°ΠΊ ΡΡΡΠ»ΠΊΠ° 2</button>
Π’ΡΠ΅ΡΠΈΠΉ ΡΠΏΠΎΡΠΎΠ±
ΠΡΠΎΡ ΡΠΏΠΎΡΠΎΠ± ΠΎΡΠ΅Π½Ρ ΠΏΠΎΡ ΠΎΠΆ Π½Π° Π²ΡΠΎΡΠΎΠΉ, ΠΎΠ΄Π½Π°ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎ Π΄ΡΡΠ³ΠΎΠΌΡ. ΠΡΠ΄Π΅Π»ΡΠ½ΡΠΉ JS ΠΊΠΎΠ΄ Π½Π°ΠΌ Π½Π΅ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡΡ
<button type="submit">ΠΠ½ΠΎΠΏΠΊΠ° ΠΊΠ°ΠΊ ΡΡΡΠ»ΠΊΠ° 3</button>
ΠΡΠΎΠ³ΠΈ
ΠΠ°ΠΊ ΠΈ Π²ΡΠ΅Π³Π΄Π°, Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² Π΄Π΅Π»Π°ΡΡ ΠΏΠΎΡΡΠΈ ΠΎΠ΄Π½ΠΎ ΠΈ ΡΠΎΠΆΠ΅. ΠΠ°ΠΊΠΈΠΌ Π±ΡΠ΄ΠΈΡΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ Π²Ρ, ΡΠ΅ΡΠ°ΡΡ Π²Π°ΠΌ. ΠΡΠ»ΠΈ ΠΎΡΡΠ°Π»ΠΈΡΡ ΠΊΠ°ΠΊΠΈΠ΅-ΡΠΎ Π²ΠΎΠΏΡΠΎΡΡ, ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°ΡΡ ΠΈΡ Π² ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΡ Π½Π° ΡΠ°ΠΉΡΠ΅. Π£Π΄Π°ΡΠΈ!
4.94/5 (8)ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ HTML ΠΊΠ½ΠΎΠΏΠΊΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ ΠΊΠ°ΠΊ ΡΡΡΠ»ΠΊΠ°
ΠΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΡΠΎΠ·Π΄Π°Π½ΠΈΡ HTML ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΊΠΎΡΠΎΡΠ°Ρ Π΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ ΠΊΠ°ΠΊ ΡΡΡΠ»ΠΊΠ°, Ρ.Π΅., ΠΊΠΎΠ³Π΄Π° Π²Ρ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΡΠ΅ Π½Π° ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ, ΠΎΠ½Π° ΠΏΠ΅ΡΠ΅Π½Π°ΠΏΡΠ°Π²Π»ΡΠ΅ΡΡΡ Π½Π° ΡΠΊΠ°Π·Π°Π½Π½ΡΠΉ URL-Π°Π΄ΡΠ΅Ρ.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ±ΡΠ°ΡΡ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΡΡΡΠ»ΠΊΠΈ Π½Π° HTML ΠΊΠ½ΠΎΠΏΠΊΡ.
ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΡΡΡΠΎΡΠ½ΡΠΉ
onclick eventΒΆ- ΠΊ HTML <button> ΡΠ΅Π³Ρ Π²Π½ΡΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° HTML <form>.
ΠΡΠΈΠΌΠ΅ΡΒΆ
<!DOCTYPE html>
<html>
<head>
<title>ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°</title>
</head>
<body>
<button>Click Here</button>
</body>
</html>
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ!ΠΡΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ ΠΌΠΎΠΆΠ΅Ρ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°ΡΡ, Π΅ΡΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ° Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π²Π½ΡΡΡΠΈ ΡΠ΅Π³Π° <form>.
- ΠΊ <input> ΡΠ΅Π³Ρ Π²Π½ΡΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° HTML <form>.
ΠΡΠΈΠΌΠ΅ΡΒΆ
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ!<!DOCTYPE html> <html> <head> <title>ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°</title> </head> <body> <form> <input type="button" value="w3docs"/> </form> </body> </html>
Π‘ΡΡΠ»ΠΊΠΈ Π½Π΅ Π±ΡΠ΄ΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ, Π΅ΡΠ»ΠΈ JavaScript Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ, Π° ΠΏΠΎΠΈΡΠΊΠΎΠ²Π°Ρ ΡΠΈΡΡΠ΅ΠΌΠ° ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΎΠΈΠ³Π½ΠΎΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°ΠΊΠΈΠ΅ ΡΡΡΠ»ΠΊΠΈ.
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π°ΡΡΠΈΠ±ΡΡ action ΠΈΠ»ΠΈ formaction Π²Π½ΡΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <form>.ΒΆ
- Π°ΡΡΠΈΠ±ΡΡ action
ΠΡΠΈΠΌΠ΅ΡΒΆ
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ!<!DOCTYPE html> <html> <head> <title>ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°</title> </head> <body> <form action="https://www.w3docs.com/"> <button type="submit">Click me</button> </form> </body> </html>
ΠΠ»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΎΡΠΊΡΡΡΡ ΡΡΡΠ»ΠΊΡ Π² Π½ΠΎΠ²ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ Π°ΡΡΠΈΠ±ΡΡ target=»_blank».
ΠΡΠΈΠΌΠ΅ΡΒΆ
<!DOCTYPE html>
<html>
<head>
<title>ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°</title>
</head>
<body>
<form action="https://www.w3docs.com/" method="get" target="_blank">
<button type="submit">Click me</button>
</form>
</body>
</html>
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ!Π’Π°ΠΊ ΠΊΠ°ΠΊ Π½Π΅Ρ ΡΠΎΡΠΌ ΠΈ Π΄Π°Π½Π½ΡΡ , ΡΡΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ΅ΠΌΠ°Π½ΡΠΈΡΠ΅ΡΠΊΠΈ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ ΡΠΌΡΡΠ»Π°. ΠΠΎ Π΄Π°Π½Π½Π°Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ° Π΄ΠΎΠΏΡΡΡΠΈΠΌΠ°.
- Π±. Π°ΡΡΠΈΠ±ΡΡ HTML5 formaction.
ΠΡΠΈΠΌΠ΅ΡΒΆ
<!DOCTYPE html>
<html>
<head>
<title>ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°</title>
</head>
<body>
<form>
<button type="submit" formaction="https://www.w3docs.com">Click me</button>
</form>
</body>
</html>
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ!ΠΡΡΠΈΠ±ΡΡ formaction ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ Ρ type=βsubmitβ. Π’Π°ΠΊ ΠΊΠ°ΠΊ ΡΡΠΎΡ Π°ΡΡΠΈΠ±ΡΡ ΡΠ²Π»ΡΠ΅ΡΡΡ HTML5-specific, ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ ΡΠ»Π°Π±ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π² ΡΡΠ°ΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ .
ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΡΡΡΠ»ΠΊΡ Π² ΡΡΠΈΠ»Π΅ HTML ΠΊΠ½ΠΎΠΏΠΊΠΈ (ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ CSS)ΒΆ
ΠΡΠΈΠΌΠ΅ΡΒΆ
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ!<!DOCTYPE html> <html> <head> <title>ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°</title> <style> .button { background-color: #FF4500; border: none; color: white; padding: 20px 34px; text-align: center; text-decoration: none; display: inline-block; font-size: 20px; margin: 4px 2px; cursor: pointer; } </style> </head> <body> <a href="https://www.w3docs.com/">Click Here</a> </body> </html>
Π’Π°ΠΊ ΠΊΠ°ΠΊ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΡΠ»ΠΎΠΆΠ½ΠΎΠ΅ ΡΡΠΈΠ»Π΅Π²ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅, ΡΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ ΠΌΠΎΠΆΠ΅Ρ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π² Π½Π΅ΠΊΠΎΡΠΎΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ .
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΡΡΡΠ»ΠΊΠΎΠΉ
ΠΡΠΎΡΠΌΠ»ΡΡΡ ΡΡΡΠ»ΠΊΡ ΠΊΠ°ΠΊ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π½Π΅ΠΆΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΠΎ: ΡΡΡΠ»ΠΊΠ° ΠΏΠΎΒ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π½Π°Β ΡΠ΅ΡΡΡΡ, Π°Β Π½Π°ΠΆΠ°ΡΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΎΠ±ΡΡΠ½ΠΎ ΠΈΠ½ΠΈΡΠΈΠΈΡΡΠ΅Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅. ΠΠΎΒ Π΅ΡΠ»ΠΈ Π·Π°Π΄Π°ΡΠ° Π²ΠΎΠ·Π½ΠΈΠΊΠ»Π°, ΠΈΠΌΠ΅Π΅Ρ ΡΠΌΡΡΠ» Ρ ΠΎΡΡΒ Π±Ρ ΡΠ΅ΡΠ°ΡΡ Π΅Ρ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ.
ΠΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎΠ΅ (Β«Π²Π°Π»ΠΈΠ΄Π½ΠΎΠ΅Β») ΠΈΒ ΠΊΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅Β β Π·Π°ΠΊΠ»ΡΡΠΈΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π²Β ΠΏΡΠΎΡΡΠ΅ΠΉΡΡΡ ΡΠΎΡΠΌΡ. ΠΒ Π°ΡΡΠΈΠ±ΡΡ action
ΡΠΎΡΠΌΡ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ URL-Π°Π΄ΡΠ΅Ρ, Π½Π°Β ΠΊΠΎΡΠΎΡΡΠΉ Π΄ΠΎΠ»ΠΆΠ½Π° Π²Π΅ΡΡΠΈ Β«ΠΊΠ½ΠΎΠΏΠΊΠ°-ΡΡΡΠ»ΠΊΠ°Β». ΠΠ»Ρ ΡΠ°Π±ΠΎΡΡ ΡΠΎΡΠΌΡ Π²Β ΡΡΡΠ°ΡΠ΅Π²ΡΠΈΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
(IE8 ΠΈΒ Π½ΠΈΠΆΠ΅) ΡΠ»Π΅Π΄ΡΠ΅Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠ½ΠΎΠΏΠΊΠ΅ Π°ΡΡΠΈΠ±ΡΡ
:
<form action="/example/">
Β Β Β Β <button type="submit">ΠΠ½ΠΎΠΏΠΊΠ°-ΡΡΡΠ»ΠΊΠ°</button>
</form>
Β«ΠΠ½ΠΎΠΏΠΊΠ°-ΡΡΡΠ»ΠΊΠ°Β» Π²Β ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π²Π΅Π΄ΡΡ Π½Π°Β ΡΡΡΠ°Π½ΠΈΡΡ ΡΒ Π°Π΄ΡΠ΅ΡΠΎΠΌ /example/
.
ΠΡΠ»ΠΈ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΎΡΠΊΡΡΠ²Π°ΡΡ ΡΡΡΠ»ΠΊΡ Π²Β Π½ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅ ΠΈΠ»ΠΈΒ ΡΡΠ΅ΠΉΠΌΠ΅, ΠΌΠΎΠΆΠ½ΠΎ, ΠΊΠ°ΠΊ ΠΈΒ ΡΒ ΠΎΠ±ΡΡΠ½ΡΡ
ΡΡΡΠ»ΠΎΠΊ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π°ΡΡΠΈΠ±ΡΡ target
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° FORM
:
<form action="/example/" target="_blank">
ΠΠ΅ΠΌΠΎ
ΠΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ FullΒ HD Π²Β 4K Π±Π΅Π· ΡΠ°Π·ΠΌΡΡΠΈΡΠ‘ΡΡΠΎΠΊΠ° Π·Π°ΠΏΡΠΎΡΠ°
Π‘ΡΡΠΎΠΊΠ° Π·Π°ΠΏΡΠΎΡΠ°Β β ΡΠ°ΡΡΡ URL-Π°Π΄ΡΠ΅ΡΠ° ΠΏΠΎΡΠ»Π΅ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ Π²ΠΎΠΏΡΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ Π·Π½Π°ΠΊΠ°, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ°Ρ GET-ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ Π²Β Π²ΠΈΠ΄Π΅ ΠΏΠ°Ρ
(ΠΈΠΌΡ=Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
), ΡΠ°Π·Π΄Π΅Π»ΡΠ½Π½ΡΡ
ΡΠΈΠΌΠ²ΠΎΠ»ΠΎΠΌ &
.
ΠΡΠ»ΠΈ Π°Π΄ΡΠ΅Ρ, Π½Π°Β ΠΊΠΎΡΠΎΡΡΠΉ Π΄ΠΎΠ»ΠΆΠ½Π° ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΡΡΡΠ»ΠΊΠ°, ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΡΡΠΎΠΊΡ Π·Π°ΠΏΡΠΎΡΠ°, ΡΠ»Π΅Π΄ΡΠ΅Ρ Π΄Π»ΡΒ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ GET-ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ° Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π²Β ΡΠΎΡΠΌΡ ΡΠΊΡΡΡΠΎΠ΅ ΠΏΠΎΠ»Π΅ ΡΒ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌΠΈ Π°ΡΡΠΈΠ±ΡΡΠ°ΠΌΠΈ name
ΠΈΒ value
:
<form action="/example/">
Β Β Β Β <input type="hidden" name="foo"Β Β value="bar" />
Β Β Β Β <input type="hidden" name="lorem" value="ipsum" />
Β Β Β Β <button type="submit">ΠΠ½ΠΎΠΏΠΊΠ°-ΡΡΡΠ»ΠΊΠ°</button>
</form>
ΠΠ°Π½Π½Π°Ρ ΡΠΎΡΠΌΠ° Π²Π΅Π΄ΡΡ Π½Π°Β ΡΡΡΠ°Π½ΠΈΡΡ /example/?foo=bar&lorem=ipsum
Chromium/Blink ΠΈΒ WebKit
ΠΒ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ Π½Π°Β ΠΎΡΠ½ΠΎΠ²Π΅ Π΄Π²ΠΈΠΆΠΊΠΎΠ² ChromiumΒ / Blink (Chrome, Opera 15+, Π―Π½Π΄Π΅ΠΊΡ.ΠΡΠ°ΡΠ·Π΅Ρ, Vivaldi) ΠΈΒ WebKit (Safari) Π΅ΡΡΡ ΠΎΡΠΈΠ±ΠΊΠ° (Π±Π°Π³) (1, 2): Π²ΠΎΠΏΡΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ Π·Π½Π°ΠΊ, ΠΎΡΠ΄Π΅Π»ΡΡΡΠΈΠΉ ΡΡΡΠΎΠΊΡ Π·Π°ΠΏΡΠΎΡΠ° ΠΎΡΒ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΠ°ΡΡΠΈ Π°Π΄ΡΠ΅ΡΠ°, Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΡΡ ΠΊΒ Π°Π΄ΡΠ΅ΡΡ Π΄Π°ΠΆΠ΅ ΠΏΡΠΈ ΠΎΡΡΡΡΡΡΠ²ΠΈΠΈ ΠΏΠΎΠ»Π΅ΠΉ Π²Β ΡΠΎΡΠΌΠ΅. ΠΠΎΡΡΠΎΠΌΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠΎΡΠΌΠ°:
<form action="/example/">
Β Β Β Β <button type="submit">ΠΠ½ΠΎΠΏΠΊΠ°-ΡΡΡΠ»ΠΊΠ°</button>
</form>
ΠΏΡΠΈΠ²Π΅Π΄ΡΡ Π½Π°Β Π°Π΄ΡΠ΅Ρ /example/?
Π²ΠΌΠ΅ΡΡΠΎ ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌΠΎΠ³ΠΎ /example/
.
ΠΠ΅Π½Ρ Π’Π°ΠΌΡΡΠ° (Kent Tamura) ΠΈΠ·Β ΠΊΠΎΠΌΠ°Π½Π΄Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² Chromium Π³ΠΎΠ²ΠΎΡΠΈΡ, ΡΡΠΎ ΡΡΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΡΠ΅ΠΊΡΡΠΈΠΌ ΡΠΏΠ΅ΡΠΈΡΠΈΒΠΊΠ°ΡΠΈΡΠΌ HTML ΠΈΒ URL.
ΠΠ±ΠΎΠΉΡΠΈ ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΒ ΠΏΠΎΠΌΠΎΡΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠ΅ΡΠ²Π΅ΡΠ½ΠΎΠ³ΠΎ ΠΏΠ΅ΡΠ΅Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ (ΡΠ΅Π΄ΠΈΡΠ΅ΠΊΡΠ°) ΡΒ Π°Π΄ΡΠ΅ΡΠ°, ΠΎΠΊΠ°Π½ΡΠΈΠ²Π°ΡΡΠ΅Π³ΠΎΡΡ Π²ΠΎΠΏΡΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ Π·Π½Π°ΠΊΠΎΠΌ, Π½Π°Β ΡΠ°ΠΊΠΎΠΉΒ ΠΆΠ΅ Π°Π΄ΡΠ΅Ρ Π±Π΅Π· Π²ΠΎΡΠΏΡΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ Π·Π½Π°ΠΊΠ°.
ΠΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΡ ΠΏΠΎΒ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ ΡΒ ΡΠ΅Π°Π»ΡΠ½ΠΎΠΉ ΡΡΡΠ»ΠΊΠΎΠΉ
- Π£Β ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΡΠ·Π½Π°ΡΡ, ΠΊΡΠ΄Π° Π²Π΅Π΄ΡΡ ΡΡΡΠ»ΠΊΠ°-ΠΊΠ½ΠΎΠΏΠΊΠ°, Π΄ΠΎΒ ΡΠ΅Π»ΡΠΊΠ° ΠΏΠΎΒ Π½Π΅ΠΉ.
- ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π΅Β ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΒ ΡΠ²ΠΎΠ΅ΠΌΡ ΠΆΠ΅Π»Π°Π½ΠΈΡ ΠΎΡΠΊΡΡΡΡ ΡΡΡΠ»ΠΊΡ-ΠΊΠ½ΠΎΠΏΠΊΡ Π²Β Π½ΠΎΠ²ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ ΠΈΠ»ΠΈ Π²Β Π½ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅.
ΠΠ΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ
ΠΠ½ΠΎΠΏΠΊΠ° Π²Π½ΡΡΡΠΈ ΡΡΡΠ»ΠΊΠΈ
ΠΠ΅ΡΠ΅Π΄ΠΊΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ BUTTON
ΠΏΡΠΎΡΡΠΎ ΠΏΠΎΠΌΠ΅ΡΠ°ΡΡ Π²Π½ΡΡΡΡ ΡΡΡΠ»ΠΊΠΈ:
<a href="/example/"><button>ΠΠ½ΠΎΠΏΠΊΠ°-ΡΡΡΠ»ΠΊΠ°</button></a>
ΠΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π²ΠΎΒ Π²ΡΠ΅Ρ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ , Π½ΠΎΒ ΡΠΎΠ³Π»Π°ΡΠ½ΠΎ HTML5 ΡΡΠΎ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π½Π΅ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎ (Β«Π½Π΅Π²Π°Π»ΠΈΠ΄Π½ΠΎΒ»): ΡΡΡΠ»ΠΊΠ° Π½Π΅Β Π΄ΠΎΠ»ΠΆΠ½Π° ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΡΠ°ΠΊΠ°Ρ ΡΡΡΠ»ΠΊΠ° Π½Π΅Β ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π²Β Internet Explorer (IE) Π½ΠΈΠΆΠ΅ 9-ΠΉ Π²Π΅ΡΡΠΈΠΈ.
ΠΠ΅ΠΌΠΎ
Π Π°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ΅Π½ΠΈΡ ΡΠ°Π·ΠΌΡΡΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π½Π°Β Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ°Ρ
ΠΠ½ΠΎΠΏΠΊΠ° ΡΒ JS-ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠΌ ΡΠ΅Π»ΡΠΊΠ°
ΠΠΎΡΠΎΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΠ° ΡΒ JavaScript-ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠΌ ΡΠΎΠ±ΡΡΠΈΡ ΡΠ΅Π»ΡΠΊΠ°:
<button>ΠΠ½ΠΎΠΏΠΊΠ°-ΡΡΡΠ»ΠΊΠ°</button>
ΠΠΎΒ ΡΠ°ΠΊΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Π½Π΅Β ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΏΡΠΈ Π²ΡΠΊΠ»ΡΡΠ΅Π½Π½ΠΎΠΌ JavaScript, Π΅Ρ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠΊΡΡΡΡ Π²Β Π½ΠΎΠ²ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ ΠΈΠ»ΠΈ Π½ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅, ΠΈΒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΡΒ ΠΈΠ½Π΄Π΅ΠΊΡΠ°ΡΠΈΠ΅ΠΉ ΠΏΠΎΠΈΡΠΊΠΎΠ²ΠΈΠΊΠ°ΠΌΠΈ, Π½Π΅Β ΠΈΡΠΏΠΎΠ»Π½ΡΡΡΠΈΠΌΠΈ JavaScript-ΠΊΠΎΠ΄.
ΠΠ΅ΠΌΠΎ
ΠΡΠΎΠ³ΡΠ°ΠΌΠΌΠ° Π΄Π»Ρ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ³Ρ Π±Π΅Π· ΡΠ°Π·ΠΌΡΡΠΈΡ
ΠΠ΅ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΡ CSS
ΠΠΏΠΈΡΠ°Π½Π½ΡΠ΅ Π½ΠΈΠΆΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π½Π΅ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅, ΠΈΒ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΡ Π½Π΅Β ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ.
Firefox ΠΈΒ Chromium
Firefox Π²Π΅ΡΡΠΈΠΉΒ 81 ΠΈΒ Π½ΠΈΠΆΠ΅ ΠΈΒ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π½Π°Β ΠΎΡΠ½ΠΎΠ²Π΅ Π΄Π²ΠΈΠΆΠΊΠ° Chromium (Chrome, Opera 15+, Vivaldi, Π―Π½Π΄Π΅ΠΊΡ.ΠΡΠ°ΡΠ·Π΅Ρ) ΠΏΡΠΎΡΠ»ΡΡ
Π²Π΅ΡΡΠΈΠΉ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π»ΠΈ Π½Π΅ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ ΠΏΡΠ΅ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° appearance
, Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ button
ΠΊΠΎΡΠΎΡΡΡ
ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ»ΠΎ ΠΎΡΠΎΡΠΌΠΈΡΡ ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ»ΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π²Β ΡΠΎΠΌ ΡΠΈΡΠ»Π΅ ΡΡΡΠ»ΠΊΡ:
A.example {
Β Β Β Β Β Β Β -moz-appearance: button; /* Firefox */
Β Β Β Β -webkit-appearance: button; /* Chromium */
}
ΠΠ΅ΠΌΠΎ
ΠΠ΅Π»ΠΎΠ΄ΠΈΡΠ½Π°Ρ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ°Π»ΡΠ½Π°Ρ ΠΌΡΠ·ΡΠΊΠ°
Internet Explorer, Edge ΠΈΒ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ
ΠΒ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
MicrosoftΒ β Internet Explorer (IE) ΠΈΒ EdgeΒ β Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π½Π΅Π΄ΠΎΡΡΡΠΏΠ½Π°. ΠΒ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ CSS Basic User Interface Module LevelΒ 4 Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ button
ΡΠ²ΠΎΠΉΡΡΠ²Π° appearance
Π½Π΅Β ΠΏΡΠ΅Π΄ΡΡΠΌΠΎΡΡΠ΅Π½ΠΎ.
Π‘ΡΡΠ»ΠΊΠΈ ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ β ΡΡ ΠΎΠ΄ΡΡΠ²Π° ΠΈ ΡΠ°Π·Π»ΠΈΡΠΈΡ
ΠΠ΅ΠΎΠΏΡΡΠ½ΠΎΠΌΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΈΠ»ΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΡ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡΡΡ, ΡΡΠΎ ΡΡΡΠ»ΠΊΠ° ΠΈΒ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΌΠ°Π»ΠΎ ΡΠ΅ΠΌ ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ, ΡΡΠΎ Π½Π°Β ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ Π·Π°Π±Π»ΡΠΆΠ΄Π΅Π½ΠΈΠ΅ΠΌ. ΠΠ°, ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΠΏΠΎΠ΄Ρ ΠΎΠ΄Ρ ΠΊΒ Π²Π½Π΅ΡΠ½Π΅ΠΌΡ Π²ΠΈΠ΄Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈΒ ΡΡΡΠ»ΠΎΠΊ ΡΡΡΡΠ»ΠΈ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΡ Π³ΡΠ°Π½ΠΈΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ, Π½ΠΎΒ ΡΠ΅Π°ΠΊΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² Π½Π°Β ΡΡΡΠ»ΠΊΠΈ ΠΈΒ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π²ΡΡ Π΅ΡΡ ΡΠ°Π·Π»ΠΈΡΠ½Π°. ΠΠ΅Π²Π΅ΡΠ½ΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ²Π΅ΡΡΠΈ ΠΊΒ ΠΏΠΎΡΠ΅ΡΠ΅ ΡΠ΄ΠΎΠ±ΡΡΠ²Π°, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠΆΠ΅ Π·Π°Π»ΠΎΠΆΠ΅Π½ΠΎ Π½Π°Β ΡΡΠΎΠ²Π½Π΅ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ².
ΠΡΠΎΠ±Π»Π΅ΠΌΠ°ΡΠΈΠΊΠ°
Π‘ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ ΠΊΒ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ Π²Π΅Π±-ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠΎΠ², Π·Π°ΡΠ°ΡΡΡΡ ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΡΠΉ Π½Π°Β ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΈ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ Π°Π΄Π°ΠΏΡΠ°ΡΠΈΠΈ ΠΏΠΎΠ΄ ΠΊΠ»Π°ΡΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΡ ΠΈΒ ΠΏΠ°Π»ΡΡΠ΅ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ (ΡΠ°ΡΡΠΊΡΠΈΠ½) ΡΡΡΡΠΎΠΉΡΡΠ²Π°, ΠΏΡΠΈΠ²ΡΠ» ΠΊΒ ΡΠΎΠΌΡ, ΡΡΠΎ ΡΠΈΡΡΠΎ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ ΡΡΡΠ»ΠΊΡ Π½Π°Β ΠΏΠ»Π°ΡΠΊΠ΅ ΠΏΡΡΠ°ΡΡ ΡΒ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ.
ΠΠ½ΠΎΠΏΠΊΡ ΠΈΒ ΡΡΡΠ»ΠΊΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΌΠΈ Π²Π½Π΅ΡΠ½Π΅Β ΠΈ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π΄Π°ΠΆΠ΅, ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ ΠΎΡΒ ΡΡΠΎΠ³ΠΎ Π½Π΅Β ΠΏΠΎΡΡΡΠ°Π΄Π°Π΅Ρ, Π½ΠΎΒ ΠΎΠ±ΡΠ°Ρ ΡΡΠ³ΠΎΠ½ΠΎΠΌΠΈΠΊΠ° ΡΠΎΡΠ½ΠΎ Π½Π°ΡΡΡΠΈΡΡΡ.
ΠΡΠΎΡΠΎΠΉ ΠΌΠΎΠΌΠ΅Π½ΡΒ β Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΏΠΎΠ²Π΅ΡΠΈΡΡ Π½Π°Β ΡΡΡΠ»ΠΊΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ javascript ΠΏΡΠΈΠ²Π΅Π»ΠΎ ΠΊΒ ΡΠΎΠΌΡ, ΡΡΠΎ ΡΡΡΠ»ΠΊΠΈ Π·Π°ΡΠ°ΡΡΡΡ ΠΈΒ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΠΊΠ°ΠΊ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ, ΡΡΠΎ Π½Π΅Π²Π΅ΡΠ½ΠΎ.
ΠΡΠΈ Π²ΡΠ±ΠΎΡΠ΅ ΡΠΈΠΏΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΡΡΠ°Π»ΠΊΠΈΠ²Π°ΡΡΡΡ ΠΎΡΒ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΡΡΠ½ΠΎΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²:
ΠΠ½ΠΎΠΏΠΊΠ° (html ΡΠ΅Π³ <button>
) β ΡΡΠΎ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΡΠΎΒ Π΅ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΎΡΠ²Π΅ΡΠ°ΡΡΠΈΠΉ Π·Π°Β Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΈ.
Π‘ΡΡΠ»ΠΊΠ° (html ΡΠ΅Π³ <a>
) β ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, ΡΠΎΒ Π΅ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΎΡΠ²Π΅ΡΠ°ΡΡΠΈΠΉ Π·Π°Β Π²Π·Π°ΠΈΠΌΠΎΡΠ²ΡΠ·Ρ ΡΠ°Π·Π΄Π΅Π»ΠΎΠ² Π²Π΅Π±-ΡΠ΅ΡΡΡΡΠ° (ΠΈΠ»ΠΈ ΡΠ°Π·Π½ΡΡ
ΡΠ΅ΡΡΡΡΠΎΠ²) ΠΌΠ΅ΠΆΠ΄Ρ ΡΠΎΠ±ΠΎΠΉ.
Π‘ΡΡΠ»ΠΊΠ°-ΠΊΠ½ΠΎΠΏΠΊΠ°: ΡΡΠΎ Π±ΡΠ΄Π΅Ρ, Π΅ΡΠ»ΠΈ ΡΡΡΠ»ΠΊΡ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ?
Π‘ΡΡΠ»ΠΊΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°ΡΡ javascript, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ½Π° Π΄ΠΎΠ»ΠΆΠ½Π° Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ, ΡΠΎΒ Π΅ΡΡΡ ΠΈΠ·Β ΡΡΡΠ»ΠΊΠΈ ( <a>
) ΠΏΡΠΈ ΠΆΠ΅Π»Π°Π½ΠΈΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½ΡΒ β ΠΊΠ½ΠΎΠΏΠΊΡ.
Π’Π°ΠΊΠ°Ρ ΡΡΡΠ»ΠΊΠ°-ΠΊΠ½ΠΎΠΏΠΊΠ° Π½Π΅Β Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎΠ³ΠΎ URL-Π°Π΄ΡΠ΅ΡΠ°, ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π°Β ΡΡΡΠ»ΠΊΡ-ΠΊΠ½ΠΎΠΏΠΊΡ Π²Β ΠΎΠΊΠ½Π΅ Π±ΡΠ°ΡΠ·Π΅ΡΠ° (Π²Π½ΠΈΠ·Ρ) Π²ΡΠ²Π΅Π΄Π΅ΡΡΡ Β«javascript:;Β» ΠΈΠ»ΠΈ Β«Π’Π΅ΠΊΡΡΠΈΠΉΠΠ΄ΡΠ΅Ρ/#Β».
ΠΡΠ°ΡΠ·Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΡΡΠ»ΠΊΡ-ΠΊΠ½ΠΎΠΏΠΊΡ ΠΊΠ°ΠΊ ΡΡΡΠ»ΠΊΡ ΠΈΒ ΠΏΡΠΈ ΠΏΡΠ°Π²ΠΎΠΌ ΠΊΠ»ΠΈΠΊΠ΅ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠΈΡ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΡΡΡΠ»ΠΊΡ ΠΈΠ»ΠΈ ΠΏΠΎΠ΄Π΅Π»ΠΈΡΡΡΡΒ Π΅Ρ, ΡΡΠΎ, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ, Π½Π΅Β ΠΈΠΌΠ΅Π΅Ρ ΡΠΌΡΡΠ»Π°, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΡΡΠ»ΠΊΠ°-ΠΊΠ½ΠΎΠΏΠΊΠ° Π½Π΅Β ΠΈΠΌΠ΅Π΅Ρ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎΠ³ΠΎ Π°Π΄ΡΠ΅ΡΠ°.
Π£Β ΡΡΡΠ»ΠΊΠΈ Π½Π΅Ρ ΡΡΠ°ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ disabled (Π·Π°Π±Π»ΠΎΠΊΠΈΡΠΎΠ²Π°Π½Π°), Ρ Π°ΡΠ°ΠΊΡΠ΅ΡΠ½ΠΎΠ³ΠΎ Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈΒ ΠΎΡΠ²Π΅ΡΠ°ΡΡΠ΅Π³ΠΎ Π·Π°Β Π±Π»ΠΎΠΊΠΈΡΠΎΠ²ΠΊΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄ΠΎΒ Π½Π°ΡΡΡΠΏΠ»Π΅Π½ΠΈΡ ΠΊΠ°ΠΊΠΈΡ -Π»ΠΈΠ±ΠΎ ΡΠΎΠ±ΡΡΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π²Β Π°ΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅.
ΠΡΠΌΠ°Ρ, ΡΡΠΎ ΠΈΒ ΠΏΠΎΠΈΡΠΊΠΎΠ²ΡΠ΅ ΡΠΈΡΡΠ΅ΠΌΡ Π½Π΅Β ΠΎΡΠ΅Π½Ρ Ρ ΠΎΡΠΎΡΠΎ ΠΎΡΠ½ΠΎΡΡΡΡΡ ΠΊΒ ΡΡΡΠ»ΠΊΠ°ΠΌ-ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ βΠ² Π»ΡΠ±ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ ΡΡΡΠ»ΠΎΡΠ½ΠΎΠΉ ΠΌΠ°ΡΡΡ ΠΎΠ½ΠΈ Π½Π΅Β ΡΠΎΠΆΠ΄Π°ΡΡ.
ΠΠ½ΠΎΠΏΠΊΠ°-ΡΡΡΠ»ΠΊΠ°: ΡΡΠΎ Π±ΡΠ΄Π΅Ρ, Π΅ΡΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΊΡ ΡΠ΄Π΅Π»Π°ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ?
ΠΠ½ΠΎΠΏΠΊΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅Π΄Π°Π²Π°ΡΡ URL-Π°Π΄ΡΠ΅Ρ, ΡΠΎΒ Π΅ΡΡΡ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈΠ·Β ΠΊΠ½ΠΎΠΏΠΊΠΈ ( <button>
) ΡΡΡΠ»ΠΊΡ.
ΠΠ½ΠΎΠΏΠΊΠ°-ΡΡΡΠ»ΠΊΠ° Π½Π΅Β ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡ URL Π°Π΄ΡΠ΅Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π°Β Π½Π΅Ρ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ.
ΠΠ½ΠΎΠΏΠΊΠ°-ΡΡΡΠ»ΠΊΠ° Π½Π΅Β ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ ΡΠΎΡ
ΡΠ°Π½ΠΈΡΡ URL-Π°Π΄ΡΠ΅Ρ ΡΠ΅ΡΠ΅Π· ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ.
ΠΠ½ΠΎΠΏΠΊΠ°-ΡΡΡΠ»ΠΊΠ° Π½Π΅Β ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ ΠΎΡΠΊΡΡΡΡ ΡΠ΅Π±Ρ Π²Β Π½ΠΎΠ²ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ (ΠΊΒ ΠΏΡΠΈΠΌΠ΅ΡΡ, Π·Π°ΠΆΠ°Π² ctrl+Π»Π΅Π²Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΌΡΡΠΈ).
ΠΠ½ΠΎΠΏΠΊΠ° ΠΈΠ»ΠΈ ΡΡΡΠ»ΠΊΠ°Β β ΡΠ΅ΡΠ°ΡΡΠΈΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π°
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΡΠ°Π½ΠΈΡΠ°ΠΌΠΈΒ β ΡΡΡΠ»ΠΊΠ°.
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΏΠΎΒ ΡΠΊΠΎΡΡΠΌΒ β ΡΡΡΠ»ΠΊΠ°.
ΠΡΠ·ΠΎΠ² Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅Π³ΠΎ ΠΎΠΊΠ½Π°Β β ΡΠ°ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠ° (ΡΡΡΠ»ΠΊΠ°, Π΅ΡΠ»ΠΈ Π΄ΡΠ±Π»ΠΈΡΠΎΠ²Π°ΡΡ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅Π΅ ΠΎΠΊΠ½ΠΎ ΡΡΡΠ°Π½ΠΈΡΠ΅ΠΉ, ΡΠΌ. ΠΏΡΠΈΠΌΠ΅Ρ Π΄Π°Π»Π΅Π΅).
Π€ΡΠ½ΠΊΡΠΈΡ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ, Π½Π΅Β ΠΈΠΌΠ΅ΡΡΠ°Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ URL-Π°Π΄ΡΠ΅ΡΠ°,Β β ΠΊΠ½ΠΎΠΏΠΊΠ°.
ΠΠ»Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΡΠ½ΠΊΡΠΈΡ Π²ΡΠ·ΠΎΠ²Π° ΠΎΠΊΠ½Π° Π²Ρ ΠΎΠ΄Π° Π½Π°Β ΡΡΡΡ ΡΠ΅ΡΠ²ΠΈΡΠ°Ρ ΡΠΎΠ²ΠΌΠ΅ΡΡΠ½ΡΡ ΠΏΠΎΠ΅Π·Π΄ΠΎΠΊ: beepcar.ru, Π΅Π΄Π΅ΠΌ.ΡΡ ΠΈΒ blablacar.ru.
beepcar.ruΒ β ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ
Π€ΡΠ½ΠΊΡΠΈΡ Π²Ρ ΠΎΠ΄Π° ΡΠ΄Π΅Π»Π°Π½Π° Π²Β Π²ΠΈΠ΄Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ (Ρ ΠΎΡΡ Π²Π½Π΅ΡΠ½Π΅ ΠΏΠΎΡ ΠΎΠΆΠ΅ Π½Π°Β ΡΡΡΠ»ΠΊΡ), ΠΊΠΎΡΠΎΡΠ°Ρ ΠΎΡΠΊΡΡΠ²Π°Π΅Ρ Π½Π°Β ΡΡΠΎΠΉΒ ΠΆΠ΅ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΎΠΊΠ½ΠΎ Π΄Π»Ρ Π²Π²ΠΎΠ΄Π° ΡΠ΅Π³ΠΈΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΡΡ Π΄Π°Π½Π½ΡΡ .
ΠΠ½ΠΎΠΏΠΊΠ° Β«ΠΠΎΠΉΡΠΈΒ» Π² beepcar.ruΠ΅Π΄Π΅ΠΌ.ΡΡΒ β Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ
Π€ΡΠ½ΠΊΡΠΈΡ Π²Ρ ΠΎΠ΄Π° ΡΠ΄Π΅Π»Π°Π½Π° Π²Β Π²ΠΈΠ΄Π΅ ΡΡΡΠ»ΠΊΠΈ (Π²Π½Π΅ΡΠ½Π΅ ΡΠΎΠΆΠ΅ ΠΊΠ°ΠΊ ΡΡΡΠ»ΠΊΠ°), ΠΊΠΎΡΠΎΡΠ°Ρ ΠΎΡΠΊΡΡΠ²Π°Π΅Ρ Π½Π°Β ΡΡΠΎΠΉΒ ΠΆΠ΅ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΎΠΊΠ½ΠΎ Π΄Π»Ρ Π²Π²ΠΎΠ΄Π° ΡΠ΅Π³ΠΈΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΡΡ Π΄Π°Π½Π½ΡΡ . ΠΠΎΒ ΠΏΡΠΈ ΡΡΠΎΠΌ Π²ΡΠ΅ ΠΏΡΠ΅Π»Π΅ΡΡΠΈ ΡΡΡΠ»ΠΊΠΈ ΡΠΏΡΡΠ΅Π½Ρ.
ΠΠ½ΠΎΠΏΠΊΠ° Β«ΠΠΎΠΉΡΠΈΒ» Π² Π΅Π΄Π΅ΠΌ.ΡΡblablacar.ruΒ β ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ+
Π€ΡΠ½ΠΊΡΠΈΡ Π²Ρ ΠΎΠ΄Π° ΡΠ΄Π΅Π»Π°Π½Π° Π²Β Π²ΠΈΠ΄Π΅ ΡΡΡΠ»ΠΊΠΈ (Π²Π½Π΅ΡΠ½Π΅ ΡΠΎΠΆΠ΅ ΠΊΠ°ΠΊ ΡΡΡΠ»ΠΊΠ°), ΠΊΠΎΡΠΎΡΠ°Ρ ΠΎΡΠΊΡΡΠ²Π°Π΅Ρ Π½Π°Β ΡΡΠΎΠΉΒ ΠΆΠ΅ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΎΠΊΠ½ΠΎ Π΄Π»Ρ Π²Π²ΠΎΠ΄Π° ΡΠ΅Π³ΠΈΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΡΡ Π΄Π°Π½Π½ΡΡ . ΠΠΎΒ ΠΏΡΠΈ ΡΡΠΎΠΌ ΡΒ blablacar.ru Π΅ΡΡΡ ΠΈΒ ΠΎΡΠ΄Π΅Π»ΡΠ½Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠ° Π΄Π»Ρ Π²Ρ ΠΎΠ΄Π°, ΡΡΡΠ»ΠΊΠ° Π½Π°Β ΠΊΠΎΡΠΎΡΡΡ ΠΈΒ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Π° ΠΏΠΎΒ ΡΡΡΠ»ΠΊΠ΅ Β«ΠΠΎΠΉΡΠΈΒ», ΡΠΎΒ Π΅ΡΡΡ ΠΎΡΡΠ°Π»ΠΈΡΡ Π²ΡΠ΅ ΠΏΡΠ΅Π»Π΅ΡΡΠΈ ΡΡΡΠ»ΠΊΠΈ.
ΠΠ½ΠΎΠΏΠΊΠ° Β«ΠΠΎΠΉΡΠΈΒ» Π² blablacar.ruΠΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΡΡΡΠ»ΠΎΠΊ ΠΈΒ ΠΊΠ½ΠΎΠΏΠΎΠΊ
ΠΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΏΡΠ°ΠΊΡΠΈΠΊΠ° ΠΈΒ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΈΒ ΡΡΡΠ»ΠΊΠΈ ΠΌΠΎΠ³ΡΡ ΠΈΠΌΠ΅ΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ (ΡΠΌ. Π²ΡΡΠ΅ Π½Π°Β ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈΒ ΡΡΡΠ»ΠΊΠΈ Β«ΠΠΎΠΉΡΠΈΒ»). ΠΡΡ ΡΠ°ΡΠ΅ Π²Β Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΡΡΡΠ»ΠΊΠΈ ΡΡΠ°Π½ΠΎΠ²ΡΡΡΡ ΠΏΠΎΡ ΠΎΠΆΠΈ Π½Π°Β ΠΊΠ½ΠΎΠΏΠΊΠΈ Π·Π°Β ΡΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΏΠ»Π°ΡΠ΅ΠΊ-ΠΏΠΎΠ΄Π»ΠΎΠΆΠ΅ΠΊ (ΠΈΒ ΡΠ°ΠΊ Π»ΡΡΡΠ΅ Π΄Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ), Π²Β ΠΊΠ°Π½ΠΎΠ½ΠΈΡΠ΅ΡΠΊΠΎΠΌ Π²ΠΈΠ΄Π΅ ΡΡΡΠ»ΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΠΏΠΎΒ Ρ ΠΎΠ΄Ρ ΡΠ΅ΠΊΡΡΠ°.
ΠΠΎΒ Π±ΠΎΠ»ΡΡΠΎΠΌΡ ΡΡΡΡΡ Π²Β ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠΈ ΡΡΡΠ»ΠΎΠΊ ΠΈΒ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π²Π°ΠΆΠ½ΠΎ ΠΏΡΠΈΠ΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π»ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΡΠ°Π²ΠΈΠ»Π°Β β ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΠΎΠ΄Π½ΠΎΡΠΈΠΏΠ½ΡΠΌ ΠΏΠΎΒ Π²ΡΠ΅ΠΌΡ ΠΏΡΠΎΠ΅ΠΊΡΡ. ΠΡΠΈ ΡΡΠΎΠΌ Π²ΠΎΒ ΡΡΠΎΠ½Ρ-ΡΠ°ΡΡΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠ° Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Π΄Π°Π»ΡΠΊ ΠΎΡΒ ΠΊΠ°Π½ΠΎΠ½ΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ, Π½ΠΎΒ Π²Β ΡΠ°Π·Π΄Π΅Π»Π΅ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡΒ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠ΅ΠΉ (Π±ΡΠΊΡΠ½Π΄) ΡΒ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡ ΠΏΡΠΈΠ΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ Π²ΠΈΠ΄Π°, Π±Π»ΠΈΠ·ΠΊΠΎΠ³ΠΎ ΠΊΒ ΠΊΠ°Π½ΠΎΠ½ΠΈΡΠ΅ΡΠΊΠΎΠΌΡ (ΡΠ°ΠΊ ΡΠ΄ΠΎΠ±Π½Π΅Π΅ Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ).
ΠΡΡΡ ΠΊΠ»Π°ΡΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π°Β ΡΠΎΡΠΌΠ°Ρ
Π²Π²ΠΎΠ΄Π° ΠΈΒ ΠΏΠΎΠΈΡΠΊΠ° ΡΒ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡ ΡΠ°ΡΠ΅ ΠΎΡΠΎΡΠΌΠ»ΡΡΡ ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠΈ: Π‘ΠΎΡ
ΡΠ°Π½ΠΈΡΡ, Π£Π΄Π°Π»ΠΈΡΡ, ΠΠ°ΠΉΡΠΈ.
ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ»Π΅Π·Π½ΡΠ΅ ΡΠΎΠ²Π΅ΡΡ ΠΏΠΎΒ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΠΈΒ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΡΠ»ΠΎΠΊ ΠΈΒ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ Π²Β ΠΠΎΠ½ΡΡΡ.ΠΠ°ΠΉΠ΄Ρ (ΠΎΡΒ Π‘ΠΠ ΠΠΎΠ½ΡΡΡ): Π‘ΡΡΠ»ΠΊΠ°, ΠΠ½ΠΎΠΏΠΊΠ°
Π‘ΡΡΠ»ΠΊΠΈ ΠΏΡΠΎΡΠΈΠ² ΠΊΠ½ΠΎΠΏΠΎΠΊ Π² ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΡ β CSS-LIVE
ΠΠ΅ΡΠ΅Π²ΠΎΠ΄ ΡΡΠ°ΡΡΠΈ Links vs. Buttons in Modern Web Applications Ρ ΡΠ°ΠΉΡΠ° marcysutton.com Π΄Π»Ρ CSS-live.ru, Π°Π²ΡΠΎΡ β ΠΠ°ΡΡΠΈ Π‘Π°ΡΡΠΎΠ½
Github: ΡΡΡΠ»ΠΊΠΈ ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ?
ΠΠ΄Π½Π° ΠΈΠ· Π²Π΅ΡΠ½ΡΡ
ΡΠ΅ΠΌ Π²ΠΎ ΡΡΠΎΠ½ΡΠ΅Π½Π΄-Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΠΈ β Π½Π΅ΡΠ°Π·Π±Π΅ΡΠΈΡ
Π° ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΡΠ»ΠΊΠ°ΠΌΠΈ ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ. ΠΡ, HTML-ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΡΠΊΡΡΠ²Π°ΡΡ ΡΡΡΠ»ΠΊΠΈ Π² Π½ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅ ΠΈΠ»ΠΈ ΠΎΡΠΏΡΠ°Π²Π»ΡΡΡ ΡΠΎΡΠΌΡ, Π·Π½Π°Π΅ΡΠ΅? Π Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΡ
Π½Π° JavaScript ΠΌΡ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΠΏΡΡΠ°Π΅ΠΌΡΡ, ΠΊΠ°ΠΊΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²ΡΠ±ΡΠ°ΡΡ Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ. Π§ΡΠΎΠ±Ρ ΡΠ°Π·Π²Π΅ΡΡΡ ΡΡΠΌΠ°Π½, Ρ ΠΏΠΎΠΊΠ°ΠΆΡ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π΄Π»Ρ ΡΡΡΠ»ΠΎΠΊ ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΡ
Ρ ΠΎΡΡΠΈΡΠΎΠ²ΠΊΠΎΠΉ Π½Π° ΠΊΠ»ΠΈΠ΅Π½ΡΠ΅ ΠΈ ΠΏΠΎΠΌΠΎΠ³Ρ Π²Π°ΠΌ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ Π»ΡΡΡΠΈΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΡ Ρ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ UI.
ΠΠ½ΠΎΠΏΠΊΠΈ
ΠΠΎΡΠ΅ΠΌΡ-ΡΠΎ Π»ΡΠ΄ΠΈ ΡΡΠ°Π½ΠΎΠ²ΡΡΡΡ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌΠΈ,ΡΠ°ΠΊ ΠΈ Π½Π΅ ΡΠ·Π½Π°Π² ΠΏΡΠΎ HTML-ΡΠ»Π΅ΠΌΠ΅Π½Ρ <button>. (ΠΠ½Π΅ ΠΈ ΡΠ°ΠΌΠΎΠΉ ΠΏΠΎΡΡΠ΅Π±ΠΎΠ²Π°Π»ΠΎΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π»Π΅Ρ, ΠΏΠΎΠΊΠ° Ρ ΡΠ·Π½Π°Π»Π°, Π΄Π»Ρ ΡΠ΅Π³ΠΎ Π½ΡΠΆΠ½Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ h2-h6, ΡΠ°ΠΊ ΡΡΠΎ Π±ΡΠ²Π°Π΅Ρ). ΠΠΎΠ³ΡΡΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΈ ΠΏΡΠ°Π²Π΄Π° ΠΊΡΡΡΠ°Ρ. ΠΠΎΡ ΡΡΠΎ ΠΎΠ½Π° ΠΌΠΎΠΆΠ΅Ρ Π΄Π΅Π»Π°ΡΡ:
- ΠΠΎΠ»ΡΡΠ°ΡΡ ΡΠΎΠΊΡΡ Ρ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ
- ΠΠ΅Π»Π°ΡΡ Β«ΠΊΠ»ΠΈΠΊΒ» ΠΏΠΎ Π½Π°ΠΆΠ°ΡΠΈΡ Π½Π° ΠΏΡΠΎΠ±Π΅Π»
- ΠΡΠΏΡΠ°Π²Π»ΡΡΡ Π΄Π°Π½Π½ΡΠ΅ ΡΠΎΡΠΌΡ Π½Π° ΡΠ΅ΡΠ²Π΅Ρ
- ΠΡΠΈΡΠ°ΡΡ ΡΠΎΡΠΌΡ
- ΠΠ»ΠΎΠΊΠΈΡΠΎΠ²Π°ΡΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π°ΡΡΠΈΠ±ΡΡΠ°
disabled
- ΠΠ°Π²Π°ΡΡ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΡ ΡΠΊΡΠΈΠ½ΡΠΈΠ΄Π΅ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π½Π΅ΡΠ²Π½ΠΎΠ³ΠΎ Π°ΡΡΠΈΠ±ΡΡΠ°
role="button"
- ΠΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ
βΆfocus
,βΆhover
,βΆactive
,βΆdisabled
ΠΡΠ»ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠΊΡΠΈΠΏΡΠ°,ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄Π»Ρ:
- ΠΡΠΊΡΡΠ²Π°Π½ΠΈΡ ΠΌΠΎΠ΄Π°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΎΠΊΠ½Π°
- ΠΡΠ·ΠΎΠ²Π° Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ
- ΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°
- ΠΡΠΎΠΈΠ³ΡΡΠ²Π°Π½ΠΈΡ ΠΌΠ΅Π΄ΠΈΠ°-ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°
- ΠΡΡΠ°Π²ΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ JS Π² ΡΠ»ΡΡΠ°Π΅, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ JS
Π‘ΡΡΠ»ΠΊΠΈ
ΠΠΎΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π±Π°Π·ΠΎΠ²ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ ΡΡΡΠ»ΠΎΠΊ, ΠΈΠ»ΠΈ ΡΠΊΠΎΡΠ΅ΠΉ, ΠΈΠ»ΠΈ ΡΡΠ½Π΄Π°ΠΌΠ΅Π½ΡΠ° Π²Π΅Π±Π°:
- Π‘ΠΎΠ·Π΄Π°Π²Π°ΡΡ Π³ΠΈΠΏΠ΅ΡΡΠ΅ΠΊΡΡ,Β ΡΠ΅ΡΡ ΠΎΠ½Π»Π°ΠΉΠ½-ΡΠ΅ΡΡΡΡΠΎΠ²
- ΠΠ΅ΡΠ΅Π²Π΅ΡΡΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π° Π½ΠΎΠ²ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈΠ»ΠΈ ΠΎΠΊΠ½ΠΎ
- ΠΠ·ΠΌΠ΅Π½ΡΡΡ URL
- ΠΡΠ·Π²Π°ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ½ΡΠ΅ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠΎΠ²ΠΊΡ/ΠΏΠ΅ΡΠ΅Π·Π°Π³ΡΡΠ·ΠΊΡ
- ΠΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΡΡ ΠΏΠΎ ΡΠΊΠΎΡΡΠΌ Π²Π½ΡΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ
- Π‘Π²ΡΠ·ΡΠ²Π°ΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠΎΠ±ΠΎΠΉ ΡΠ°Π·Π½ΡΠ΅ ΡΠ°ΡΡΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Ρ ΠΎΡΡΠΈΡΠΎΠ²ΠΊΠΎΠΉ Π½Π° ΠΊΠ»ΠΈΠ΅Π½ΡΠ΅
- Π‘ΠΏΠΎΡΠΎΠ±Π½Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ ΡΠΎΠΊΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π°ΡΡΠΈΠ±ΡΡΠ°
href
- Π Π΅Π³ΠΈΡΡΡΠΈΡΡΡΡ ΠΊΠ»ΠΈΠΊ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»Π°Π²ΠΈΡΠΈ
Enter
- ΠΠΌΠ΅ΡΡ Π½Π΅ΡΠ²Π½ΡΡ ΡΠΎΠ»Ρ link
- ΠΠ΅ Π±Π»ΠΎΠΊΠΈΡΡΡΡΡΡ ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½ΠΎ ΠΈΡ
ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π½Π΅Π°ΠΊΡΠΈΠ²Π½ΡΠΌΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ
tabindex="-1"
ΠΈaria-hidden="true"
- ΠΠΎΠ³ΡΡ ΠΎΡΠΊΡΡΠ²Π°ΡΡΡΡ Π² Π½ΠΎΠ²ΡΡ ΠΎΠΊΠ½Π°Ρ (Π° ΡΠ°Π½ΡΡΠ΅ β ΠΈ Π²ΠΎ ΡΡΠ΅ΠΉΠΌΠ°Ρ )
- ΠΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ
βΆlink
,βΆvisited
,βΆfocus
,βΆhover
,βΆactive
ΠΠΈΡΠ½ΠΎ Π΄Π»Ρ ΠΌΠ΅Π½Ρ ΡΠ°ΠΌΠΎΠ΅ Π³Π»Π°Π²Π½ΠΎΠ΅ ΡΠ°Π·Π»ΠΈΡΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΡΠ»ΠΊΠΎΠΉ ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ β ΡΠΎ, ΡΡΠΎ ΡΡΡΠ»ΠΊΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π° Π½ΠΎΠ²ΡΠΉ ΡΠ΅ΡΡΡΡ, ΡΠ½ΠΎΡΡ Π΅Π³ΠΎ ΠΈΠ· ΡΠ΅ΠΊΡΡΠ΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ° (Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΡΡΡΠ»ΠΊΠΈ β Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½Π°Ρ Π·Π°Π³Π²ΠΎΠ·Π΄ΠΊΠ° Π·Π΄Π΅ΡΡ). ΠΠ½ΠΎΠΏΠΊΠ° ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°Π΅Ρ ΡΡΠΎ-ΡΠΎ Π² ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ΅, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π²ΠΈΠ΄Π΅ΠΎ-ΠΏΠ»Π΅Π΅Ρ,Β ΠΈΠ»ΠΈ Π²ΡΠ·ΡΠ²Π°Π΅Ρ Π½ΠΎΠ²ΡΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π² ΡΠΎΠΌ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠ΅Π΅ aria-haspopup
.
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ? Π ΡΡΠΎ ΠΌΠ°ΡΡΡΡΡΠΈΠ·Π°ΡΠΈΡ?
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ URL ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ΠΈΡ Π½Π° Π½ΠΎΠ²ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡΠΎ ΠΏΠ΅ΡΠ΅Π·Π°Π³ΡΡΠΆΠ°Π΅Ρ Π±ΡΠ°ΡΠ·Π΅Ρ Ρ Π½ΠΎΠ²ΡΠΌ ΡΠ΅ΡΡΡΡΠΎΠΌ ΠΈ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠΎΠ²ΡΠ²Π°Π΅Ρ ΠΏΠΈΠΊΡΠ΅Π»ΠΈ. ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ·ΡΠ²Π°ΡΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ ΡΠΎΡΠΌΡ, ΡΠΊΠΎΡΠ½ΡΡ
ΡΡΡΠ»ΠΎΠΊ ΠΈ JavaScript-ΡΠ²ΠΎΠΉΡΡΠ²Π° location
.
ΠΠΎΠ΄ΠΎΠ±Π½ΠΎ ΡΠΎΡΡΠΈΡΠΎΠ²ΠΊΠ΅ ΠΏΠΈΡΠ΅ΠΌ Π½Π° ΠΏΠΎΡΡΠ΅, ΠΌΠ°ΡΡΡΡΡΠΈΠ·Π°ΡΠΈΡ β ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌ Π΄Π»Ρ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΡΠ΅ΡΠ΅Π²ΡΡ Π·Π°ΠΏΡΠΎΡΠΎΠ² Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ. ΠΠ°ΡΡΡΡΡΠΈΠ·Π°ΡΠΎΡΡ β ΠΎΠ±ΡΠ°Ρ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡ Π΄Π»Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²Π° ΡΠ°Π·Π½ΡΡ Π²Π΅Π±-ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΎΠ² (ΠΏΠΎΠΌΠ½Ρ, ΠΊΠ°ΠΊ Π½Π° Π·Π°ΡΠ΅ ΡΠ²ΠΎΠ΅ΠΉ ΠΊΠ°ΡΡΠ΅ΡΡ Ρ Π±Π°Π»Π΄Π΅Π»Π° ΠΎΡ PHPΡΠ½ΡΡ ), ΡΡΠ°Π²ΡΡΠ°Ρ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΈ ΠΈΡ ΡΠ°ΡΡΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΌ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ°ΠΌ URL. ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΡ ΠΌΠ°ΡΡΡΡΡΠΎΠ², Π½ΠΎΠ²ΡΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈ (Π±Π΅Π· Ρ Π°ΡΠ΄ΠΊΠΎΠ΄Π°)
ΠΡΠΊΡΠ΄Π° Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ ΠΏΡΡΠ°Π½ΠΈΡΠ°?
Π ΠΌΠΈΡΠ΅ ΠΊΠ»ΠΈΠ΅Π½ΡΡΠΊΠΈΡ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΏΠΎΡΡΡΠΎΠ΅Π½Π½ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Angular, Ember ΠΈΠ»ΠΈ React, Π±ΡΠ°ΡΠ·Π΅ΡΠ½Π°Ρ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠΎΠ²ΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ·Π²Π°ΡΡΡΡ Π² Π»ΡΠ±ΠΎΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ. ΠΠ΅ΠΌΠ½ΠΎΠ³ΠΎ Π½Π΅ΡΡΠ½ΠΎ, ΠΊΠ°ΠΊΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π»ΡΡΡΠ΅ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ Π΄Π΅Π»Π°, ΠΊΠΎΠ³Π΄Π° Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ ΡΠΎΡ ΠΆΠ΅ ΠΊΠΎΠ΄, ΡΡΠΎ Π΄Π»Ρ ΠΌΠ°ΡΡΡΡΡΠ°, Π½ΠΎ Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠΌ ΠΊΠ»ΠΈΠΊΠ° ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ Π±Π΅Π· ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ URL. Π ΠΏΡΠΈΠΌΠ΅ΡΡ, Π΅ΡΠ»ΠΈ Ρ ΠΎΡΠΊΡΡΠ²Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π΄ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΠΌ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ ΡΡΡΠ°Π½ΠΈΡΡ, Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠΆΡ ΡΡΠ΄Π° ΠΈΠ»ΠΈ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°Ρ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ? ΠΠ°Π²ΠΈΡΠΈΡ Π»ΠΈ ΡΡΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, Π΅ΡΡΡ Π»ΠΈ Ρ ΡΡΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ ΡΠ²ΠΎΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ URL? ΠΠΎΡ ΠΊΠΎΠ΄, ΠΊΠΎΡΠΎΡΡΠΉ Ρ Π²ΠΈΠ΄Π΅Π»Π° Π½Π΅Π΄Π°Π²Π½ΠΎ:
<a href="#" tabindex="0" ng-click="userPicker.userClicked(true)" aria-label="Some username"></a>
ΠΠΎ ΠΏΠ΅ΡΠ²ΠΎΠΌΡ Π²ΠΏΠ΅ΡΠ°ΡΠ»Π΅Π½ΠΈΡ Ρ ΠΏΠΎΡΡΠΈΡΠ°Π»Π°, ΡΡΠΎ ΡΡΠΎ Π½Π°Π΄ΠΎ Π·Π°ΠΌΠ΅Π½ΠΈΡΡ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ button
, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π½Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π² href
, Π½ΠΎ Π΅ΡΡΡ tabindex="0"
ΠΈ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠ° ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° ng-click
. ΠΡΠ³Π»ΡΠ΄ΠΈΡ ΠΎΡΠ΅Π²ΠΈΠ΄Π½ΠΎ, Π΄Π°? ΠΠ½Π΅ ΡΠΊΠ°Π·Π°Π»ΠΈ, ΡΡΠΎ ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΡΡΠ°Π²Π°ΡΡΡΡ ΡΠΊΠΎΡΠ΅ΠΌ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Β«ΠΎΠ½ ΠΏΠ΅ΡΠ΅Π½Π°ΠΏΡΠ°Π²Π»ΡΠ΅Ρ Π½Π° Π²Π½Π΅ΡΠ½ΠΈΠ΅ ΡΡΡΠ»ΠΊΠΈ ΠΈ ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΡΠΎΡΠΈΠ»ΡΒ». ΠΡΠΎ ΡΡΠ°Π»ΠΎ ΡΡΠ½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΠ»Π΅ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ JavaScript-ΠΊΠΎΠ΄Π°, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ
ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΡ
ΠΌΠ΅ΡΡΠ°Ρ
ΠΏΠΎ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠ΅ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° ng-click
Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ button
. ΠΠ΅ΡΠΆΠ΅Π»ΠΈ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π½Π°Π΄ΠΎ ΡΠ°ΠΊ Π³Π»ΡΠ±ΠΎΠΊΠΎ ΠΊΠΎΠΏΠ°ΡΡ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΌΠΎΡΡ Π²ΡΠ±ΡΠ°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ?
ΠΡΠ»ΠΈ Π² ΡΠΈΡΡΠΎ ΠΊΠ»ΠΈΠ΅Π½ΡΡΠΊΠΎΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ ΡΠΎΠΊΡΡ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°Π΅ΡΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ, ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π½Π΅ ΡΠΊΠ°Π·Π°ΡΡΡΡ Π½Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ β Ρ ΡΡΡΠ»ΠΊΠΈ ng-click
ΠΈ tabindex
ΠΎΡΡΠ°Π½Π΅ΡΡΡ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ Π½Π΅ΡΠ²Π½Π°Ρ ΡΠΎΠ»Ρ ΡΡΡΠ»ΠΊΠΈ. ΠΠ΄Π½Π°ΠΊΠΎ,ΠΏΡΠΈ Π΄Π΅ΠΊΠ»Π°ΡΠ°ΡΠΈΠ²Π½ΠΎΠΌ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄Π΅ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Π»ΡΡΡΠ΅ Π±ΡΠ»ΠΎ Π±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½Π½ΡΠΉ href
ΠΈ ΠΌΠ°ΡΡΡΡΡΠΈΠ·Π°ΡΠΈΡ, Π΅ΡΠ»ΠΈ ΡΠΊΠΎΡΡ ΠΏΠ΅ΡΠ΅Π½Π°ΠΏΡΠ°Π²Π»ΡΠ΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π° Π½ΠΎΠ²ΡΠΉ ΡΠ΅ΡΡΡΡ. Tabindex ΠΈ ΡΠΎΠ±ΡΡΠΈΡ click
, ΠΏΡΠΈΠ²ΡΠ·Π°Π½Π½ΡΠ΅ ΠΊ ΡΠ΅Π³Ρ ΡΡΡΠ»ΠΊΠΈ β Π°Π½ΡΠΈΠΏΠ°ΡΠ΅ΡΠ½ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠΉ Π΅ΡΠ΅ Π°ΡΠΊΠ½Π΅ΡΡΡ ΡΠ΅ΠΌ, ΠΊΡΠΎ ΠΏΠΎΠ·Π΄Π½Π΅Π΅ Π±ΡΠ΄Π΅Ρ ΠΏΠΈΡΠ°ΡΡ ΠΊΠΎΠ΄ ΠΈ ΠΏΡΠΎΠ²Π΅ΡΡΡΡ Π΅Π³ΠΎ.
ΠΡΠ»ΠΈ Π΄Π΅Π»Π°ΡΡ ΠΌΠ°ΡΡΡΡΡΠΈΠ·Π°ΡΠΈΡ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΠ°ΡΡΡΡ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, ΡΠΎ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ Π±ΡΠ΄Π΅Ρ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΡΠ»ΠΊΠΈ ΠΈ ΠΏΠΎΠ½ΡΡΡ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ. Π Π΅ΡΠ΅ Ρ Π½ΠΈΠΌ ΠΏΡΠΎΡΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠ΅ΡΠ²Π΅ΡΠ½ΡΠ΅ JavaScript-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Ρ ΠΏΡΠΎΠ³ΡΠ΅ΡΡΠΈΠ²Π½ΡΠΌ ΡΠ»ΡΡΡΠ΅Π½ΠΈΠ΅ΠΌ, ΠΏΠΎΠ»ΡΠ·ΡΡΡΡ ΡΠ°Π±Π»ΠΎΠ½Π°ΠΌΠΈ URL, Π° Π½Π΅ ΠΏΠΎΠ»Π°Π³Π°ΡΡΡ Π½Π° ΡΠΎΠ±ΡΡΠΈΡ ΠΏΠΎ ΠΊΠ»ΠΈΠΊΡ.
Π ΠΎΠ»Ρ UX Π² ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ Π΄ΠΎΡΡΡΠΏΠ½ΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ
Π― ΡΠΊΠ°ΠΆΡ ΡΡΠΎ Π²ΡΠ»ΡΡ : ΡΡΠ° ΠΏΡΡΠ°Π½ΠΈΡΠ° ΡΠ°ΡΡΠΎ Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ UX. ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡ ΠΊ Π½Π°ΠΌ Ρ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΡΠΌΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°, ΠΈ β ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΠ°ΠΊ Π½Π°Π΄ΠΎ β Π² ΠΊΠΎΠ΄Π΅ ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΡΡΡΠ»ΠΊΠ°ΠΌΠΈ. ΠΠ΄Π΅ ΡΡΠΎ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠΎΠΉ?
ΠΡΠ»ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΠΊΡΠΈΠ½ΡΠΈΠ΄Π΅ΡΠ° ΠΎΠ±ΡΠ°ΡΠΈΡΡΡ Π² ΡΠ΅Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ ΠΈ ΠΏΠΎΠ»ΡΡΠΈΡ ΠΈΠ½ΡΡΡΡΠΊΡΠΈΡ Β«ΠΊΠ»ΠΈΠΊΠ½ΡΡΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡΒ» Π² Π²Π°ΡΠ΅ΠΌ UI, ΠΊΠΎΡΠΎΡΠ°Ρ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ Π½Π°ΠΏΠΈΡΠ°Π½Π° Π² ΠΊΠΎΠ΄Π΅ ΠΊΠ°ΠΊ ΡΡΡΠ»ΠΊΠ°, Π΄Π»Ρ Π½Π΅Π³ΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΎΠΊΠ°Π·Π°ΡΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠΎΠΉ Π½Π°ΠΉΡΠΈ Π΅Π΅. ΠΠ΅ Π·Π°Π±ΡΠ²Π°ΠΉΡΠ΅ ΠΈ ΠΎ Π³ΠΎΠ»ΠΎΡΠΎΠ²ΡΡ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°Ρ : Π΅ΡΠ»ΠΈ Π²Ρ ΠΏΡΠΎΠΈΠ·Π½Π΅ΡΡΡΠ΅ ΠΊΠΎΠΌΠ°Π½Π΄Ρ ΠΊΠ»ΠΈΠΊΠ½ΡΡΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π² ΠΊΠΎΠ΄Π΅ ΠΏΠΎΡ ΠΎΠΆΠ° Π½Π° ΡΡΡΠ»ΠΊΡ, Π²Ρ ΡΡΠΎΠ»ΠΊΠ½Π΅ΡΠ΅ΡΡ Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°ΠΌΠΈ, Π½Π΅Ρ?
Π€ΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΈ, ΠΏΠΎ ΠΎΠ±ΡΠ΅ΠΌΡ ΠΏΡΠΈΠ·Π½Π°Π½ΠΈΡ, ΡΡΠΈΡΠ°ΡΡ ΡΡΡ Π³ΡΠ°Π½Ρ ΠΈ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΏΠΎΡΠΎΠ±ΡΡΠ²ΡΡΡ Π²ΡΠ±ΠΎΡΡ Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΊΠ°ΠΊ Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Ρ ng-click
Π²ΡΡΠ΅. ΠΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ JavaScript Π΄Π»Ρ Π·Π°ΠΏΡΡΠΊΠ° Π°ΡΠΈΠ½Ρ
ΡΠΎΠ½Π½ΠΎΠΉ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ ΡΠΎΡΠΌΡ Π½Π° Π½ΡΠΆΠ½ΠΎΠΌ Π½Π°ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ (Π΄Π°ΠΆΠ΅ Π±Π΅Π· ΡΠ΅Π³Π° <form>
, Π½ΠΎ ΡΡΠΎ Π΅ΡΠ΅ Π½Π΅ ΠΏΠΎΠ²ΠΎΠ΄ ΠΎΡ Π½Π΅Π³ΠΎ ΠΎΡΠΊΠ°Π·ΡΠ²Π°ΡΡΡΡ). ΠΠ½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ½ΠΈΡΠΈΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΡ Π±Π΅Π· ΠΌΠ°ΡΡΡΡΡΠΈΠ·Π°ΡΠΈΠΈ, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΠΈΡ
Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΡΠ»ΠΊΠΈ. ΠΠ΄Π½ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, Π΄ΡΡΠ³ΠΈΠ΅ β Π² Π΄ΡΡΠ³ΠΎΠΌ: Π²ΡΡ Π΄Π΅Π»ΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π°ΡΠΈΠ²Π½ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΠΎ ΠΌΠ°ΠΊΡΠΈΠΌΡΠΌΡ.
ΠΠ°ΠΌΠ΅ΡΠΈΠ»ΠΈ ΡΠ°Π·Π½ΠΈΡΡ?
Π§ΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ?
ΠΠ΅ΡΠ½ΠΈΡΠ΅ΡΡ ΠΊ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ ΠΈ ΡΠ΄Π΅Π»Π°ΠΉΡΠ΅ ΡΡΡΠ»ΠΊΠΈ ΠΏΠΎΡ ΠΎΠΆΠΈΠΌΠΈ Π½Π° ΡΡΡΠ»ΠΊΠΈ, Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ β Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΠ΅Π· Π΄Π²ΡΡΠΌΡΡΠ»Π΅Π½Π½ΠΎΡΡΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ ΡΡΠ°Π½Π΅Ρ Π»Π΅Π³ΡΠ΅ ΠΏΠΈΡΠ°ΡΡ Π±ΠΎΠ»Π΅Π΅ Π΄ΠΎΡΡΡΠΏΠ½ΡΠΉ ΠΊΠΎΠ΄, Π»ΡΡΡΠ΅ ΠΎΡΠ²Π΅ΡΠ°ΡΡΠΈΠΉ ΠΎΠΆΠΈΠ΄Π°Π½ΠΈΡΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ. (ΠΠΎΠΆΠ½ΠΎ Π»ΠΈ ΠΊΠ»ΠΈΠΊΠ½ΡΡΡ ΠΏΡΠ°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡΡΠΈ Π½Π° ΡΡΡ ΠΊΠ²Π°Π΄ΡΠ°ΡΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ, ΡΡΠΎΠ±Ρ ΠΎΡΠΊΡΡΡΡ Π² Π½ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅?)
Π ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅:
- ΠΡΠ»ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΠΊΡΠΈΠ½ΡΠΈΠ΄Π΅ΡΠ° ΠΏΠ΅ΡΠ΅ΠΉΠ΄Π΅Ρ ΡΠ°Π±ΠΎΠΌ Π½Π° ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΏΠΎΠ΄ΡΠΊΠ°ΠΆΠ΅Ρ Π»ΠΈ ΡΠΎΠ»Ρ ΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΠ΅Π³ΠΎ ΠΎΡ Π½Π΅Π³ΠΎ ΠΆΠ΄Π°ΡΡ? (Π£Π²ΠΎΠ΄ΠΈΡ Π»ΠΈ ΠΎΠ½ ΠΊΡΠ΄Π°-ΡΠΎ Ρ ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΡ? ΠΠ± ΡΡΠΎΠΌ Ρ ΠΎΡΠΎΡΠΎ Π±Ρ ΡΠ·Π½Π°ΡΡ Π·Π°ΡΠ°Π½Π΅Π΅.)
- ΠΡΠΊΠ»ΡΡΠ°Π΅ΡΠ΅ ΡΡΡΠ»ΠΎΡΠ½ΡΠ΅ ΡΠΈΡΠΈ ΡΠΈΠΏΠ° ΡΠΌΠ΅Π½Ρ URL ΠΈΠ»ΠΈ ΠΏΡΠ°Π²ΠΎΠ³ΠΎ ΠΊΠ»ΠΈΠΊΠ°? ΠΠΎΠ΄ΡΠΌΠ°ΠΉΡΠ΅ ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ΅.
- ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΠΉΡΠ΅ ΠΌΠ°ΡΡΡΡΡΠΈΠ·Π°ΡΠΈΡ Π² Π²Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ
href
,ng-href
, ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅. - ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΏΠΎ ΡΡΡΠ°Π½ΠΈΡΠ°ΠΌ Π·Π°ΡΠ»ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΈ ΠΈΡΡΠΎΡΠΈΠΈ.
ΠΡΠΎ Π΅ΡΡ Π½Π΅ ΠΊΠΎΠ½Π΅Ρ.
Π£Π²Π΅ΡΠ΅Π½Π°, ΡΡΠΎ ΠΊ ΡΡΠΎΠΉ ΡΠ΅ΠΌΠ΅ ΠΏΡΠΈΠ΄Π΅ΡΡΡ Π²Π΅ΡΠ½ΠΎ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°ΡΡΡΡ ΡΠ½ΠΎΠ²Π° ΠΈ ΡΠ½ΠΎΠ²Π°, ΠΊΠ°ΠΊ ΠΈ Π²ΡΠ΅ ΡΡΠΈ Π³ΠΎΠ΄Ρ. ΠΠΎΠΏΠ»ΠΎΡΠ°Ρ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ Π² ΠΊΠΎΠ΄Π΅, Π²Π°ΠΌ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ°Π· ΠΏΡΠΈΠ΄Π΅ΡΡΡ Ρ ΡΡΡΠ΄ΠΎΠΌ Π²ΡΠ±ΠΈΡΠ°ΡΡ, ΠΊΠ°ΠΊΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΉ Π² Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅β¦ ΠΈ Π΅ΡΡΡ ΡΠΉΠΌΠ° ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΡΠ΄Π΅Π»Π°ΡΡ ΠΎΠ΄Π½ΠΎ ΠΈ ΡΠΎ ΠΆΠ΅. Π Π΅ΡΠ»ΠΈ ΠΏΡΠΈ ΡΡΠΎΠΌ Π²Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅ΡΠ΅ ΠΊΠΎΠΌΠΏΠ΅ΡΠ΅Π½ΡΠ½ΡΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΡ, ΡΠΎ ΡΡΠΎ Π»ΡΡΡΠ΅Π΅, ΡΡΠΎ Π² Π²Π°ΡΠΈΡ ΡΠΈΠ»Π°Ρ .
Π Π°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠΌ ΠΏΡΠ΅Π΄ΡΡΠΎΠΈΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΠΊΠΎΠ΄ΠΎΠΌ ΠΏΠΎΡΠ»Π΅ Π²Π°Ρ, Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ Π΄Π΅ΠΊΠ»Π°ΡΠ°ΡΠΈΠ²Π½ΠΎΡΡΠΈ ΡΠΌΠΎΠ³ΡΡ Π»Π΅Π³ΡΠ΅ ΠΎΡΠ²ΠΎΠΈΡΡ ΡΡΡ Π½Π°ΡΠΊΡ. Π ΡΠ°ΠΌΠΎΠ΅ Π³Π»Π°Π²Π½ΠΎΠ΅, ΠΏΠΎΠ΄ΡΠΌΠ°ΠΉΡΠ΅ ΠΎΠ± ΠΎΠΆΠΈΠ΄Π°Π½ΠΈΡΡ Π²Π°ΡΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΠΎΡ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ, Π° Π½Π΅ Π±ΡΠΎΡΠ°ΠΉΡΠ΅ΡΡ Ρ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° Π² ΠΊΡΠ°ΠΉΠ½ΠΎΡΡΠΈ. ΠΠΎΠ³Π΄Π° ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ ΠΈΠ½ΡΡΠΈΡΠΈΠ²Π½ΠΎ ΠΏΠΎΠ½ΡΡΠ΅Π½, ΠΎΠ½ ΠΌΠ΅Π½ΡΡΠ΅ Π½Π°ΠΏΡΡΠ³Π°Π΅Ρ, ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΎΡΡΠ°ΡΡΡΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½Ρ.
P.S. ΠΡΠΎ ΡΠΎΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ:
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΡΠ»ΠΊΡ ΠΠΠΎΠ½ΡΠ°ΠΊΡΠ΅ Π² Π²ΠΈΠ΄Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΠ° ΡΡΠ΅Π½ΠΈΠ΅ 4 ΠΌΠΈΠ½. ΠΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½ΠΎ ΠΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΎ
ΠΠ΄ΡΠ°Π²ΡΡΠ²ΡΠΉΡΠ΅, Π΄ΡΡΠ·ΡΡ! Π‘Π΅Π³ΠΎΠ΄Π½Ρ Ρ Π²Π°ΠΌ ΡΠ°ΡΡΠΊΠ°ΠΆΡ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΡΠ»ΠΊΡ ΠΠΠΎΠ½ΡΠ°ΠΊΡΠ΅ Π² Π²ΠΈΠ΄Π΅ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΠ»Ρ ΠΏΠΎΡΡΠΎΠ² ΠΠΠΎΠ½ΡΠ°ΠΊΡΠ΅ Ρ ΡΠΆΠ΅ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π» Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΠΉ Π·Π΄Π΅ΡΡ Π½Π° Π±Π»ΠΎΠ³Π΅ ΠΈ Π½Π° ΡΠ²ΠΎΡΠΌ Π²ΠΈΠ΄Π΅ΠΎΠΊΠ°Π½Π°Π»Π΅ Π² YouTube, ΠΈ ΡΡΠ° ΡΡΠ°ΡΡΡ ΡΡΠ°Π½Π΅Ρ Ρ ΠΎΡΠΎΡΠΈΠΌ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π΄Π°Π½Π½ΠΎΠΉ ΡΠ΅ΠΌΡ. Π Π΅ΡΠ»ΠΈ ΠΡ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΠ΅ Π΄Π°Π½Π½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± Π½Π° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅, ΡΠΎ ΠΏΠΎ Π΄ΠΎΡΡΠΎΠΈΠ½ΡΡΠ²Ρ ΠΎΡΠ΅Π½ΠΈΡΠ΅ Π΅Π³ΠΎ ΡΠΈΠ»Ρ.
ΠΡΠ΅ ΠΡ Π·Π½Π°Π΅ΡΠ΅, ΡΡΠΎ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π΅ ΡΠ°ΠΊ-ΡΠΎ ΠΏΡΠΎΡΡΠΎ ΠΏΠΎΠ±ΡΠ΄ΠΈΡΡ ΡΡΠΎ-ΡΠΎ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ ΠΈ ΡΠ΅ΠΌ Π±ΠΎΠ»Π΅Π΅ ΡΠ΄Π΅Π»Π°ΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΠΏΠΎ ΡΡΡΠ»ΠΊΠ΅.
ΠΡΠ»ΠΈ Π½Π° ΠΏΡΠΈΠ½ΡΡΠΈΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΡ Β«ΡΠΈΡΠ°ΡΡ ΠΈΠ»ΠΈ Π½Π΅ ΡΠΈΡΠ°ΡΡΒ» ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΡΠΎΠ»Ρ ΠΈΠ³ΡΠ°ΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, ΠΏΠ΅ΡΠ²ΡΠΉ Π°Π±Π·Π°Ρ ΡΠ΅ΠΊΡΡΠ° ΠΈ ΡΠΎΠΏΡΠΎΠ²ΠΎΠΆΠ΄Π°ΡΡΠ°Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°, ΡΠΎ Π² Π΄Π΅Π»Π΅ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° ΠΏΠΎ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅ΠΌΡΠΌ ΡΡΡΠ»ΠΊΠ°ΠΌ ΠΊ ΡΡΠΈΠΌ ΠΎΡΠ½ΠΎΠ²Π½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°ΡΡΡΡ Π°ΠΊΡΠΈΠ²Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² Π²ΠΈΠ΄Π΅ Π±Π°Π½Π½Π΅ΡΠΎΠ² ΠΈ ΠΊΠ°Π±Π΅Π»ΡΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ.
Π ΠΈΡΠΎΠ³Π΅ ΠΏΡΠΎΡΡΠ΅Π½ΠΈΡ Π΄Π°Π½Π½ΠΎΠΉ ΡΡΠ°ΡΡΠΈ, ΠΡ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ Π±Π΅Π· ΡΡΡΠ΄Π° ΡΠ΄Π΅Π»Π°ΡΡ Π²ΠΎΡ ΡΠ°ΠΊΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΏΠΎΡΡΠ° ΠΠΠΎΠ½ΡΠ°ΠΊΡΠ΅:
Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠ°Ρ ΡΠΎΡΡΠ°Π²Π»ΡΡΡΠ°Ρ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠΈΠ΅ΠΌΠ° ΠΎΡΠ½ΠΎΠ²Π°Π½Π° Π½Π° ΡΠΎΠΌ, ΡΡΠΎ, ΠΊΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠ΅ΠΊΡΡΠ΅ ΠΏΠΎΡΡΠ° ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΡΡΡΠ»ΠΊΠ°, ΠΠΎΠ½ΡΠ°ΠΊΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠΎΠ²ΡΠΎΡΡΠ΅Ρ Π΅Ρ ΠΏΠΎΠ΄ ΡΠ΅ΠΊΡΡΠΎΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ. ΠΠ΄Π½ΠΈΠΌ ΠΈΠ· ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠΎΠ² ΡΠ°ΠΊΠΎΠ³ΠΎ Π°Π»Π³ΠΎΡΠΈΡΠΌΠ° Π΅Π³ΠΎ ΡΠ°Π±ΠΎΡΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΡΠ΅Π²ΡΡ ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ, ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½Π½ΠΎΠΉ Π½Π° ΡΠΎΠΌ Π²Π΅Π±-ΡΠ΅ΡΡΡΡΠΎΠ², Π½Π° ΠΊΠΎΡΠΎΡΡΠΉ Π²Π΅Π΄Π΅Ρ ΡΡΡΠ»ΠΊΠ°.
ΠΠΌΠ΅Π½Π½ΠΎ Π΄Π°Π½Π½ΠΎΠ΅ ΠΏΡΠ΅Π²ΡΡ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ. ΠΡΠ»ΠΈ Π½Π°ΠΆΠ°ΡΡ Π½Π° Π·Π½Π°ΡΠΎΠΊ ΡΠΎΡΠΎΠ°ΠΏΠΏΠ°ΡΠ°ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ Π½Π° ΠΏΡΠ΅Π²ΡΡ, ΡΠΎ ΠΠΎΠ½ΡΠ°ΠΊΡ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ Π·Π°ΠΌΠ΅Π½ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π»ΡΠ±ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ Π½Π΅ ΠΌΠ΅Π½ΡΡΠ΅ 537Ρ 240ΡΡ .
Π‘ΠΎΠ·Π΄Π°Π΄ΠΈΠΌ Π² Π€ΠΎΡΠΎΡΠΎΠΏΠ΅ ΡΠ°ΠΉΠ» Π±Π΅Π»ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ° ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠ°ΠΊΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈ ΡΠΎΡ ΡΠ°Π½ΠΈΠΌ Π΅Π³ΠΎ Π² Π²ΠΈΠ΄Π΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ. Π’Π΅ΠΏΠ΅ΡΡ Π² ΡΠ΅ΠΆΠΈΠΌΠ΅ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π½ΠΎΠ²ΠΎΡΡΠ΅ΠΉ Π½Π° ΡΡΠ΅Π½Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ Π°ΠΊΠΊΠ°ΡΠ½ΡΠ° ΠΈΠ»ΠΈ Π³ΡΡΠΏΠΏΡ ΠΏΠΎΡΡΠ°Π²ΠΈΠΌ Π»ΡΠ±ΡΡ ΡΡΡΠ»ΠΊΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π° ΡΡΠ°ΡΡΡ ΡΠ²ΠΎΠ΅Π³ΠΎ Π±Π»ΠΎΠ³Π°, Π½Π°ΠΆΠΌΠ΅ΠΌ Π·Π½Π°ΡΠΎΠΊ ΡΠΎΡΠΎΠ°ΠΏΠΏΠ°ΡΠ°ΡΠ° Π½Π° ΠΏΡΠ΅Π²ΡΡ ΠΈ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠΈΠΌ ΠΊΠΎΠ½ΡΠ°ΠΊΡΡ Π·Π°Π³ΡΡΠ·ΠΈΡΡ Π½Π°ΡΠ΅ Π±Π΅Π»ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ ΠΠΠΎΠ½ΡΠ°ΠΊΡΠ΅ ΡΠ΄Π΅Π»Π°Π΅Ρ Π·Π°Π³ΡΡΠ·ΠΊΡ, ΠΡ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ Π²ΠΎΡ ΡΠ°ΠΊΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ:
ΠΠ°Π»Π΅Π΅, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ²ΠΎΠΉ Π»ΡΠ±ΠΈΠΌΡΠΉ ΡΠΊΡΠΈΠ½ΡΠΎΡΠ΅Ρ, ΠΠ°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΡΠ΅Π½Ρ Π°ΠΊΠΊΡΡΠ°ΡΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΊΡΠΈΠ½ΡΠΎΡ ΠΎΠ±Π»Π°ΡΡΠΈ, ΠΊΠΎΡΠΎΡΡΡ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ ΡΠ΅ΡΡΠΉ ΡΠΎΠ½ ΠΏΠΎ Π΅Π³ΠΎ Π²Π½Π΅ΡΠ½Π΅ΠΉ Π³ΡΠ°Π½ΠΈΡΠ΅. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π°ΠΆΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π―Π½Π΄Π΅ΠΊΡ-Π΄ΠΈΡΠΊΠ° Π΄Π΅Π»Π°ΡΡ ΡΠΊΡΠΈΠ½ΡΠΎΡΡ. ΠΡΠ»ΠΈ ΠΡ Π΄Π΅Π»Π°Π΅ΡΠ΅ ΡΠΊΡΠΈΠ½ΡΠΎΡ Π½Π΅ Π²ΡΠ΅Π³ΠΎ ΡΠΊΡΠ°Π½Π° ΡΡΠ°Π·Ρ, Π° ΡΡΠΎ ΡΠ°ΠΌΡΠΉ Π»ΡΡΡΠΈΠΉ Π²Π°ΡΠΈΠ°Π½Ρ Π² Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, ΡΠΎ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΡΠΉΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ Π±ΡΠ΄ΡΡΠ΅Π³ΠΎ ΡΠΊΡΠΈΠ½ΡΠΎΡΠ°. ΠΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ 537Ρ 240ΡΡ .
Π’Π΅ΠΏΠ΅ΡΡ Π² Π€ΠΎΡΠΎΡΠΎΠΏΠ΅ ΠΎΡΠΊΡΡΠ²Π°Π΅ΡΠ΅ Π΄Π°Π½Π½ΡΠΉ ΡΠΊΡΠΈΠ½ΡΠΎΡ, Π±Π΅ΡΠ΅ΡΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Β«ΠΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΒ» ΠΈ ΡΠΎΠ·Π΄Π°ΡΡΠ΅ Π½Π° ΠΌΠ΅ΡΡΠ΅ Π±Π΅Π»ΠΎΠΉ ΡΠ°ΡΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ-Π·Π°Π³ΠΎΡΠΎΠ²ΠΊΡ Π΄Π»Ρ Π±ΡΠ΄ΡΡΠ΅ΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
ΠΡΠΈ ΡΡΠΎΠΌ ΡΠ²Π΅Ρ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠ° ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ±ΡΠ°ΡΡ ΡΡΠ°Π·Ρ ΠΏΠ΅ΡΠ΅Π΄ Π½Π°ΡΠ°Π»ΠΎΠΌ ΡΡΠΎΠΉ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΈ, Π° ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π΅Π³ΠΎ ΠΏΠΎΠ·ΠΆΠ΅. Π£Π΄Π°Π»ΡΡΡ ΡΠ΅ΡΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΠΎΠ±ΡΠ΅Π·Π°ΡΡ Π΅Π³ΠΎ Π½Π΅ Π½ΡΠΆΠ½ΠΎ. Π Π² ΡΡΠΎΠΌ Π΅ΡΡΡ ΠΎΡΠΎΠ±Π°Ρ Ρ ΠΈΡΡΠΎΡΡΡ.
ΠΠ°ΠΌ ΠΎΡΡΠ°Π½Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π°ΡΡ ΡΠΎΠ·Π΄Π°Π²Π°Π΅ΠΌΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠ΅ Π½Π°Π·Π²Π°Π½ΠΈΠ΅, ΠΏΠΎΠ΄ΠΎΠ±ΡΠ°ΡΡ ΡΠ²Π΅Ρ Π½Π°Π΄ΠΏΠΈΡΠΈ ΠΈ ΡΡΠΎΡΠ½ΠΈΡΡ Π΅Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. ΠΡΠΈ ΡΡΠΎΠΌ Π²ΠΏΠΎΠ»Π½Π΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΡΡΠΎ ΠΏΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΏΠ΅ΡΠ΅Π΄ Π½Π°Π±ΠΎΡΠΎΠΌ ΡΠ΅ΠΊΡΡΠ°, Π²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ ΠΎΡΠΊΠ»ΡΡΠΈΡΡ ΡΠ»ΠΎΠΉ ΡΠΎΠ·Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠ°.
Π£ ΠΠ°Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ Π²ΠΎΡ ΡΠ°ΠΊΠ°Ρ ΠΊΡΠ°ΡΠΈΠ²Π°Ρ ΠΊΠ½ΠΎΠΏΠΎΡΠΊΠ° ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ Π΅ΡΡ Π»ΡΡΡΠ΅.
ΠΡΡΠ°ΡΠΈ, ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠ°Π·Ρ Π½Π°Π΄Π΅Π»Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°ΠΊΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΡΡΠΎΠ±Ρ ΠΈΠΌΠ΅ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠ²Π½ΠΎ Π²ΡΠ±ΠΈΡΠ°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ, ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΡΡ ΠΏΠΎ ΡΠ²Π΅ΡΡ ΠΏΠΎΠ΄ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΠΠ°ΡΠ΅Π³ΠΎ ΠΏΠΎΡΡΠ°. ΠΠΎΡΠ»Π΅ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠ°ΠΊΠΎΠ³ΠΎ Π½Π°Π±ΠΎΡΠ° ΡΠΎΡ ΡΠ°Π½ΡΠ΅ΠΌ ΠΊΠ°ΠΆΠ΄ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ Π² ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π½Π½ΡΡ Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΠ°ΠΏΠΊΡ.
ΠΠΎΠ³Π΄Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ Π³ΠΎΡΠΎΠ²Ρ, ΠΡ Π² ΠΏΡΠΎΡΠ΅ΡΡΠ΅ ΡΠ°Π±ΠΎΡΡ Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΠ΅ Π½ΡΠΆΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π²ΠΌΠ΅ΡΡΠΎ ΡΠΎΠ·Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΠΎΠ½ΡΠ°ΠΊΡΠΎΠΌ ΠΏΡΠ΅Π²ΡΡ. ΠΡΠΈ ΡΡΠΎΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΡΠ΅Π³ΡΠ»ΠΈΡΠΎΠ²Π°ΡΡ Π½ΠΈΠΊΠ°ΠΊΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² β ΡΠΌΠ΅Π»ΠΎ ΠΏΠΎΡΠ»Π΅ Π·Π°Π³ΡΡΠ·ΠΊΠΈ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ Β«Π‘ΠΎΡ ΡΠ°Π½ΠΈΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡΒ», Π° ΡΠ°ΠΌ ΠΠΎΠ½ΡΠ°ΠΊΡ ΡΠ΄Π΅Π»Π°Π΅Ρ Π²ΡΡ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ΅.
Π£ ΠΠ°Ρ Π½Π΅ ΠΎΡΡΠ°Π½Π΅ΡΡΡ Π΄Π°ΠΆΠ΅ Π½Π°ΠΌΠ΅ΠΊΠ° Π½Π° ΡΠ΅ΡΡΡ ΠΎΠ±Π»Π°ΡΡΡ, Π° Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ°.
ΠΠ°Π»Π΅Π΅ Π΄ΠΎΠΏΠΎΠ»Π½ΡΠ΅ΡΠ΅ Π±ΡΠ΄ΡΡΠΈΠΉ ΠΏΠΎΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ΠΌ ΠΈ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π²ΡΡΠ°Π²Π»ΡΠ΅ΡΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ, ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΡΡΠΎΡΠ½ΡΠ΅ΡΠ΅ Π½Π°Π΄ΠΏΠΈΡΡ Π½Π° ΡΡΡΠ»ΠΊΠ΅ ΠΈ ΠΎΡΠΏΡΠ°Π²Π»ΡΠ΅ΡΠ΅ ΡΠ²ΠΎΠΉ ΠΏΠΎΡΡ Π½Π° ΡΡΠ΄ ΡΠΈΡΠ°ΡΠ΅Π»Π΅ΠΉ. ΠΡΠ³Π»ΡΠ΄Π΅ΡΡ ΠΎΠ½ Π±ΡΠ΄Π΅Ρ Π½Π΅ Ρ ΡΠΆΠ΅, ΡΠ΅ΠΌΒ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π²ΡΡΠ΅ Π½Π° ΡΠΊΡΠΈΠ½ΡΠΎΡΠ΅ ΠΏΠΎΡΡΠ° ΠΏΠΎ ΡΡΠ°ΡΡΡ ΠΎΡΠ΅ΡΠ΅Π΄Π½ΠΎΠ³ΠΎ Π½Π°Π±ΠΎΡΠ° Π² Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΡ ΠΎΠ½-Π»Π°ΠΉΠ½ ΡΠΊΠΎΠ»Ρ Β«Π― Π±Π»ΠΎΠ³Π΅ΡΒ».
Π ΠΏΡΠΈΠ½ΡΠΈΠΏΠ΅ ΡΠ°Π±ΠΎΡΠ° Π½Π΅ΡΠ»ΠΎΠΆΠ½Π°Ρ, Π½ΠΎ ΠΏΠΎΡΡΠ΅Π±ΡΠ΅Ρ ΠΎΡ ΠΠ°Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΉ Π°ΠΊΠΊΡΡΠ°ΡΠ½ΠΎΡΡΠΈ Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΡΡ . ΠΠΎΠ±Π°Π²Π»Ρ, ΡΡΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π΄Π΅Π»Π°ΡΡ ΡΠΎ ΡΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠΌΠΈ ΡΠ³Π»Π°ΠΌΠΈ, ΠΌΠΎΠΆΠ½ΠΎ Π΄Π΅Π»Π°ΡΡ ΠΈΡ ΠΌΠ΅Π½ΡΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, Π° ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ Π²ΡΡΠ°Π²Π»ΡΡΡ ΡΠΆΠ΅ Π³ΠΎΡΠΎΠ²ΡΠ΅.
ΠΠ°ΠΊ ΡΡΠΎ Π²ΡΡ Π΄Π΅Π»Π°Π΅ΡΡΡ, ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π² Π²ΠΈΠ΄Π΅ΠΎ Π½ΠΈΠΆΠ΅. ΠΠ΅ΡΠ²Π°Ρ Π΅Π³ΠΎ ΡΠ°ΡΡΡ ΠΏΠΎΡΠ²ΡΡΠ΅Π½Π° ΠΎΠΏΠΈΡΠ°Π½Π½ΠΎΠΌΡ Π²ΡΡΠ΅ ΡΠΏΠΎΡΠΎΠ±Ρ, Π° Π²ΡΠΎΡΠ°Ρ β Π²ΡΠ΅ΠΌ ΠΎΡΡΠ°Π»ΡΠ½ΡΠΌ.
ΠΡΠ»ΠΈ ΠΠ°ΠΌ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΠ»ΠΎΡΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠ°ΠΊΠΈΡ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π΄Π»Ρ ΠΏΠΎΡΡΠΎΠ² ΠΠΠΎΠ½ΡΠ°ΠΊΡΠ΅, Π΄Π°ΠΉΡΠ΅ ΠΌΠ½Π΅ ΠΎΠ± ΡΡΠΎΠΌ Π·Π½Π°ΡΡ Π² ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΡ Π½ΠΈΠΆΠ΅. ΠΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ, Π΅ΡΠ»ΠΈ ΠΎΡΡΠ°Π»ΠΈΡΡ Π²ΠΎΠΏΡΠΎΡΡ, ΡΠΎ Π½Π΅ ΡΡΠ΅ΡΠ½ΡΠΉΡΠ΅ΡΡ ΠΈΡ Π·Π°Π΄Π°ΡΡ ΡΠ°ΠΌ ΠΆΠ΅. ΠΠ΅Π»Π°Ρ ΠΠ°ΠΌ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ Π²ΠΎ Π²ΡΡΠΌ Π±Π΅Π· ΠΏΡΠΎΠ±Π»Π΅ΠΌ.
Π‘ ΡΠ²Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, Π‘Π΅ΡΠ³Π΅ΠΉ ΠΠΎΡΠ΅ΡΡΠ΅Π².
Π‘ΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ ΡΡΡΠ»ΠΎΠΊ — ΠΠ·ΡΡΠ΅Π½ΠΈΠ΅ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ
ΠΡΠΈ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΡΡΡΠ»ΠΎΠΊ, Π²Π°ΠΆΠ½ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ,Β ΡΡΠΎΠ±Ρ ΡΡΠΈΠ»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡΒ ΡΡΡΠ»ΠΎΠΊ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ, ΠΈ ΠΊΠ°ΠΊ ΡΡΠΈΠ»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ ΡΡΡΠ»ΠΊΠΈ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π² ΠΎΠ±ΡΠΈΡ ΡΠ°Π·Π½ΠΎΠΎΠ±ΡΠ°Π·Π½ΡΡ ΡΡΠ½ΠΊΡΠΈΡΡ Β ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°: ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ ΠΈ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ. ΠΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π²ΡΠ΅ ΡΡΠΈ ΡΠ΅ΠΌΡ Π² ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅.
ΠΠ»Ρ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ Π²Π°ΠΌ ΠΏΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ: | ΠΡΠ½ΠΎΠ²Ρ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ½ΠΎΠΉ Π³ΡΠ°ΠΌΠΎΡΠ½ΠΎΡΡΠΈ, Π±Π°Π·ΠΎΠ²ΡΠ΅ Π·Π½Π°Π½ΠΈΡ HTML (ΠΈΠ·ΡΡΠΈΡΠ΅ ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π²Β HTML), ΠΎΡΠ½ΠΎΠ²Ρ CSS (ΠΈΠ·ΡΡΠΈΡΠ΅Β ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² CSS), Π±Π°Π·ΠΎΠ²ΡΠ΅ Π·Π½Π°Π½ΠΈΡ ΠΎ ΡΠ΅ΠΊΡΡΠ°Ρ ΠΈ ΡΡΠΈΡΡΠ°Ρ CSS. |
---|---|
ΠΡ ΡΠ·Π½Π°Π΅ΡΠ΅: | ΠΠ·ΡΡΠΈΡΠ΅ ΠΊΠ°ΠΊ ΡΡΠΈΠ»ΠΈΠ·ΡΡΡΡΡ ΡΡΡΠ»ΠΊΠΈ ΠΈ ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΡΠ»ΠΊΠΈ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ Π² ΠΎΠ±ΡΠΈΡ Π·Π°Π΄Π°ΡΠ°Ρ UI (ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΡ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°Ρ ), Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π² ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ. |
ΠΡ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π»ΠΈ ΠΊΠ°ΠΊ ΡΠ΅Π°Π»ΠΈΠ·ΡΡΡΡΡ ΡΡΡΠ»ΠΊΠΈ Π² Π²Π°ΡΠ΅ΠΌ HTML Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π»ΡΡΡΠΈΠΌΠΈ ΠΏΡΠ°ΠΊΡΠΈΠΊΠ°ΠΌΠΈ Π² Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠΈ Π³ΠΈΠΏΠ΅ΡΡΡΡΠ»ΠΎΠΊ. Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΎΠΏΠΈΡΠ°ΡΡΡΡ Π½Π° ΡΡΠΈ Π·Π½Π°Π½ΠΈΡ, ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Ρ Π²Π°ΠΌ Π»ΡΡΡΠΈΠ΅ ΠΏΡΠ°ΠΊΡΠΈΠΊΠΈ ΠΏΠΎ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΡΡΡΠ»ΠΎΠΊ.
Π‘ΠΎΡΡΠΎΡΠ½ΠΈΡ ΡΡΡΠ»ΠΎΠΊ
ΠΠ΅ΡΠ²ΠΎΠ΅, ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠ½ΡΡΡ, ΡΡΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ ΡΡΡΠ»ΠΎΠΊ β ΡΠ°Π·Π½ΡΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Π² ΠΊΠΎΡΠΎΡΡΡ ΠΌΠΎΠ³ΡΡ ΡΡΡΠ΅ΡΡΠ²ΠΎΠ²Π°ΡΡ ΡΡΡΠ»ΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ:
- Link (Π½Π΅ ΠΏΠΎΡΠ΅ΡΡΠ½Π½Π°Ρ): Π‘ΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ ΡΡΡΠ»ΠΊΠ°, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½Π° Π½Π΅ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π² ΠΊΠ°ΠΊΠΎΠΌ-Π»ΠΈΠ±ΠΎ Π΄ΡΡΠ³ΠΎΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ. ΠΠ½Π° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ΅ΡΠΊΠΈ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ
:link
. - Visited: Π‘ΡΡΠ»ΠΊΠ°, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½Π° ΡΠΆΠ΅ Π±ΡΠ»Π° ΠΏΠΎΡΠ΅ΡΠ΅Π½Π° (ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π² ΠΈΡΡΠΎΡΠΈΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°), ΡΡΠΈΠ»ΠΈΠ·ΡΠ΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ
:visited
. - Hover: Π‘ΡΡΠ»ΠΊΠ°, ΠΊΠΎΠ³Π΄Π° Π½Π° Π½Π΅Ρ Π½Π°Π²Π΅Π΄ΡΠ½ ΠΊΡΡΡΠΎΡ ΠΌΡΡΠΈ, ΡΡΠΈΠ»ΠΈΠ·ΡΠ΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ
:hover
- Focus: Π‘ΡΡΠ»ΠΊΠ°, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½Π° Π±ΡΠ»Π° ΡΡΠΎΠΊΡΡΠΈΡΠΎΠ²Π°Π½Π° (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΠ»ΡΡ Π½Π° Π½Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΊΠ»Π°Π²ΠΈΡΡ Tab ΠΈΠ»ΠΈ Π½Π°ΠΏΠΎΠ΄ΠΎΠ±ΠΈΠ΅ ΠΈΠ»ΠΈ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎ ΡΡΠΎΠΊΡΡΠΈΡΠΎΠ²Π°Π½Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ
HTMLElement.focus()
(en-US)) β ΡΡΠΈΠ»ΠΈΠ·ΡΠ΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ:focus
. - Active: Π‘ΡΡΠ»ΠΊΠ°, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½Π° Π°ΠΊΡΠΈΠ²ΠΈΡΡΠ΅ΡΡΡ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΠΏΡΠΈ ΠΊΠ»ΠΈΠΊΠ΅ ΠΏΠΎ Π½Π΅ΠΉ), ΡΡΠΈΠ»ΠΈΠ·ΡΠ΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ
:active
Π‘ΡΠΈΠ»ΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ
Π‘Π»Π΅Π΄ΡΡΡΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΠΊΠ°ΠΊ Π±ΡΠ΄Π΅Ρ Π²Π΅ΡΡΠΈ ΡΠ΅Π±Ρ ΡΡΡΠ»ΠΊΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ (CSS ΠΏΡΠΎΡΡΠΎ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅Ρ ΠΈ ΡΠ΅Π½ΡΡΠΈΡΡΠ΅Ρ ΡΠ΅ΠΊΡΡ ΡΡΠΎΠ± Π±ΠΎΠ»ΡΡΠ΅ Π²ΡΠ΄Π΅Π»ΠΈΡΡ Π΅Π³ΠΎ).
<p><a href="https://mozilla.org">A link to the Mozilla homepage</a></p>
p {
font-size: 2rem;
text-align: center;
}
ΠΡ Π·Π°ΠΌΠ΅ΡΠΈΡΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π΅ΡΠ΅ΠΉ ΠΏΡΠΈ ΠΈΠ·ΡΡΠ΅Π½ΠΈΠΈ ΡΡΠΈΠ»Π΅ΠΉ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ:
- Π‘ΡΡΠ»ΠΊΠΈ ΠΏΠΎΠ΄ΡΡΡΠΊΠ½ΡΡΡ.
- ΠΠ΅ ΠΏΠΎΡΠ΅ΡΡΠ½Π½ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ ΡΠΈΠ½ΠΈΠ΅.
- ΠΠΎΡΠ΅ΡΡΠ½Π½ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ ΡΠΈΠΎΠ»Π΅ΡΠΎΠ²ΡΠ΅
- ΠΠ°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ Π½Π° ΡΡΡΠ»ΠΊΡ ΠΌΠ΅Π½ΡΡΡ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° ΠΈΠΊΠΎΠ½ΠΊΡ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠΉ ΡΡΠΊΠΈ.
- Π‘ΡΠΎΠΊΡΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ ΠΈΠΌΠ΅ΡΡ ΠΊΠΎΠ½ΡΡΡ Π²ΠΎΠΊΡΡΠ³ ΡΠ΅Π±Ρ β Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΠΎΠΊΡΡΠΈΡΠΎΠ²Π°ΡΡΡΡ Π½Π° ΡΡΡΠ»ΠΊΠ°Ρ Π½Π° ΡΡΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ, Π½Π°ΠΆΠ°Π² ΠΊΠ»Π°Π²ΠΈΡΡ ΡΠ°Π±ΡΠ»ΡΡΠΈΠΈ (Π½Π° Mac, Π²Π°ΠΌ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡΡ Π²ΠΊΠ»ΡΡΠΈΡΡ ΠΎΠΏΡΠΈΡ Full Keyboard Access: All controls Π½Π°ΠΆΠ°Π² Ctrl + F7, ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΡΡΠΎ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ).
- ΠΠΊΡΠΈΠ²Π½ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ ΠΊΡΠ°ΡΠ½ΡΠ΅ (ΠΏΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΌΡΡΠΈ Π½Π° ΡΡΡΠ»ΠΊΠ΅, ΠΊΠΎΠ³Π΄Π° Π²Ρ ΠΊΠ»ΠΈΠΊΠ½ΠΈΡΠ΅ ΠΏΠΎ Π½Π΅ΠΉ).
ΠΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ, ΡΡΠΎ ΡΡΠΈ ΡΡΠΈΠ»ΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΏΡΠΈΠ±Π»ΠΈΠ·ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ°ΠΊΠΈΠ΅ ΠΆΠ΅ ΠΊΠ°ΠΊΠΈΠΌΠΈ ΠΎΠ½ΠΈ Π±ΡΠ»ΠΈ Π² ΠΏΠ΅ΡΠ²ΡΠ΅ Π΄Π½ΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² Π² ΡΠ΅ΡΠ΅Π΄ΠΈΠ½Π΅ 1990-ΡΡ . ΠΡΠΎ ΠΏΠΎΡΠΎΠΌΡ, ΡΡΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ Π·Π½Π°ΡΡ ΠΈ ΠΏΡΠΈΠ²ΡΠΊΠ»ΠΈ ΠΎΠΆΠΈΠ΄Π°ΡΡ ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ β Π΅ΡΠ»ΠΈ Π±Ρ ΡΡΡΠ»ΠΊΠΈ Π±ΡΠ»ΠΈ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Ρ ΠΏΠΎ-ΡΠ°Π·Π½ΠΎΠΌΡ, ΡΡΠΎ Π±Ρ ΠΏΡΡΠ°Π»ΠΎ ΠΌΠ½ΠΎΠ³ΠΎ Π»ΡΠ΄Π΅ΠΉ. ΠΡΠΎ Π½Π΅ Π·Π½Π°ΡΠΈΡ, ΡΡΠΎ Π²Ρ Π½Π΅Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΡΡΠ»ΠΊΠΈ ΡΠΎΠ²ΡΠ΅ΠΌ, ΠΏΡΠΎΡΡΠΎ Π²Ρ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΡ ΠΎΠ΄ΠΈΡΡ ΡΠ»ΠΈΡΠΊΠΎΠΌ Π΄Π°Π»Π΅ΠΊΠΎ ΠΎΡ ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌΠΎΠ³ΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ. ΠΠΎ ΠΊΡΠ°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅ΡΠ΅ Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ:
- ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½ΠΈΠΆΠ½Π΅Π΅ ΠΏΠΎΠ΄ΡΡΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ Π΄Π»Ρ ΡΡΡΠ»ΠΎΠΊ, Π½ΠΎ Π½Π΅ Π΄Π»Ρ Π΄ΡΡΠ³ΠΈΡ Π²Π΅ΡΠ΅ΠΉ. ΠΡΠ»ΠΈ Π²Ρ Π½Π΅ Ρ ΠΎΡΠΈΡΠ΅ ΠΏΠΎΠ΄ΡΡΡΠΊΠΈΠ²Π°ΡΡ ΡΡΡΠ»ΠΊΠΈ, ΡΠΎ Ρ ΠΎΡΡ Π±Ρ Π²ΡΠ΄Π΅Π»ΠΈΡΠ΅ ΠΈΡ ΠΊΠ°ΠΊΠΈΠΌ-Π»ΠΈΠ±ΠΎ Π΄ΡΡΠ³ΠΈΠΌ ΠΏΡΡΡΠΌ.
- Π‘Π΄Π΅Π»Π°ΡΡ ΡΠ°ΠΊ ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΈ ΠΊΠ°ΠΊ-Π½ΠΈΠ±ΡΠ΄Ρ ΡΠ΅Π°Π³ΠΈΡΠΎΠ²Π°Π»ΠΈ Π½Π° Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅/ΡΠΎΠΊΡΡΠΈΡΠΎΠ²ΠΊΡ Π½Π° Π½ΠΈΡ ΠΈ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΡΠ»ΠΈΡΠ°Π»ΠΈΡΡ ΠΏΠΎΡΠ»Π΅ Π°ΠΊΡΠΈΠ²Π°ΡΠΈΠΈ.
Π‘ΡΠΈΠ»ΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π²ΡΠΊΠ»ΡΡΠ΅Π½Ρ/ΠΈΠ·ΠΌΠ΅Π½Π΅Π½Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° CSS:
color
(en-US) Π΄Π»Ρ ΡΠ²Π΅ΡΠ° ΡΠ΅ΠΊΡΡΠ°.cursor
Π΄Π»Ρ ΡΡΠΈΠ»Ρ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ β Π²Ρ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΎΡΠΊΠ»ΡΡΠ°ΡΡ ΡΡΡ ΠΎΠΏΡΠΈΡ ΡΠΎΠ»ΡΠΊΠΎ Π΅ΡΠ»ΠΈ Ρ Π²Π°Ρ Π½Π΅Ρ Π½Π° ΡΡΠΎ Π²Π΅ΡΠΊΠΎΠΉ ΠΏΡΠΈΡΠΈΠ½Ρ.outline
(en-US) Π΄Π»Ρ ΠΊΠΎΠ½ΡΡΡΠ° ΡΠ΅ΠΊΡΡΠ° (ΠΊΠΎΠ½ΡΡΡ ΡΡ ΠΎΠΆ Ρ Π³ΡΠ°Π½ΠΈΡΠ΅ΠΉ, Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΠΎΡΠ»ΠΈΡΠΈΠ΅Β β ΡΡΠΎ ΡΠΎ, ΡΡΠΎ Π³ΡΠ°Π½ΠΈΡΡ Π·Π°Π½ΠΈΠΌΠ°ΡΡ ΠΌΠ΅ΡΡΠΎ Π² Π±Π»ΠΎΠΊΠ΅, Π° ΠΊΠΎΠ½ΡΡΡ β Π½Π΅Ρ; ΠΎΠ½ ΠΏΡΠΎΡΡΠΎ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ ΠΏΠΎΠ²Π΅ΡΡ ΡΠΎΠ½Π°). ΠΠΎΠ½ΡΡΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΌ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΠΌ ΡΡΠ΅Π΄ΡΡΠ²ΠΎΠΌ, ΡΠ°ΠΊ ΡΡΠΎ ΠΏΠΎΠ΄ΡΠΌΠ°ΠΉΡΠ΅ Ρ ΠΎΡΠΎΡΠΎ, ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΠΎΡΠΊΠ»ΡΡΠ°ΡΡ Π΅Π³ΠΎ; ΠΏΠΎ ΠΊΡΠ°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅ΡΠ΅ Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ΄Π²ΠΎΠΈΡΡ ΡΡΠΈΠ»ΠΈ, Π·Π°Π΄Π°Π½Π½ΡΠ΅ Π΄Π»Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ hover, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΡΠΎΠΊΡΡΠΈΡΠΎΠ²ΠΊΠΈ.
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅: Π²Ρ Π½Π΅ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Π½ΡΠΌΠΈ Π²ΡΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ ΡΡΠΎΠ±Ρ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΡΡΠ»ΠΊΠΈ βΒ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π»ΡΠ±ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π°ΠΌ Π½ΡΠ°Π²ΡΡΡΡ. ΠΡΠΎΡΡΠΎ ΠΏΠΎΡΡΠ°ΡΠ°ΠΉΡΠ΅ΡΡ Π½Π΅ ΡΡ ΠΎΠ΄ΠΈΡΡ Ρ ΡΠΌΠ° ΡΠ»ΠΈΡΠΊΠΎΠΌ ΡΠΈΠ»ΡΠ½ΠΎ!
Π‘ΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΡΡΠ»ΠΎΠΊ
ΠΡ ΡΠΆΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π»ΠΈ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π² Π½Π΅ΠΊΠΎΡΠΎΡΡΡ Π΄Π΅ΡΠ°Π»ΡΡ , Π΄Π°Π²Π°ΠΉΡΠ΅ Π²Π·Π³Π»ΡΠ½Π΅ΠΌ Π½Π° ΡΠΈΠΏΠΈΡΠ½ΡΠΉ Π½Π°Π±ΠΎΡ ΡΡΠΈΠ»Π΅ΠΉ ΡΡΡΠ»ΠΎΠΊ.
Π§ΡΠΎΠ±Ρ Π½Π°ΡΠ°ΡΡ, ΠΌΡ Π²ΡΠΏΠΈΡΠ΅ΠΌ Π½Π°ΡΠΈ ΠΏΡΡΡΡΠ΅ Π½Π°Π±ΠΎΡΡ ΠΏΡΠ°Π²ΠΈΠ»:
a {
}
a:link {
}
a:visited {
}
a:focus {
}
a:hover {
}
a:active {
}
ΠΡΠΎΡ ΠΏΠΎΡΡΠ΄ΠΎΠΊ Π²Π°ΠΆΠ΅Π½ ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΡΠΈΠ»ΠΈ ΡΡΡΠ»ΠΎΠΊ ΠΎΠΏΠΈΡΠ°ΡΡΡΡ Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΡΡΠΈΠ»ΠΈ Π² ΠΏΠ΅ΡΠ²ΠΎΠΌ ΠΏΡΠ°Π²ΠΈΠ»Π΅ Π±ΡΠ΄ΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΊΠΎ Π²ΡΠ΅ΠΌ ΠΏΠΎΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΏΡΠ°Π²ΠΈΠ»Π°ΠΌ ΠΈ ΠΊΠΎΠ³Π΄Π° ΡΡΡΠ»ΠΊΠ° Π±ΡΠ΄Π΅Ρ Π°ΠΊΡΠΈΠ²ΠΈΡΠΎΠ²Π°Π½Π°, ΠΎΠ½Π° ΡΠ°ΠΊΠΆΠ΅ Π±ΡΠ΄Π΅Ρ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡΡ ΠΏΠΎΠ΄ «Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ» (hover). ΠΡΠ»ΠΈ Π²Ρ Π²Π²Π΅Π΄ΡΡΠ΅ ΠΈΡ Π² Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅, ΡΡΠΈΠ»ΠΈ Π½Π΅ Π±ΡΠ΄ΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ. Π§ΡΠΎΠ±Ρ Π·Π°ΠΏΠΎΠΌΠ½ΠΈΡΡ ΡΡΠΎΡ ΠΏΠΎΡΡΠ΄ΠΎΠΊ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΌΠ½Π΅ΠΌΠΎΠ½ΠΈΠΊΡ ΡΠΈΠΏΠ° LoVe Fears HAte.
Π ΡΠ΅ΠΏΠ΅ΡΡ Π΄Π°Π²Π°ΠΉΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π΅ΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΡΡΠΎΠ±Ρ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΎΡΠΎΡΠΌΠΈΡΡ ΡΡΠΎΡ ΡΡΠΈΠ»Ρ:
body {
width: 300px;
margin: 0 auto;
font-size: 1.2rem;
font-family: sans-serif;
}
p {
line-height: 1.4;
}
a {
outline: none;
text-decoration: none;
padding: 2px 1px 0;
}
a:link {
color: #265301;
}
a:visited {
color: #437A16;
}
a:focus {
border-bottom: 1px solid;
background: #BAE498;
}
a:hover {
border-bottom: 1px solid;
background: #CDFEAA;
}
a:active {
background: #265301;
color: #CDFEAA;
}
Π’Π°ΠΊΠΆΠ΅ ΠΌΡ Π΄Π°Π΄ΠΈΠΌ Π½Π΅ΠΊΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ HTML ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ CSS:
<p>There are several browsers available, such as <a href="https://www.mozilla.org/en-US/firefox/">Mozilla
Firefox</a>, <a href="https://www.google.com/chrome/index.html">Google Chrome</a>, and
<a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>.</p>
ΠΠ±ΡΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΠ΅ ΡΡΠΈΡ Π΄Π²ΡΡ Π΄Π°ΡΡ Π½Π°ΠΌ ΡΠ°ΠΊΠΎΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ:
ΠΡΠ°ΠΊ, ΡΡΠΎ ΠΌΡ ΡΠ΄Π΅Π»Π°Π»ΠΈ ΡΡΡ? ΠΡΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΈΠ½Π°ΡΠ΅ ΡΠ΅ΠΌ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, Π½ΠΎ Π²ΡΠ΅ Π΅ΡΡ Π΄Π°ΡΡ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π·Π½Π°ΠΊΠΎΠΌΡΠΉ ΠΎΠΏΡΡ Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ, ΡΡΠΎΠ±Ρ Π·Π½Π°ΡΡ, ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ:
- ΠΠ΅ΡΠ²ΡΠ΅ Π΄Π²Π° ΠΏΡΠ°Π²ΠΈΠ»Π° Π½Π΅ ΡΠ°ΠΊ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½Ρ Π² ΡΡΠΎΠΌ ΠΎΠ±ΡΡΠΆΠ΄Π΅Π½ΠΈΠΈ.
- Π’ΡΠ΅ΡΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ
a
ΡΡΠΎΠ±Ρ ΠΈΠ·Π±Π°Π²ΠΈΡΡΡΡ ΠΎΡ ΠΏΠΎΠ΄ΡΡΡΠΊΠΈΠ²Π°Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ° ΠΈ ΠΊΠΎΠ½ΡΡΡΠ° ΡΠΎΠΊΡΡΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ (ΠΊΠΎΡΠΎΡΡΠ΅ Π²ΡΡ ΡΠ°Π²Π½ΠΎ Π²Π°ΡΡΠΈΡΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°), Π° ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΠΌΠ°Π»ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ padding ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΡΠ»ΠΊΠ΅ β Π²ΡΠ΅ ΡΡΠΎ ΡΡΠ°Π½Π΅Ρ ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΆΠ΅. - ΠΠ°Π»Π΅Π΅, ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ
a:link
ΠΈa:visited
ΡΡΠΎΠ±Ρ Π½Π°ΡΡΡΠΎΠΈΡΡ ΠΏΠ°ΡΡ ΡΠ²Π΅ΡΠΎΠ²ΡΡ Π²Π°ΡΠΈΠ°ΡΠΈΠΉ Π½Π΅ ΠΏΠΎΡΠ΅ΡΡΠ½Π½ΡΡ ΠΈ ΠΏΠΎΡΠ΅ΡΡΠ½Π½ΡΡ ΡΡΡΠ»ΠΎΠΊ, ΡΠ°ΠΊ ΡΡΠΎΠ± ΠΎΠ½ΠΈ ΠΎΡΠ»ΠΈΡΠ°Π»ΠΈΡΡ. - Π‘Π»Π΅Π΄ΡΡΡΠΈΠ΅ Π΄Π²Π° ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ
a:focus
ΠΈa:hover
Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ ΡΡΠΎΠΊΡΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΈ Π½Π°Π²Π΅Π΄ΡΠ½Π½ΡΠ΅ (hovered) ΡΡΡΠ»ΠΊΠΈ ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΈ ΠΈΠΌΠ΅Π»ΠΈ ΡΠ°Π·Π½ΡΠ΅ ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΡΠ²Π΅ΡΠ°, ΠΏΠ»ΡΡ Π½ΠΈΠΆΠ½Π΅Π΅ ΠΏΠΎΠ΄ΡΡΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΡΡΠΎΠ±Ρ ΡΡΡΠ»ΠΊΠ° Π²ΡΠ΄Π΅Π»ΡΠ»Π°ΡΡ Π΅ΡΡ Π±ΠΎΠ»ΡΡΠ΅. ΠΠ²Π° ΠΏΡΠ½ΠΊΡΠ° Π½Π° ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π°Π΄ΠΎ ΠΎΠ±ΡΠ°ΡΠΈΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅:- ΠΠΈΠΆΠ½Π΅Π΅ ΠΏΠΎΠ΄ΡΡΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ·Π΄Π°Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ
border-bottom
, Π° Π½Π΅text-decoration
(en-US) β Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π»ΡΠ΄ΠΈ ΠΏΡΠ΅Π΄ΠΏΠΎΡΠΈΡΠ°ΡΡ ΡΡΠΎ ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΏΠ΅ΡΠ²ΡΠΉ ΠΈΠΌΠ΅Π΅Ρ Π»ΡΡΡΠΈΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ, ΡΠ΅ΠΌ Π²ΡΠΎΡΠΎΠΉ, ΠΈ ΠΎΡΡΠΈΡΠΎΠ²Π°Π½ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π½ΠΈΠΆΠ΅, ΡΠ°ΠΊ ΡΡΠΎ Π½Π΅ ΡΡΠ΅Π·Π°Π΅Ρ Π½ΠΈΠΆΠ½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ»ΠΎΠ² Π±ΡΠ΄ΡΡΠΈ ΠΏΠΎΠ΄ΡΡΡΠΊΠ½ΡΡΡΠΌΠΈ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ Ρ Π²ΠΎΡΡΡ Ρ Π±ΡΠΊΠ² ΠΊΠ°ΠΊ «Ρ» ΠΈ «Ρ»). - ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅
border-bottom
ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ Π½Π°1px solid
, Π±Π΅Π· ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ°. ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π³ΡΠ°Π½ΠΈΡΠ°ΠΌ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ ΡΠΎΡ ΠΆΠ΅ ΡΠ²Π΅Ρ ΡΡΠΎ ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ΅ΠΊΡΡΠ°, ΡΡΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π² ΡΠ»ΡΡΠ°Π΅ ΠΊΠ°ΠΊ ΡΡΠΎΠΌ, Π³Π΄Π΅ ΡΠ΅ΠΊΡΡ ΠΈΠΌΠ΅Π΅Ρ ΡΠ°Π·Π½ΡΠ΅ ΡΠ²Π΅ΡΠ° Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅.
- ΠΠΈΠΆΠ½Π΅Π΅ ΠΏΠΎΠ΄ΡΡΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ·Π΄Π°Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ
- ΠΠ°ΠΊΠΎΠ½Π΅Ρ,
a:active
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΡΠΎΠ±Ρ Π΄Π°ΡΡ ΡΡΡΠ»ΠΊΠ°ΠΌ ΠΈΠ½Π²Π΅ΡΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠ²Π΅ΡΠΎΠ²ΡΡ ΡΡ Π΅ΠΌΡ Π² ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ Π°ΠΊΡΠΈΠ²ΠΈΡΠΎΠ²Π°Π½Ρ, ΡΡΠΎΠ±Ρ Π±ΡΠ»ΠΎ ΡΡΠ½ΠΎ ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΡΡΠΎ ΡΠΎ Π²Π°ΠΆΠ½ΠΎΠ΅!
ΠΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΠΈΠ·ΡΡΠ΅Π½ΠΈΠ΅: Π‘ΡΠΈΠ»ΠΈΠ·ΡΠΉΡΠ΅ ΡΡΡΠ»ΠΊΠΈ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ
Π ΡΡΠΎΠΉ ΡΠ΅ΠΊΡΠΈΠΈ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ, ΠΌΡ Π±Ρ Ρ ΠΎΡΠ΅Π»ΠΈ, ΡΡΠΎΠ±Ρ Π²Π·ΡΠ»ΠΈ Π½Π°Ρ Π½Π°Π±ΠΎΡ ΠΏΡΡΡΡΡ ΠΏΡΠ°Π²ΠΈΠ» ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ Π²Π°ΡΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΡ ΡΠ°ΠΊ ΡΡΠΎΠ±Ρ ΡΡΡΠ»ΠΊΠΈ Π²ΡΠ³Π»ΡΠ΄Π΅Π»ΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΊΡΡΡΠΎ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ²ΠΎΡ Π²ΠΎΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π½Π΅ ΡΠΊΠΎΠ²ΡΠ²Π°ΠΉΡΠ΅ΡΡ. ΠΡ ΡΠ²Π΅ΡΠ΅Π½Ρ, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΈΠ΄ΡΠΌΠ°ΡΡ ΡΡΠΎ-ΡΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΊΡΡΡΠΎΠ΅ ΠΈ Π²ΡΠ΅ Π΅ΡΡ ΡΠ°ΠΊ ΠΆΠ΅ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΠ΅, ΠΊΠ°ΠΊ ΠΈ Π½Π°Ρ ΠΏΡΠΈΠΌΠ΅Ρ Π²ΡΡΠ΅.
ΠΡΠ»ΠΈ Π²Ρ Π΄ΠΎΠΏΡΡΡΠΈΡΠ΅ ΠΎΡΠΈΠ±ΠΊΡ, Π²Ρ Π²ΡΠ΅Π³Π΄Π° ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ±ΡΠΎΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Reset. ΠΡΠ»ΠΈ Π²Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π·Π°ΡΡΡΡΠ»ΠΈ Π½Π°ΠΆΠΌΠΈΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ Show solution ΡΡΠΎΠ±Ρ Π²ΡΡΠ°Π²ΠΈΡΡ ΠΏΡΠΈΠΌΠ΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ ΠΏΠΎΠΊΠ°Π·Π°Π»ΠΈ Π²ΡΡΠ΅.
ΠΠ±ΡΡΠ½ΠΎΠΉ ΠΏΡΠ°ΠΊΡΠΈΠΊΠΎΠΉ ΡΠ²Π»ΡΠ΅ΡΡΡ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΈΠΊΠΎΠ½ΠΎΠΊ Π² ΡΡΡΠ»ΠΊΠΈ, ΡΡΠΎΠ±Ρ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΈΠ½Π΄ΠΈΠΊΠ°ΡΠΎΡΠ° ΡΠΎΠ³ΠΎ, Π½Π° ΠΊΠ°ΠΊΠΎΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΡΡΠ»ΠΊΠ°. ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΠΈΠΊΠΎΠ½ΠΊΡ ΠΊ Π²Π½Π΅ΡΠ½ΠΈΠΌ ΡΡΡΠ»ΠΊΠ°ΠΌ (ΡΡΡΠ»ΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π΅Π΄ΡΡ Π½Π° Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ°ΠΉΡΡ). Π’Π°ΠΊΠ°Ρ ΡΡΡΠ»ΠΊΠ° ΠΎΠ±ΡΡΠ½ΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΊΠ°ΠΊ ΠΌΠ°Π»Π΅Π½ΡΠΊΠ°Ρ ΡΡΡΠ΅Π»Π° ΡΠΎΡΡΠ°ΡΠ°Ρ ΠΈΠ· ΠΊΠΎΡΠΎΠ±ΠΎΡΠΊΠΈ β Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΎΡ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΠΎΠ±ΡΠ°Π·Π΅Ρ Ρ ΡΠ°ΠΉΡΠ° icons8.com.
ΠΠ°Π²Π°ΠΉΡΠ΅ Π²Π·Π³Π»ΡΠ½Π΅ΠΌ Π½Π° HTML ΠΈ CSS ΠΊΠΎΡΠΎΡΡΠ΅ Π΄Π°Π΄ΡΡ Π½Π°ΠΌ ΡΡΡΠ΅ΠΊΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ Ρ ΠΎΡΠΈΠΌ. ΠΠΎ-ΠΏΠ΅ΡΠ²ΡΡ , Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ HTML ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½:
<p>For more information on the weather, visit our <a href="weather.html">weather page</a>,
look at <a href="https://en.wikipedia.org/wiki/Weather">weather on Wikipedia</a>, or check
out <a href="http://www.extremescience.com/weather.htm">weather on Extreme Science</a>.</p>
ΠΠ°Π»Π΅Π΅, CSS:
body {
width: 300px;
margin: 0 auto;
font-family: sans-serif;
}
p {
line-height: 1.4;
}
a {
outline: none;
text-decoration: none;
padding: 2px 1px 0;
}
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:focus, a:hover {
border-bottom: 1px solid;
}
a:active {
color: red;
}
a[href*="http"] {
background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
background-size: 16px 16px;
padding-right: 19px;
}
ΠΡΠ°ΠΊ, ΡΡΠΎ ΠΆΠ΅ ΡΡΡ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ? ΠΡ ΠΏΡΠΎΠΏΡΡΡΠΈΠΌ Π±ΠΎΠ»ΡΡΡΡ ΡΠ°ΡΡΡ CSS ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ° ΠΆΠ΅ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ, ΠΊΠΎΡΠΎΡΡΡ Π²Ρ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π»ΠΈ ΡΠ°Π½Π΅Π΅. ΠΠ΄Π½Π°ΠΊΠΎ, ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠ΅ β ΡΡΡ ΠΌΡ Π²ΡΡΠ°Π²Π»ΡΠ΅ΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΠΎ Π²Π½Π΅ΡΠ½ΡΡ ΡΡΡΠ»ΠΊΡ ΡΡ
ΠΎΠΆΠΈΠΌ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ ΠΊΠ°ΠΊ ΠΌΡ Π΄Π΅Π»Π°Π»ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠ΅ ΠΌΠ°ΡΠΊΠ΅ΡΡ Π΄Π»Ρ ΠΏΡΠ½ΠΊΡΠΎΠ² ΡΠΏΠΈΡΠΊΠ° Π² ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΉ ΡΡΠ°ΡΡΠ΅ β Π² ΡΡΠΎΡ ΡΠ°Π·, ΠΎΠ΄Π½Π°ΠΊΠΎ, ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΠΊΠΎΡΠΎΡΠΊΡΡ Π·Π°ΠΏΠΈΡΡ background
Π²ΠΌΠ΅ΡΡΠΎ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΡΡ
ΡΠ²ΠΎΠΉΡΡΠ². ΠΡ Π·Π°Π΄Π°ΡΠΌ ΠΏΡΡΡ ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Ρ
ΠΎΡΠΈΠΌ Π²ΡΡΠ°Π²ΠΈΡΡ, ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ no-repeat
ΡΡΠΎΠ±Ρ ΠΌΡ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΈ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½Ρ ΠΊΠΎΠΏΠΈΡ Π²ΡΡΠ°Π²Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΠΈ Π·Π°ΡΠ΅ΠΌ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΡ Π½Π° 100% Π΄ΠΎ ΠΏΡΠ°Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ 0 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΎΡ Π²Π΅ΡΡ
Π½Π΅Π³ΠΎ ΠΊΡΠ°Ρ.
Π’Π°ΠΊΠΆΠ΅ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ background-size
Π΄Π»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ ΡΠΊΠ°Π·Π°ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π±Ρ Ρ
ΠΎΡΠΈΠΌ ΡΡΠΎΠ±Ρ Π±ΡΠ»ΠΎ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ β ΠΏΠΎΠ»Π΅Π·Π½ΠΎ ΠΈΠΌΠ΅ΡΡ ΠΈΠΊΠΎΠ½ΠΊΡ Π±ΠΎΠ»ΡΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈ Π΄Π°Π»Π΅Π΅ ΠΌΠ΅Π½ΡΡΡ Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π½ΡΠΆΠ½ΠΎ Π΄Π»Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ (ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΠ³ΠΎ) Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°. ΠΠ΄Π½Π°ΠΊΠΎ ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ Π² IE9 ΠΈ ΡΠ»Π΅Π΄ΡΡΡΠΈΡ
Π²Π΅ΡΡΠΈΡΡ
ΡΠ°ΠΊ ΡΡΠΎ, Π΅ΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½Π° ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΡΠ΅Ρ
ΡΡΠ°ΡΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² Π²Π°ΠΌ ΠΏΡΠΎΡΡΠΎ ΠΏΡΠΈΠ΄ΡΡΡΡ ΠΌΠ΅Π½ΡΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ Π²ΡΡΠ°Π²Π»ΡΡΡ Π΅Π³ΠΎ ΠΊΠ°ΠΊ Π΅ΡΡΡ.
ΠΠ°ΠΊΠΎΠ½Π΅Ρ, ΠΌΡ Π·Π°Π΄Π°ΡΠΌ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΉ padding-right
Π΄Π»Ρ ΡΡΡΠ»ΠΊΠΈ ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΡΠΎΠ±Ρ ΠΌΡ Π½Π΅ Π½Π°ΠΊΠ»Π°Π΄ΡΠ²Π°Π»ΠΈ Π΅Π³ΠΎ Π½Π° ΡΠ΅ΠΊΡΡ.
Π ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ ΡΠ»ΠΎΠ²ΠΎ β ΠΊΠ°ΠΊ ΠΌΡ Π²ΡΠ±ΡΠ°Π»ΠΈ ΡΠΎΠ»ΡΠΊΠΎ Π²Π½Π΅ΡΠ½ΠΈΠ΅ ΡΡΡΠ»ΠΊΠΈ? ΠΡ, Π΅ΡΠ»ΠΈ Π²Ρ ΠΏΠΈΡΠ΅ΡΠ΅ ΡΠ²ΠΎΠΈ HTML ΡΡΡΠ»ΠΊΠΈ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ, ΡΠΎ Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠ΅ URL Π΄Π»Ρ Π²Π½Π΅ΡΠ½ΠΈΡ
ΡΡΡΠ»ΠΎΠΊ β Π³ΠΎΡΠ°Π·Π΄ΠΎ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½Π΅Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ Π΄Π»Ρ ΡΠ²ΡΠ·ΠΈ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ°ΡΡΡΠΌΠΈ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°. Π’Π΅ΠΊΡΡ «http» ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π²ΠΎ Π²Π½Π΅ΡΠ½ΠΈΡ
ΡΡΡΠ»ΠΊΠ°Ρ
ΠΈ ΠΌΠΎΠΆΠ΅ΠΌ Π²ΡΠ±ΡΠ°ΡΡ Π΅Π³ΠΎ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ° Π°ΡΡΠΈΠ±ΡΡΠΎΠ²: a[href*="http"]
Π²ΡΠ±ΠΈΡΠ°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ <a>
, Π½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ ΠΈΠΌΠ΅ΡΡ Π°ΡΡΠΈΠ±ΡΡ href
ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ «http» Π³Π΄Π΅-ΡΠΎ Π²Π½ΡΡΡΠΈ Π½Π΅Π³ΠΎ.
ΠΡ Π²ΠΎΡ ΠΈ Π²ΡΠ΅ β ΠΏΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΠΏΠΎΡΠ΅ΡΠΈΡΡ ΡΠ΅ΠΊΡΠΈΡ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ Π²ΡΡΠ΅ ΠΈ ΠΈΡΠΏΡΡΠ°ΠΉΡΠ΅ ΡΡΠΎΡ Π½ΠΎΠ²ΡΠΉ ΠΌΠ΅ΡΠΎΠ΄!
ΠΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°Π»ΠΈ Π² ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½Ρ Π΄ΡΡΠ³ΠΈΠΌ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ°ΠΊΠΈΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΊΠ°ΠΊ hover ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½Ρ Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²Π° ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΡΠ»ΠΎΠΊ β Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°Ρ ΠΎΡΠ΅ΡΡ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ hover ΠΏΠ°ΡΠ°Π³ΡΠ°ΡΠΎΠ², ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠΏΠΈΡΠΊΠ° ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΡ Π²Π΅ΡΠ΅ΠΉ.
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ, ΡΡΡΠ»ΠΊΠΈ ΠΎΡΠ΅Π½Ρ ΡΠ°ΡΡΠΎ ΡΡΠΈΠ»ΠΈΠ·ΡΡΡ ΡΠ°ΠΊ, ΡΡΠΎΠ± ΠΎΠ½ΠΈ Π²ΡΠ³Π»ΡΠ΄Π΅Π»ΠΈ ΠΈ Π²Π΅Π»ΠΈ ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΡΡ ΠΎΠ±ΡΡΠΎΡΡΠ΅Π»ΡΡΡΠ²Π°Ρ β Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ² ΠΎΠ±ΡΡΠ½ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΎ ΠΊΠ°ΠΊ ΡΠΏΠΈΡΠΎΠΊ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ ΡΡΡΠ»ΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠΉ Π»Π΅Π³ΠΊΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½ ΡΠ°ΠΊ ΡΡΠΎΠ± Π²ΡΠ³Π»ΡΠ΄Π΅Π» ΠΊΠ°ΠΊ Π½Π°Π±ΠΎΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΈΠ»ΠΈ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π΄ΠΎΡΡΡΠΏΠΎΠΌ ΠΊ Π΄ΡΡΠ³ΠΈΠΌ ΡΠ°ΡΡΡΠΌ ΡΠ°ΠΉΡΠ°. ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΈΠ·ΡΡΠΈΠΌ ΠΊΠ°ΠΊ.
ΠΠ»Ρ Π½Π°ΡΠ°Π»Π° HTML:
<ul>
<li><a href="#">Home</a></li><li><a href="#">Pizza</a></li><li><a href="#">Music</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland</a></li>
</ul>
Π ΡΠ΅ΠΏΠ΅ΡΡ Π½Π°Ρ CSS:
body,html {
margin: 0;
font-family: sans-serif;
}
ul {
padding: 0;
width: 100%;
}
li {
display: inline;
}
a {
outline: none;
text-decoration: none;
display: inline-block;
width: 19.5%;
margin-right: 0.625%;
text-align: center;
line-height: 3;
color: black;
}
li:last-child a {
margin-right: 0;
}
a:link, a:visited, a:focus {
background: yellow;
}
a:hover {
background: orange;
}
a:active {
background: red;
color: white;
}
Π§ΡΠΎ Π΄Π°ΡΡ Π½Π°ΠΌ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ:
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΎΠ±ΡΡΡΠ½ΠΈΠΌ, ΡΡΠΎ ΡΡΡ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ, ΡΠΎΠΊΡΡΠΈΡΡΡΡΡ Π½Π° ΡΠ°ΠΌΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΡ ΡΠ°ΡΡΡΡ :
- ΠΠ°ΡΠ΅ Π²ΡΠΎΡΠΎΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ ΡΠ΄Π°Π»ΡΠ΅ΡΒ Π·Π°Π΄Π°Π½Π½ΡΠΉ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ
padding
Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Β<ul>
ΠΈ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π΅Π³ΠΎ ΡΠΈΡΠΈΠ½Ρ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΠΎΡ Π²Π°ΡΠΈΡΡ 100% Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° (Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅<body>
). - ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ
<li>
ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π² Π½ΠΎΡΠΌΠ΅ ΡΠ²Π»ΡΡΡΡΡ Π±Π»ΠΎΡΠ½ΡΠΌΠΈ (ΡΠΌ. ΡΠΈΠΏΡ Π±Π»ΠΎΠΊΠΎΠ² CSS ΡΡΠΎΠ±Ρ Π²ΡΠΏΠΎΠΌΠ½ΠΈΡΡ), ΡΡΠΎ Π·Π½Π°ΡΠΈΡ ΡΡΠΎ ΠΎΠ½ΠΈ Π±ΡΠ΄ΡΡ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π½Π° ΡΠ²ΠΎΠΈΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΡ ΡΡΡΠΎΠΊΠ°Ρ . Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΌΡ ΡΠΎΠ·Π΄Π°ΡΠΌ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ ΡΡΡΠ»ΠΎΠΊ, ΠΏΠΎΡΡΠΎΠΌΡ Π² ΡΡΠ΅ΡΡΠ΅ΠΌ ΠΏΡΠ°Π²ΠΈΠ»Π΅ Π·Π°Π΄Π°ΡΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Ρdisplay
Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ inline, ΡΡΠΎ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ ΡΠΎΠΌΡ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΏΠΈΡΠΊΠ° ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π² ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅ Π΄ΡΡΠ³ Ρ Π΄ΡΡΠ³ΠΎΠΌΒ β ΡΠ΅ΠΏΠ΅ΡΡ ΠΎΠ½ΠΈ Π²Π΅Π΄ΡΡ ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ ΡΡΡΠΎΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. - ΡΠ΅ΡΠ²ΡΡΡΠΎΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ β ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΡΠΈΠ»ΠΈΠ·ΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
<a>
β ΡΠ°ΠΌΠΎΠ΅ ΡΠ»ΠΎΠΆΠ½ΠΎΠ΅; Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΡΠΎΠΉΠ΄ΡΠΌΡΡ ΠΏΠΎ Π½Π΅ΠΌΡ ΡΠ°Π³ Π·Π° ΡΠ°Π³ΠΎΠΌ:- ΠΊΠ°ΠΊ Π² ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅, ΠΌΡ Π½Π°ΡΠΈΠ½Π°Π΅ΠΌ ΠΎΡΠΊΠ»ΡΡΠ°ΡΡ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄Π»Ρ
text-decoration
(en-US) ΠΈoutline
(en-US) β ΠΌΡ Π½Π΅ Ρ ΠΎΡΠΈΠΌ, ΡΡΠΎΠ± ΠΎΠ½ΠΈ ΠΏΠΎΡΡΠΈΠ»ΠΈ Π½Π°ΠΌ Π²ΠΈΠ΄. - ΠΠ°Π»Π΅Π΅ ΠΌΡ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ
display
Π½Π°inline-block
β ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ<a>
ΡΠ²Π»ΡΡΡΡΡ ΡΡΡΠΎΡΠ½ΡΠΌΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΈ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΌΡ Π½Π΅ Ρ ΠΎΡΠΈΠΌ ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΈ Π²ΡΠ²Π°Π»ΠΈΠ²Π°Π»ΠΈΡΡ Π½Π° ΡΠ²ΠΎΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΡΡΡΠΎΠΊΠΈ ΠΊΠ°ΠΊ Π΅ΡΠ»ΠΈ Π±Ρ ΡΡΠΎ ΠΏΠΎΠ»ΡΡΠ°Π»ΠΎΡΡ ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌblock
, ΠΌΡ Ρ ΠΎΡΠΈΠΌ ΠΈΠΌΠ΅ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΌΠ΅Π½ΡΡΡ ΠΈΡ ΡΠ°Π·ΠΌΠ΅Ρ.inline-block
ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΠΌ Π΄Π΅Π»Π°ΡΡ ΡΡΠΎ. - Π’Π΅ΠΏΠ΅ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ°! ΠΡ Ρ
ΠΎΡΠΈΠΌ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΡ Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
<ul>
, ΠΎΡΡΠ°Π²ΠΈΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ margin ΠΌΠ΅ΠΆΠ΄Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ (Π½Π΅ Π±Π΅Π· Π·Π°Π·ΠΎΡΠ° Ρ ΠΏΡΠ°Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ) ΠΈ ΠΌΡ ΠΈΠΌΠ΅Π΅ΠΌ 5 ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π°Π΄ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΠΈ ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΠΌΠ΅ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ. ΠΠ»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ ΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΠΌΡ Π·Π°Π΄Π°ΡΠΌΒwidth
Π½Π° 19.5%, Π°margin-right
Π½Π° 0.625%. ΠΡ Π·Π°ΠΌΠ΅ΡΠΈΡΠ΅ ΡΡΠΎ Π²ΡΡ ΡΡΠ° ΡΡΠ° ΡΠΈΡΠΈΠ½Π° ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 100.625%, ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΊ ΡΡΠΎ ΠΏΠΎΡΠ»Π΅Π΄Π½ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΏΠ΅ΡΠ΅ΠΊΡΠΎΠ΅Ρ<ul>
ΠΈ Π²ΡΠΏΠ°Π΄Π΅Ρ Π²Π½ΠΈΠ· Π½Π° ΡΠ»Π΅Π΄ΡΡΡΡΡ ΡΡΡΠΎΠΊΡ. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, ΠΌΡ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΠΌΡΡ ΠΊ 100%, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΡΠ±ΠΈΡΠ°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ<a>
Π² ΡΠΏΠΈΡΠΊΠ΅ ΠΈ ΡΠ΄Π°Π»ΡΠ΅Ρ Π΅Π³ΠΎ margin. Π‘Π΄Π΅Π»Π°Π½ΠΎ! - ΠΠΎΡΠ»Π΅Π΄Π½ΠΈΠ΅ ΡΡΠΈ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΡ ΠΈ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΠΏΡΠΎΡΡΠΎ Π΄Π»Ρ ΠΊΠΎΡΠΌΠ΅ΡΠΈΡΠ΅ΡΠΊΠΈΡ
ΡΠ΅Π»Π΅ΠΉ. ΠΡ ΡΠ΅Π½ΡΡΠΈΡΡΠ΅ΠΌ ΡΠ΅ΠΊΡΡ Π²Π½ΡΡΡΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΡΠ»ΠΊΠΈ, Π·Π°Π΄Π°ΡΠΌ
line-height
Π½Π° 3 ΡΡΠΎΠ±Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈΠΌΠ΅Π»ΠΈ Π½Π΅ΠΊΡΡ Π²ΡΡΠΎΡΡ (ΡΡΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²ΠΎ Π² ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ΅ΠΊΡΡΠ° ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ) ΠΈ Π·Π°Π΄Π°ΡΠΌ Π΄Π»Ρ ΡΠ΅ΠΊΡΡΠ° ΡΡΡΠ½ΡΠΉ ΡΠ²Π΅Ρ.
- ΠΊΠ°ΠΊ Π² ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅, ΠΌΡ Π½Π°ΡΠΈΠ½Π°Π΅ΠΌ ΠΎΡΠΊΠ»ΡΡΠ°ΡΡ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄Π»Ρ
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅: Π²Ρ ΠΌΠΎΠ³Π»ΠΈ Π·Π°ΠΌΠ΅ΡΠΈΡΡ ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΏΠΈΡΠΊΠ° Π² HTML Π²ΡΠ΅ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π½Π° ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅ Π΄ΡΡΠ³ Ρ Π΄ΡΡΠ³ΠΎΠΌ β ΡΠ°ΠΊ ΡΠ΄Π΅Π»Π°Π½ΠΎ ΠΏΠΎΡΠΎΠΌΡ, ΡΡΠΎ ΡΡΠΎ ΡΠ΄Π΅Π»Π°Π½ΠΎ ΠΏΠΎΡΠΎΠΌΡ, ΡΡΠΎ ΠΏΡΠΎΠ±Π΅Π»Ρ/ΡΠ°Π·ΡΡΠ²Ρ ΡΡΡΠΎΠΊ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΡΠΎΠ±Π΅Π»Ρ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅, ΡΠΎΡΠ½ΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΊΠ°ΠΊ ΠΏΡΠΎΠ±Π΅Π»Ρ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ ΠΈ ΡΠ°ΠΊΠΈΠ΅ ΠΏΡΠΎΠ±Π΅Π»Ρ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ Π½Π°ΡΡΡΠΈΡΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π°ΡΠ΅Π³ΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΉΡΠΈ Π±ΠΎΠ»ΡΡΠ΅ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΎΠ± ΡΡΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ΅ (ΠΈ ΡΠ΅ΡΠ΅Π½ΠΈΡ) Π½Π° Fighting the space between inline block elements.
ΠΡ Π½Π°Π΄Π΅Π΅ΠΌΡΡ ΡΡΠ° ΡΡΠ°ΡΡΡ ΡΠ½Π°Π±Π΄ΠΈΠ»Π° Π²Π°Ρ Π²ΡΠ΅ΠΌ ΡΡΠΎ Π²Π°ΠΌ Π½Π°Π΄ΠΎ Π·Π½Π°ΡΡ ΠΎ ΡΡΡΠ»ΠΊΠ°Ρ β Π½Π° Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ! ΠΠΎΡΠ»Π΅Π΄Π½ΡΡ ΡΡΠ°ΡΡΡ Π² Π½Π°ΡΠ΅ΠΌ ΠΌΠΎΠ΄ΡΠ»Π΅ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΡΠ΅ΠΊΡΡΠ° Π΄Π΅ΡΠ°Π»ΠΈΠ·ΠΈΡΡΠ΅Ρ ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠ΅ ΡΡΠΈΡΡΡ Π½Π° Π²Π°ΡΠ΅ΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅ ΠΈΠ»ΠΈ ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ Π±ΠΎΠ»ΡΡΠ΅ ΠΈΠ·Π²Π΅ΡΡΠ½Ρ Π²Π΅Π±-ΡΡΠΈΡΡΡ.
css — ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ HTML-ΡΡΡΠ»ΠΊΡ ΠΏΠΎΡ ΠΎΠΆΠ΅ΠΉ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ?
Π‘ΠΈΠ»ΡΠ½ΠΎ Π·Π°ΠΏΠΎΠ·Π΄Π°Π»ΡΠΉ ΠΎΡΠ²Π΅Ρ:
Π― Π±ΠΎΡΠΎΠ»ΡΡ Ρ ΡΡΠΈΠΌ Π²ΡΠ΅ΠΌΡ ΠΎΡ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Ρ ΡΠ΅Ρ ΠΏΠΎΡ, ΠΊΠ°ΠΊ Π²ΠΏΠ΅ΡΠ²ΡΠ΅ Π½Π°ΡΠ°Π» ΡΠ°Π±ΠΎΡΠ°ΡΡ Π² ASP. ΠΠΎΡ Π»ΡΡΡΠ΅Π΅, ΡΡΠΎ Ρ ΠΏΡΠΈΠ΄ΡΠΌΠ°Π»:
ΠΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ: Ρ ΡΠΎΠ·Π΄Π°Ρ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ Ρ ΡΠ΅Π³ΠΎΠΌ. ΠΠ°ΡΠ΅ΠΌ Π² ΠΊΠ½ΠΎΠΏΠΊΡ Ρ ΠΏΠΎΠΌΠ΅ΡΠ°Ρ ΡΠΎΠ±ΡΡΠΈΠ΅ onclick, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π΄Π»Ρ document.location ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ JavaScript.
Π― Π½Π°Π·Π²Π°Π» ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ButtonLink, ΡΡΠΎΠ±Ρ ΠΌΠ΅Π½Ρ Π»Π΅Π³ΠΊΠΎ Π·Π°ΠΏΡΡΠ°ΡΡ Ρ LinkButton.
aspx:
<% @ Control Language = "VB" AutoEventWireup = "false" CodeFile = "ButtonLink.ascx.vb" Inherits = "controls_ButtonLink"%>
ΠΊΠΎΠ΄ ΠΏΠΎΠ·Π°Π΄ΠΈ:
ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΡΠ°ΡΡΠΈΡΠ½ΡΠΌ ΠΊΠ»Π°ΡΡΠΎΠΌ_ButtonLink
ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅Ρ System.Web.UI.UserControl
Dim _url ΠΊΠ°ΠΊ ΡΡΡΠΎΠΊΠ°
Dim _confirm As String
ΠΡΠ±Π»ΠΈΡΠ½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ NavigateUrl ΠΊΠ°ΠΊ ΡΡΡΠΎΠΊΠ°
ΠΠΎΠ»ΡΡΠ°ΡΡ
ΠΠΎΠ·Π²ΡΠ°Ρ _url
ΠΠΎΠ½Π΅Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ
Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ (Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΠΊ ΡΡΡΠΎΠΊΠ°)
_url = Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
BuildJs ()
ΠΠΎΠ½Π΅Ρ Π½Π°Π±ΠΎΡΠ°
ΠΠΎΠ½Π΅ΡΠ½Π°Ρ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΡΡΡ
ΠΡΠ±Π»ΠΈΡΠ½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΆΠ΄Π°Π΅ΡΡΡ ΠΊΠ°ΠΊ ΡΡΡΠΎΠΊΠ°
ΠΠΎΠ»ΡΡΠ°ΡΡ
ΠΠΎΠ·Π²ΡΠ°Ρ _confirm
ΠΠΎΠ½Π΅Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ
Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ (Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΠΊ ΡΡΡΠΎΠΊΠ°)
_confirm = Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
BuildJs ()
ΠΠΎΠ½Π΅Ρ Π½Π°Π±ΠΎΡΠ°
ΠΠΎΠ½Π΅ΡΠ½Π°Ρ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΡΡΡ
Π’Π΅ΠΊΡΡ ΠΎΠ±ΡΠ΅Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π² Π²ΠΈΠ΄Π΅ ΡΡΡΠΎΠΊΠΈ
ΠΠΎΠ»ΡΡΠ°ΡΡ
ΠΠ½ΠΎΠΏΠΊΠ° Π²ΠΎΠ·Π²ΡΠ°ΡΠ°.Π’Π΅ΠΊΡΡ
ΠΠΎΠ½Π΅Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ
Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ (Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΠΊ ΡΡΡΠΎΠΊΠ°)
button.Text = Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
ΠΠΎΠ½Π΅Ρ Π½Π°Π±ΠΎΡΠ°
ΠΠΎΠ½Π΅ΡΠ½Π°Ρ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΡΡΡ
ΠΠ±ΡΠ΅Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π²ΠΊΠ»ΡΡΠ΅Π½ΠΎ ΠΊΠ°ΠΊ Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΎΠ΅
ΠΠΎΠ»ΡΡΠ°ΡΡ
ΠΠ½ΠΎΠΏΠΊΠ° Π²ΠΎΠ·Π²ΡΠ°ΡΠ°.
ΠΠΎΠ½Π΅Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ
Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ (Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΠΊ Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΎΠ΅)
button.Enabled = Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
ΠΠΎΠ½Π΅Ρ Π½Π°Π±ΠΎΡΠ°
ΠΠΎΠ½Π΅ΡΠ½Π°Ρ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΡΡΡ
ΠΡΠ±Π»ΠΈΡΠ½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ CssClass ΠΊΠ°ΠΊ ΡΡΡΠΎΠΊΠ°
ΠΠΎΠ»ΡΡΠ°ΡΡ
ΠΠ½ΠΎΠΏΠΊΠ° Π²ΠΎΠ·Π²ΡΠ°ΡΠ°.
ΠΠΎΠ½Π΅Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ
Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ (Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΠΊ ΡΡΡΠΎΠΊΠ°)
button.CssClass = Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
ΠΠΎΠ½Π΅Ρ Π½Π°Π±ΠΎΡΠ°
ΠΠΎΠ½Π΅ΡΠ½Π°Ρ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΡΡΡ
Sub BuildJs ()
ΠΡΠΎ Π½Π΅Π±ΠΎΠ»ΡΡΠ°Ρ ΠΏΡΡΠ°Π½ΠΈΡΠ° Π² ΡΠΎΠΌ ΡΠΌΡΡΠ»Π΅, ΡΡΠΎ Π΅ΡΠ»ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π΄Π°Π΅Ρ URL-Π°Π΄ΡΠ΅Ρ ΠΈ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΆΠ΄Π°ΡΡΠ΅Π΅ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅, ΠΌΡ Π΄Π²Π°ΠΆΠ΄Ρ ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΡΡΡΠΎΠΊΡ onclick.Β«ΠΠΎ ΡΡΠΎ Π½Π΅ ΡΠ°ΠΊ ΡΠΆ Π²Π°ΠΆΠ½ΠΎ.
ΠΡΠ»ΠΈ String.IsNullOrEmpty (_url) Π’ΠΎΠ³Π΄Π°
button.OnClientClick = ΠΠΈΡΠ΅Π³ΠΎ
ElseIf String.IsNullOrEmpty (_confirm) Π’ΠΎΠ³Π΄Π°
button.OnClientClick = String.Format ("document.location = '{0}'; return false;", ResolveClientUrl (_url))
ΠΡΠ΅
button.OnClientClick = String.Format ("if (confirm ('{0}')) {{document.location = '{1}';}} return false;", _confirm, ResolveClientUrl (_url))
ΠΠΎΠ½Π΅Ρ, Π΅ΡΠ»ΠΈ
ΠΠΎΠ½Π΅Ρ ΠΏΠΎΠ΄ΠΏΠΈΡΠΊΠΈ
ΠΠΎΠ½Π΅Ρ ΠΊΠ»Π°ΡΡΠ°
ΠΠΎΡΡΠΎΠΈΠ½ΡΡΠ²Π° ΡΡ
Π΅ΠΌΡ: ΠΠΎΡ
ΠΎΠΆΠ΅ Π½Π° ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΡ.ΠΡ ΠΏΠΈΡΠ΅ΡΠ΅ Π΄Π»Ρ Π½Π΅Π³ΠΎ ΠΎΠ΄ΠΈΠ½ ΡΠ΅Π³:
ΠΠΎΠ»ΡΡΠΈΠ²ΡΠ°ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ Β«Π½Π°ΡΡΠΎΡΡΡΡΒ» ΠΊΠ½ΠΎΠΏΠΊΡ HTML ΠΈ ΠΏΠΎΡΡΠΎΠΌΡ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ Π½Π°ΡΡΠΎΡΡΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°. ΠΠ°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΠΏΡΡΠ°ΡΡΡΡ ΠΈΠΌΠΈΡΠΈΡΠΎΠ²Π°ΡΡ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS, Π° Π·Π°ΡΠ΅ΠΌ Π±ΠΎΡΠΎΡΡΡΡ Ρ ΡΠ°Π·Π½ΡΠΌΠΈ Π²Π·Π³Π»ΡΠ΄Π°ΠΌΠΈ Π² ΡΠ°Π·Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ .
Π₯ΠΎΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Ρ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΡΠ°ΡΡΠΈΡΠΈΡΡ Π΅Π³ΠΎ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°. Π‘ΠΊΠΎΡΠ΅Π΅ Π²ΡΠ΅Π³ΠΎ, Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Ρ ΡΠ²ΠΎΠΉΡΡΠ² ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΠΏΡΠΎΡΡΠΎ Β«ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡΒ» Π½ΠΈΠΆΠ΅Π»Π΅ΠΆΠ°ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ, ΠΊΠ°ΠΊ Ρ ΡΠ΄Π΅Π»Π°Π» Π΄Π»Ρ text, enabled ΠΈ cssclass.
ΠΡΠ»ΠΈ Ρ ΠΊΠΎΠ³ΠΎ-Π½ΠΈΠ±ΡΠ΄Ρ Π΅ΡΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠΏΡΠΎΡΠ΅, ΡΠΈΡΠ΅ ΠΈΠ»ΠΈ Π»ΡΡΡΠ΅, Ρ Π±ΡΠ» Π±Ρ ΡΡΠ°ΡΡΠ»ΠΈΠ² Π΅Π³ΠΎ ΡΡΠ»ΡΡΠ°ΡΡ. ΠΡΠΎ Π±ΠΎΠ»ΡΠ½ΠΎ, Π½ΠΎ ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ.
ΠΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ HTML, ΠΊΠΎΡΠΎΡΠ°Ρ Π΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ ΠΊΠ°ΠΊ ΡΡΡΠ»ΠΊΠ°
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ HTML, ΠΊΠΎΡΠΎΡΠ°Ρ Π΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ ΠΊΠ°ΠΊ ΡΡΡΠ»ΠΊΠ° (Ρ. Π. ΠΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° Π½Π΅Π΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΠ΅ΡΠ΅Π½Π°ΠΏΡΠ°Π²Π»ΡΠ΅ΡΡΡ Π½Π° ΡΠΊΠ°Π·Π°Π½Π½ΡΠΉ URL-Π°Π΄ΡΠ΅Ρ). ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ±ΡΠ°ΡΡ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ², ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΡΠ»ΠΊΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ HTML.
ΠΠΎΠ±Π°Π²ΠΈΡΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠ΅ ΡΠΎΠ±ΡΡΠΈΠ΅ onclickΒΆ
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠ΅ ΡΠΎΠ±ΡΡΠΈΠ΅ onclick Π² ΡΠ΅Π³
ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π½Π΅ ΡΡΠ°Π±ΠΎΡΠ°ΡΡ, Π΅ΡΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ° Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π²Π½ΡΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ Β»Π‘ΡΡΠ»ΠΊΠΈ Π½Π΅ Π±ΡΠ΄ΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ, Π΅ΡΠ»ΠΈ ΠΎΡΠΊΠ»ΡΡΠ΅Π½ JavaScript, Π° ΠΏΠΎΠΈΡΠΊΠΎΠ²ΡΠ΅ ΡΠΈΡΡΠ΅ΠΌΡ ΠΌΠΎΠ³ΡΡ ΠΈΠ³Π½ΠΎΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°ΠΊΠΈΠ΅ ΡΡΡΠ»ΠΊΠΈ.ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π°ΡΡΠΈΠ±ΡΡ action ΠΈΠ»ΠΈ formaction.
ΠΡΡΠ³ΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΊΠΎΡΠΎΡΠ°Ρ Π΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ ΠΊΠ°ΠΊ ΡΡΡΠ»ΠΊΠ°, — ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π°ΡΡΠΈΠ±ΡΡΠ° action ΠΈΠ»ΠΈ formaction Π²Π½ΡΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ Β»ΠΡΡΠΈΠ±ΡΡ formaction ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ, ΠΈΠΌΠ΅ΡΡΠΈΠΌΠΈ type =" submit ". ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠΎΡ Π°ΡΡΠΈΠ±ΡΡ ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ΅Π½ Π΄Π»Ρ HTML5, Π΅Π³ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π² ΡΡΠ°ΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΠ»ΠΎΡ ΠΎΠΉ.Π‘ΡΠΈΠ»Ρ ΡΡΡΠ»ΠΊΠΈ ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠΈΒΆ
ΠΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΡΠ»ΠΊΡ Π² ΡΡΠΈΠ»Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ CSS. ΠΡΡΠΈΠ±ΡΡ href ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΠΌ Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ ΡΠ΅Π³Π° . ΠΠ½ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΡΡΠ»ΠΊΡ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΈΠ»ΠΈ ΠΌΠ΅ΡΡΠΎ Π½Π° ΡΠΎΠΉ ΠΆΠ΅ ΡΡΡΠ°Π½ΠΈΡΠ΅, ΠΏΠΎ ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΡ ΠΏΠΎΡΠ»Π΅ Π½Π°ΠΆΠ°ΡΠΈΡ Π½Π° ΡΡΡΠ»ΠΊΡ.
ΠΡΠΈΠΌΠ΅Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΡΡΡΠ»ΠΊΠΈ ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS: ΒΆ
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°
<ΡΡΠΈΠ»Ρ>
.ΠΊΠ½ΠΎΠΏΠΊΠ° {
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: # 1c87c9;
Π³ΡΠ°Π½ΠΈΡΠ°: Π½Π΅Ρ;
ΡΠ²Π΅Ρ Π±Π΅Π»ΡΠΉ;
ΠΎΡΡΡΡΠΏ: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ 34 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°: ΡΠ΅Π½ΡΡ;
ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅: Π½Π΅Ρ;
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ;
ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΌΠ°ΡΠΆΠ°: 4px 2px;
ΠΊΡΡΡΠΎΡ: ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ;
}
ΠΠ°ΠΆΠΌΠΈΡΠ΅ Π·Π΄Π΅ΡΡ
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ Β»ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΡΠ»ΠΎΠΆΠ½ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅, ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π² Π½Π΅ΠΊΠΎΡΠΎΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ .
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΏΡΠΈΠΌΠ΅Ρ.
ΠΡΠΈΠΌΠ΅Ρ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΡΡΡΠ»ΠΊΠΈ ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠΈ: ΒΆ
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°
<ΡΡΠΈΠ»Ρ>
.ΠΊΠ½ΠΎΠΏΠΊΠ° {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ;
ΠΎΡΡΡΡΠΏ: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°: ΡΠ΅Π½ΡΡ;
ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅: Π½Π΅Ρ;
ΡΠ²Π΅Ρ: #ffffff;
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: # 7aa8b7;
ΡΠ°Π΄ΠΈΡΡ Π³ΡΠ°Π½ΠΈΡΡ: 6 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π½Π°Π±ΡΠΎΡΠΊΠΈ: Π½Π΅Ρ;
}
Π’Π΅Π³ ΠΊΠ½ΠΎΠΏΠΊΠΈ HTML
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ Β»ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ HTML, ΠΊΠΎΡΠΎΡΠ°Ρ Π΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ ΠΊΠ°ΠΊ ΡΡΡΠ»ΠΊΠ°?
ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ HTML, ΠΊΠΎΡΠΎΡΠ°Ρ Π΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ ΠΊΠ°ΠΊ ΡΡΡΠ»ΠΊΠ°?
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ HTML, ΠΊΠΎΡΠΎΡΠ°Ρ Π΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ ΠΊΠ°ΠΊ ΡΡΡΠ»ΠΊΠ°. ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· Π½ΠΈΡ
ΠΎΠ±ΡΡΠΆΠ΄Π°ΡΡΡΡ Π½ΠΈΠΆΠ΅:
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° CSS ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ΅ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΌΠ΅ΡΠΎΠ΄Π΅, ΡΡΠΎΠ±Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Π²ΡΠ³Π»ΡΠ΄Π΅Π»Π° Π»ΡΡΡΠ΅.
- ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ±ΡΡΠΈΡ onclick: ΠΡΡΠΈΠ±ΡΡ ΡΠΎΠ±ΡΡΠΈΡ onclick ΡΠ°Π±ΠΎΡΠ°Π΅Ρ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΡ.ΠΡΠΈ ΡΠ΅Π»ΡΠΊΠ΅ ΠΌΡΡΡΡ ΠΏΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ΅ ΠΎΠ½Π° Π΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ ΠΊΠ°ΠΊ ΡΡΡΠ»ΠΊΠ° ΠΈ ΠΏΠ΅ΡΠ΅Π½Π°ΠΏΡΠ°Π²Π»ΡΠ΅Ρ ΡΡΡΠ°Π½ΠΈΡΡ Π² ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ.
<
html
>
<
Π³ΠΎΠ»ΠΎΠ²Π°
>
> Π½Π°Π·Π²Π°Π½ΠΈΠ΅
Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ HTML, ΠΊΠΎΡΠΎΡΠ°Ρ
Π΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ ΠΊΠ°ΠΊ ΡΡΡΠ»ΠΊΠ°
title
>
ΡΡΠΈΠ»Ρ
>
.GFG {
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: Π±Π΅Π»ΡΠΉ;
Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠ΅ΡΠ½ΡΠΉ ΡΠ²Π΅Ρ 2 ΠΏΠΈΠΊΡΠ΅Π»Ρ;
ΡΠ²Π΅Ρ: Π·Π΅Π»Π΅Π½ΡΠΉ;
ΠΎΡΡΡΡΠΏ: 5px 10px;
Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°: ΠΏΠΎ ΡΠ΅Π½ΡΡΡ;
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: inline-block;
ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΏΠΎΠ»Π΅: 10px 30px;
ΠΊΡΡΡΠΎΡ: ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ;
}
ΡΡΠΈΠ»Ρ
>
Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°
>
<
ΠΊΠΎΡΠΏΡΡ 3><
h2
> GeeksforGeeks
h2
>
<
ΠΊΠ½ΠΎΠΏΠΊΠ°
class
=
"G
" G
Π©Π΅Π»ΠΊΠ½ΠΈΡΠ΅ Π·Π΄Π΅ΡΡ
ΠΊΠ½ΠΎΠΏΠΊΠ°
>
ΠΊΠΎΡΠΏΡΡ
>
html
>
- ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ΅Π³Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ Π² side tag: ΠΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ ΡΠΎΠ·Π΄Π°Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΡ Π²Π½ΡΡΡΠΈ ΡΠ΅Π³Π° ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ.Π’Π΅Π³ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ ΠΏΠ΅ΡΠ΅Π½Π°ΠΏΡΠ°Π²Π»ΡΠ΅Ρ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ Π² ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ.
<
html
>
<
Π³ΠΎΠ»ΠΎΠ²Π°
>
> Π½Π°Π·Π²Π°Π½ΠΈΠ΅
Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ HTML, ΠΊΠΎΡΠΎΡΠ°Ρ
Π΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ ΠΊΠ°ΠΊ ΡΡΡΠ»ΠΊΠ°
title
>
ΡΡΠΈΠ»Ρ
>
.GFG {
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: Π±Π΅Π»ΡΠΉ;
Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠ΅ΡΠ½ΡΠΉ ΡΠ²Π΅Ρ 2 ΠΏΠΈΠΊΡΠ΅Π»Ρ;
ΡΠ²Π΅Ρ: Π·Π΅Π»Π΅Π½ΡΠΉ;
ΠΎΡΡΡΡΠΏ: 5px 10px;
Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°: ΠΏΠΎ ΡΠ΅Π½ΡΡΡ;
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: inline-block;
ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΏΠΎΠ»Π΅: 10px 30px;
ΠΊΡΡΡΠΎΡ: ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ;
}
ΡΡΠΈΠ»Ρ
>
Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°
>
<
ΠΊΠΎΡΠΏΡΡ 3><
h2
> GeeksforGeeks
h2
>
<
ΠΊΠ½ΠΎΠΏΠΊΠ°
ΠΊΠ»Π°ΡΡ
=
"G
" G
>
ΠΠ°ΠΆΠΌΠΈΡΠ΅ Π·Π΄Π΅ΡΡ
ΠΊΠ½ΠΎΠΏΠΊΠ°
>
a
>
ΠΊΠΎΡΠΏΡΡ
>
HTML
>
- ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΡΠΈΠ»Π΅ΠΉ Π² Π²ΠΈΠ΄Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΊ ΡΡΡΠ»ΠΊΠ΅: ΠΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ ΡΠΎΠ·Π΄Π°Π΅Ρ ΠΏΡΠΎΡΡΡΡ ΡΡΡΠ»ΠΊΡ ΡΠ΅Π³Π° ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ, Π° Π·Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅Ρ Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ CSS, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π΅Π΅ ΠΏΠΎΡ
ΠΎΠΆΠ΅ΠΉ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ.
<
html
>
<
Π³ΠΎΠ»ΠΎΠ²Π°
>
> Π½Π°Π·Π²Π°Π½ΠΈΠ΅
Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ HTML, ΠΊΠΎΡΠΎΡΠ°Ρ
Π΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ ΠΊΠ°ΠΊ ΡΡΡΠ»ΠΊΠ°
title
>
ΡΡΠΈΠ»Ρ
>
.GFG {
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: Π±Π΅Π»ΡΠΉ;
Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠ΅ΡΠ½ΡΠΉ ΡΠ²Π΅Ρ 2 ΠΏΠΈΠΊΡΠ΅Π»Ρ;
ΡΠ²Π΅Ρ: Π·Π΅Π»Π΅Π½ΡΠΉ;
ΠΎΡΡΡΡΠΏ: 5px 10px;
Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°: ΠΏΠΎ ΡΠ΅Π½ΡΡΡ;
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: inline-block;
ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΏΠΎΠ»Π΅: 10px 30px;
ΠΊΡΡΡΠΎΡ: ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ;
ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅: Π½Π΅Ρ;
}
ΡΡΠΈΠ»Ρ
>
Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°
>
<
ΠΊΠΎΡΠΏΡΡ 3><
h2
> GeeksforGeeks
h2
>
ΠΠ°ΠΆΠΌΠΈΡΠ΅ Π·Π΄Π΅ΡΡ
a
body
>
html
>
- ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ΅Π³ΠΎΠ² ΡΠΎΡΠΌΡ: ΠΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠ΅Π³ ΡΠΎΡΠΌΡ ΠΈ ΡΠ΅Π³ ΠΊΠ½ΠΎΠΏΠΊΠΈ .ΠΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ Π°ΡΡΠΈΠ±ΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΡΠΎΡΠΌΡ, ΠΈ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ° ΠΏΠ΅ΡΠ΅Π½Π°ΠΏΡΠ°Π²Π»ΡΠ΅ΡΡΡ Π² ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ.
<
html
>
<
Π³ΠΎΠ»ΠΎΠ²Π°
>
> Π½Π°Π·Π²Π°Π½ΠΈΠ΅
Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ HTML, ΠΊΠΎΡΠΎΡΠ°Ρ
Π΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ ΠΊΠ°ΠΊ ΡΡΡΠ»ΠΊΠ°
title
>
ΡΡΠΈΠ»Ρ
>
.gfg {
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: Π±Π΅Π»ΡΠΉ;
Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠ΅ΡΠ½ΡΠΉ ΡΠ²Π΅Ρ 2 ΠΏΠΈΠΊΡΠ΅Π»Ρ;
ΡΠ²Π΅Ρ: Π·Π΅Π»Π΅Π½ΡΠΉ;
ΠΎΡΡΡΡΠΏ: 5px 10px;
Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°: ΠΏΠΎ ΡΠ΅Π½ΡΡΡ;
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: inline-block;
ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΏΠΎΠ»Π΅: 10px 30px;
ΠΊΡΡΡΠΎΡ: ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ;
}
ΡΡΠΈΠ»Ρ
>
Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°
>
<
ΠΊΠΎΡΠΏΡΡ 3><
h2
> GeeksforGeeks
h2
>
<
ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΊΠ»Π°ΡΡ
"gfg"
Π²Π²Π΅Π΄ΠΈΡΠ΅
=
"submit"
>
ΠΠ°ΠΆΠΌΠΈΡΠ΅ Π·Π΄Π΅ΡΡ
ΠΊΠ½ΠΎΠΏΠΊΡ
>
ΡΠΎΡΠΌΠ°
>
ΠΊΠΎΡΠΏΡΡ
9 0013>html
>
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π±ΡΠ΄Π΅Ρ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΌ Π΄Π»Ρ Π²ΡΠ΅Ρ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ².
ΠΡΡ ΠΎΠ΄:
- ΠΠ΅ΡΠ΅Π΄ Π½Π°ΠΆΠ°ΡΠΈΠ΅ΠΌ ΠΊΠ½ΠΎΠΏΠΊΠΈ:
- ΠΠΎΡΠ»Π΅ Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ:
Π‘ΡΡΠ»ΠΊΠ° Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ
ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅
Π€ΡΠ½ΠΊΡΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π² ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠΈ Ρ Π·Π°ΠΊΠ»ΡΡΠ΅Π½Π½ΡΠΌΠΈ Π² Π½ΠΈΡ URL-Π°Π΄ΡΠ΅ΡΠ°ΠΌΠΈ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΡΠ²Π»ΡΡΡΡΡ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ Ρ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ°ΠΌΠΈ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΈ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Ρ ΠΎΠ΄Π½ΠΎΠΉ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ Π½Π° Π΄ΡΡΠ³ΡΡ.ΠΡΠΎΠ±Π΅Π½Π½ΠΎ Π² Π½Π°ΡΠΈ Π΄Π½ΠΈ, Π² ΠΏΠ΅ΡΠ²ΠΎΠΌ ΠΌΠΈΡΠ΅ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ², ΠΊΠΎΠ³Π΄Π° ΠΌΠΈΠ½ΠΈΠΌΡΠΌ ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΡΡ Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ ΡΡΡΡΠΎΠΉΡΡΠ² Ρ ΡΠ΅Π½ΡΠΎΡΠ½ΡΠΌ ΡΠΊΡΠ°Π½ΠΎΠΌ, Π±ΠΎΠ»ΡΡΠΈΠ΅ ΡΠ΄ΠΎΠ±Π½ΡΠ΅ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΡΠ΅ ΠΎΠ±Π»Π°ΡΡΠΈ Π½Π° ΡΠΊΡΠ°Π½Π΅ Π΄ΠΈΡΠΏΠ»Π΅Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ Π»Π΅Π³ΠΊΠΎ Π½Π°ΠΉΡΠΈ Π³Π»Π°Π·Π°ΠΌΠΈ ΠΈ ΠΊΠΎΡΠ½ΡΡΡΡΡ ΠΏΠ°Π»ΡΡΠ΅ΠΌ, ΡΠ²Π»ΡΡΡΡΡ Π±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½ΡΠΌΠΈ. ΡΠ΅ΠΌ ΠΊΠΎΠ³Π΄Π°-Π»ΠΈΠ±ΠΎ. ΠΠΌΠ΅Π½Π½ΠΎ ΠΏΠΎΡΡΠΎΠΌΡ Π½ΠΎΠ²ΡΠΉ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ Bootstrap 4 ΡΠ²ΠΎΠ»ΡΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π», Π΄Π°Π²Π°Ρ Π΅ΡΠ΅ Π±ΠΎΠ»ΡΡΠΈΠΉ ΠΊΠΎΠΌΡΠΎΡΡ, ΠΎΡΠΊΠ°Π·Π°Π²ΡΠΈΡΡ ΠΎΡ ΠΎΡΠ΅Π½Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠ² Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ²ΠΎΠ±ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΌΠ΅ΡΡΠ° Π²ΠΎΠΊΡΡΠ³ ΡΡΠ±ΡΠΈΡΡΠΎΠ² ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈΡ Π΅ΡΠ΅ Π±ΠΎΠ»Π΅Π΅ ΡΠ΄ΠΎΠ±Π½ΡΠΌΠΈ ΠΈ ΡΠ΄ΠΎΠ±ΠΎΡΠΈΡΠ°Π΅ΠΌΡΠΌΠΈ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ.ΠΠ΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΡΡΡΠΈΡ , ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°ΡΡΠΈΠΉ Π±ΠΎΠ»Π΅Π΅ Π΄ΡΡΠΆΠ΅Π»ΡΠ±Π½ΡΠΉ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ Π½ΠΎΠ²ΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΊΠ½ΠΎΠΏΠΎΠΊ Bootstrap, - ΡΡΠΎ Π² ΡΠΎ ΠΆΠ΅ Π²ΡΠ΅ΠΌΡ ΡΡΡΡ Π±ΠΎΠ»Π΅Π΅ Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠ΅ ΡΠ³Π»Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²ΠΌΠ΅ΡΡΠ΅ Ρ Π±ΠΎΠ»ΡΡΠΈΠΌ ΡΠ²ΠΎΠ±ΠΎΠ΄Π½ΡΠΌ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎΠΌ Π²ΠΎΠΊΡΡΠ³ ΠΏΠΎΠΌΠΎΠ³Π°ΡΡ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΅ΡΠ΅ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΈΡΡΠ½ΡΠΌΠΈ Π΄Π»Ρ Π³Π»Π°Π·Π°.
Π‘Π΅ΠΌΠ°Π½ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΊΠ»Π°ΡΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ Bootstrap Href
ΠΠ»Ρ ΡΡΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠΌΠ΅ΡΡ ΡΠ°ΠΊΠΎΠ΅ ΠΆΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΏΠΎΡΡΡΡΠ°ΡΡΠΈΡ ΠΈ ΠΏΡΠΎΡΡΡΡ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ΅ΠΌΠ°Π½ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ, Π΄Π°ΡΡΠΈΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΏΠ΅ΡΠ΅Π΄Π°Π²Π°ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΌ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ, ΠΏΡΠΎΡΡΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠΉ ΠΊΠ»Π°ΡΡ.
ΠΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠ΅ΠΌΠ°Π½ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΠΊΠ»Π°ΡΡΠΎΠ² ΡΠ°ΠΊΠΎΠ΅ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ Π² ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΉ Π²Π΅ΡΡΠΈΠΈ, Ρ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ, Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΌΠΈ ΡΠ»ΡΡΡΠ΅Π½ΠΈΡΠΌΠΈ - ΡΠ΅Π΄ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Bootstrap Buttons Href, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠ±ΡΡΠ½ΠΎ Π½Π΅ ΠΈΠΌΠ΅ΡΡ ΡΠΌΡΡΠ»Π°, Π±ΡΠ»ΠΈ Π·Π°ΠΌΠ΅Π½Π΅Π½Ρ Π½Π° Π³ΠΎΡΠ°Π·Π΄ΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΈΠ½ΡΡΠΈΡΠΈΠ²Π½ΠΎ ΠΏΠΎΠ½ΡΡΠ½ΡΠ΅ ΠΈ ΠΏΠΎΠ½ΡΡΠ½ΡΠ΅. ΡΠΎΠ½ΠΊΠΈΠΉ ΡΡΠΈΠ»Ρ Π²ΡΠΎΡΠΈΡΠ½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΏΠΎΡΡΠΎΠΌΡ ΡΠ΅ΠΏΠ΅ΡΡ ΡΠ΅ΠΌΠ°Π½ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΊΠ»Π°ΡΡΡ:
Primary .btn-primary
- ΠΎΠΊΡΠ°ΡΠ΅Π½ Π² Π³ΠΎΠ»ΡΠ±ΠΎΠΉ ΡΠ²Π΅Ρ;
Info .btn-info
- ΡΡΡΡ ΡΠ²Π΅ΡΠ»Π΅Π΅ ΠΈ ΠΏΡΠΈΡΡΠ½Π΅Π΅ ΡΠΈΠ½Π΅Π³ΠΎ ΡΠ²Π΅ΡΠ°;
Π£ΡΠΏΠ΅Ρ
.btn-success
ΡΡΠ°ΡΡΠΉ Π΄ΠΎΠ±ΡΡΠΉ Π·Π΅Π»Π΅Π½ΡΠΉ;
ΠΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ .btn-warning
ΠΎΡΠ°Π½ΠΆΠ΅Π²ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ°;
Danger .btn-dangerous
, ΠΊΠΎΡΠΎΡΡΠΉ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΠΊΡΠ°ΡΠ½ΡΠΌ;
Π ΡΡΡΠ»ΠΊΠ° .btn-link
, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΊΠ°ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½Ρ url ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ;
ΠΡΠΎΡΡΠΎ ΡΠ±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ Π²Ρ ΡΠ½Π°ΡΠ°Π»Π° Π²ΠΊΠ»ΡΡΠΈΠ»ΠΈ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΠΊΠ»Π°ΡΡ .btn
Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ ΠΏΠ΅ΡΠ΅Π΄ ΠΈΡ
ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ.
ΠΠ΅ΡΠΊΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ
ΠΠΎΠ΄Π΅Π»Ρ .ΠΠ»Π°ΡΡΡ btn
ΡΠΎΠ·Π΄Π°Π½Ρ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ
. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΈ ΠΊΠ»Π°ΡΡΡ Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ
ΠΈΠ»ΠΈ
(Ρ
ΠΎΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΌΠΎΠ³ΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π΄ΡΡΠ³ΠΎΠΉ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³). ΠΠΎΠ³Π΄Π° Π²Ρ ΠΊΠΎΠ³Π΄Π°-Π»ΠΈΠ±ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΠΊΠ»Π°ΡΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ
, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π΄Π»Ρ Π²ΡΠ·ΠΎΠ²Π° ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΠΈ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ²ΠΎΡΠ°ΡΠΈΠ²Π°Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ), Π²ΠΌΠ΅ΡΡΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΠΊ Π½ΠΎΠ²ΡΠΌ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ°ΠΌ ΠΈΠ»ΠΈ ΡΠ°Π·Π΄Π΅Π»Π°ΠΌ Π½Π° ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅, ΡΡΠΈΠΌ Π²Π΅Π±-ΡΡΡΠ»ΠΊΠ°ΠΌ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΡΡ ΡΠΎΠ»Ρ = Β«ΠΊΠ½ΠΎΠΏΠΊΠ°Β»
, ΡΡΠΎΠ±Ρ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ ΠΏΠ΅ΡΠ΅Π΄Π°Π²Π°ΡΡ ΠΈΡ
Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΠΌ ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΡΠΌ, ΡΠ°ΠΊΠΈΠΌ ΠΊΠ°ΠΊ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ ΡΡΠ΅Π½ΠΈΡ Ρ ΡΠΊΡΠ°Π½Π° Π΄ΠΈΡΠΏΠ»Π΅Ρ.
Π‘ΡΡΠ»ΠΊΠ°
ΠΠ΄Π½Π°ΠΊΠΎ ΡΡΠΎ ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Π° ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΡΠ»ΠΎΠ²ΠΈΠΉ, ΠΏΡΠΈ ΠΊΠΎΡΠΎΡΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ»ΡΡΡΠΈΡΡ ΡΠ²ΠΎΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π² Bootstrap 4 ΠΈΠ·-Π·Π° ΡΠΎΠ³ΠΎ, ΡΡΠΎ Π½ΠΎΠ²Π°Ρ Π²Π΅ΡΡΠΈΡ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ° Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄Π°Π΅Ρ Π½Π°ΠΌ ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΠΎ Π½ΠΎΠ²ΡΠΉ ΡΠΎΠ½ΠΊΠΈΠΉ ΠΈ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ Π½Π°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΡΠΎΡ ΡΠ°Π½ΡΡΡΠΈΠΉ ΡΠ΅ΠΌΠ°Π½ΡΠΈΠΊΡ, ΠΊΠΎΡΠΎΡΡΡ ΠΌΡ ΠΏΡΠΎΡΡΠΎ Π½Π°Π±ΡΠΎΡΠΊΠΈ ΠΏΡΠΎΡΠ΅ΡΡΠ°.
Π‘Ρ Π΅ΠΌΠ° ΠΏΡΠΎΡΠ΅ΡΡΠ°
Π‘ΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠΎΠ½ Π±Π΅Π· ΡΠ°ΠΌΠΊΠΈ ΡΠ΄Π°Π»ΡΠ΅ΡΡΡ ΠΈ Π·Π°ΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊΠΎΠ½ΡΡΡΠΎΠΌ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅ΠΉ ΠΎΠΊΡΠ°ΡΠΊΠΈ. Π£ΡΠΎΡΠ½Π΅Π½ΠΈΠ΅ ΠΊΠ»Π°ΡΡΠΎΠ² Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎ - ΠΏΡΠΎΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ Π² ΡΡ
Π΅ΠΌΡ
Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ ΠΏΠ΅ΡΠ΅Π΄ Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠΉ ΡΠ΅ΠΌΠ°Π½ΡΠΈΠΊΠΈ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ:
ΠΠ±Π²Π΅Π΄Π΅Π½Π½Π°Ρ ΠΎΡΠ½ΠΎΠ²Π½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ .btn-outline-primary
ΠΠ±ΡΠ°Ρ Π²ΡΠΎΡΠΈΡΠ½Π°Ρ - .btn-outline-secondary
ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅.
ΠΠ°ΠΆΠ½ΡΠΉ ΡΠ°ΠΊΡΠΎΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, Π·Π΄Π΅ΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½Π΅ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΡΠ°ΠΊΠΎΠΉ Π²Π΅ΡΠΈ, ΠΊΠ°ΠΊ Π²ΡΠ΄Π΅Π»Π΅Π½Π½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Π³ΠΈΠΏΠ΅ΡΡΡΡΠ»ΠΊΠΈ ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΡΠΎ Π²ΡΠ΄Π΅Π»Π΅Π½Π½ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΡΠ΅ΡΡΡ, Π° Π½Π΅ ΡΠ΅ΠΌΡ.
ΠΠ°ΠΌΠ΅Π½ΠΈΡΠ΅ ΠΊΠ»Π°ΡΡΡ ΠΌΠΎΠ΄ΠΈΡΠΈΠΊΠ°ΡΠΎΡΠΎΠ² ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π½Π° ΠΊΠ»Π°ΡΡΡ .btn-outline- *
, ΡΡΠΎΠ±Ρ ΠΈΠ·Π±Π°Π²ΠΈΡΡΡΡ ΠΎΡ Π²ΡΠ΅Ρ
ΡΠΎΠ½ΠΎΠ²ΡΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ ΡΠ²Π΅ΡΠΎΠ² Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ°Ρ
Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠΈΠΏΠ°.
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅
ΠΠ΅ΡΠΌΠΎΡΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ ΠΊΠ»Π°ΡΡΡ ΡΠ΅ΠΌΠ°Π½ΡΠΈΡΠ΅ΡΠΊΠΈΡ
ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠ΅Π²ΠΎΡΡ
ΠΎΠ΄Π½Ρ, ΠΎΡΠ΅Π½Ρ Π²Π°ΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ½ΠΈΡΡ, ΡΡΠΎ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· Π³ΠΎΡΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΡ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, Π½Π΅ ΡΠΌΠΎΠ³ΡΡ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ ΠΈΡ
ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π΅ΡΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΠ΅ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²Π°ΠΌ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΡΡΡ. Π§ΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊ Π²Π°ΡΠΈΠΌ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ - ΡΠ±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ Π½Π°ΡΡΠ΄Ρ Ρ ΡΡΡΠ΅ΡΠΈΡΠ΅ΡΠΊΠΈΠΌΠΈ ΡΠ΅ΡΠ΅Π½ΠΈΡΠΌΠΈ Π²Ρ Π² ΡΠΎ ΠΆΠ΅ Π²ΡΠ΅ΠΌΡ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ»ΠΎΠ², ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΡΠΈΡΡΡΡΠΈΡ
ΡΡΠΎ, Π² ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ ΡΡΠ΅Π½ΠΈΡ Ρ ΡΠΊΡΠ°Π½Π°, ΡΠΊΡΡΠ²Π°Ρ ΠΈΡ
Ρ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ .sr-only
class, ΡΠ°ΠΊ ΡΡΠΎ Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ΅Ρ ΡΠ»ΠΎΠΆΠΈΡΡΡΡ Π²ΠΏΠ΅ΡΠ°ΡΠ»Π΅Π½ΠΈΠ΅, ΡΡΠΎ Π²Ρ ΠΈΡΠ΅ΡΠ΅.
Π Π°Π·ΠΌΠ΅Ρ ΠΏΡΠ³ΠΎΠ²ΠΈΡ
ΠΠ°ΠΏΠΈΡΠΈΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΡΠΎΠ²Π½Ρ Π±Π»ΠΎΠΊΠ° - ΡΠ΅, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΡ
Π²Π°ΡΡΠ²Π°ΡΡ Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° - ΠΏΡΡΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ .ΠΠ’Π-Π±Π»ΠΎΠΊ
.
ΠΠΊΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΆΠΈΠΌ
ΠΠ½ΠΎΠΏΠΊΠΈ ΠΌΠΎΠ³ΡΡ ΠΊΠ°Π·Π°ΡΡΡΡ Π½Π°ΠΆΠ°ΡΡΠΌΠΈ (Ρ Π±ΠΎΠ»Π΅Π΅ ΡΠ΅ΠΌΠ½ΡΠΌ ΡΠΎΠ½ΠΎΠΌ, Π±ΠΎΠ»Π΅Π΅ ΡΠ΅ΠΌΠ½ΠΎΠΉ ΡΠ°ΠΌΠΊΠΎΠΉ ΠΈ Π²ΡΡΠ°Π²ΠΊΠΎΠΉ ΡΠ΅Π½ΠΈ), ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ Π°ΠΊΡΠΈΠ²Π½Ρ. ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎ Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΊΠ»Π°ΡΡ ΠΊ
-s, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ. ΠΡ Π²ΡΠ΅ Π΅ΡΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΈΠ½ΡΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΡ ΠΆΠ΅ Π°ΠΊΡΠΈΠ²Π½ΡΠΉ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ Ρ ΠΏΠΎΠΌΠΎΡΡΡ . active
(ΠΈ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ Π°ΡΡΠΈΠ±ΡΡ aria-press = "true"
), Π΅ΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ΅ΠΏΠ»ΠΈΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎ.
ΠΡΠ½ΠΎΠ²Π½Π°Ρ ΡΡΡΠ»ΠΊΠ°
Π‘ΡΡΠ»ΠΊΠ°
ΠΡΠΊΠ»ΡΡΠ΅Π½Π½ΡΠΉ ΡΠ΅ΠΆΠΈΠΌ
ΠΡΠΈΠ½ΡΠ΄ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΠ΅ΡΠ΅ΡΡΠ°ΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ, Π΅ΡΠ»ΠΈ Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π°ΡΡΠΈΠ±ΡΡ disabled
ΠΏΠΎΠΌΠ΅ΡΠ΅Π½ Π² Π»ΡΠ±ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
.
ΠΡΠΊΠ»ΡΡΠ΅Π½Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
, Π΄Π΅ΠΉΡΡΠ²ΡΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ½Π°ΡΠ΅:
-
-s Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΠΎΡΠΊΠ»ΡΡΠ΅Π½Π½ΡΠΉ Π°ΡΡΠΈΠ±ΡΡ, ΠΏΠΎΡΡΠΎΠΌΡ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ .disabled
, ΡΡΠΎΠ±Ρ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ ΠΎΠ½ Π²ΡΠ³Π»ΡΠ΄Π΅Π» ΠΎΡΠΊΠ»ΡΡΠ΅Π½Π½ΡΠΌ.
- ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π½Π° Π±ΡΠ΄ΡΡΠ΅Π΅ ΡΡΠΈΠ»ΠΈ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Ρ Π΄Π»Ρ ΠΎΡΠΊΠ»ΡΡΠ΅Π½ΠΈΡ Π²ΡΠ΅Ρ ΡΠΎΠ±ΡΡΠΈΠΉ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ°Ρ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ. Π Π²Π΅Π±-Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ , ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΠΈΡ ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ, Π²Ρ Π²ΠΎΠΎΠ±ΡΠ΅ Π½Π΅ Π·Π°ΠΌΠ΅ΡΠΈΡΠ΅ ΠΎΡΠΊΠ»ΡΡΠ΅Π½Π½ΡΡ ΡΡΡΠ΅Π»ΠΊΡ.
- ΠΡΠΊΠ»ΡΡΠ΅Π½Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π°ΡΡΠΈΠ±ΡΡ aria-disabled = "true"
, ΡΡΠΎΠ±Ρ ΡΠΊΠ°Π·Π°ΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° Π΄Π»Ρ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΡ
ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ.
ΠΡΠ½ΠΎΠ²Π½Π°Ρ ΡΡΡΠ»ΠΊΠ°
Π‘ΡΡΠ»ΠΊΠ°
ΠΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ ΠΎΠ± ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΡΡΠΈ ΡΡΡΠ»ΠΊΠΈ
ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π΄Π°ΠΆΠ΅ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ , ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ-ΡΠΎΠ±ΡΡΠΈΡ: Π½Π΅Ρ, Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Ρ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ ΠΎΡΡΠ°Π΅ΡΡΡ Π½Π΅ΠΈΠ·ΠΌΠ΅Π½Π½ΠΎΠΉ, Π° ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π·ΡΡΡΠΈΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΡ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΡΠΌΠΎΠ³ΡΡ Π°ΠΊΡΠΈΠ²ΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠΈ ΡΡΡΠ»ΠΊΠΈ.
ΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠΈΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ
ΠΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ: ΡΠ»Π°ΠΆΠΎΠΊ ΠΏΠ»ΡΡ ΡΠ°Π΄ΠΈΠΎ
ΠΡΠΌΠ΅ΡΠ΅Π½Π½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π΄Π»Ρ ΡΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΎΠ±Π½ΠΎΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΅ΡΠ΅Π· ΡΠΎΠ±ΡΡΠΈΠ΅ ΡΠ΅Π»ΡΠΊΠ° Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅.
ΠΠΌΠ΅ΠΉΡΠ΅ Π² Π²ΠΈΠ΄Ρ, ΡΡΠΎ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΡΠΌΠ΅ΡΠ΅Π½Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΡΠ΅Π±ΡΡΡ, ΡΡΠΎΠ±Ρ Π²Ρ Π²ΡΡΡΠ½ΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ ΠΊΠ»Π°ΡΡ .active
ΠΊ Π²Ρ
ΠΎΠ΄Ρ
.
<ΠΌΠ΅ΡΠΊΠ°>
Π€Π»Π°ΠΆΠΎΠΊ 1 (ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½)
<ΠΌΠ΅ΡΠΊΠ°>
Π€Π»Π°ΠΆΠΎΠΊ 2
<ΠΌΠ΅ΡΠΊΠ°>
Π€Π»Π°ΠΆΠΎΠΊ 3
<ΠΌΠ΅ΡΠΊΠ°>
Π Π°Π΄ΠΈΠΎ 1 (ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²ΡΠ±ΡΠ°Π½ΠΎ)
<ΠΌΠ΅ΡΠΊΠ°>
Π Π°Π΄ΠΈΠΎ 2
<ΠΌΠ΅ΡΠΊΠ°>
Π Π°Π΄ΠΈΠΎ 3
ΠΠ΅ΡΠΎΠ΄Ρ
$ ().ΠΊΠ½ΠΎΠΏΠΊΠ° ('toggle')
- ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°Π΅Ρ ΡΡΠ°ΡΡΡ Π½Π°ΠΆΠ°ΡΠΈΡ. ΠΡΠΈΠ΄Π°Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠ΅ Π²ΠΈΠ΄, ΡΡΠΎ ΠΎΠ½Π° Π±ΡΠ»Π° Π²ΠΊΠ»ΡΡΠ΅Π½Π°.
ΠΠ°ΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΌΡΡΠ»ΠΈ
ΠΡΠ°ΠΊ, Π² ΡΠ΅Π»ΠΎΠΌ, Π² Π½ΠΎΠ²ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ ΡΠ°ΠΌΠΎΠ³ΠΎ ΠΈΠ·Π²Π΅ΡΡΠ½ΠΎΠ³ΠΎ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ° Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ² ΡΠ°ΡΡΠΈΡΠ΅Π½Π½ΠΎΠ΅ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ Π² ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΌ ΠΈΡΠΎΠ³Π΅ ΡΡΠ°Π»ΠΎ Π±ΠΎΠ»Π΅Π΅ ΡΠ°Π·Π±ΠΎΡΡΠΈΠ²ΡΠΌ, Π³ΠΎΡΠ°Π·Π΄ΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΎΡΡΡΠΌ ΠΈ ΡΠ΄ΠΎΠ±Π½ΡΠΌ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Π½Π° ΡΠΊΡΠ°Π½Π΅ Π΄ΠΈΡΠΏΠ»Π΅Ρ ΠΌΠ΅Π½ΡΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈ Π³ΠΎΡΠ°Π·Π΄ΠΎ Π±ΠΎΠ»Π΅Π΅ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΡΠΌ Π² Π²ΡΡΠ°Π·ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΎΠΏΡΠΈΡΡ Ρ Π½ΠΎΠ²ΡΠΌ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½Π½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅. Π’Π΅ΠΏΠ΅ΡΡ Π²ΡΠ΅, ΡΡΠΎ ΠΈΠΌ Π½ΡΠΆΠ½ΠΎ, - ΡΡΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ Π½Π° Π²Π°ΡΠ΅ΠΉ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ Π·Π°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΠ±ΡΡΠ°ΡΡΠΈΡ Π²ΠΈΠ΄Π΅ΠΎ Π½Π° YouTube ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ°Ρ Bootstrap
Π‘Π²ΡΠ·Π°Π½Π½ΡΠ΅ ΡΠ΅ΠΌΡ:
ΠΠ½ΠΎΠΏΠΊΠΈ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΡΠΈΡΠΈΠ°Π»ΡΠ½ΡΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΡ
W3schools: ΡΡΠ΅Π±Π½ΠΈΠΊ ΠΏΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ
ΠΠ½ΠΎΠΏΠΊΠ° ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ
ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ HTML, ΠΊΠΎΡΠΎΡΠ°Ρ Π΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ ΠΊΠ°ΠΊ ΡΡΡΠ»ΠΊΠ° | by W3docs
ΠΠ½ΠΎΠ³Π΄Π° Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ HTML, ΠΊΠΎΡΠΎΡΠ°Ρ Π΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ ΠΊΠ°ΠΊ ΡΡΡΠ»ΠΊΠ° (Ρ. Π΅. ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° Π½Π΅Π΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΠ΅ΡΠ΅Π½Π°ΠΏΡΠ°Π²Π»ΡΠ΅ΡΡΡ Π½Π° ΡΠΊΠ°Π·Π°Π½Π½ΡΠΉ URL-Π°Π΄ΡΠ΅Ρ).
ΠΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ², ΠΌΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΠΌ 3 ΠΈΠ· Π½ΠΈΡ . ΠΡΠ±Π΅ΡΠΈΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ², ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΡΠ»ΠΊΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ HTML.
Π₯ΠΎΡΠΎΡΠΎ. ΠΠΎΡΠ»ΠΈ!
a) Π ΡΠ΅Π³ HTML
ΠΡΠΈΠΌΠ΅Ρ
ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ
ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π½Π΅ ΡΡΠ°Π±ΠΎΡΠ°ΡΡ, Π΅ΡΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ° Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π²Π½ΡΡΡΠΈ ΡΠ΅Π³Π°
.
Π±) Π ΡΠ΅Π³ Π²Π½ΡΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° HTML
ΠΡΠΈΠΌΠ΅Ρ
ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ
Π‘ΡΡΠ»ΠΊΠΈ Π½Π΅ Π±ΡΠ΄ΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ, ΠΊΠΎΠ³Π΄Π° JavaScript ΠΎΡΠΊΠ»ΡΡΠ΅Π½, Π° ΠΏΠΎΠΈΡΠΊΠΎΠ²ΡΠ΅ ΡΠΈΡΡΠ΅ΠΌΡ ΠΌΠΎΠ³ΡΡ ΠΈΠ³Π½ΠΎΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°ΠΊΠΈΠ΅ Π²ΠΈΠ΄ ΡΡΡΠ»ΠΎΠΊ.
a) ΠΡΡΠΈΠ±ΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ
ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ
Π§ΡΠΎΠ±Ρ ΠΎΡΠΊΡΡΡΡ ΡΡΡΠ»ΠΊΡ Π² Π½ΠΎΠ²ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ Π°ΡΡΠΈΠ±ΡΡ target = β_ blankβ.
ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°
ΠΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ ΡΠ΅Π±Ρ
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠΎΡΠΌΡ Π½Π΅Ρ ΠΈ Π΄Π°Π½Π½ΡΠ΅ Π½Π΅ ΠΎΡΠΏΡΠ°Π²Π»Π΅Π½Ρ, ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ΅ΠΌΠ°Π½ΡΠΈΡΠ΅ΡΠΊΠΈ Π½Π΅Π²Π΅ΡΠ½ΡΠΌ. ΠΠ΄Π½Π°ΠΊΠΎ ΡΡΠ° ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ° Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½Π°.
b) ΠΡΡΠΈΠ±ΡΡ HTML5 formaction.
ΠΡΠΈΠΌΠ΅Ρ
ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ
ΠΡΡΠΈΠ±ΡΡ formaction ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ Ρ type =β submit β . ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠΎΡ Π°ΡΡΠΈΠ±ΡΡ ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ΅Π½ Π΄Π»Ρ HTML5, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π² ΡΡΠ°ΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎΠΉ.
ΠΡΠΈΠΌΠ΅Ρ
ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°
<ΡΡΠΈΠ»Ρ>
.ΠΊΠ½ΠΎΠΏΠΊΠ° {
background-color: # 1c87c9;
Π³ΡΠ°Π½ΠΈΡΠ°: ΠΎΡΡΡΡΡΡΠ²ΡΠ΅Ρ;
ΡΠ²Π΅Ρ: Π±Π΅Π»ΡΠΉ;
ΠΎΡΡΡΡΠΏ: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ 34 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°: ΠΏΠΎ ΡΠ΅Π½ΡΡΡ;
ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°: Π½Π΅Ρ;
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: ΡΡΡΠΎΡΠ½ΠΎ-Π±Π»ΠΎΡΠ½ΡΠΉ;
ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
margin: 4px 2px;
ΠΊΡΡΡΠΎΡ: ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ;
}
ΠΠ°ΠΆΠΌΠΈΡΠ΅ Π·Π΄Π΅ΡΡ
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΡΠ»ΠΎΠΆΠ½ΡΠΉ ΡΡΠΈΠ»Ρ, ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π² Π½Π΅ΠΊΠΎΡΠΎΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ .
ΠΠ½ΠΎΠΏΠΊΠΈ Β· Bootstrap
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΠ΅ ΡΡΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ Bootstrap Π΄Π»Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ Π² ΡΠΎΡΠΌΠ°Ρ , Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΡΡ ΠΎΠΊΠ½Π°Ρ ΠΈ Ρ. Π. Π‘ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ², ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ ΠΈ Ρ. Π.
ΠΡΠΈΠΌΠ΅ΡΡ
Bootstrap Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠ΅Π΄ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ ΡΡΠΈΠ»Π΅ΠΉ ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ ΡΠ»ΡΠΆΠΈΡ ΡΠ²ΠΎΠ΅ΠΉ ΡΠ΅ΠΌΠ°Π½ΡΠΈΡΠ΅ΡΠΊΠΎΠΉ ΡΠ΅Π»ΠΈ, Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠ΅Π³ΠΎ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ.
ΠΠ°ΡΠ°Π»ΡΠ½ΡΠΉ ΠΡΠΎΡΠΈΡΠ½ΡΠΉ Π£ΡΠΏΠ΅Ρ ΠΠΏΠ°ΡΠ½ΠΎΡΡΡ ΠΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ Π‘Π²Π΅Ρ Π’Π΅ΠΌΠ½ΡΠΉ Π‘ΡΡΠ»ΠΊΠ° Π½Π° ΡΠ°ΠΉΡ
ΠΠ΅ΡΠ΅Π΄Π°ΡΠ° ΡΠΌΡΡΠ»Π° Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΠΌ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡΠΌ
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠ° Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΡΠΌΡΡΠ»Π° ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΡ ΠΈΠ½Π΄ΠΈΠΊΠ°ΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΏΠ΅ΡΠ΅Π΄Π°Π½Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΡ
ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ, ΡΠ°ΠΊΠΈΡ
ΠΊΠ°ΠΊ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ ΡΡΠ΅Π½ΠΈΡ Ρ ΡΠΊΡΠ°Π½Π°.Π£Π±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ, ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½Π½Π°Ρ ΡΠ²Π΅ΡΠΎΠΌ, Π»ΠΈΠ±ΠΎ ΠΎΡΠ΅Π²ΠΈΠ΄Π½Π° ΠΈΠ· ΡΠ°ΠΌΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π²ΠΈΠ΄ΠΈΠΌΡΠΉ ΡΠ΅ΠΊΡΡ), Π»ΠΈΠ±ΠΎ Π²ΠΊΠ»ΡΡΠ΅Π½Π° Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΡ
ΡΡΠ΅Π΄ΡΡΠ², ΡΠ°ΠΊΠΈΡ
ΠΊΠ°ΠΊ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΡΠ΅ΠΊΡΡ, ΡΠΊΡΡΡΡΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»Π°ΡΡΠ° .sr-only
.
ΠΠ»Π°ΡΡΡ .btn
ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Ρ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ
. ΠΠ΄Π½Π°ΠΊΠΎ Π²Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΈ ΠΊΠ»Π°ΡΡΡ Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ
ΠΈΠ»ΠΈ
(Ρ
ΠΎΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΌΠΎΠ³ΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π΄ΡΡΠ³ΠΎΠΉ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³).
ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΊΠ»Π°ΡΡΠΎΠ² ΠΊΠ½ΠΎΠΏΠΎΠΊ Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ
, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π΄Π»Ρ Π·Π°ΠΏΡΡΠΊΠ° ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΠΈ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ²ΠΎΡΠ°ΡΠΈΠ²Π°Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ), Π²ΠΌΠ΅ΡΡΠΎ ΡΡΡΠ»ΠΊΠΈ Π½Π° Π½ΠΎΠ²ΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈΠ»ΠΈ ΡΠ°Π·Π΄Π΅Π»Ρ Π½Π° ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅, ΡΡΠΈΠΌ ΡΡΡΠ»ΠΊΠ°ΠΌ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΏΡΠΈΡΠ²ΠΎΠΈΡΡ role = " ΠΊΠ½ΠΎΠΏΠΊΠ° Β«
Β», ΡΡΠΎΠ±Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡ ΠΈΡ
Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΠΌ ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΡΠΌ, ΡΠ°ΠΊΠΈΠΌ ΠΊΠ°ΠΊ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ ΡΡΠ΅Π½ΠΈΡ Ρ ΡΠΊΡΠ°Π½Π°.
Π‘ΡΡΠ»ΠΊΠ°
ΠΠΎΠ½ΡΡΡΠ½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΡΠΆΠ½Π° ΠΊΠ½ΠΎΠΏΠΊΠ°, Π½ΠΎ Π½Π΅Ρ Π±ΠΎΠ³Π°ΡΡΡ
ΡΠ²Π΅ΡΠΎΠ² ΡΠΎΠ½Π°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠ½ΠΈ ΠΏΡΠΈΠ½ΠΎΡΡΡ? ΠΠ°ΠΌΠ΅Π½ΠΈΡΠ΅ ΠΊΠ»Π°ΡΡΡ ΠΌΠΎΠ΄ΠΈΡΠΈΠΊΠ°ΡΠΎΡΠΎΠ² ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π½Π° .btn-outline- *
Π΄Π»Ρ ΡΠ΄Π°Π»Π΅Π½ΠΈΡ Π²ΡΠ΅Ρ
ΡΠΎΠ½ΠΎΠ²ΡΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ ΡΠ²Π΅ΡΠΎΠ² Π½Π° Π»ΡΠ±ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠ΅.
ΠΠ°ΡΠ°Π»ΡΠ½ΡΠΉ ΠΡΠΎΡΠΈΡΠ½ΡΠΉ Π£ΡΠΏΠ΅Ρ ΠΠΏΠ°ΡΠ½ΠΎΡΡΡ ΠΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ Π‘Π²Π΅Ρ Π’Π΅ΠΌΠ½ΡΠΉ
Π Π°Π·ΠΌΠ΅ΡΡ
Π₯ΠΎΡΠΈΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π±ΠΎΠ»ΡΡΠ΅Π³ΠΎ ΠΈΠ»ΠΈ ΠΌΠ΅Π½ΡΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°? Π‘ΠΊΠ»Π°Π΄ΡΠ²Π°Π΅ΠΌ .btn-lg
ΠΈΠ»ΠΈ .btn-sm
Π΄Π»Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ
ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ².
ΠΠΎΠ»ΡΡΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΠΎΠ»ΡΡΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°
ΠΠ°Π»Π΅Π½ΡΠΊΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΠ°Π»Π΅Π½ΡΠΊΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°
Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΡΠΎΠ²Π½Ρ Π±Π»ΠΎΠΊΠ° - ΡΠ΅, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΡ
Π²Π°ΡΡΠ²Π°ΡΡ Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° - ΠΏΡΡΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ .ΠΠ’Π-Π±Π»ΠΎΠΊ
.
ΠΠ½ΠΎΠΏΠΊΠ° ΡΡΠΎΠ²Π½Ρ Π±Π»ΠΎΠΊΠΈΡΠΎΠ²ΠΊΠΈ ΠΠ½ΠΎΠΏΠΊΠ° ΡΡΠΎΠ²Π½Ρ Π±Π»ΠΎΠΊΠΈΡΠΎΠ²ΠΊΠΈ
ΠΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅
ΠΠ½ΠΎΠΏΠΊΠΈ Π±ΡΠ΄ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π½Π°ΠΆΠ°ΡΡΠΌΠΈ (Ρ Π±ΠΎΠ»Π΅Π΅ ΡΠ΅ΠΌΠ½ΡΠΌ ΡΠΎΠ½ΠΎΠΌ, Π±ΠΎΠ»Π΅Π΅ ΡΠ΅ΠΌΠ½ΠΎΠΉ ΡΠ°ΠΌΠΊΠΎΠΉ ΠΈ Π²ΡΡΠ°Π²ΠΊΠΎΠΉ ΡΠ΅Π½ΠΈ), ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ Π°ΠΊΡΠΈΠ²Π½Ρ. ΠΠ΅Ρ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΊΠ»Π°ΡΡ ΠΊ
s, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ . Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, Π²Ρ Π²ΡΠ΅ ΡΠ°Π²Π½ΠΎ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΈΠ½ΡΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΡ ΠΆΠ΅ Π°ΠΊΡΠΈΠ²Π½ΡΠΉ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ Ρ ΠΏΠΎΠΌΠΎΡΡΡ .active
(ΠΈ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ Π°ΡΡΠΈΠ±ΡΡ aria-press = "true"
), Π΅ΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ΅ΠΏΠ»ΠΈΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎ.
ΠΡΠ½ΠΎΠ²Π½Π°Ρ ΡΡΡΠ»ΠΊΠ°
Π‘ΡΡΠ»ΠΊΠ°
ΠΡΠΊΠ»ΡΡΠ΅Π½ΠΎ
Π‘Π΄Π΅Π»Π°ΠΉΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π΅Π°ΠΊΡΠΈΠ²Π½ΡΠΌΠΈ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π°ΡΡΠΈΠ±ΡΡ disabled
ΠΊ Π»ΡΠ±ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ
.
ΠΡΠ½ΠΎΠ²Π½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΠ½ΠΎΠΏΠΊΠ°
ΠΡΠΊΠ»ΡΡΠ΅Π½Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
, Π²Π΅Π΄ΡΡ ΡΠ΅Π±Ρ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ½Π°ΡΠ΅:
-
disabled
, ΠΏΠΎΡΡΠΎΠΌΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ.disabled
, ΡΡΠΎΠ±Ρ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ ΠΎΠ½ Π²ΡΠ³Π»ΡΠ΄Π΅Π» ΠΎΡΠΊΠ»ΡΡΠ΅Π½Π½ΡΠΌ. - ΠΠΊΠ»ΡΡΠ΅Π½Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ΄ΠΎΠ±Π½ΡΠ΅ Π΄Π»Ρ Π±ΡΠ΄ΡΡΠ΅Π³ΠΎ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ ΠΎΡΠΊΠ»ΡΡΠ΅Π½ΠΈΡ Π²ΡΠ΅Ρ
ΡΠΎΠ±ΡΡΠΈΠΉ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ
- ΠΡΠΊΠ»ΡΡΠ΅Π½Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π°ΡΡΠΈΠ±ΡΡ
aria-disabled = "true"
, ΡΡΠΎΠ±Ρ ΡΠΊΠ°Π·Π°ΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π΄Π»Ρ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΡ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ.
ΠΡΠ½ΠΎΠ²Π½Π°Ρ ΡΡΡΠ»ΠΊΠ°
Π‘ΡΡΠ»ΠΊΠ°
ΠΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ ΠΎ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΠΈ ΡΡΡΠ»ΠΊΠΈ
ΠΠΎΠ΄Π΅Π»Ρ .disabled
class ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ pointer-events: none
, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΏΡΡΠ°ΡΡΡΡ ΠΎΡΠΊΠ»ΡΡΠΈΡΡ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡ ΡΡΡΠ»ΠΎΠΊ
s, Π½ΠΎ ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ CSS Π΅ΡΠ΅ Π½Π΅ ΡΡΠ°Π½Π΄Π°ΡΡΠΈΠ·ΠΈΡΠΎΠ²Π°Π½ΠΎ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π΄Π°ΠΆΠ΅ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
, ΠΊΠΎΡΠΎΡΡΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΠΎΠ±ΡΡΠΈΡ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ : Π½Π΅Ρ
, Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Ρ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ ΠΎΡΡΠ°Π΅ΡΡΡ Π½Π΅ΠΈΠ·ΠΌΠ΅Π½Π½ΠΎΠΉ, Π° ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π·ΡΡΡΠΈΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΡ
ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΡΠΌΠΎΠ³ΡΡ Π°ΠΊΡΠΈΠ²ΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠΈ ΡΡΡΠ»ΠΊΠΈ. Π§ΡΠΎΠ±Ρ Π±ΡΡΡ Π² Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΡΡΠΈ, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΠΊ ΡΡΠΈΠΌ ΡΡΡΠ»ΠΊΠ°ΠΌ Π°ΡΡΠΈΠ±ΡΡ tabindex = "- 1"
(ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΈ Π½Π΅ ΠΏΠΎΠ»ΡΡΠ°Π»ΠΈ ΡΠΎΠΊΡΡ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ) ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ JavaScript, ΡΡΠΎΠ±Ρ ΠΎΡΠΊΠ»ΡΡΠΈΡΡ ΠΈΡ
ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡ.
ΠΠ»Π°Π³ΠΈΠ½ ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΠ΅Π»Π°ΠΉΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ. Π£ΠΏΡΠ°Π²Π»ΡΠΉΡΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΡΠΌΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈΠ»ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°ΠΉΡΠ΅ Π³ΡΡΠΏΠΏΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π΄Π»Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ², Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΠΏΠ°Π½Π΅Π»Π΅ΠΉ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ².
ΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ
ΠΠΎΠ±Π°Π²ΡΡΠ΅ data-toggle = "button"
, ΡΡΠΎΠ±Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠΈΡΡ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ΅
ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΡΠΈ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠΌ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ Π²ΡΡΡΠ½ΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ .active
class ΠΈ aria-Press = "true"
ΠΊ
.
ΠΠ΄ΠΈΠ½ΠΎΡΠ½ΡΠΉ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ
Π€Π»Π°ΠΆΠΎΠΊ ΠΈ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»ΠΈ
Bootstrap .Π‘ΡΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½Ρ ΠΊ Π΄ΡΡΠ³ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ, ΡΠ°ΠΊΠΈΠΌ ΠΊΠ°ΠΊ
s, Π΄Π»Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΡΠ»Π°ΠΆΠΊΠ° ΠΈΠ»ΠΈ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ ΡΡΠΈΠ»Ρ ΡΠ°Π΄ΠΈΠΎ. ΠΠΎΠ±Π°Π²ΡΡΠ΅ data-toggle = "buttons"
ΠΊ .btn-group
, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅ΠΌΡ ΡΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΡΡΠΎΠ±Ρ Π²ΠΊΠ»ΡΡΠΈΡΡ ΠΈΡ
ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΡΠ΅ΡΠ΅Π· JavaScript, ΠΈ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ .btn-group-toggle
Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ
s Π² Π²Π°ΡΠ΅ΠΌ ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΠΏΠΈΡΠ°Π½ΠΈΠ΅ΠΌ ΠΎΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π²Ρ
ΠΎΠ΄Π° ΠΈΠ»ΠΈ ΠΈΡ
Π³ΡΡΠΏΠΏΡ.
Π£ΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π΄Π»Ρ ΡΡΠΈΡ
ΠΊΠ½ΠΎΠΏΠΎΠΊ - , ΠΎΠ±Π½ΠΎΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅Π»ΡΠΊΠ°
ΡΠΎΠ±ΡΡΠΈΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅.ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ Π΄ΡΡΠ³ΠΎΠΉ ΠΌΠ΅ΡΠΎΠ΄ Π΄Π»Ρ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ Π²Π²ΠΎΠ΄Π° - Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Ρ ΠΏΠΎΠΌΠΎΡΡΡ
ΠΈΠ»ΠΈ Π²ΡΡΡΠ½ΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠ² ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ checked
Π΄Π»Ρ Π²Π²ΠΎΠ΄Π° - Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠΈΡΡ .active
Π½Π°
Π²ΡΡΡΠ½ΡΡ.
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΡΠΌΠ΅ΡΠ΅Π½Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΡΠ΅Π±ΡΡΡ, ΡΡΠΎΠ±Ρ Π²Ρ Π²ΡΡΡΠ½ΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ ΠΊΠ»Π°ΡΡ .active
ΠΊ Π²Ρ
ΠΎΠ΄Ρ
.
<ΠΌΠ΅ΡΠΊΠ°>
ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½
<ΠΌΠ΅ΡΠΊΠ°>
ΠΠΊΡΠΈΠ²Π΅Π½
<ΠΌΠ΅ΡΠΊΠ°>
Π Π°Π΄ΠΈΠΎ
<ΠΌΠ΅ΡΠΊΠ°>
Π Π°Π΄ΠΈΠΎ
ΠΠ΅ΡΠΎΠ΄Ρ
ΠΠ΅ΡΠΎΠ΄ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
---|---|
$ ().ΠΊΠ½ΠΎΠΏΠΊΠ° ('ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅') | ΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°Π΅Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ push. ΠΡΠΈΠ΄Π°Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠ΅ Π²ΠΈΠ΄, ΡΡΠΎ ΠΎΠ½Π° Π±ΡΠ»Π° Π°ΠΊΡΠΈΠ²ΠΈΡΠΎΠ²Π°Π½Π°. |
$ (). ΠΠ½ΠΎΠΏΠΊΠ° ('ΡΠ΄Π°Π»ΠΈΡΡ') | Π£Π½ΠΈΡΡΠΎΠΆΠ°Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
HTML-ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΡΡΡΠ»ΠΊΠΈ Ρ onclick href
ΠΠ° ΡΡΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΡΡΠ»ΠΊΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ HTML Ρ onclick
ΠΈ href
Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ΅Π³Π°
ΠΈ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΈΡ
Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS Π² ΡΠ°Π·Π½ΡΡ
ΡΠ²Π΅ΡΠ°Ρ
ΠΈ ββΡΠ°Π·ΠΌΠ΅ΡΠ°Ρ
.
ΠΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ°ΠΌΡΡ
ΠΏΡΠΎΡΡΡΡ
ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΡΠ»ΠΎΠΊ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ HTML - ΡΠΎΠ·Π΄Π°ΡΡ HTML
, ΠΊΠΎΡΠΎΡΡΠΉ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠ³Π΅Π½Π΅ΡΠΈΡΡΠ΅Ρ ΠΊΠ½ΠΎΠΏΠΊΡ.
Π₯ΠΎΡΡ ΡΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ ΠΏΡΠΎΡΡ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΌΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Ρ ΠΊΠΎΠ΄Π°, ΠΊΠ½ΠΎΠΏΠΊΠ° Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ. ΠΠ΄Π½Π°ΠΊΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ Π²Π΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠ½ΠΎ Π²ΡΠ³Π»ΡΠ΄ΡΡΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π³ΠΈΠΏΠ΅ΡΡΡΡΠ»ΠΎΠΊ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² ΠΊΠΎΠ΄ CSS.ΠΡΠΎΠ΄ΠΎΠ»ΠΆΠ°ΠΉΡΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΡ.
ΠΡΠΎ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΎΡΠΎΡΠΌΠΈΡΡ ΡΡΡΠ»ΠΊΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠ³ΠΎ CSS. ΠΠΎΠ΄ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ, Π½Π°ΠΏΡΡΠΌΡΡ Π²ΡΡΠ°Π²ΠΈΠ² Π΅Π³ΠΎ Π² HTML ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ Π² ΠΏΠ΅ΡΠ²ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅. ΠΡΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ ΡΠ²Π΅Ρ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°.
Π‘ΠΎΠ²Π΅Ρ: ΠΠΎΡΠ΅ΡΠΈΡΠ΅ html-color-names.com ΠΈΠ»ΠΈ htmlColorCodes.org Π΄Π»Ρ ΡΠΎΠΏΠΎΡΡΠ°Π²Π»Π΅Π½ΠΈΡ ΡΠ²Π΅ΡΠΎΠ²ΡΡ ΠΏΠ°Π»ΠΈΡΡ.
ΠΡΠ»ΠΈ Π½Π° ΠΎΠ΄Π½ΠΎΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΎΠ΄Π½ΠΎΠΉ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈΠ»ΠΈ Π΅ΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ, ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²Π½ΡΡΡΠ΅Π½Π½ΡΡ ΠΈΠ»ΠΈ Π²Π½Π΅ΡΠ½ΡΡ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ Π΄Π»Ρ Π±ΠΎΠ»Π΅Π΅ Π±ΡΡΡΡΠΎΠ³ΠΎ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ. ΡΡΠ°Π·Ρ. Π‘ΠΌ. ΠΡΠΈΠΌΠ΅Ρ Π½ΠΈΠΆΠ΅ ..
ΠΡΠΎΡ ΠΊΠΎΠ΄ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈΠΌΠ΅Π΅Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠ΅, Π½ΠΎ Π²Π°ΠΆΠ½ΠΎΠ΅ ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ Π΄ΡΡΠ³ΠΈΠΌ ΡΡΠΈΠ»Π΅ΠΌ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π°ΡΡΠΈΠ±ΡΡ class
Π±ΡΠ» Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ MyButton
, ΡΡΠΎΠ±Ρ ΠΎΠ½ ΠΌΠΎΠ³ Π²ΡΠ±ΠΈΡΠ°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»Π° CSS ΠΈΠ· ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ.ΠΡΠΈ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ MyButton
.
ΠΡΡΠ΅ΡΠΏΠΎΠΌΡΠ½ΡΡΡΠΉ