ΠΠ½ΠΎΠΏΠΊΠΈ. ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ Β· Bootstrap. ΠΠ΅ΡΡΠΈΡ v4.0.0
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΡΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ Bootstrap Π΄Π»Ρ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ Ρ ΡΠΎΡΠΌΠ°ΠΌΠΈ, Π΄ΠΈΠ°Π»ΠΎΠ³Π°ΠΌΠΈ, Ρ.ΠΏ. ΠΠΌΠ΅Π΅ΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΡΠ°Π»ΡΠ½ΡΡ Π²Π°ΡΠΈΠ°ΡΠΈΠΉ, ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ², ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ ΠΈ Ρ.ΠΏ.
ΠΡΠΈΠΌΠ΅ΡΡ
Bootstrap ΠΈΠΌΠ΅Π΅Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠ΅Π΄ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΡΡΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ ΠΈΠΌΠ΅Π΅Ρ ΡΠ²ΠΎΡ ΡΠ΅ΠΌΠ°Π½ΡΠΈΡΠ΅ΡΠΊΡΡ ΡΠ΅Π»Ρ, ΠΈ ΠΈΠΌΠ΅Π΅Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠ΅Π³ΠΎ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ ΠΈ Π³ΠΈΠ±ΠΊΠΎΡΡΠΈ.
<button type="button">ΠΠ»Π°Π²Π½ΡΠΉ</button> <button type="button">ΠΡΠΎΡΠΈΡΠ½ΡΠΉ</button> <button type="button">Π£ΡΠΏΠ΅Ρ </button> <button type="button">ΠΠΏΠ°ΡΠ½ΠΎΡΡΡ</button> <button type="button">ΠΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΠ΅</button> <button type="button">ΠΠ½ΡΠΎ</button> <button type="button">Π‘Π²Π΅ΡΠ»ΡΠΉ</button> <button type="button">Π’Π΅ΠΌΠ½ΡΠΉ</button> <button type="button">ΠΠΈΠ½ΠΊ</button>
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΡ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ
.sr-only
ΡΠ΅ΠΊΡΡ.
Π’ΡΠ³ Β«ΠΊΠ½ΠΎΠΏΠΊΠ°Β»
ΠΠ»Π°ΡΡΡ .btn
ΡΠΎΠ·Π΄Π°Π½Ρ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ <button>
. ΠΠ΄Π½Π°ΠΊΠΎ ΠΈΡ
ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²Π½ΡΡΡΠΈ <a>
ΠΈΠ»ΠΈ <input>
(Ρ
ΠΎΡΡ ΠΈΠ·-Π·Π° ΡΡΠΎΠ³ΠΎ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΌΠΎΠ³ΡΡ ΡΠ΅Π½Π΄Π΅ΡΠΈΡΡ ΡΡΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ½Π°ΡΠ΅).
ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΊΠ»Π°ΡΡΠΎΠ² .btn
Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ
<a>
, ΠΊΠΎΡΠΎΡΡΠ΅ Π² Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π½Π΅ ΠΊΠ°ΠΊ Π»ΠΈΠ½ΠΊ, Π²Π΅Π΄ΡΡΠΈΠΉ Π½Π° Π½ΠΎΠ²ΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈΠ»ΠΈ ΠΊΠ°ΠΊ ΡΠΊΠΎΡΡ, Π° ΠΊΠ°ΠΊ ΡΡΠΈΠ³Π³Π΅Ρ Π²Π½ΡΡΡΠΈΡΡΡΠ°Π½ΠΈΡΠ½ΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΠΈ (ΡΠ°ΠΊΠΎΠΉ ΠΊΠ°ΠΊ ΡΠ²ΠΎΡΠ°ΡΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ), Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ Π·Π°Π΄Π°ΡΡ ΡΡΠΈΠΌ <a>
Π°ΡΡΠΈΠ±ΡΡ role="button"
Π΄Π»Ρ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ Π² ΡΠ»ΡΡΠ°Π΅ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΡ
ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ ΡΠ°ΠΊΠΈΡ
ΠΊΠ°ΠΊ Β«ΡΠΊΡΠ°Π½Π½Π°Ρ ΡΠΈΡΠ°Π»ΠΊΠ°Β».
Link
<a href="#" role="button">Link</a> <button type="submit">Button</button> <input type="button" value="Input"> <input type="submit" value="Submit"> <input type="reset" value="Reset">
ΠΠΎΠ½ΡΡΡΠ½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ (Π±Π΅Π· ΡΠΎΠ½Π°)
ΠΡΠΆΠ½Π° ΠΊΠ½ΠΎΠΏΠΊΠ°, Π½ΠΎ Π±Π΅Π· Β«ΡΡΠΆΠ΅Π»ΡΡ
Β» ΡΠΎΠ½ΠΎΠ²ΡΡ
ΡΠ²Π΅ΡΠΎΠ²? ΠΠ°ΠΌΠ΅Π½ΠΈΡΠ΅ Π΄Π΅ΡΠΎΠ»ΡΠ½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ-ΠΌΠΎΠ΄ΠΈΡΠΈΠΊΠ°ΡΠΎΡΡ Π½Π° ΠΊΠ»Π°ΡΡΡ . btn-outline-*
Π΄Π»Ρ ΡΠ΄Π°Π»Π΅Π½ΠΈΡ Π²ΡΠ΅Ρ
ΡΠΎΠ½ΠΎΠ²ΡΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ ΡΠ²Π΅ΡΠΎΠ² Π² Π»ΡΠ±ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠ΅.
<button type="button">ΠΠ»Π°Π²Π½ΡΠΉ</button> <button type="button">ΠΡΠΎΡΠΈΡΠ½ΡΠΉ</button> <button type="button">Π£ΡΠΏΠ΅Ρ </button> <button type="button">ΠΠΏΠ°ΡΠ½ΠΎΡΡΡ</button> <button type="button">ΠΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΠ΅</button> <button type="button">ΠΠ½ΡΠΎ</button> <button type="button">Π‘Π²Π΅ΡΠ»ΡΠΉ</button> <button type="button">Π’Π΅ΠΌΠ½ΡΠΉ</button>
Π Π°Π·ΠΌΠ΅ΡΡ
ΠΡΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ? ΠΠΎΠ±Π°Π²ΡΡΠ΅ Π² Π½Π΅Π΅ ΠΊΠ»Π°ΡΡΡ .btn-lg
ΠΈΠ»ΠΈ .btn-sm
Π΄Π»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ
ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ².
<button type="button">ΠΠΎΠ»ΡΡΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°</button> <button type="button">ΠΠΎΠ»ΡΡΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°</button>
<button type="button">ΠΠ°Π»Π΅Π½ΡΠΊΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°</button> <button type="button">ΠΠ°Π»Π΅Π½ΡΠΊΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°</button>
Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π±Π»ΠΎΡΠ½ΠΎΠ³ΠΎ ΡΡΠΎΠ²Π½Ρ β ΠΊΠΎΡΠΎΡΡΠ΅ Π·Π°Π½ΠΈΠΌΠ°ΡΡ ΠΏΠΎΠ»Π½ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° β Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ ΠΊΠ»Π°ΡΡΠ° . btn-block
.
<button type="button">ΠΠ½ΠΎΠΏΠΊΠ° Π±Π»ΠΎΡΠ½ΠΎΠ³ΠΎ ΡΡΠΎΠ²Π½Ρ</button> <button type="button">ΠΠ½ΠΎΠΏΠΊΠ° Π±Π»ΠΎΡΠ½ΠΎΠ³ΠΎ ΡΡΠΎΠ²Π½Ρ</button>
ΠΠΎΠ³Π΄Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π°ΠΆΠΈΠΌΠ°ΡΡ, ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ Π±ΠΎΠ»Π΅Π΅ ΡΠ΅ΠΌΠ½ΡΠΉ ΡΠΎΠ½, Π³ΡΠ°Π½ΠΈΡΡ ΠΈ Π²Π½ΡΡΡΠ΅Π½Π½ΡΡ ΡΠ΅Π½Ρ. Π BS4 Π½Π΅Ρ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΊΠ»Π°ΡΡ Π² <button>
, Ρ.ΠΊ. ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΏΡΠ΅Π²Π΄ΠΎ-ΠΊΠ»Π°ΡΡ. ΠΠ΄Π½Π°ΠΊΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ·Π²Π°ΡΡ Β«Π°ΠΊΡΠΈΠ²Π½ΠΎΠ΅Β» ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΉ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄, Π΄ΠΎΠ±Π°Π²ΠΈΠ² ΠΊΠ»Π°ΡΡ
(ΠΈ Π²ΠΊΠ»ΡΡΠΈΠ² Π°ΡΡΠΈΠ±ΡΡ aria-pressed="true"
) , ΠΊΠΎΠ³Π΄Π° Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡΡΠΌΠΎ ΠΎΠ±ΡΡΠ²ΠΈΡΡ ΡΠ°ΠΊΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅.
ΠΠ»Π°Π²Π½Π°Ρ ΡΡΡΠ»ΠΊΠ° Π‘ΡΡΠ»ΠΊΠ°
<a href="#" role="button" aria-pressed="true">ΠΠ»Π°Π²Π½Π°Ρ ΡΡΡΠ»ΠΊΠ°</a> <a href="#" role="button" aria-pressed="true">Π‘ΡΡΠ»ΠΊΠ°</a>
ΠΠ°ΡΡΠ°Π²ΡΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ Β«Π½Π΅Π°ΠΊΡΠΈΠ²Π½ΡΠΌΠΈΒ» Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ Π±ΡΠ»Π΅Π°Π½ΠΎΠ²Π° Π°ΡΡΠΈΠ±ΡΡΠ° disabled
ΠΊ Π»ΡΠ±ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ <button>
.
<button type="button" disabled>ΠΠ»Π°Π²Π½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°</button> <button type="button" disabled>ΠΠ½ΠΎΠΏΠΊΠ°</button>
Β«ΠΡΠΊΠ»ΡΡΠ΅Π½Π½ΡΠ΅Β» ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠ΅ ΠΈΠ· ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <a>
, Π²Π΅Π΄ΡΡ ΡΠ΅Π±Ρ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ½Π°ΡΠ΅:
- ΠΠ»Π΅ΠΌΠ΅Π½Ρ
<a>
Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π°ΡΡΠΈΠ±ΡΡdisabled
, ΡΠ°ΠΊ ΡΡΠΎ Π΄Π»Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ² Π²ΠΌΠ΅ΡΡΠΎ Π½Π΅Π³ΠΎ Π½Π°Π΄ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΊΠ»Π°ΡΡ.disabled
; - ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ future-friendly ΡΡΠΈΠ»ΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π½Π΅ Π²ΡΠ΅ΠΌΠΈ ΡΠ·Π΅Ρ-Π°Π³Π΅Π½ΡΠ°ΠΌΠΈ, (Ρ.Π΅. Β«Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ΄ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π² Π±ΡΠ΄ΡΡΠ΅ΠΌΒ») Π²ΠΊΠ»ΡΡΠ΅Π½Ρ Π²
<a>
Π΄Π»Ρ ΠΎΡΠΊΠ»ΡΡΠ΅Π½ΠΈΡ Π²ΡΠ΅Ρ ΡΠΎΠ±ΡΡΠΈΠΉpointer-events
Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ°Ρ -ΡΠΊΠΎΡΡΡ . Π Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ , ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ, Π²Ρ Π²ΠΎΠ²ΡΠ΅ Π½Π΅ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ Π΄Π΅Π°ΠΊΡΠΈΠ²ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΊΡΡΡΠΎΡ. - ΠΡΠΊΠ»ΡΡΠ΅Π½Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ Π°ΡΡΠΈΠ±ΡΡ
aria-disabled="true"
Π΄Π»Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΡ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΠΌ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠ»Π°Π²Π½ΡΠΉ Π»ΠΈΠ½ΠΊ ΠΠΈΠ½ΠΊ
<a href="#" role="button" aria-disabled="true">ΠΠ»Π°Π²Π½ΡΠΉ Π»ΠΈΠ½ΠΊ</a> <a href="#" role="button" aria-disabled="true">ΠΠΈΠ½ΠΊ</a>
ΠΠ³ΠΎΠ²ΠΎΡΠΊΠ° ΠΎ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ Π°ΡΠΏΠ΅ΠΊΡΠ°Ρ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΠΈ ΡΡΡΠ»ΠΎΠΊ
ΠΠ»Π°ΡΡ . disabled
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ pointer-events: none
Π΄Π»Ρ ΠΏΠΎΠΏΡΡΠΊΠΈ Π΄Π΅Π°ΠΊΡΠΈΠ²Π°ΡΠΈΠΈ ΡΡΡΠ»ΠΎΡΠ½ΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΠΈ <a>
pointer-events: none
, ΠΏΡΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Ρ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡ Π΄Π»Ρ ΡΠ»Π°Π±ΠΎΠ²ΠΈΠ΄ΡΡΠΈΡ
ΠΈ ΠΈΠ½ΡΡ
Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΡ
ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ ΠΌΠΎΠ³ΡΡ Π½Π΅ΡΠ°ΡΠ½Π½ΠΎ ΠΏΡΠΎΠΉΡΠΈ ΠΏΠΎ Π΄Π°Π½Π½ΠΎΠΉ ΡΡΡΠ»ΠΊΠ΅. Π’Π°ΠΊ ΡΡΠΎ Π΄Π»Ρ ΠΏΠΎΠ»Π½ΠΎΠΉ Β«Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΡΡΠΈΒ» Π΄ΠΎΠ±Π°Π²Π»ΡΠΉΡΠ΅ Π² ΡΡΠΈ ΡΡΡΠ»ΠΊΠΈ Π°ΡΡΠΈΠ±ΡΡ tabindex="-1"
(Π΄Π»Ρ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ΅Π½ΠΈΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Β«Π½Π°Ρ
ΠΎΠΆΠ΄Π΅Π½ΠΈΡΒ» ΠΈΡ
Ρ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ) ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΎΠ±ΡΡΠ½ΡΠ΅ ΡΠΊΡΠΈΠΏΡΡ JavaScript Π΄Π»Ρ Π΄Π΅Π°ΠΊΡΠΈΠ²Π°ΡΠΈΠΈ ΠΈΡ
ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΠΈ.
ΠΠ»Π°Π³ΠΈΠ½Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ
ΠΠΎΠ½ΡΡΠΎΠ»ΠΈΡΡΠΉΡΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈΠ»ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°ΠΉΡΠ΅ Π³ΡΡΠΏΠΏΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π΄Π»Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ², ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ Β«ΡΡΠ»Π±Π°ΡΡΒ».
ΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ
data-toggle="button"
Π΄Π»Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ Π½Π° Π°ΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΡΠ»ΠΈ Π²Ρ Π΄Π΅Π»Π°Π΅ΡΠ΅ ΡΡΠΎ, Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ Π²ΡΡΡΠ½ΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π² <button>
ΠΊΠ»Π°ΡΡ . active
ΠΈ aria-pressed="true"
.
<button type="button" data-toggle="button" aria-pressed="false" autocomplete="off"> ΠΠ΄ΠΈΠ½ΠΎΡΠ½ΡΠΉ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ </button>
ΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»ΠΈ (Β«Π³Π°Π»ΠΎΡΠΊΠΈΒ») ΠΈ Β«ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠ°Π΄ΠΈΠΎΒ»
Π‘ΡΠΈΠ»ΠΈ ΠΊΠ»Π°ΡΡΠΎΠ² .button
ΠΌΠΎΠ³ΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΊ ΠΏΡΠΎΡΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ, ΡΠ°ΠΊΠΈΠΌ ΠΊΠ°ΠΊ <label>
, Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Π΅ΠΉ (Β«Π³Π°Π»ΠΎΡΠ΅ΠΊΒ») ΠΈΠ»ΠΈ Β«ΠΊΠ½ΠΎΠΏΠΎΠΊ ΡΠ°Π΄ΠΈΠΎΒ». ΠΠΎΠ±Π°Π²ΡΡΠ΅
ΠΊ ΠΊΠ»Π°ΡΡΡ .btn-group
, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅ΠΌΡ ΡΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π΄Π»Ρ Π²ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ Β«ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Π΅ΠΉΒ» Π² ΠΈΡ
ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΡ
ΡΡΠΈΠ»ΡΡ
.
Π‘ΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π²ΡΠ±ΠΎΡΠ° (Ρ.Π΅. ΠΊΠΎΠ³Π΄Π° ΡΡΠ°Π²ΠΈΡΡΡ Β«Π³Π°Π»ΠΎΡΠΊΠ°Β») ΠΎΠ±Π½ΠΎΠ²Π»ΡΠ΅ΡΡΡ Π»ΠΈΡΡ ΡΠΎΠ±ΡΡΠΈΠ΅ΠΌ ΠΊΠ»ΠΈΠΊΠ° click
ΠΏΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ΅. ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ Π΄ΡΡΠ³ΠΎΠΉ ΠΌΠ΅ΡΠΎΠ΄ Π΄Π»Ρ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ Π²Π²ΠΎΠ΄Π° β Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ <input type="reset">
ΠΈΠ»ΠΈ Π²ΡΡΡΠ½ΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π²Π²ΠΎΠ΄Π° checked
β Π²Π°ΠΌ ΠΏΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π²ΡΡΡΠ½ΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΊΠ»Π°ΡΡ . active
ΠΊ <label>
.
ΠΠ°ΠΌΠ΅ΡΡΡΠ΅, ΡΡΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΠΏΡΠ΅Π΄ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠΌ Π²ΡΠ±ΠΎΡΠΎΠΌ ΡΡΠ΅Π±ΡΡΡ Π²ΡΡΡΠ½ΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠ»Π°ΡΡ
ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²Π²ΠΎΠ΄Π° <label>
.
Checked
<div data-toggle="buttons"> <label> <input type="checkbox" checked autocomplete="off"> Checked </label> </div>
Active Radio Radio
<div data-toggle="buttons"> <label> <input type="radio" name="options" autocomplete="off" checked> Active </label> <label> <input type="radio" name="options" autocomplete="off"> Radio </label> <label> <input type="radio" name="options" autocomplete="off"> Radio </label> </div>
ΠΠ΅ΡΠΎΠ΄Ρ
ΠΠ΅ΡΠΎΠ΄ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
---|---|
$(). button('toggle') |
ΠΠ°Π΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Β«Π½Π°ΠΆΠ°ΡΠΈΡΒ». ΠΠ°Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠ΅ Π²ΠΈΠ΄ Π°ΠΊΡΠΈΠ²ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ (Π½Π°ΠΆΠ°ΡΠΎΠΉ) ΠΊΠ½ΠΎΠΏΠΊΠΈ. |
$().button('dispose') |
Π£Π½ΠΈΡΡΠΎΠΆΠ°Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° (Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅). |
ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ CSS ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ² | ΠΠ°Π·Π° Π·Π½Π°Π½ΠΈΠΉ
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΡΠ°Π·Π±Π΅ΡΠ΅ΠΌ, ΠΊΠ°ΠΊ Π½Π°ΠΉΡΠΈ CSS ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡ Π΄Π»Ρ ΡΠ±ΠΎΡΠ° Π΄Π°Π½Π½ΡΡ Ρ ΡΠ°ΠΉΡΠ°
ΠΠ°ΠΆΠ½ΠΎ!Β ΠΠ΅ ΠΏΠ΅ΡΠ΅ΠΆΠΈΠ²Π°ΠΉΡΠ΅, Π΅ΡΠ»ΠΈ ΡΠ°Π½Π΅Π΅ Π½Π΅ Π±ΡΠ»ΠΈ Π·Π½Π°ΠΊΠΎΠΌΡ Ρ html ΠΈ CSS, Π·Π΄Π΅ΡΡ Π½Π΅ ΠΏΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΡ Π·Π½Π°Π½ΠΈΠΉ Π² ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ π
CSS ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΏΡΡΡ, Π² ΠΊΠ°ΠΊΠΎΠΌ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠ΅Π³Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡΡΡ Π½ΡΠΆΠ½Π°Ρ Π½Π°ΠΌ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ. ΠΠ»Ρ ΠΈΡ ΠΏΠΎΠΈΡΠΊΠ° ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠΌΠΈ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ°ΠΌΠΈ Π΄Π»Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, SelectorGadget, Π½ΠΎ ΠΎΠ½ΠΈ Π½Π΅ Π³Π°ΡΠ°Π½ΡΠΈΡΡΡΡ ΡΠΎΠ³ΠΎ, ΡΡΠΎ Π½Π°ΠΉΠ΄Π΅Π½Π½ΡΠ΅ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ Π±ΡΠ΄ΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ Π²Π°ΡΠΈΠΌ Π·Π°Π΄Π°ΡΠ°ΠΌ.
ΠΠΎΠΈΡΠΊ Π½ΡΠΆΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
ΠΠ»Ρ Π½Π°ΡΠ°Π»Π° ΠΎΡΠΊΡΠΎΠΉΡΠ΅ html ΠΊΠΎΠ΄ ΡΡΡΠ°Π½ΠΈΡΡ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°. Π‘Π΄Π΅Π»Π°ΡΡ ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΊΠ»ΠΈΠΊΠ½ΡΠ² ΠΏΡΠ°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡΡΠΈ ΠΈ Π²ΡΠ±ΡΠ°Π² «ΠΠΎΠΊΠ°Π·Π°ΡΡ ΠΊΠΎΠ΄ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°»/Inspect (Π·Π΄Π΅ΡΡ ΠΈ Π΄Π°Π»Π΅Π΅ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΡΡ ΡΠ°Π±ΠΎΡΠ° Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ Chrome). Β
ΠΡΠΊΡΠΎΠ΅ΡΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π³Π΄Π΅ Π²ΠΎ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Elements ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡΡ Π²Π΅ΡΡ html ΠΊΠΎΠ΄ ΡΡΡΠ°Π½ΠΈΡΡ, Π·Π°Π³ΡΡΠΆΠ΅Π½Π½ΡΠΉ Π² Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ. ΠΠ° ΡΠΊΡΠΈΠ½ΡΠΎΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ° Π²ΡΠ΄Π΅Π»Π΅Π½ ΡΠ΅Π³, Π½Π° ΠΊΠΎΡΠΎΡΡΠΉ ΠΊΠ°ΠΊ ΡΠ°Π· Π±ΡΠ» ΠΊΠ»ΠΈΠΊ ΠΏΡΠ°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡΡΠΈ.
Π‘Π»Π΅Π΄ΡΡΡΠΈΠΉ ΡΡΠ°ΠΏ ΡΠ°Π±ΠΎΡΡ — ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΡΠ΅Π³, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π°ΠΌ Π½ΡΠΆΠ΅Π½. Π‘Π΄Π΅Π»Π°ΡΡ ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ:
- ΠΊΠ»ΠΈΠΊΠ½ΡΡΡ Π½Π° ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΡ ΠΎΠ±Π»Π°ΡΡΡ, Π½Π°ΠΆΠ°ΡΡ Π½Π° ΠΏΡΠ°Π²ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΌΡΡΠΈ ΠΈ Π΅ΡΠ΅ ΡΠ°Π· Π²ΡΠ±ΡΠ°ΡΡΒ «ΠΠΎΠΊΠ°Π·Π°ΡΡ ΠΊΠΎΠ΄ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°»/Inspect;
- ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠΈΡΡΡΡ Π½Π° Π²ΡΠ±ΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΈΠ· ΠΊΠΎΠ½ΡΠΎΠ»ΠΈ, Π½Π°ΠΆΠ°Π² Π½Π° ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π² ΠΊΠΎΠ½ΡΠΎΠ»ΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°;
- ΡΠ΅ΡΠ΅Π· ΠΏΠΎΠΈΡΠΊ Π½Π°ΠΉΡΠΈ ΡΠ΅Π³ ΠΏΡΡΠΌΠΎ Π² html ΠΊΠΎΠ΄Π΅. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΊΠ»ΠΈΠΊΠ½ΠΈΡΠ΅ Π½Π° Π»ΡΠ±ΠΎΠΉ ΡΠ΅Π³, Π½Π°ΠΆΠΌΠΈΡΠ΅ ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠ΅ ΠΊΠ»Π°Π²ΠΈΡ Ctrl + F ΠΈ Π² ΠΏΠΎΡΠ²ΠΈΠ²ΡΠ΅ΠΉΡΡ ΡΡΡΠΎΠΊΠ΅ ΠΏΠΎΠΈΡΠΊΠ° Π²Π²Π΅Π΄ΠΈΡΠ΅ Π»ΡΠ±ΠΎΠΉ ΡΠ΅ΠΊΡΡ Ρ ΡΠ°ΠΉΡΠ°. ΠΡΠ°ΡΠ·Π΅Ρ ΡΠ°ΠΌ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈ ΡΡΠ΄ΠΎΠΌ Π½Π°ΠΏΠΈΡΠ΅Ρ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠΎΠ²ΠΏΠ°Π΄Π΅Π½ΠΈΠΉ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. Π Π½Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π²ΠΈΠ΄Π½ΠΎ, ΡΡΠΎ «Π·Π°ΠΏΠΈΡΠ°ΡΡΡΡ» ΠΏΠΎΠ²ΡΠΎΡΡΠ΅ΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π΄Π²Π°ΠΆΠ΄Ρ. ΠΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Enter Π² ΡΡΡΠΎΠΊΠ΅ ΠΏΠΎΠΈΡΠΊΠ°, Π±ΡΠ°ΡΠ·Π΅Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°Π΅Ρ ΠΊ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ (ΡΡΠΎΡ ΠΌΠΎΠΌΠ΅Π½Ρ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π²Π°ΠΌ ΠΏΡΠΎΠ²Π΅ΡΡΡΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΠΎΡΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ° Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π»ΠΈΠ±ΠΎ ΡΡΠΎΡΠ½ΡΡΡ, Π²ΡΠ΅ Π»ΠΈ Π½Π°ΠΉΠ΄Π΅Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡ Π²Π°ΡΠΈΠΌ Π·Π°Π΄Π°ΡΠ°ΠΌ, ΠΊΠΎΠ³Π΄Π° ΠΈΡ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ).
ΠΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΏΠΎΠ½ΡΡΠΈΡ Π² html ΠΊΠΎΠ΄Π΅
ΠΠ°Π»Π΅Π΅ ΡΠ°Π·Π±Π΅ΡΠ΅ΠΌ, ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π² html ΠΊΠΎΠ΄Π΅ ΠΈ ΡΡΠΎ ΠΈΠ· ΡΡΠΎΠ³ΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π·Π½Π°ΡΡ Π΄Π»Ρ ΡΠ±ΠΎΡΠ° Π΄Π°Π½Π½ΡΡ .Β
Π’Π΅Π³Β — ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ΅Ρ ΡΠΎΡΡΠΎΡΡΡ ΠΈΠ· Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΈ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠ³ΠΎ, ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ Π²Π½ΡΡΡΠΈ ΡΠ΅Π±Ρ ΡΠ΅ΠΊΡΡ (span Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅ — Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΡΠ΅Π³Π°), Π° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΎΠ΄ΠΈΠ½ΠΎΡΠ½ΡΠΌ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ <br> (ΠΏΠ΅ΡΠ΅Π½ΠΎΡ ΡΠ΅ΠΊΡΡΠ° Π½Π° Π½ΠΎΠ²ΡΡ ΡΡΡΠΎΠΊΡ).Β
ΠΡΡΠΈΠ±ΡΡ ΡΠ΅Π³Π° —Β Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΡΠ΅Π³Π°, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π»ΠΈΡΡΡ Π½Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΠ΅Π³Π°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ΅ΠΊΡΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ,
— Π·Π΄Π΅ΡΡ style=»font-size: 200%; text-align: center;»Β ΡΠ²Π»ΡΠ΅ΡΡΡ Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ ΠΈ Π² Π½Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΎΠ½ ΡΠ΄Π΅Π»Π°Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ΅ΠΊΡΡΠ° ΠΠ°ΠΏΠΈΡΠ°ΡΡΡΡΒ Π² Π΄Π²Π° ΡΠ°Π·Π° ΠΊΡΡΠΏΠ½Π΅Π΅ ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡ Π΅Π³ΠΎ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ.
Π£ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ΅Π³Π° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π°ΡΡΠΈΠ±ΡΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ΄ΡΡ ΡΠ°Π·Π΄Π΅Π»Π΅Π½Ρ ΠΏΡΠΎΠ±Π΅Π»Π°ΠΌΠΈ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ°ΠΊ:
Π·Π΄Π΅ΡΡ Π΄Π²Π° Π°ΡΡΠΈΠ±ΡΡΠ° Ρ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ΅Π³Π° — classΒ ΠΈ style.
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ Π°ΡΡΠΈΠ±ΡΡΠ° —Β Π°ΡΡΠΈΠ±ΡΡ ΡΠ΅Π³Π° ΡΠΎΡΡΠΎΠΈΡ ΠΈΠ· Π΄Π²ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²: Π½Π°Π·Π²Π°Π½ΠΈΡ ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ.
Π¦ΠΈΡΡΠΎΠΉ 1 ΠΎΡΠΌΠ΅ΡΠ΅Π½Ρ Π½Π°Π·Π²Π°Π½ΠΈΡ Π°ΡΡΠΈΠ±ΡΡΠΎΠ², ΡΠΈΡΡΠΎΠΉ 2 — ΠΈΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΡ. ΠΠ½Π°ΡΠ΅Π½ΠΈΠΉ, ΠΊΠ°ΠΊ ΠΈ ΡΠ°ΠΌΠΈΡ
Π°ΡΡΠΈΠ±ΡΡΠΎΠ² Π² ΡΠ΅Π³Π΅, ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ, ΡΠ°Π·Π΄Π΅Π»ΡΡΡΡΡ ΠΎΠ½ΠΈ ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΎΠ±Π΅Π»ΠΎΠΌ.
Π Π°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ΅Π³ΠΎΠ²Β — Π² html ΠΊΠΎΠ΄Π΅ Π²ΡΠ΅ ΡΠ΅Π³ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΠΏΠΎ ΡΠ΅ΡΠΊΠΈΠΌ ΠΏΡΠ°Π²ΠΈΠ»Π°ΠΌ, ΠΊΠ°ΠΊ ΠΌΠ°ΡΡΠ΅ΡΠΊΠΈ, ΠΎΠ΄ΠΈΠ½ Π² Π΄ΡΡΠ³ΠΎΠΌ Π»ΠΈΠ±ΠΎ ΡΡΠ΄ΠΎΠΌ. Π£ Π²ΡΠ΅Ρ ΡΠ΅Π³ΠΎΠ² Π΅ΡΡΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΠΈ (ΡΠ΅Π³ΠΈ, Π²Π½ΡΡΡΠΈ ΠΊΠΎΡΠΎΡΡΡ ΠΎΠ½ΠΈ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ) ΠΈ Ρ ΠΌΠ½ΠΎΠ³ΠΈΡ Π΄Π΅ΡΠΈ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ΅Π³ <strong></strong> ΡΠ΅Π±Π΅Π½ΠΎΠΊ ΠΈ ΡΠ΅Π³Π° <h3></h3>, ΠΈ ΡΠ΅Π³Π° <div></div>, Π° ΠΎΠ½ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΠΈ:
ΠΡΠ°Π²ΠΈΠ»Π° ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½ΠΈΡ CSS ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ²
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΡ Π½Π° ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠΉ ΡΠ΅Π³ ΠΈΠ»ΠΈ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ html. ΠΠ°Π»Π΅Π΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°ΠΌΡΡ ΠΏΡΠΎΡΡΡΡ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ².
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ ΡΠ΅Π³Π° —Β Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ ΡΠΊΠ°Π·Π°ΡΡ span, div, img, h3Β Π² ΠΌΠ΅ΡΡΠ΅, Π³Π΄Π΅ Π½ΡΠΆΠ½ΠΎ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ, ΠΈ ΡΠ°ΠΊΠΎΠΉ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ Π±ΡΠ΄Π΅Ρ ΡΡΠΈΡΡΠ²Π°ΡΡ Π²ΡΠ΅ ΡΠ΅Π³ΠΈ Ρ ΡΠ°ΠΊΠΈΠΌ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠ±ΡΡΠ½ΠΎ ΡΡΠΎΠ³ΠΎ Ρ Π²Π°ΡΠ°Π΅Ρ Π΄Π»Ρ Π·Π°ΠΏΠΈΡΠΈ Π½Π°Π·Π²Π°Π½ΠΈΡ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΠΎ ΠΎΠ½ΠΎ ΠΏΡΠΈΡΡΡΡΡΠ²ΡΠ΅Ρ Π² ΡΠ΅Π³Π΅ h2, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π΅ ΠΏΠΎΠ²ΡΠΎΡΡΠ΅ΡΡΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ°ΠΊ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ Π½Π°ΡΡΡΠΎΠΉΠΊΠ° Π·Π°ΠΏΠΈΡΠΈ Π² ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΠΎΠ±ΡΡΠΈΡ «ΠΠΎΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ» Π½Π°Π·Π²Π°Π½ΠΈΡ ΡΡΡΠ°Π½ΠΈΡΡ:
ΠΡΡΠΈΠ±ΡΡΡ class ΠΈ idΒ — ΡΡΠΎ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠ΅ Π² Π½Π°ΡΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ Π°ΡΡΠΈΠ±ΡΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°ΡΡΡΡ Π½Π΅ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π²ΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅. ΠΡΠΈΠΌΠ΅Ρ:
ΠΠ΄Π΅ΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ Β class ΠΌΡ Π·Π°ΠΏΠΈΡΠ΅ΠΌ ΠΊΠ°ΠΊ .text ΠΈΠ»ΠΈ .wrapper2, ΡΠΎ Π΅ΡΡΡ ΠΏΡΠΎΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΡΠΎΡΠΊΡ ΠΏΠ΅ΡΠ΅Π΄ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ. ΠΡΠ»ΠΈ ΠΌΡ Ρ ΠΎΡΠΈΠΌ ΡΠΊΠ°Π·Π°ΡΡ, ΡΡΠΎ Π½Π°ΠΌ Π½ΡΠΆΠ΅Π½ ΡΠ΅Π³, Π³Π΄Π΅ Π² ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅ ΠΏΡΠΈΡΡΡΡΡΠ²ΡΡΡ ΠΎΠ±Π° Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΡΠΎ ΠΏΡΠΎΠΏΠΈΡΠ΅ΠΌ ΡΠ°ΠΊ .text.wrapper2 (Π±Π΅Π· ΠΏΡΠΎΠ±Π΅Π»Π°).
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ id Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠ²Π»ΡΡΡΡΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΌ ΠΏΠΎ ΠΏΡΠ°Π²ΠΈΠ»Π°ΠΌ html ΠΈ ΠΈΠΌΠ΅ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π²Π½ΡΡΡΠΈ ΡΡΠΎΠ³ΠΎ ΡΠ΅Π³Π°. ΠΡΠΎ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΎΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°ΡΡΡΡ ΡΠ°ΠΊ #section24.
ΠΠ°ΠΌ ΠΏΠΎΠ²Π΅Π·Π»ΠΎ, Π΅ΡΠ»ΠΈ Π² Π½ΡΠΆΠ½ΠΎΠΌ Π²Π°ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ Π΅ΡΡΡ id, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΡΠΎΠ³ΠΎ ΠΊΠ°ΠΊ ΡΠ°Π· Π±ΡΠ΄Π΅Ρ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π° Π½Π°ΡΡΡΠΎΠ΅ΠΊ ΡΠ±ΠΎΡΠ° Π΄Π°Π½Π½ΡΡ .
ΠΡΡΠ³ΠΈΠ΅ Π°ΡΡΠΈΠ±ΡΡΡ —Β Π²ΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ Π°ΡΡΠΈΠ±ΡΡΡ Π·Π°ΠΏΠΈΡΡΠ²Π°ΡΡΡΡ ΠΏΠΎ Π΅Π΄ΠΈΠ½ΠΎΠΌΡ ΠΏΡΠ°Π²ΠΈΠ»Ρ: Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΡΠ΅Π³Π°[Π°ΡΡΠΈΠ±ΡΡ ΠΈ Π΅Π³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅]. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠΊΠ°ΠΆΠ΅ΠΌ CSS ΡΠ΅Π»Π΅ΠΊΡΠΎΡ Π΄Π»Ρ ΡΠ΅Π³Π° Ρ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠΉ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΎΠΉ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π°ΡΡΠΈΠ±ΡΡ scr (ΡΡΡΠ»ΠΊΡ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ):
img[src=»//s. filesonload.ru/img/shadowbottom/1.png»]
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΠ΅Π³ΠΎΠ²Β — ΠΈΠ½ΠΎΠ³Π΄Π° Π°ΡΡΠΈΠ±ΡΡΡ Ρ Π½ΡΠΆΠ½ΠΎΠ³ΠΎ ΡΠ΅Π³Π° Π½Π΅ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½Ρ ΠΈΠ»ΠΈ Π²ΠΎΠ²ΡΠ΅ ΠΎΡΡΡΡΡΡΠ²ΡΡΡ. Π ΡΡΠΈΡ ΡΠ»ΡΡΠ°ΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π°ΡΡΠΈΠ±ΡΡΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»Π΅ΠΉ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ°. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΌΡ Ρ ΠΎΡΠΈΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΠ±ΠΎΡΠ° Π΄Π°Π½Π½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΈΠ· ΡΠ΅Π³Π° <strong>:
Π‘Π½Π°ΡΠ°Π»Π° ΠΏΡΠΎΠ±ΡΠ΅ΠΌ Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ, ΡΠΎ Π΅ΡΡΡ ΡΠ΅Π³ <span>. Π‘Π΅Π»Π΅ΠΊΡΠΎΡ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ: span strong,Β ΡΠΎ Π΅ΡΡΡ Π½Π°ΠΌ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π½Π°ΠΏΠΈΡΠ°ΡΡ Π½Π°Π·Π²Π°Π½ΠΈΡ ΡΠ΅Π³ΠΎΠ² Π² Π½ΡΠΆΠ½ΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅ ΠΈ ΡΠ°ΠΊΠΎΠΉ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ Π²ΡΠ±Π΅ΡΠ΅Ρ Π²ΡΠ΅ ΡΠ΅Π³ΠΈ <strong>, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π² ΡΠ΅Π³Π΅ <span>. ΠΠ½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΠΈ Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»Π΅ΠΉ <h3>: h3 strong.Β
ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ Π·Π°Π΄Π°ΡΡ ΠΈ Π±ΠΎΠ»Π΅Π΅ ΡΠ΅ΡΠΊΠΎΠ΅ ΡΡΠ»ΠΎΠ²ΠΈΠ΅, ΡΡΠΎ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π²ΡΠ΅ ΡΠ΅Π³ΠΈ <strong>, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ Π² ΡΠ΅Π³Π΅ <span>. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΡΠΈΠΌΠ²ΠΎΠ» >: span > strong.Β
ΠΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ΅ΠΏΠΎΡΠΊΡ ΠΈΠ· Π½Π°Π·Π²Π°Π½ΠΈΠΉ ΡΠ΅Π³ΠΎΠ² ΠΈ ΠΈΡ Π°ΡΡΠΈΠ±ΡΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π² ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΌ ΠΈΡΠΎΠ³Π΅ ΡΠΊΠ°ΠΆΡΡ Π½Π° Π½ΡΠΆΠ½ΡΠΉ ΡΠ΅Π³: h3. font-header span span strong.
ΠΠ΅ΡΠΊΠΎΠ»ΡΠΊΠΎ CSS ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ² Π΄Π»Ρ ΠΎΠ΄Π½ΠΎΠΉ Π·Π°Π΄Π°ΡΠΈ —Β Π±ΡΠ²Π°Π΅Ρ, ΡΡΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΡΡΠ°Π·Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ² Π΄Π»Ρ ΡΠ±ΠΎΡΠ° ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠΎΠ±ΡΡΠΈΡ ΠΈΠ»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π°. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π½Π΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ Π½Π°ΡΡΡΠΎΠ΅ΠΊ Π² ΠΠ°ΡΡΠ΅ΡΠ΅ ΡΠ±ΠΎΡΠ° Π΄Π°Π½Π½ΡΡ , Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ ΡΠ΅ΡΠ΅Π· Π·Π°ΠΏΡΡΡΡ Π²ΡΠ΅ Π½ΡΠΆΠ½ΡΠ΅ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ°ΠΊ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π½Π°ΡΡΡΠΎΠΉΠΊΠ° ΠΊΠ»ΠΈΠΊΠ° ΠΏΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π΅ΡΠ»ΠΈ ΠΏΠΎ ΡΠ°ΠΊΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°ΡΡ ΠΎΠ΄Π½ΠΎ ΠΈ ΡΠΎ ΠΆΠ΅, Π½ΠΎ ΠΈΠΌΠ΅ΡΡ ΡΠ°Π·Π½ΡΠ΅ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ:
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π²ΡΠ΅ ΠΏΡΠΎΡΡΠΎ: ΠΌΡ ΠΈΠΌΠ΅Π΅ΠΌ Π²Π²ΠΈΠ΄Ρ 2 ΡΠ΅Π³Π°, ΠΊΠ»ΠΈΠΊ Π½Π° ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ΄ΡΡ Π·Π°ΠΏΠΈΡΡΠ²Π°ΡΡΡΡ Π² Ρ ΡΠΎΠ½ΠΎΠ»ΠΎΠ³ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ, ΠΊΠ°ΠΊ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠ΅ ΡΠΎΠ±ΡΡΠΈΠ΅. ΠΠ΅ΡΠ²ΡΠΉ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ div.button input[type=»submit»] ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π½Π°ΠΌ Π½ΡΠΆΠ½Ρ Π²ΡΠ΅ ΡΠ΅Π³ΠΈ <input>, Π² ΠΊΠΎΡΠΎΡΡΡ Π΅ΡΡΡ Π°ΡΡΠΈΠ±ΡΡ type=»submit» ΠΈ ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ²Π»ΡΡΡΡΡ Π΄Π΅ΡΡΠΌΠΈ ΡΠ΅Π³Π° <div>, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π΅ΡΡΡ Π°ΡΡΠΈΠ±ΡΡ. Π ΡΠΏΡΠΎΡΠ΅Π½Π½ΠΎΠΌ Π²Π°ΡΠΈΠ°Π½ΡΠ΅ ΡΡΠΎ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ Π² html (Π½Π° ΡΠ°ΠΌΠΎΠΌ ΡΠ°ΠΉΡΠ΅, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ, Π±ΡΠ΄Π΅Ρ Π±ΠΎΠ»ΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ Π²ΠΎΠΊΡΡΠ³):Β
<divΒ class=»button»>
<input type=»submit»></input>
</div>
Π’ΡΡ ΠΆΠ΅, ΡΠ΅ΡΠ΅Π· Π·Π°ΠΏΡΡΡΡ, ΠΏΡΠΎΠΏΠΈΡΠ°Π½ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ: Π²ΡΠ΅ ΡΠ΅Π³ΠΈ <button> Ρ Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ.
ΠΡΠΎΠ²Π΅ΡΠΊΠ° ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΠΎΡΡΠΈ CSS ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ°
Π£Π½ΠΈΠΊΠ°Π»ΡΠ½ΠΎΡΡΡ CSS ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ° Π΄Π»Ρ Π½Π°Ρ ΠΎΡΠ΅Π½Ρ Π²Π°ΠΆΠ½Π°. ΠΡΠ»ΠΈ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ ΠΏΡΠΎΠΏΠΈΡΠ°Π½ Π½Π΅Π²Π΅ΡΠ½ΠΎ ΠΈ ΠΎΠ½ Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΌ, ΡΠΎ ΡΠ±ΠΎΡ Π΄Π°Π½Π½ΡΡ Π±ΡΠ΄Π΅Ρ Π½Π΅ ΡΠΎΡΠ½ΡΠΌ, Π° Π·Π½Π°ΡΠΈΡ — Π±Π΅ΡΠΏΠΎΠ»Π΅Π·Π½ΡΠΌ.Β
ΠΡΠΎΠ²Π΅ΡΠΈΡΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΠΎΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΡΠΌΠΎ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ ΡΠ΅ΡΠ΅Π· ΠΏΠΎΠΈΡΠΊ Π² ΠΏΠ°Π½Π΅Π»Π΅ Elements. ΠΠ°ΠΆΠΌΠΈΡΠ΅ ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠ΅ ΠΊΠ»Π°Π²ΠΈΡ Ctrl + F, ΠΈ Π²Π²Π΅Π΄ΠΈΡΠ΅ Π² ΡΡΡΠΎΠΊΠ΅ ΠΏΠΎΠΈΡΠΊΠ° Π½Π°ΠΉΠ΄Π΅Π½Π½ΡΠΉ Π²Π°ΠΌΠΈ ΡΠ°Π½Π΅Π΅ CSS ΡΠ΅Π»Π΅ΠΊΡΠΎΡ. ΠΡΠ°ΡΠ·Π΅Ρ ΡΠ°ΠΌ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΈΡ ΡΠ΅Π³, ΠΏΡΡΡ ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΌΡ Π²Ρ ΡΠΊΠ°Π·Π°Π»ΠΈ ΠΈ Π½Π°ΠΏΠΈΡΠ΅Ρ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠ°ΠΊΠΈΡ ΡΠΎΠ²ΠΏΠ°Π΄Π΅Π½ΠΈΠΉ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅.
Π Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠ»ΡΡΠ°Π΅Π², ΡΠΎΠ²ΠΏΠ°Π΄Π΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½ΠΎ (Π±ΡΠ΄Π΅Ρ Π½Π°ΠΏΠΈΡΠ°Π½ΠΎ — 1/1). ΠΠ½ΠΎΠ³Π΄Π° ΡΡΠ΅Π±ΡΠ΅ΡΡΡ, ΡΡΠΎΠ±Ρ ΡΠΎΠ²ΠΏΠ°Π΄Π΅Π½ΠΈΠΉ Π±ΡΠ»ΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ, Π½ΠΎ Π²ΡΠ΅ ΠΎΠ½ΠΈ ΡΠΊΠ°Π·ΡΠ²Π°Π»ΠΈ Π½Π° Π½ΡΠΆΠ½ΡΠ΅ Π²Π°ΠΌ ΡΠ΅Π³ΠΈ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ «Π’ΠΎΠ²Π°ΡΡ Π² ΠΊΠΎΡΠ·ΠΈΠ½Π΅» ΠΏΠΎΠ΄ΡΡΠ³ΠΈΠ²Π°Π΅Ρ Π½Π°Π·Π²Π°Π½ΠΈΡ ΡΠΎΠ²Π°ΡΠΎΠ² ΠΈΠ· ΡΠΏΠΈΡΠΊΠ° ΡΠΎΠ²Π°ΡΠΎΠ² Π² ΡΠ°ΠΌΠΎΠΉ ΠΊΠΎΡΠ·ΠΈΠ½Π΅. ΠΡΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠ΅ ΡΠ°ΠΊΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠΎΠ²ΠΏΠ°Π΄Π΅Π½ΠΈΠΉ ΠΏΠΎ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ°ΠΌ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠ°Π²Π½ΡΡΡΡΡ ΡΠ΅Π°Π»ΡΠ½ΠΎΠΌΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Ρ ΡΠΎΠ²Π°ΡΠΎΠ² Π² ΠΊΠΎΡΠ·ΠΈΠ½Π΅ Π½Π° Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ.
ΠΠ°ΠΊ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ, ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ Π²Ρ Π½Π°ΡΡΡΠΎΠΈΠ»ΠΈ ΡΠ±ΠΎΡ Π΄Π°Π½Π½ΡΡ Π² Carrot quest, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π² ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅. ΠΡΠΈ Π»ΡΠ±ΡΡ ΡΠ»ΠΎΠΆΠ½ΠΎΡΡΡΡ — ΠΏΠΈΡΠΈΡΠ΅ Π½Π°ΠΌ Π² ΡΠ°Ρ, Π±ΡΠ΄Π΅ΠΌ ΡΠ°Π΄Ρ ΠΏΠΎΠΌΠΎΡΡ.
ΠΠ΅ΡΠΎΠ΄Ρ ΠΈ ΡΠ΅ΡΡΡΡΡ β Smashing Magazine
- Π§ΡΠ΅Π½ΠΈΠ΅ Π·Π° 12 ΠΌΠΈΠ½ΡΡ
- ΠΠΎΠ΄ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, ΠΠ½ΠΎΠΏΠΊΠΈ, CSS, Π’Π΅Ρ Π½ΠΈΠΊΠΈ, Essentials
- ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ Π² Twitter, LinkedIn
ΠΠ± Π°Π²ΡΠΎΡΠ΅
Π―Π½ΠΊΠΎ ΠΠΎΠ²Π°Π½ΠΎΠ²ΠΈΡ β Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°, ΠΈΠ½ΠΆΠ΅Π½Π΅Ρ-ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΡ, Π±Π»ΠΎΠ³Π΅Ρ, ΡΠΏΠΈΠΊΠ΅Ρ ΠΈ Ρ ΡΠ΄ΠΎΠΆΠ½ΠΈΠΊ. Π ΡΠ²ΠΎΠ±ΠΎΠ΄Π½ΠΎΠ΅ Π²ΡΠ΅ΠΌΡ ΠΎΠ½ ΠΏΠΈΡΠ΅Ρ ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΡ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°Ρ Π² ΡΠ²ΠΎΠ΅ΠΌ Π±Π»ΠΎΠ³Π΅β¦ ΠΠΎΠ»ΡΡΠ΅ ΠΎ JankoΒ β¬
ΠΠ½ΠΎΠΏΠΊΠΈ, Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΠΈΡ Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΡΠ²Π»ΡΡΡΡΡ Π²Π°ΠΆΠ½ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. ΠΠ½ΠΈ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΉ ΡΠΎΡΠΊΠΎΠΉ Π²Π΅Π±-ΡΠΎΡΠΌΡ ΠΈΠ»ΠΈ ΠΏΡΠΈΠ·ΡΠ²ΠΎΠΌ ΠΊ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ. Π£ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠΎΠ² Π΅ΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡΠΈΡΠΈΠ½ Π΄Π»Ρ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ, Π² ΡΠΎΠΌ ΡΠΈΡΠ»Π΅ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈΡ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΌΠΈ ΠΈ ΠΏΠΎΠ²ΡΡΠΈΡΡ ΡΠ΄ΠΎΠ±ΡΡΠ²ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ. ΠΠ΄Π½Π°ΠΊΠΎ ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½ΡΡ ΠΏΡΠΈΡΠΈΠ½ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎ, ΡΡΠΎ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΠΎΠ³ΡΡ Π»Π΅Π³ΠΊΠΎ ΠΏΡΠΎΠΏΡΡΡΠΈΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ , ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΎΠ½ΠΈ ΡΠ°ΡΡΠΎ ΠΏΠΎΡ ΠΎΠΆΠΈ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² ΠΈΡ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΠ΅. ΠΠ΄Π΅ΡΡ ΠΌΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅ΠΌ Π²Π°ΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ΅Ρ Π½ΠΈΠΊ ΠΈ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΌΠΎΠ³ΡΡ Π²Π°ΠΌ Π½Π°ΡΡΠΈΡΡΡΡ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠ΄ΠΎΠ±ΡΡΠ²ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ. ΠΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΠΌΡ ΠΎΠ±ΡΡΡΠ½ΠΈΠΌ, ΠΊΠ°ΠΊ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΡΠΎΡΡΠ½ΠΈΠΌ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΠΎΠ΅ Π·Π°Π±Π»ΡΠΆΠ΄Π΅Π½ΠΈΠ΅: ΠΊΠ½ΠΎΠΏΠΊΠΈ β ΡΡΠΎ Π½Π΅ ΡΡΡΠ»ΠΊΠΈ. ΠΡΠ½ΠΎΠ²Π½Π°Ρ ΡΠ΅Π»Ρ ΡΡΡΠ»ΠΊΠΈ β ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΡΠ°Π½ΠΈΡΠ°ΠΌΠΈ ΠΈ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΡΠΌΠΈ, ΡΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΎΡΠΏΡΠ°Π²Π»ΡΡΡ ΡΠΎΡΠΌΡ).ΠΠ½ΠΎΠΏΠΊΠΈ, Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΠΈΡ Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΡΠ²Π»ΡΡΡΡΡ Π²Π°ΠΆΠ½ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. ΠΠ½ΠΈ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΉ ΡΠΎΡΠΊΠΎΠΉ Π²Π΅Π±-ΡΠΎΡΠΌΡ ΠΈΠ»ΠΈ ΠΏΡΠΈΠ·ΡΠ²ΠΎΠΌ ΠΊ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ. Π£ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠΎΠ² Π΅ΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡΠΈΡΠΈΠ½ Π΄Π»Ρ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ, Π² ΡΠΎΠΌ ΡΠΈΡΠ»Π΅ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈΡ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΌΠΈ ΠΈ ΠΏΠΎΠ²ΡΡΠΈΡΡ ΡΠ΄ΠΎΠ±ΡΡΠ²ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ. ΠΠ΄Π½Π°ΠΊΠΎ ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½ΡΡ ΠΏΡΠΈΡΠΈΠ½ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎ, ΡΡΠΎ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΠΎΠ³ΡΡ Π»Π΅Π³ΠΊΠΎ ΠΏΡΠΎΠΏΡΡΡΠΈΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ , ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΎΠ½ΠΈ ΡΠ°ΡΡΠΎ ΠΏΠΎΡ ΠΎΠΆΠΈ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² ΠΈΡ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΠ΅. ΠΠ΄Π΅ΡΡ ΠΌΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅ΠΌ Π²Π°ΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ΅Ρ Π½ΠΈΠΊ ΠΈ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΌΠΎΠ³ΡΡ Π²Π°ΠΌ Π½Π°ΡΡΠΈΡΡΡΡ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠ΄ΠΎΠ±ΡΡΠ²ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Ρ Π·Π°Ρ ΠΎΡΠΈΡΠ΅ Π²Π·Π³Π»ΡΠ½ΡΡΡ Π½Π° ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΡΠ°ΡΡΠΈ ΠΏΠΎ ΡΠ΅ΠΌΠ΅:
- ΠΠ°ΠΆΠ°ΡΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS3
- ΠΡΠ²ΠΎΠ΅Π½ΠΈΠ΅ CSS, ΡΠ°ΡΡΡ 1: ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π΄ΠΈΠ·Π°ΠΉΠ½Π°
- Π Π°Π·ΡΠ°Π±ΠΎΡΠΊΠ° ΡΡΡΠ»ΠΎΠΊ Β«ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅Β» ΠΈ Β«ΠΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΡ ΡΡΠ΅Π½ΠΈΠ΅Β»
- ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°: ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΈ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΠΈ
ΠΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΠΌΡ ΠΎΠ±ΡΡΡΠ½ΠΈΠΌ, ΠΊΠ°ΠΊ ΠΎΡΠΎΡΠΌΠ»ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΡΠΎΡΡΠ½ΠΈΠΌ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΠΎΠ΅ Π·Π°Π±Π»ΡΠΆΠ΄Π΅Π½ΠΈΠ΅: ΠΊΠ½ΠΎΠΏΠΊΠΈ β ΡΡΠΎ Π½Π΅ ΡΡΡΠ»ΠΊΠΈ. ΠΡΠ½ΠΎΠ²Π½Π°Ρ ΡΠ΅Π»Ρ ΡΡΡΠ»ΠΊΠΈ β ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΡΠ°Π½ΠΈΡΠ°ΠΌΠΈ ΠΈ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΡΠΌΠΈ, ΡΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΎΡΠΏΡΠ°Π²Π»ΡΡΡ ΡΠΎΡΠΌΡ).
ΠΠΎΠ»ΡΡΠ΅ ΠΏΠΎΡΠ»Π΅ ΠΏΡΡΠΆΠΊΠ°! ΠΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΡ ΡΡΠ΅Π½ΠΈΠ΅ Π½ΠΈΠΆΠ΅Β βΠ ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· ΡΠ²ΠΎΠΈΡ ΡΡΠ°ΡΠ΅ΠΉ Π―ΠΊΠΎΠ± ΠΠΈΠ»ΡΡΠ΅Π½ ΠΏΠΈΡΠ΅Ρ ΠΎ ΠΊΠΎΠΌΠ°Π½Π΄Π½ΡΡ ΡΡΡΠ»ΠΊΠ°Ρ , ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ ΡΠΎΠ±ΠΎΠΉ ΡΠΌΠ΅ΡΡ ΡΡΡΠ»ΠΎΠΊ ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ. ΠΠΎ ΠΎΠ½ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π» ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΠ²Π°ΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Π½ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠΌΠΈ Ρ Π½Π΅Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌΠΈ ΠΏΠΎΡΠ»Π΅Π΄ΡΡΠ²ΠΈΡΠΌΠΈ ΠΈ Π²ΡΠΎΡΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΡΠΌΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π°ΠΌΠΈ. Π§ΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΎ ΠΏΠ΅ΡΠ²ΠΈΡΠ½ΡΡ ΠΈ Π²ΡΠΎΡΠΈΡΠ½ΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Π°Ρ (ΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΡ ), ΠΎΠ·Π½Π°ΠΊΠΎΠΌΡΡΠ΅ΡΡ Ρ ΠΏΠ΅ΡΠ²ΠΈΡΠ½ΡΠΌΠΈ ΠΈ Π²ΡΠΎΡΠΈΡΠ½ΡΠΌΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠΌΠΈ Π² Π²Π΅Π±-ΡΠΎΡΠΌΠ°Ρ ΠΡΠΊΠ° ΠΡΠΎΠ±Π»Π΅Π²ΡΠΊΠΈ. Π§ΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΎ ΡΠ°Π·Π»ΠΈΡΠΈΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΡΠ»ΠΊΠ°ΠΌΠΈ ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ, ΠΏΡΠΎΡΠΈΡΠ°ΠΉΡΠ΅ Β«Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΠΎΠ»Π΅Π·Π½ΡΡ ΡΡΡΠ»ΠΎΠΊ ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π° UXBoothΒ».
ΠΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΡΠΈΠ»ΠΈ
Π‘Π°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΡΡΠ»ΠΊΠΈ ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ β Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ²Π΅Ρ ΡΠΎΠ½Π°, ΠΎΡΡΡΡΠΏΡ ΠΈ Π³ΡΠ°Π½ΠΈΡΡ. ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Ρ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΊΠΎΠ΄Π° Π΄Π»Ρ ΡΡΡΠ»ΠΊΠΈ, ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΈ Π²Π²ΠΎΠ΄Π°
(Β«ΠΡΠΏΡΠ°Π²ΠΈΡΡΒ»).
ΠΠ±ΡΠ°Π·Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ
. button { ΠΎΡΡΡΡΠΏ: 5px; ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: #dcdcdc; Π³ΡΠ°Π½ΠΈΡΠ°: 1px ΡΠΏΠ»ΠΎΡΠ½Π°Ρ #666; ΡΠ²Π΅Ρ:#000; ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅: Π½Π΅Ρ; }
ΠΡΠΎΡ ΠΏΡΠΎΡΡΠΎΠΉ ΠΊΠΎΠ΄ ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡΡΠ΅Ρ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ°Π·Π»ΠΈΡΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΡΠ»ΠΊΠ°ΠΌΠΈ ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ. Π Π²ΠΎΡ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΊΠΎΠ΄Π° Π²ΡΡΠ΅:
ΠΠ°ΠΆΠ½ΠΎ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ ΡΡΠΈ ΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΏΠΎ-ΡΠ°Π·Π½ΠΎΠΌΡ Ρ ΠΎΠ΄Π½ΠΈΠΌ ΠΈ ΡΠ΅ΠΌ ΠΆΠ΅ CSS . Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΡΠ°ΡΠ΅Π»ΡΠ½ΠΎ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΡΡΠΎΠ±Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°Π½Π½ΠΎΡΡΡ Π½Π° Π²Π°ΡΠ΅ΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅ ΠΈΠ»ΠΈ Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ.
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ ΠΌΠΎΠΆΠ΅Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π±ΠΎΠ»Π΅Π΅ Π·Π°ΠΌΠ΅ΡΠ½ΡΠΌΠΈ. ΠΠ½ΠΎΠ³Π΄Π° ΡΠ°ΠΌΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΡΠ½ΠΎ ΡΠΎΠΎΠ±ΡΠ°Π΅Ρ ΠΎ Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ ; Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ Π·Π½Π°ΡΠΎΠΊ Π»ΡΠΏΡ Π΄Π»Ρ ΠΏΠΎΠΈΡΠΊΠ° ΠΈΠ»ΠΈ Π·Π½Π°ΡΠΎΠΊ Π΄ΠΈΡΠΊΠ΅ΡΡ Π΄Π»Ρ ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΡ. Π‘Π°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ΅ β ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π° Π·Π°ΡΠ΅ΠΌ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ Π΅Π³ΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ. ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Ρ Π½Π°ΡΠΈ ΠΏΡΠΈΠΌΠ΅ΡΡ ΡΠΎ Π·Π½Π°ΡΠΊΠΎΠΌ Π³Π°Π»ΠΎΡΠΊΠΈ.
.ΠΊΠ½ΠΎΠΏΠΊΠ° { ΠΎΡΡΡΡΠΏ: 5px 5px 5px 25px; Π³ΡΠ°Π½ΠΈΡΠ°: 1px ΡΠΏΠ»ΠΎΡΠ½Π°Ρ #666; ΡΠ²Π΅Ρ:#000; ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅: Π½Π΅Ρ; ΡΠΎΠ½: #dcdcdc url(icon. png) Π±Π΅Π· ΠΏΠΎΠ²ΡΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ 5px ΠΏΠΎ ΡΠ΅Π½ΡΡΡ; }
Π‘ΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ
ΠΠΎΠΌΠΈΠΌΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ ΡΡΡΠ»ΠΊΠΈ ΠΌΠΎΠ³ΡΡ ΠΈΠΌΠ΅ΡΡ Π΄Π²Π° Π΄ΡΡΠ³ΠΈΡ
ΡΠΎΡΡΠΎΡΠ½ΠΈΡ: Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΈ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ΅ (Ρ.Π΅. Π½Π°ΠΆΠ°ΡΠΎΠ΅). ΠΠ°ΠΆΠ½ΠΎ, ΡΡΠΎΠ±Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π²ΡΠ³Π»ΡΠ΄Π΅Π»ΠΈ ΠΏΠΎ-ΡΠ°Π·Π½ΠΎΠΌΡ Π² ΡΠ°Π·Π½ΡΡ
ΡΠΎΡΡΠΎΡΠ½ΠΈΡΡ
, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΏΠΎΠ½ΠΈΠΌΠ°Π»ΠΈ, ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ. ΠΡΠ±ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ, Π²ΡΠ·Π²Π°Π² :hover
ΠΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ CSS.
Π°: Π½Π°Π²Π΅Π΄ΠΈΡΠ΅ { ΡΠ²Π΅Ρ:#f00; }
Π₯ΠΎΡΡ ΡΡΠΎ ΠΎΡΠ΅Π½Ρ Π²Π°ΠΆΠ½ΠΎ, Π°ΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΡΠ΅Π΄ΠΊΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π½Π° Π²Π΅Π±-ΡΠ°ΠΉΡΠ°Ρ . ΠΠΎΠΊΠ°Π·ΡΠ²Π°Ρ ΡΡΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅, Π²Ρ Π³Π°ΡΠ°Π½ΡΠΈΡΡΠ΅ΡΠ΅, ΡΡΠΎ Π²Π°ΡΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠ΅Π°Π³ΠΈΡΡΡΡ, ΠΈ ΠΎΡΠΏΡΠ°Π²Π»ΡΠ΅ΡΠ΅ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠΈΠ³Π½Π°Π» ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ° Π±ΡΠ»Π° Π½Π°ΠΆΠ°ΡΠ°. ΠΡΠΎ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ ΠΈΠ·ΠΎΠΌΠΎΡΡΠ½ΡΠΌ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠ΅ΠΌ ΠΈ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ Β«ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ΠΌ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠΉ ΡΠΎΡΠΌΡ ΠΈ ΡΠΎΠΏΠΎΡΡΠ°Π²ΠΈΠΌΡΠΌ ΡΠ΅Π»ΠΎΠ²Π΅ΡΠ΅ΡΠΊΠΈΠΌ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌΒ» (ΠΡΠΊ ΠΡΠΎΠ±Π»Π΅Π²ΡΠΊΠΈ, Site-Seeing). Π ΡΡΠ°ΡΡΠ΅ Β«Π‘ΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π½Π°ΠΆΠ°ΡΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSSΒ» ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΡΡ Π²Π°ΠΆΠ½ΠΎΡΡΡ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ.
Π°: Π°ΠΊΡΠΈΠ²Π½ΡΠΉ { ΡΠ²Π΅Ρ:#f00; }
ΠΡΡΡ Π΅ΡΠ΅ ΠΎΠ΄Π½ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΠΈΠ΄Π½ΠΎ ΠΏΡΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ: ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΡΠΎΠΊΡΡΠ°. ΠΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΡ ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»Π°Π²ΠΈΡΠΈ Tab, Π΅Π΅ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡΡ, ΠΆΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΠΎ, ΡΡΠΎΠ±Ρ ΠΎΠ½ Π²ΡΠ³Π»ΡΠ΄Π΅Π» ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ.
Π°: ΡΠΎΠΊΡΡ { ΡΠ²Π΅Ρ:#f00; }
Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΡ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ°Ρ ΠΏΠΎΠΊΠ°Π·Π°Π½ ΠΎΠ±ΡΠΈΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ ΠΊΠ½ΠΎΠΏΠΎΠΊ. Π‘ΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ»Π΅Π΅, ΡΠ΅ΠΌ ΠΎΠ±ΡΡΠ½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅, Π° Π°ΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΠΈΠ½Π²Π΅ΡΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ, ΠΈΠΌΠΈΡΠΈΡΡΡΡΠΈΠΉ Π½Π°ΠΆΠ°ΡΠΈΠ΅. Π₯ΠΎΡΡ Π²Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΠ²Π°ΡΡ ΡΠ΅Π±Ρ ΡΡΠΈΠΌ ΡΡΠΈΠ»Π΅ΠΌ, ΡΡΠΎ Ρ ΠΎΡΠΎΡΠ΅Π΅ ΠΌΠ΅ΡΡΠΎ Π΄Π»Ρ Π½Π°ΡΠ°Π»Π°.
ΠΠ°ΠΌ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΡΡ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΠΎΠ±ΡΠ°ΡΠ°ΡΡΡΡ ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ ΠΊΠΎΠ½ΡΡΡΠ° Π΄Π»Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ :active
ΠΈ :focus
. ΠΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ΅ ΠΎΠ±ΡΠ°ΡΠ΅Π½ΠΈΠ΅ Ρ ΡΡΠΈΠΌ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ Π²Π°ΠΆΠ½ΠΎ Π΄Π»Ρ ΡΠ΄ΠΎΠ±ΡΡΠ²Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΡ
ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ ΠΌΡΡΡ. Π ΡΡΠ°ΡΡΠ΅ Better CSS Outline Suppression ΠΠ°ΡΡΠΈΠΊ ΠΠ°ΡΠΊΠ΅ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ ΡΡΡΠ»ΠΊΠΈ Π²Π΅Π΄ΡΡ ΡΠ΅Π±Ρ Π² ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡΡ
ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ, ΠΈ ΠΎΠ±ΡΡΡΠ½ΡΠ΅Ρ, ΠΏΠΎΡΠ΅ΠΌΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΡΡΡΠΊΡΡΡΡ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π²ΡΠ·ΡΠ²Π°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ΠΌ :active
.
Π‘ΠΈΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠ° Β«ΠΡΠΏΠΈΡΡ ΡΠ΅ΠΉΡΠ°ΡΒ» Π½Π° ΡΠ°ΠΉΡΠ΅ Apple. com ΠΈΠΌΠ΅Π΅Ρ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π±ΠΎΠ»Π΅Π΅ ΡΠ²Π΅ΡΠ»ΡΠΉ ΡΠΎΠ½ Π΄Π»Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈ ΡΡΠΈΠ»Ρ Π²ΡΡΠ°Π²ΠΊΠΈ Π΄Π»Ρ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ. ΠΠ°ΠΆΠ΅ ΠΎΡΠ½ΠΎΠ²Π½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Π½Π° ΡΠ°ΠΉΡΠ΅ Apple ΡΠ΅Π°Π»ΠΈΠ·ΡΠ΅Ρ Π²ΡΠ΅ ΡΡΠΈ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ.
Π₯ΠΎΡΡ ΡΡΠ° ΠΏΡΠΈΡΡΠ΄Π»ΠΈΠ²Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Π½Π΅ ΡΠ΅Π°Π»ΠΈΠ·ΡΠ΅Ρ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅, ΠΎΠ½Π° ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΠΈΡΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ Π·Π°ΡΡΡ Π°Π½ΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ.
ΠΠ½ΠΎΠΏΠΊΠ° Β«ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅Β» Π½Π° UX Booth ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π·Π΅Π»Π΅Π½ΠΎΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π½Π° ΠΎΠ΄ΠΈΠ½ ΠΏΠΈΠΊΡΠ΅Π»Ρ Π²Π½ΠΈΠ· Π² Π°ΠΊΡΠΈΠ²Π½ΠΎΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ, ΡΡΠΎ ΠΈΠΌΠΈΡΠΈΡΡΠ΅Ρ ΡΡΡΠ΅ΠΊΡ Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
ΠΠΎΠ»Π΅Π·Π½ΠΎΠ΅ ΡΡΠ΅Π½ΠΈΠ΅
Π ΡΡΠ°ΡΡΠ΅ ΠΠΎΠ²ΠΎΠ΅ ΠΎΡΠΊΡΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Button ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ ΡΠ°Π·Π»ΠΈΡΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΡΠ»ΠΊΠ°ΠΌΠΈ ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ ΠΈ ΠΎΠ±ΡΡΡΠ½ΡΠ΅ΡΡΡ, ΠΊΠ°ΠΊ Π»Π΅Π³ΠΊΠΎ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
Π‘ΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΡΠΎΡΠΌΡ ΠΎΡ Π²Π°ΡΡΠ²Π°Π΅Ρ ΠΎΡΠ½ΠΎΠ²Ρ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΡΠΎ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ².
ΠΡΠ°ΡΠΈΠ²ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS Ρ Π½Π°Π±ΠΎΡΠΎΠΌ Π·Π½Π°ΡΠΊΠΎΠ² ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΠΊΠ°ΠΊ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. Π₯ΠΎΡΡ ΠΎΠ½ΠΈ ΠΈ Π½Π΅ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΡΡΡΡ, ΡΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Ρ ΠΎΡΠΎΡΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
Recreating the Button β ΠΎΡΠ΅Π½Ρ Ρ ΠΎΡΠΎΡΠ°Ρ ΡΡΠ°ΡΡΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΎΠ±ΡΡΡΠ½ΡΠ΅ΡΡΡ, ΠΊΠ°ΠΊ Google ΠΏΡΠΈΡΠ΅Π» ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π½Π° Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠ²ΠΎΠΈΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ².
ΠΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ PNG ΠΈ ΡΠ²Π΅ΡΠΎΠ² ΡΠΎΠ½Π° ΠΎΠ±ΡΡΡΠ½ΡΠ΅Ρ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΡΡΡΡΠ°ΡΡΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ. Π₯ΠΎΡΡ ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ jQuery, ΠΎΠ½ ΠΈΠ·ΡΡΠ½ΠΎ Π΄Π΅Π³ΡΠ°Π΄ΠΈΡΡΠ΅Ρ, Π΅ΡΠ»ΠΈ JavaScript ΠΎΡΠΊΠ»ΡΡΠ΅Π½.
Π Π°Π·Π΄Π²ΠΈΠΆΠ½ΡΠ΅ Π΄Π²Π΅ΡΠΈ: Π³ΠΈΠ±ΠΊΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΡΠΈ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΡΠΈΡΡΠ²Π°ΡΡ ΠΎΠ΄Π½ΠΎ Π²Π°ΠΆΠ½ΠΎΠ΅ ΡΠΎΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΠΎΡΡΡ. ΠΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΠΎΡΡΡ Π² ΡΡΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ, ΡΡΠΎΠ±Ρ ΠΎΠ½Π° ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°Π»Π° ΡΠ΅ΠΊΡΡΡ, ΠΈ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡΠ»ΠΈ Π²Ρ Π½Π΅ Ρ ΠΎΡΠΈΡΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠ°Π·Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΡΠ°ΡΡΠΌΠΎΡΡΠΈΡΠ΅ ΡΠ΅Ρ Π½ΠΈΠΊΡ Β«ΡΠ°Π·Π΄Π²ΠΈΠΆΠ½ΡΡ Π΄Π²Π΅ΡΠ΅ΠΉΒ». ΠΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΡΠ΅, Π½Π°ΡΡΡΠ΅Π½Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
ΠΡΠΈΠ½ΡΠΈΠΏ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ Π΄Π²Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΊΠΎΠ»ΡΠ·ΡΡ Π΄ΡΡΠ³ ΠΏΠΎ Π΄ΡΡΠ³Ρ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠ΅ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡΡΡ Π΄ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ . ΠΠ±ΡΡΠ½ΠΎ ΡΡΠΎ Π΄Π΅Π»Π°Π΅ΡΡΡ ΠΏΡΡΠ΅ΠΌ Π²Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° span Π² ΡΡΡΠ»ΠΊΡ. ΠΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ Π²ΡΡΠ΅, Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π΅ΡΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠ΅Π΅ ΡΠΎΠ·Π΄Π°ΡΡ ΡΡΡΠ΅ΠΊΡ ΡΠΊΠΎΠ»ΡΠΆΠ΅Π½ΠΈΡ. ΠΠ²Π° ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΡ Π½ΠΈΠΆΠ΅ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ° ΠΊΠΎΠ΄Π° ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ ΡΡΡΡΠΊΡΡΡΡ ΠΈ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ°.
Π‘ΡΠ°Π½Π΄Π°ΡΡΠ½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° ΡΠ°Π·Π΄Π²ΠΈΠΆΠ½ΡΡ Π΄Π²Π΅ΡΠ΅ΠΉ
a { ΡΠΎΠ½: ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠΉ URL('button_right.png') Π±Π΅Π· ΠΏΠΎΠ²ΡΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π²Π²Π΅ΡΡ Ρ ΡΠΏΡΠ°Π²Π°; Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π±Π»ΠΎΠΊ; ΠΏΠ»ΡΡΡ Π½Π°Π»Π΅Π²ΠΎ; /* ΠΎΡΡΡΡΠΏΡ, ΠΏΠΎΠ»Ρ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΡΠΈΠ»ΠΈ Π·Π΄Π΅ΡΡ */ } ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΠΊ { ΡΠΎΠ½: ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠΉ URL('button_left.png') Π±Π΅Π· ΠΏΠΎΠ²ΡΠΎΡΠΎΠ²; Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π±Π»ΠΎΠΊ; /* ΠΎΡΡΡΡΠΏΡ, ΠΏΠΎΠ»Ρ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΡΠΈΠ»ΠΈ Π·Π΄Π΅ΡΡ */ }
ΠΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° ΡΡΠΎΠ³ΠΎ ΠΌΠ΅ΡΠΎΠ΄Π° Π·Π°ΠΊΠ»ΡΡΠ°ΡΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΎΠ½:
- ΠΡΠΎ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ Π½Π°ΡΡΡΠ΅Π½Π½ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ;
- ΠΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΡ, Π³ΠΈΠ±ΠΊΠΎΡΡΡ ΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΠΎΡΡΡ;
- ΠΠ΅ ΡΡΠ΅Π±ΡΠ΅Ρ JavaScript;
- Π Π°Π±ΠΎΡΠ°Π΅Ρ Π²ΠΎ Π²ΡΠ΅Ρ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ .
ΠΠΎΠ»Π΅Π·Π½ΠΎΠ΅ ΡΡΠ΅Π½ΠΈΠ΅
Π‘ΡΠ°ΡΡΡ Β«Π Π°Π·Π΄Π²ΠΈΠΆΠ½ΡΠ΅ Π΄Π²Π΅ΡΠΈ CSSΒ» Π½Π° A List Apart (ΡΠ°ΡΡΡ 1 ΠΈ ΡΠ°ΡΡΡ 2) ΠΏΠΎΡΠ²ΡΡΠ΅Π½Π° ΠΎΡΠ½ΠΎΠ²Π°ΠΌ ΡΡΠΎΠΉ ΡΠ΅Ρ Π½ΠΈΠΊΠΈ. Π₯ΠΎΡΡ ΡΡΠΈ ΡΡΠ°ΡΡΠΈ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΡΡΠ°ΡΠ΅Π»ΠΈ, ΠΈΡ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ.
Π’Π°ΠΊΠΆΠ΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΡΡΠ°ΡΠ΅Π»Π°, Β«Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΡΠ»Π΅Π½Π΅ΠΏΡΠΎΠ±ΠΈΠ²Π°Π΅ΠΌΡΡ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΡΡΡΠ»ΠΎΠΊ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSSΒ» β ΠΎΡΠ»ΠΈΡΠ½Π°Ρ ΡΡΠ°ΡΡΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΏΡΠ»Π΅Π½Π΅ΠΏΡΠΎΠ±ΠΈΠ²Π°Π΅ΠΌΡΠ΅, ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΠΌΡΠ΅ ΠΏΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ, ΡΠΆΠ°ΡΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ. Π’Π°ΠΊΠΆΠ΅ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½Π° ΠΊ ΠΏΡΠΎΡΡΠ΅Π½ΠΈΡ.
Filament Group ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΠΎΡΠ»ΠΈΡΠ½ΡΡ ΡΡΠ°ΡΠ΅ΠΉ ΠΈ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ². ΠΠ³ΠΎ Π²ΡΠΎΡΠ°Ρ ΡΡΠ°ΡΡΡ ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ°Ρ CSS, Β«Π‘ΡΠΈΠ»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ°Π·Π΄Π²ΠΈΠΆΠ½ΡΡ Π΄Π²Π΅ΡΠ΅ΠΉ CSSΒ», ΠΎΠ±ΡΡΡΠ½ΡΠ΅Ρ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΡΡ ΠΌΠ΅ΡΠΎΠ΄Ρ. Π₯ΠΎΡΡ ΠΎΠ½ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅, Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ ΡΠ°ΡΡΠΈΡΠΈΡΡ.
ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π² ΡΡΠΈΠ»Π΅ Wii, Π² ΡΡΠ°ΡΡΠ΅ Β«ΠΡΠΎΡΡΡΠ΅ ΠΊΡΡΠ³Π»ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ CSS (ΠΊΠ½ΠΎΠΏΠΊΠΈ Wii)Β» ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ Π²ΡΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠ΅ ΡΠ΅ΡΡΡΡΡ ΠΈ ΠΏΠΎΡΡΠ½Π΅Π½ΠΈΡ ΠΏΠΎ ΠΈΡ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ.
ΠΠ±ΡΡΠ½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΠ΅Ρ Π½ΠΈΠΊΡ ΡΠ°Π·Π΄Π²ΠΈΠΆΠ½ΡΡ Π΄Π²Π΅ΡΠ΅ΠΉ CSS β ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π²Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ΄Π½Π°ΠΊΠΎ ΡΡΠ°ΡΡΡ CSS Sliding Door Using Only One Image ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±ΠΈΡΡΡΡ ΡΠΎΠ³ΠΎ ΠΆΠ΅ ΡΡΡΠ΅ΠΊΡΠ°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.
ΠΠ²Π°Π»ΡΠ½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS ΠΈ ΠΠ²Π°Π΄ΡΠ°ΡΠ½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS ΠΎΡ Dynamic Drive β Π΄Π²Π΅ Π΄ΡΡΠ³ΠΈΠ΅ ΡΡΠ°ΡΡΠΈ, Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΡΡΠΈΠ΅ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΡΡΡ ΡΠ°Π·Π΄Π²ΠΈΠΆΠ½ΡΡ Π΄Π²Π΅ΡΠ΅ΠΉ CSS.
Π‘ΠΏΡΠ°ΠΉΡΡ CSS: ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ
ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠΏΡΠ°ΠΉΡΠΎΠ² CSS ΠΎΠ΄ΠΈΠ½ ΡΠ°ΠΉΠ» ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² , ΠΎΠ±ΡΡΠ½ΠΎ Π²ΡΠ»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ Π² Π²ΠΈΠ΄Π΅ ΡΠ΅ΡΠΊΠΈ. Π Π°Π·Π±ΠΈΠ²Π°Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΌΡ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΡΠΏΡΠ°ΠΉΡ Π·Π° ΡΠ°Π·. ΠΠ»Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π²ΠΊΠ»ΡΡΠΈΡΡ Π³ΡΠ°ΡΠΈΠΊΡ Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΡΠ΅Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ Π² ΠΎΠ΄ΠΈΠ½ ΡΠ°ΠΉΠ». ΠΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π΅Π½, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠ΅Π±ΡΠ΅Ρ ΠΌΠ΅Π½ΡΡΠ΅ ΡΠ΅ΡΡΡΡΠΎΠ², Π° ΡΡΡΠ°Π½ΠΈΡΠ° Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΡΡ Π±ΡΡΡΡΠ΅Π΅. ΠΡΠ΅ ΠΌΡ Π·Π½Π°Π΅ΠΌ, ΡΡΠΎ ΠΌΠ½ΠΎΠ³ΠΎ Π·Π°ΠΏΡΠΎΡΠΎΠ² ΠΊ ΡΠ΅ΡΠ²Π΅ΡΡ Π΄Π»Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ ΡΠ΅ΡΡΡΡΠΎΠ² ΠΌΠΎΠΆΠ΅Ρ Π·Π°Π½ΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ. ΠΠΎΡ ΠΏΠΎΡΠ΅ΠΌΡ CSS-ΡΠΏΡΠ°ΠΉΡΡ ΡΠ°ΠΊ ΡΠ΄ΠΎΠ±Π½Ρ. ΠΠ½ΠΈ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠΊΡΠ°ΡΠ°ΡΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΎΠ±ΡΠ°ΡΠ΅Π½ΠΈΠΉ ΠΊ ΡΠ΅ΡΠ²Π΅ΡΡ. ΠΠ½ΠΈ Π½Π°ΡΡΠΎΠ»ΡΠΊΠΎ ΠΌΠΎΡΠ½Ρ, ΡΡΠΎ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΡΠΏΡΠ°ΠΉΡΡ CSS Π΄Π»Ρ Π²ΡΠ΅ΠΉ ΡΠ²ΠΎΠ΅ΠΉ Π³ΡΠ°ΡΠΈΠΊΠΈ. ΠΠ±Π·ΠΎΡ Holy Sprites ΠΎ ΡΡΡΠΊΠ°Ρ CSS ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΡΠ΅Π½Ρ ΠΊΡΠ΅Π°ΡΠΈΠ²Π½ΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΠΉ.
Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ ΠΏΡΠΎΡΡΠ΅ΠΉΡΠ΅Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΏΡΠ°ΠΉΡΠΎΠ² CSS. ΠΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π³ΡΠ°ΡΠΈΠΊΡ Π΄Π»Ρ Π²ΡΠ΅Ρ
ΡΡΠ΅Ρ
ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΠ°ΡΡΡΠ°ΠΈΠ²Π°Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background-position
, ΠΌΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌ ΡΠΎΡΠ½ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ. ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΡ Π²ΡΠ±ΠΈΡΠ°Π΅ΠΌ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ½Π° ΡΠ²Π΅ΡΡ
Ρ: -30 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ
ΠΈ ΡΠ»Π΅Π²Π°: 0
.
Π° { ΡΠΎΠ½: Π±Π΅Π»ΡΠΉ url(buttons.png) 0px 0px Π±Π΅Π· ΠΏΠΎΠ²ΡΠΎΡΠ°; } Π°: Π½Π°Π²Π΅Π΄ΠΈΡΠ΅ { ΡΠΎΠ½ΠΎΠ²Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ: -30px 0px; } Π°: Π°ΠΊΡΠΈΠ²Π½ΡΠΉ { ΡΠΎΠ½ΠΎΠ²Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ: -60px 0px; }
ΠΠ»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ ΠΎΠ±ΡΠ΅ΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΈ ΡΠ΅ΡΡΡΡΠΎΠ² ΠΏΠΎ CSS-ΡΠΏΡΠ°ΠΉΡΠ°ΠΌ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΡΡΠ΅ΡΡ Ρ The Mystery of CSS Sprites: Techniques, Tools and TutorialsΒ».
ΠΠΎΠ»Π΅Π·Π½ΠΎΠ΅ ΡΡΠ΅Π½ΠΈΠ΅
Π ΡΡΠΎΠΌ ΠΏΡΠΎΡΡΠΎΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π΅ Β«ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΡΠΎΡΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΏΡΠ°ΠΉΡΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ CSSΒ» ΠΡΠΈΡ Π‘ΠΏΡΠ½Π΅Ρ ΠΎΠ±ΡΡΡΠ½ΡΠ΅Ρ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΏΡΠ°ΠΉΡΠΎΠ² CSS Π² Photoshop ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Ρ CSS.
ΠΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ°Π·Π΄Π²ΠΈΠΆΠ½ΡΡ Π΄Π²Π΅ΡΠ΅ΠΉ ΠΈ ΡΠΏΡΠ°ΠΉΡΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΠΊΠ°ΠΊ ΠΎΠ±ΠΎΠ³Π°ΡΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΠ΅ΠΉ ΡΠ°Π·Π΄Π²ΠΈΠΆΠ½ΡΡ Π΄Π²Π΅ΡΠ΅ΠΉ ΠΈ ΡΠΏΡΠ°ΠΉΡΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΠ½ ΡΠ΅Π°Π»ΠΈΠ·ΡΠ΅Ρ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΎΡΠ΅Π½Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ°Π·Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠ»ΠΈ ΡΠ²Π΅ΡΠ°, Π° ΡΠΊΠΎΡΠ΅Π΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΡ.
CSS 3: ΠΊΠ½ΠΎΠΏΠΊΠΈ Π±ΡΠ΄ΡΡΠ΅Π³ΠΎ
CSS 3 ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ Π±ΠΎΠ³Π°ΡΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π²ΡΠ΅Π³ΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ
ΡΡΡΠΎΠΊ ΠΊΠΎΠ΄Π°. ΠΠΎΠΊΠ° ΡΡΠΎ ΡΡΠΎ ΡΠ°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ. ΠΠ΅Π΄ΠΎΡΡΠ°ΡΠΊΠΎΠΌ CSS 3 ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎ, ΡΡΠΎ Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ΠΎΠ½ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Firefox ΠΈ Safari. ΠΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΠΌΠΎΠΌΠ΅Π½ΡΠΎΠΌ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎ, ΡΡΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS 3 , ΠΈΠ·ΡΡΠ½ΠΎ Π΄Π΅Π³ΡΠ°Π΄ΠΈΡΡΡΡ Π² Π½Π΅ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
. ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° -moz-border-radius
(Π΄Π»Ρ Firefox) ΠΈΠ»ΠΈ -webkit-border-radius
(Π΄Π»Ρ Safari), Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΡΠ°Π΄ΠΈΡΡ ΡΠ³Π»ΠΎΠ². ΠΠΎΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ ΡΠ°Π΄ΠΈΡΡΠ° Π³ΡΠ°Π½ΠΈΡΡ.
ΠΠ»Ρ Π»ΡΡΡΠΈΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠΎΠ² Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΠΎΠ²Π°ΡΡ Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠ΅ ΡΠ³Π»Ρ CSS 3 ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡΠΈΠΌΠ΅Ρ Π½ΠΈΠΆΠ΅ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΠΈΠΏΠΈΡΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Ρ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ½ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, ΠΏΠ΅ΡΠ²ΠΎΠ΅ Π±Π΅Π· Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΡ ΡΠ³Π»ΠΎΠ², Π° Π²ΡΠΎΡΠΎΠ΅ Ρ.
ΠΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ ΡΠ°Π·Π΄Π²ΠΈΠΆΠ½ΡΠΌΠΈ Π΄Π²Π΅ΡΡΠΌΠΈ ΡΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΠ΅. ΠΠ΄Π½Π°ΠΊΠΎ, Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΡ ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°Π½Π½ΠΎΡΡΡ Π²ΠΎ Π²ΡΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ , ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ°Π·Π΄Π²ΠΈΠΆΠ½ΡΠ΅ Π΄Π²Π΅ΡΠΈ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ΠΈ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π²ΠΎ Π²ΡΠ΅Ρ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ , Π²ΠΊΠ»ΡΡΠ°Ρ IE6. Π§ΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΡ CSS 3, ΠΏΡΠΎΡΡΠΈΡΠ΅ Π£Π²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ CSS 3: Π±ΠΎΠ»Π΅Π΅ 30 ΠΏΠΎΠ»Π΅Π·Π½ΡΡ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Β». Π Π²ΠΎΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Ρ ΠΎΡΠΎΡΠΈΡ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ² ΠΏΠΎ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠ½ΠΊΡΠΈΠΉ CSS 3.
ΠΠΎΠ»Π΅Π·Π½ΠΎΠ΅ ΡΡΠ΅Π½ΠΈΠ΅
Super Awesome Buttons With CSS 3 ΠΈ RGBA Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΠ΅Ρ ΠΌΠΎΡΡ CSS 3 Ρ Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠΌΠΈ ΡΠ³Π»Π°ΠΌΠΈ, ΡΠ΅Π½ΡΠΌΠΈ Mozilla ΠΈ RGBA, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΡΠ²Π΅ΡΠΎΠ²ΠΎΠΉ ΡΠ΅ΠΆΠΈΠΌ, Π΄ΠΎΠ±Π°Π²Π»ΡΡΡΠΈΠΉ Π°Π»ΡΡΠ°-ΡΠΌΠ΅ΡΠΈΠ²Π°Π½ΠΈΠ΅ ΠΊ Π²Π°ΡΠΈΠΌ Π»ΡΠ±ΠΈΠΌΡΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌ CSS. ΠΡΠΎ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π»ΡΡΡΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS 3.
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π±Π΅Π· ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS 3 ΠΎΠ±ΡΡΡΠ½ΡΠ΅Ρ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS 3 Π±Π΅Π· ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
ΠΠ³Π½ΠΎΠ²Π΅Π½Π½ΡΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ: ΠΏΠΎΠ»Π΅Π·Π½Ρ Π»ΠΈ ΠΎΠ½ΠΈ?
Π‘ΡΡΠ΅ΡΡΠ²ΡΡΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Easy Button ΠΈ Menu Maker ΠΈ My Cool Button, Π° ΡΠ°ΠΊΠΆΠ΅ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ CSS-ΡΠΏΡΠ°ΠΉΡΠΎΠ², ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ CSS Sprite Generator, Π½ΠΎ Π²ΠΎΠΏΡΠΎΡ Π² ΡΠΎΠΌ, Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π»ΠΈ ΠΎΠ½ΠΈ ΠΏΠΎΠΌΠΎΠ³Π°ΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠ΅ Π²Π°ΡΠΈΠΌ ΠΏΠΎΡΡΠ΅Π±Π½ΠΎΡΡΡΠΌ. Π₯ΠΎΡΡ ΠΎΠ½ΠΈ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡΡΡ ΠΈ ΠΏΡΠΎΡΡΡ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ, Π²Π°ΡΠ΅ ΡΠ²ΠΎΡΡΠ΅ΡΡΠ²ΠΎ ΠΈ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ Π½Π°Π΄ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°ΠΌΠΈ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Ρ, ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΡΠ΅Π΄Π½Π΅Π³ΠΎ Π²ΠΈΠ΄Π°. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ Ρ ΠΎΡΠΎΡΠ΅ΠΉ ΠΈΠ΄Π΅Π΅ΠΉ.
Π Π΅ΡΠ΅Π½ΠΈΠ΅ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Photoshop (ΠΈΠ»ΠΈ Π΅Π³ΠΎ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎΠΉ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Ρ) ΠΈ ΠΏΡΠΎΠ²Π΅ΡΠ΅Π½Π½ΡΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ², ΠΎΠΏΠΈΡΠ°Π½Π½ΡΡ Π² ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅. ΠΡΠ»ΠΈ Π²Ρ Π½ΠΎΠ²ΠΈΡΠΎΠΊ Π² Photoshop, Π²ΠΎΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΡΠ»ΠΈΡΠ½ΡΡ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ² ΠΏΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ.
ΠΡΠ»ΠΈ Π²Ρ Π½Π΅ Π·Π½Π°Π΅ΡΠ΅, Ρ ΡΠ΅Π³ΠΎ Π½Π°ΡΠ°ΡΡ, iPhone-ΠΊΠ½ΠΎΠΏΠΊΠ° Π² Photoshop β ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΠΉ Π²ΡΠ±ΠΎΡ. ΠΡΠ΅Π³ΠΎ Π·Π° 10-15 ΠΌΠΈΠ½ΡΡ Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ°ΠΊΠΈΠ΅ ΠΆΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΊΠ°ΠΊ Π½Π° iPhone.
ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ Π³Π»Π°Π΄ΠΊΡΡ ΠΈ ΡΠΈΡΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π² Photoshop β ΡΡΠΎ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΡΠΎΠ²Π΅Π΄Π΅Ρ Π²Π°Ρ ΡΠ΅ΡΠ΅Π· 30 ΠΏΡΠΎΡΡΡΡ ΡΠ°Π³ΠΎΠ² ΠΈ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π²Π°ΠΌ ΠΈΠ·ΡΡΠΈΡΡ ΠΎΡΠ½ΠΎΠ²Ρ Photoshop. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π² ΡΡΠ°ΡΡΠ΅ ΠΎΠ±ΡΡΡΠ½ΡΠ΅ΡΡΡ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΡ Π³ΡΠ°ΡΠΈΠΊΡ Π² ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠΈ Ρ HTML ΠΈ CSS Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΠΎΠ»Π½ΠΎΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS.
ΠΠ½ΠΎΠΏΠΊΠΈ ΠΈ ΡΠ΄ΠΎΠ±ΡΡΠ²ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ: Π²ΠΌΠ΅ΡΡΠΎ Π²ΡΠ²ΠΎΠ΄ΠΎΠ²
ΠΠΏΠΈΡΠ°Π½Π½ΡΠ΅ Π²ΡΡΠ΅ ΠΏΡΠΈΠ΅ΠΌΡ ΠΏΠΎΠΌΠΎΠ³ΡΡ Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΠΎΡΡΡΡΠ°ΡΡΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΠ΄Π½Π°ΠΊΠΎ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ΠΈ ΠΈΠ³ΡΠ°ΡΡ ΡΠ΅ΡΠ°ΡΡΡΡ ΡΠΎΠ»Ρ Π² ΡΠ΄ΠΎΠ±ΡΡΠ²Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°, ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΌ ΠΊΠ»ΡΡΠ΅Π²ΡΠΌ ΠΏΡΠΈΠ½ΡΠΈΠΏΠ°ΠΌ:
- Π‘Π½Π°ΡΠ°Π»Π° ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΠΌΠ°ΡΠΊΠΈΡΠΎΠ²ΠΊΡ. ΠΡΠ΅Π³Π΄Π° ΠΌΠ°ΡΠΊΠΈΡΡΠΉΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ . Π Π²ΡΠ΅Π³Π΄Π° Π΄Π΅Π»Π°ΠΉΡΠ΅ ΡΡΠΎ Π³Π»Π°Π³ΠΎΠ»ΠΎΠΌ. Π Π°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΠΎΠΉ ΠΎΡΠΈΠ±ΠΊΠΎΠΉ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΠΌΠ΅ΡΠΊΠ° ΠΊΠ½ΠΎΠΏΠΎΠΊ Β«ΠΠ΅ΡΠ΅ΠΉΡΠΈΒ» Π΄Π»Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ, ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ ΠΏΠΎΠΈΡΠΊ, ΠΎΡΠΏΡΠ°Π²ΠΊΠ° ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠΉ ΠΏΠΎΡΡΡ ΠΈ ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠ΅. Π―ΡΠ»ΡΠΊΠΈ ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΠΊΠΎΡΠΎΡΠΊΠΈΠΌΠΈ ΠΈ ΠΏΠΎ ΡΡΡΠ΅ΡΡΠ²Ρ; Π½Π΅Ρ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ Π·Π°Π³ΡΠΎΠΌΠΎΠΆΠ΄Π°ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ.
- ΠΠ°ΠΊ ΡΠΆΠ΅ ΡΠΏΠΎΠΌΠΈΠ½Π°Π»ΠΎΡΡ, Π²ΠΊΠ»ΡΡΠΈΡΠ΅ Π²ΡΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ (ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ, Π°ΠΊΡΠΈΠ²Π½ΠΎ), ΡΡΠΎΠ±Ρ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΠ΅ΡΠΊΠΈΠ΅ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠ΅ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ. ΠΠΎΠ½ΡΡΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΎΡΡΠ°Π²Π°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π² Π°ΠΊΡΠΈΠ²Π½ΠΎΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ.
- Π§Π΅ΡΠΊΠΎΠ΅ ΡΠ°Π·Π»ΠΈΡΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ ΠΏΠ΅ΡΠ²ΠΈΡΠ½ΡΠΌΠΈ ΠΈ Π²ΡΠΎΡΠΈΡΠ½ΡΠΌΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠΌΠΈ . Π‘Π°ΠΌΠΎΠ΅ Π²Π°ΠΆΠ½ΠΎΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΡΠ°ΠΌΡΠΌ Π·Π°ΠΌΠ΅ΡΠ½ΡΠΌ. ΠΠ±ΡΡΠ½ΠΎ ΡΡΠΎ Π΄Π΅Π»Π°Π΅ΡΡΡ ΠΏΡΡΠ΅ΠΌ ΠΏΡΠΈΡΠ²ΠΎΠ΅Π½ΠΈΡ ΠΏΠ΅ΡΠ²ΠΈΡΠ½ΡΠΌ ΠΈ Π²ΡΠΎΡΠΈΡΠ½ΡΠΌ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠΌ ΡΠ°Π·Π½ΡΡ ΡΠ²Π΅ΡΠΎΠ².
- ΠΠ±ΡΠ°ΡΠΈΡΠ΅ ΠΎΡΠΎΠ±ΠΎΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°Π½Π½ΠΎΡΡΡ . ΠΠ½ΠΎΠΏΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΌΠΈ Π²ΠΎ Π²ΡΠ΅ΠΌ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ, ΠΊΠ°ΠΊ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ, ΡΠ°ΠΊ ΠΈ ΠΏΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ°Π·Π΄Π²ΠΈΠΆΠ½ΡΠ΅ Π΄Π²Π΅ΡΠΈ CSS Π΄Π»Ρ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈΠ»ΠΈ Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠ΅ ΡΠ³Π»Ρ CSS 3, ΡΡΠΎΠ±Ρ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°Π½Π½ΠΎΡΡΡ.
- Π₯ΠΎΡΡ ΡΡΠΎ ΠΎΡΠ΅Π²ΠΈΠ΄Π½ΠΎ, ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ Π²ΡΡ ΠΎΠ±Π»Π°ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½ΠΎΠΉ.
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΠΎΠ»Π΅Π·Π½ΡΡ ΡΡΡΠ»ΠΎΠΊ ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΎΠ±ΡΡΡΠ½ΡΠ΅Ρ, ΠΏΠΎΡΠ΅ΠΌΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΈΠ½ΠΎΠ³Π΄Π° ΠΆΠ΄ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ, Π° ΡΡΡΠ»ΠΊΠΈ β Π² Π΄ΡΡΠ³ΠΈΡ ΡΠ»ΡΡΠ°ΡΡ . ΠΠ½ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΠΊΠ°ΠΊ Π²ΡΠ±ΠΈΡΠ°ΡΡ ΠΌΠ΅ΠΆΠ΄Ρ Π΄Π²ΡΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ.
ΠΠ°ΠΊ ΡΠΏΡΠΎΠ΅ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄Π»Ρ ΠΏΠΎΠ²ΡΡΠ΅Π½ΠΈΡ ΡΠ΄ΠΎΠ±ΡΡΠ²Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΎΠ±ΡΡΡΠ½ΡΠ΅Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠΈΠ½ΡΠΈΠΏΡ ΡΠ΄ΠΎΠ±ΡΡΠ²Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΡΠΈΡΡΠ²Π°ΡΡ ΠΏΡΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ. ΠΠ½ ΠΎΡ Π²Π°ΡΡΠ²Π°Π΅Ρ ΠΎΡΠ½ΠΎΠ²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π·Π½Π°ΡΠΊΠΎΠ², Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ Π²ΠΈΠ΄Π°, ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ, ΠΈΠ΅ΡΠ°ΡΡ ΠΈΠΈ ΠΈ ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°Π½Π½ΠΎΡΡΠΈ.
ΠΠ΅Π½Π΅ΡΠ°ΡΠΎΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS
ΠΠ½Π»Π°ΠΉΠ½-Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π±ΡΡΡΡΠΎ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°. ΠΡΠΎΡΡΠΎ Π²Π²Π΅Π΄ΠΈΡΠ΅ ΡΠ΅ΠΊΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π²ΡΠ±Π΅ΡΠΈΡΠ΅ ΡΠ²Π΅ΡΠ° ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΡΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ CSS. ΠΡΠΎ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠΉ ΠΎΠ½Π»Π°ΠΉΠ½-ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π΄Π»Ρ Π²Π΅Π±-ΠΌΠ°ΡΡΠ΅ΡΠΎΠ² Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS.
CSS Button Generator ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎ ΡΠΎΠ·Π΄Π°Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° ΠΈΠ»ΠΈ Π±Π»ΠΎΠ³Π°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π²Π°ΡΠΈ ΡΠ²Π΅ΡΠ°, Π²Π΅Π±-ΡΡΠΈΡΡΡ ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡ. ΠΠ΅Π½Π΅ΡΠ°ΡΠΎΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ css Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΠΌΠΎΠΆΠ΅Ρ ΡΠΊΠ°Π·Π°ΡΡ Π²ΡΠ΅, ΡΡΠΎ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅, Π² Π»ΡΠ±ΡΡ ΡΠ²Π΅ΡΠ°Ρ ΠΈ ββΡΠ°Π·ΠΌΠ΅ΡΠ°Ρ . Π‘ΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ css ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΡΠ°ΠΉΡΠΎΠ² Myspace, piczo ΠΈΠ»ΠΈ Zanga, Π³Π΄Π΅ Ρ Π²Π°Ρ Π½Π΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π·Π°Π³ΡΡΠΆΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π½ΠΎ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ Ρ Π²Π°Ρ Π±ΡΠ»ΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½Π΅ Π±Π΅ΡΠΏΠΎΠΊΠΎΡΡΡ ΠΎ ΠΌΠ΅ΡΡΠ²ΡΡ ΡΡΡΠ»ΠΊΠ°Ρ . Π‘ΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ css ΠΌΠΎΠΆΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡΠ°Π²Π»ΡΡΡ Π² ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²Π°ΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈΠ»ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡ Π² Π»ΡΠ±ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ Π²Π²Π΅ΡΡ Ρ ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΠ°ΡΠΊΠ°Π΄Π½ΡΠ΅ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ (CSS) β ΡΡΠΎ ΡΠ·ΡΠΊ ΡΠ°Π±Π»ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΉ Π΄Π»Ρ ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, Π½Π°ΠΏΠΈΡΠ°Π½Π½ΠΎΠ³ΠΎ Π½Π° ΡΠ·ΡΠΊΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ. ΠΠ³ΠΎ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΠΎΠ΅ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ β ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡ, Π½Π°ΠΏΠΈΡΠ°Π½Π½ΡΡ Π½Π° HTML ΠΈ XHTML, Π½ΠΎ ΡΡΠΎΡ ΡΠ·ΡΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΠΊ Π»ΡΠ±ΠΎΠΌΡ XML-Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΡ, Π²ΠΊΠ»ΡΡΠ°Ρ SVG ΠΈ XUL.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΡΡΠΈΡΡΠ° CSS
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ CSS | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
---|---|
ΡΡΠΈΠ»Ρ ΡΡΠΈΡΡΠ° | ΠΠ°Π΄Π°Π΅Ρ ΡΡΠΈΠ»Ρ ΡΡΠΈΡΡΠ°. ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠΌ. Π² ΡΡΠΈΠ»Π΅ ΡΡΠΈΡΡΠ° |
Π²Π°ΡΠΈΠ°Π½Ρ ΡΡΠΈΡΡΠ° | Π£ΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π²Π°ΡΠΈΠ°Π½Ρ ΡΡΠΈΡΡΠ°. ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠΌ. Π² Π²Π°ΡΠΈΠ°Π½ΡΠ΅ ΡΡΠΈΡΡΠ° | .
Π²Π΅Ρ ΡΡΠΈΡΡΠ° | Π£ΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΠΎΠ»ΡΠΈΠ½Ρ ΡΡΠΈΡΡΠ°. ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠΌ. Π² ΡΠ°Π·Π΄Π΅Π»Π΅ font-weight | .
ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°/Π²ΡΡΠΎΡΠ° ΡΡΡΠΎΠΊΠΈ | ΠΠ°Π΄Π°Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° ΠΈ Π²ΡΡΠΎΡΡ ΡΡΡΠΎΠΊΠΈ. ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠΌ. Π² ΡΠ°Π·Π΄Π΅Π»Π΅ font-size ΠΈ line-height | .
ΡΠ΅ΠΌΠ΅ΠΉΡΡΠ²ΠΎ ΡΡΠΈΡΡΠΎΠ² | Π£ΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΠ΅ΠΌΠ΅ΠΉΡΡΠ²ΠΎ ΡΡΠΈΡΡΠΎΠ². Π‘ΠΌ. ΡΠ΅ΠΌΠ΅ΠΉΡΡΠ²ΠΎ ΡΡΠΈΡΡΠΎΠ² Π΄Π»Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ |
ΠΏΠΎΠ΄ΠΏΠΈΡΡ | ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΡΠΈΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΌΠΈ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ, ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΠΌΠΈΡΡ ΡΠΏΠΈΡΠΊΠ°ΠΌΠΈ ΠΈ Ρ.Β Π΄.) |
Π·Π½Π°ΡΠΎΠΊ | ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΡΠΈΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΉ ΠΌΠ΅ΡΠΊΠ°ΠΌΠΈ Π·Π½Π°ΡΠΊΠΎΠ² |
ΠΌΠ΅Π½Ρ | ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΡΠΈΡΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΠΌΠΈΡΡ ΠΌΠ΅Π½Ρ |
ΡΡΠΈΠΊ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΉ | ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΡΠΈΡΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΡΠΌΠΈ ΠΎΠΊΠ½Π°ΠΌΠΈ |
ΠΌΠ°Π»ΡΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ | Π£ΠΌΠ΅Π½ΡΡΠ΅Π½Π½Π°Ρ Π²Π΅ΡΡΠΈΡ ΡΡΠΈΡΡΠ° ΠΏΠΎΠ΄ΠΏΠΈΡΠΈ |
ΡΡΡΠΎΠΊΠ° ΡΠΎΡΡΠΎΡΠ½ΠΈΡ | ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΡΠΈΡΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π² ΡΡΡΠΎΠΊΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ |
ΡΠ½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ | Π£ΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΡΠΈΡΡΠ° Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΡΠ½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΎ ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° |
Π Π°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° CSS Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ CSS | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
---|---|
Ρ Ρ -ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΉ | ΠΠ°Π΄Π°Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° xx-small |
Ρ -ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΉ | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΡΠ΅Π½Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° |
ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΉ | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° Π½Π° ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ |
ΡΡΠ΅Π΄Π½ΠΈΠΉ | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΡΠ΅Π΄Π½ΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°. ΠΡΠΎ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ |
Π±ΠΎΠ»ΡΡΠΎΠΉ | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π±ΠΎΠ»ΡΡΠΎΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° |
ΠΎΡΠ΅Π½Ρ Π±ΠΎΠ»ΡΡΠΎΠΉ | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΡΠ΅Π½Ρ Π±ΠΎΠ»ΡΡΠΎΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° |
xx-Π±ΠΎΠ»ΡΡΠΎΠΉ | ΠΠ°Π΄Π°Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° xx-large |
ΠΌΠ΅Π½ΡΡΠ΅ | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° ΠΌΠ΅Π½ΡΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° |
Π±ΠΎΠ»ΡΡΠ΅ | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° Π±ΠΎΠ»ΡΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° |
Π΄Π»ΠΈΠ½Π° | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ , ΡΠΌ ΠΈ Ρ. Π΄. |
% | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΡΠΈΡΡΠ° ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° |
ΡΠ½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ | Π£ΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΡΠ½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° |
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ CSS font-style
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ CSS | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
---|---|
ΠΎΠ±ΡΡΠ½ΡΠΉ | ΠΡΠ°ΡΠ·Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΠΎΠ±ΡΡΠ½ΡΠΉ ΡΡΠΈΠ»Ρ ΡΡΠΈΡΡΠ°. ΠΡΠΎ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ |
ΠΊΡΡΡΠΈΠ² | ΠΡΠ°ΡΠ·Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΠΊΡΡΡΠΈΠ²Π½ΡΠΉ ΡΡΠΈΡΡ |
ΠΊΠΎΡΠΎΠΉ | ΠΡΠ°ΡΠ·Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ Π½Π°ΠΊΠ»ΠΎΠ½Π½ΡΠΉ ΡΡΠΈΡΡ |
ΡΠ½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ | Π£ΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ ΡΡΠΈΠ»Ρ ΡΡΠΈΡΡΠ° Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΡΠ½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° |
CSS ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ font-weight
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ CSS | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
---|---|
ΠΎΠ±ΡΡΠ½ΡΠΉ | ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΎΠ±ΡΡΠ½ΡΠ΅ ΡΠΈΠΌΠ²ΠΎΠ»Ρ. ΠΡΠΎ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ |
ΠΏΠΎΠ»ΡΠΆΠΈΡΠ½ΡΠΉ | ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΎΠ»ΡΡΡΠ΅ ΡΠΈΠΌΠ²ΠΎΠ»Ρ |
ΠΆΠΈΡΠ½Π΅Π΅ | ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π±ΠΎΠ»Π΅Π΅ ΡΠΎΠ»ΡΡΡΠ΅ ΡΠΈΠΌΠ²ΠΎΠ»Ρ |
Π·Π°ΠΆΠΈΠ³Π°Π»ΠΊΠ° | ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π±ΠΎΠ»Π΅Π΅ ΡΠ²Π΅ΡΠ»ΡΠ΅ ΡΠΈΠΌΠ²ΠΎΠ»Ρ |
100 — 900 | ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΎΡ ΡΠΎΠ½ΠΊΠΈΡ Π΄ΠΎ ΡΠΎΠ»ΡΡΡΡ ΡΠΈΠΌΠ²ΠΎΠ»ΠΎΠ². 400 ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΠΎΠ±ΡΡΠ½ΠΎΠΌΡ, Π° 700 ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΠΏΠΎΠ»ΡΠΆΠΈΡΠ½ΠΎΠΌΡ | .
ΠΡΠ°Π½ΠΈΡΠ° CSS
Π‘ΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΡΡΡ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ | ΠΠ½Π°ΡΠ΅Π½ΠΈΡ | Π£Π‘Π |
---|---|---|---|
Π³ΡΠ°Π½ΠΈΡΠ° | ΠΠ°Π΄Π°Π΅Ρ Π²ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π³ΡΠ°Π½ΠΈΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠΈ | ΡΠΈΡΠΈΠ½Π° Π³ΡΠ°Π½ΠΈΡΡ ΡΡΠΈΠ»Ρ Π³ΡΠ°Π½ΠΈΡΡ ΡΠ²Π΅Ρ Π³ΡΠ°Π½ΠΈΡΡ | 1 |
Π½ΠΈΠΆΠ½ΡΡ Π³ΡΠ°Π½ΠΈΡΠ° | ΠΠ°Π΄Π°Π΅Ρ Π²ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π½ΠΈΠΆΠ½Π΅ΠΉ Π³ΡΠ°Π½ΠΈΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠΈ | ΡΠΈΡΠΈΠ½Π° Π½ΠΈΠΆΠ½Π΅ΠΉ Π³ΡΠ°Π½ΠΈΡΡ ΡΡΠΈΠ»Ρ Π½ΠΈΠΆΠ½Π΅ΠΉ Π³ΡΠ°Π½ΠΈΡΡ ΡΠ²Π΅Ρ Π½ΠΈΠΆΠ½Π΅ΠΉ Π³ΡΠ°Π½ΠΈΡΡ | 1 |
ΡΠ²Π΅Ρ Π½ΠΈΠΆΠ½Π΅ΠΉ Π³ΡΠ°Π½ΠΈΡΡ | ΠΠ°Π΄Π°Π΅Ρ ΡΠ²Π΅Ρ Π½ΠΈΠΆΠ½Π΅ΠΉ Π³ΡΠ°Π½ΠΈΡΡ | ΡΠ²Π΅Ρ ΡΠ°ΠΌΠΊΠΈ | 2 |
Π½ΠΈΠΆΠ½ΡΡ Π³ΡΠ°Π½ΠΈΡΠ° | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΡΠΈΠ»Ρ Π½ΠΈΠΆΠ½Π΅ΠΉ Π³ΡΠ°Π½ΠΈΡΡ | Ρ ΠΊΠ°ΠΉΠΌΠΎΠΉ | 2 |
ΡΠΈΡΠΈΠ½Π° Π½ΠΈΠΆΠ½Π΅ΠΉ Π³ΡΠ°Π½ΠΈΡΡ | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠΈΡΠΈΠ½Ρ Π½ΠΈΠΆΠ½Π΅ΠΉ Π³ΡΠ°Π½ΠΈΡΡ | ΡΠΈΡΠΈΠ½Π° Π³ΡΠ°Π½ΠΈΡΡ | 1 |
ΡΠ²Π΅Ρ ΡΠ°ΠΌΠΊΠΈ | ΠΠ°Π΄Π°Π΅Ρ ΡΠ²Π΅Ρ ΡΠ΅ΡΡΡΠ΅Ρ Π³ΡΠ°Π½ΠΈΡ | color_name hex_number rgb_number ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠΉ Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ | 1 |
Π³ΡΠ°Π½ΠΈΡΠ° Π»Π΅Π²Π°Ρ | ΠΠ°Π΄Π°Π΅Ρ Π²ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π»Π΅Π²ΠΎΠΉ Π³ΡΠ°Π½ΠΈΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠΈ | ΡΠΈΡΠΈΠ½Π° Π³ΡΠ°Π½ΠΈΡΡ ΡΠ»Π΅Π²Π° ΡΡΠΈΠ»Ρ Π³ΡΠ°Π½ΠΈΡΡ ΡΠ»Π΅Π²Π° ΡΠ²Π΅Ρ Π³ΡΠ°Π½ΠΈΡΡ ΡΠ»Π΅Π²Π° | 1 |
Π³ΡΠ°Π½ΠΈΡΠ° Π»Π΅Π²Π°Ρ | ΠΠ°Π΄Π°Π΅Ρ ΡΠ²Π΅Ρ Π»Π΅Π²ΠΎΠΉ Π³ΡΠ°Π½ΠΈΡΡ | ΡΠ²Π΅Ρ ΡΠ°ΠΌΠΊΠΈ | 2 |
Π»Π΅Π²ΡΠΉ ΠΊΡΠ°ΠΉ | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΡΠΈΠ»Ρ Π»Π΅Π²ΠΎΠΉ Π³ΡΠ°Π½ΠΈΡΡ | Ρ ΠΊΠ°ΠΉΠΌΠΎΠΉ | 2 |
Π³ΡΠ°Π½ΠΈΡΠ° ΡΠ»Π΅Π²Π° | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠΈΡΠΈΠ½Ρ Π»Π΅Π²ΠΎΠΉ Π³ΡΠ°Π½ΠΈΡΡ | ΡΠΈΡΠΈΠ½Π° Π³ΡΠ°Π½ΠΈΡΡ | 1 |
Π³ΡΠ°Π½ΠΈΡΠ° ΠΏΡΠ°Π²Π°Ρ | ΠΠ°Π΄Π°Π΅Ρ Π²ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΡΠ°Π²ΠΎΠΉ Π³ΡΠ°Π½ΠΈΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠΈ | ΡΠΈΡΠΈΠ½Π° ΠΏΡΠ°Π²ΠΎΠΉ Π³ΡΠ°Π½ΠΈΡΡ ΡΡΠΈΠ»Ρ ΠΏΡΠ°Π²ΠΎΠΉ Π³ΡΠ°Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΠΏΡΠ°Π²ΠΎΠΉ Π³ΡΠ°Π½ΠΈΡΡ | 1 |
Π³ΡΠ°Π½ΠΈΡΠ° ΠΏΡΠ°Π²ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ° | ΠΠ°Π΄Π°Π΅Ρ ΡΠ²Π΅Ρ ΠΏΡΠ°Π²ΠΎΠΉ Π³ΡΠ°Π½ΠΈΡΡ | ΡΠ²Π΅Ρ ΡΠ°ΠΌΠΊΠΈ | 2 |
Π±ΠΎΡΠ΄ΡΡ ΡΠΏΡΠ°Π²Π° | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΡΠΈΠ»Ρ ΠΏΡΠ°Π²ΠΎΠΉ Π³ΡΠ°Π½ΠΈΡΡ | Ρ ΠΊΠ°ΠΉΠΌΠΎΠΉ | 2 |
ΡΠΈΡΠΈΠ½Π° ΠΏΡΠ°Π²ΠΎΠΉ Π³ΡΠ°Π½ΠΈΡΡ | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠΈΡΠΈΠ½Ρ ΠΏΡΠ°Π²ΠΎΠΉ Π³ΡΠ°Π½ΠΈΡΡ | ΡΠΈΡΠΈΠ½Π° Π³ΡΠ°Π½ΠΈΡΡ | 1 |
Ρ ΠΊΠ°ΠΉΠΌΠΎΠΉ | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΡΠΈΠ»Ρ ΡΠ΅ΡΡΡΠ΅Ρ Π³ΡΠ°Π½ΠΈΡ | Π½Π΅Ρ ΡΠΊΡΡΡΡΠΉ ΠΏΡΠ½ΠΊΡΠΈΡΠ½ΡΠΉ ΠΏΡΠ½ΠΊΡΠΈΡΠ½ΡΠΉ ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ Π΄Π²ΠΎΠΉΠ½ΠΎΠΉ ΠΊΠ°Π½Π°Π²ΠΊΠ° ΡΠ΅Π±ΡΠΎ Π²ΡΡΠ°Π²ΠΊΠ° Π½Π°ΡΠ°Π»ΠΎ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ | 1 |
Π²Π΅ΡΡ Π½ΡΡ Π³ΡΠ°Π½ΠΈΡΠ° | ΠΠ°Π΄Π°Π΅Ρ Π²ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π²Π΅ΡΡ Π½Π΅ΠΉ Π³ΡΠ°Π½ΠΈΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠΈ | ΡΠΈΡΠΈΠ½Π° Π²Π΅ΡΡ
Π½Π΅ΠΉ Π³ΡΠ°Π½ΠΈΡΡ ΡΡΠΈΠ»Ρ Π²Π΅ΡΡ Π½Π΅ΠΉ Π³ΡΠ°Π½ΠΈΡΡ ΡΠ²Π΅Ρ Π²Π΅ΡΡ Π½Π΅ΠΉ Π³ΡΠ°Π½ΠΈΡΡ | 1 |
ΡΠ²Π΅Ρ Π²Π΅ΡΡ Π½Π΅ΠΉ Π³ΡΠ°Π½ΠΈΡΡ | ΠΠ°Π΄Π°Π΅Ρ ΡΠ²Π΅Ρ Π²Π΅ΡΡ Π½Π΅ΠΉ Π³ΡΠ°Π½ΠΈΡΡ | ΡΠ²Π΅Ρ ΡΠ°ΠΌΠΊΠΈ | 2 |
Ρ ΠΊΠ°ΠΉΠΌΠΎΠΉ | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΡΠΈΠ»Ρ Π²Π΅ΡΡ Π½Π΅ΠΉ Π³ΡΠ°Π½ΠΈΡΡ | Ρ ΠΊΠ°ΠΉΠΌΠΎΠΉ | 2 |
ΡΠΈΡΠΈΠ½Π° Π²Π΅ΡΡ Π½Π΅ΠΉ Π³ΡΠ°Π½ΠΈΡΡ | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠΈΡΠΈΠ½Ρ Π²Π΅ΡΡ Π½Π΅ΠΉ Π³ΡΠ°Π½ΠΈΡΡ | ΡΠΈΡΠΈΠ½Π° Π³ΡΠ°Π½ΠΈΡΡ | 1 |
ΡΠΈΡΠΈΠ½Π° Π³ΡΠ°Π½ΠΈΡΡ | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠΈΡΠΈΠ½Ρ ΡΠ΅ΡΡΡΠ΅Ρ Π³ΡΠ°Π½ΠΈΡ | ΡΠΎΠ½ΠΊΠΈΠ΅ ΡΡΠ΅Π΄Π½ΠΈΠ΅ ΡΠΎΠ»ΡΡΡΠ΅ Π΄Π»ΠΈΠ½Π½ΡΠ΅ ΡΠ½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½Π½ΡΠ΅ | 1 |
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ CSS border-style
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ CSS | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
---|---|
Π½Π΅Ρ | ΠΠ΅ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π³ΡΠ°Π½ΠΈΡΡ |
ΡΠΊΡΡΡΡΠΉ | Π’ΠΎ ΠΆΠ΅, ΡΡΠΎ ΠΈ «Π½Π΅Ρ», Π·Π° ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ ΠΊΠΎΠ½ΡΠ»ΠΈΠΊΡΠ° Π³ΡΠ°Π½ΠΈΡ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠ°Π±Π»ΠΈΡΡ |
Ρ ΡΠΎΡΠΊΠ°ΠΌΠΈ | ΠΠ°Π΄Π°Π΅Ρ ΠΏΡΠ½ΠΊΡΠΈΡΠ½ΡΡ Π³ΡΠ°Π½ΠΈΡΡ |
ΠΏΡΠ½ΠΊΡΠΈΡ | ΠΠ°Π΄Π°Π΅Ρ ΠΏΡΠ½ΠΊΡΠΈΡΠ½ΡΡ Π³ΡΠ°Π½ΠΈΡΡ |
ΡΠ²Π΅ΡΠ΄ΡΠΉ | ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΏΠ»ΠΎΡΠ½ΡΡ Π³ΡΠ°Π½ΠΈΡΡ |
Π΄Π²ΠΎΠΉΠ½ΠΎΠΉ | ΠΠ°Π΄Π°Π΅Ρ Π΄Π²ΠΎΠΉΠ½ΡΡ ΡΠ°ΠΌΠΊΡ |
ΠΊΠ°Π½Π°Π²ΠΊΠ° | ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΡΠ΅Ρ
ΠΌΠ΅ΡΠ½ΡΡ ΡΠΈΡΠ»Π΅Π½ΡΡ Π³ΡΠ°Π½ΠΈΡΡ. |