Π‘ΠΏΡΠ°ΠΉΡΡ css ΠΏΡΠΈΠΌΠ΅Ρ: ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅, ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ β ΡΡΠ΅Π±Π½ΠΈΠΊ CSS
20.06.2023 Π Π°Π·Π½ΠΎΠ΅
Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ CSS ΡΠΏΡΠ°ΠΉΡΡ. ΠΡΠΈΠΌΠ΅ΡΡ | ΠΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠ΅ Π·Π°Π΄Π°ΡΠΈ Π²Π΅ΡΡΡΠΊΠΈ
ΠΡΠΈΠΌΠ΅ΡΠ½ΡΠΉ ΠΏΠ»Π°Π½ ΡΡΠ°ΡΡΠΈ.
- Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ CSS ΡΠΏΡΠ°ΠΉΡΡ?
- Π’Π΅ΡΠΌΠΈΠ½ΠΎΠ»ΠΎΠ³ΠΈΡ
- ΠΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠΏΡΠ°ΠΉΡΠΎΠ²
- ΠΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ
Π‘ΠΏΡΠ°ΠΉΡΡ β ΡΡΠΎ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½Π°Ρ ΠΈ ΠΏΡΠΎΡΡΠ°Ρ ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΡ. Π‘Π΅ΠΉΡΠ°Ρ Ρ ΡΠ°ΡΡΠΊΠ°ΠΆΡ ΠΎ Π½Π΅ΠΉ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅.
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ CSS ΡΠΏΡΠ°ΠΉΡΡ?
ΠΡΠ»ΠΈ ΠΊΡΠ°ΡΠΊΠΎ, ΡΠΎ CSS ΡΠΏΡΠ°ΠΉΡΡ ΡΡΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ Π² ΠΎΠ΄Π½ΠΎΠΌ ΡΠ°ΠΉΠ»Π΅. Π€Π°ΠΉΠ» ΠΎΠ΄ΠΈΠ½, Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π²Π½ΡΡΡΠΈ Π½Π΅Π³ΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ. ΠΡΠΈ ΡΡΠΎΠΌ Π΄Π»Ρ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Ρ ΡΡΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π½Π΅Π·Π°ΠΌΠ΅ΡΠ½ΠΎ. Π’ΠΎΠΌΡ ΠΊΡΠΎ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅Ρ ΡΠ°ΠΉΡ ΠΊΠ°ΠΆΠ΅ΡΡΡ, ΡΡΠΎ ΠΎΠ½ Π²ΠΈΠ΄ΠΈΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ.
ΠΠ°ΡΠ΅ΠΌ ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ? Π‘ΠΏΡΠ°ΠΉΡΡ ΡΠ½ΠΈΠΆΠ°ΡΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π·Π°ΠΏΡΠΎΡΠΎΠ² ΠΊ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΎΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΈ ΡΠΌΠ΅Π½ΡΡΠ°ΡΡ ΠΎΠ±ΡΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. Π ΠΈΡΠΎΠ³Π΅ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Ρ Π±ΡΡΡΡΠ΅Π΅ ΡΠ²ΠΈΠ΄ΠΈΡ ΡΠ°ΠΉΡ.
ΠΠ°ΠΊ ΡΡΠΎ Π΄Π΅Π»Π°Π΅ΡΡΡ? ΠΠ±ΡΡΠ½Π°Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅ΡΡΡ Π² ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ, ΡΠΎ Π΅ΡΡΡ ΠΏΡΠΎΡΡΠΎ Π½Π° ΠΎΠ±ΡΡΠ½ΠΎΠΉ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡΡΡ ΡΡΠ΄ΠΎΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΠΎΡΠΎΠΌ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ· ΡΡΠΎΠ³ΠΎ Π½Π°Π±ΠΎΡΠ° ΠΏΠΎΠ΄ΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Π² Π½ΡΠΆΠ½ΡΠΉ Π±Π»ΠΎΠΊ Ρ Π·Π°Π΄Π°Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ ΠΈΠ»ΠΈ Π²ΡΡΠΎΡΠΎΠΉ ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΡΠΎΠ±Ρ Π²ΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π΅ Π±ΡΠ»ΠΎ Π²ΠΈΠ΄Π½ΠΎ. ΠΠ΅ΡΡ Π½Π°Π±ΠΎΡ ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ ΠΈ ΠΎΡΡΠ°Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°. ΠΠ΄ΠΈΠ½ ΡΠΏΡΠ°ΠΉΡ. ΠΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΠΎΡΡΠ°ΡΡΡΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°.
Π§ΡΠΎΠ±Ρ Π±ΡΠ»ΠΎ ΠΏΠΎΠ½ΡΡΠ½Π΅Π΅ ΠΏΡΠΈΠ²Π΅Π΄Ρ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ. ΠΡΠ΅Π΄ΡΡΠ°Π²ΡΡΠ΅ ΡΡΠΎ Π²Ρ ΡΠΌΠΎΡΡΠΈΡΠ΅ Π² Π·Π°ΠΌΠΎΡΠ½ΡΡ ΡΠΊΠ²Π°ΠΆΠΈΠ½Ρ. ΠΡ Π²ΠΈΠ΄ΠΈΡΠ΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΊΠ°ΠΊΠΎΠΉ ΡΠΎ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ ΠΊΡΡΠΎΠΊ ΠΏΠΎΠΌΠ΅ΡΠ΅Π½ΡΠΈ ΠΏΠΎ ΡΡ ΡΡΠΎΡΠΎΠ½Ρ Π΄Π²Π΅ΡΠΈ. ΠΡΠ»ΠΈ Π²Ρ ΡΡΡΡ ΡΠ΄Π²ΠΈΠ½Π΅ΡΠ΅ΡΡ Π² ΡΡΠΎΡΠΎΠ½Ρ ΠΈ Π±ΡΠ΄Π΅ΡΠ΅ ΡΠΌΠΎΡΡΠ΅ΡΡ Π² ΡΠΊΠ°ΠΆΠΈΠ½Ρ ΠΏΠΎΠ΄ Π΄ΡΡΠ³ΠΈΠΌ ΡΠ³Π»ΠΎΠΌ, ΡΠΎ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ ΠΊΠ°ΠΊΠΎΠΉ ΡΠΎ Π΄ΡΡΠ³ΠΎΠΉ ΠΊΡΡΠΎΠΊ ΡΠΎΠ³ΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ³ΠΎ ΠΏΠΎΠΌΠ΅ΡΠ΅Π½ΠΈΡ.
Π’Π΅ΡΠΌΠΈΠ½ΠΎΠ»ΠΎΠ³ΠΈΡ
Π§ΡΠΎΠ±Ρ Π½Π΅ ΠΏΡΡΠ°ΡΡΡΡ Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΡΠ°Π·Ρ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠΈΠΌ ΡΠ΅ΡΠΌΠΈΠ½Ρ:
Π‘ΠΏΡΠ°ΠΉΡ β ΡΡΠΎ ΠΎΠ΄Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° ΠΈΠ· ΡΠ°ΠΉΠ»Π° Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ.
ΠΠ°Π±ΠΎΡ ΡΠΏΡΠ°ΠΉΡΠΎΠ² β ΡΡΠΎ ΡΠ°ΠΌ ΡΠ°ΠΉΠ» Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ.
ΠΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠΏΡΠ°ΠΉΡΠΎΠ²
ΠΠΎΠ³Π΄Π° ΡΡΠΎΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΏΡΠ°ΠΉΡΡ? ΠΡΠ²Π΅Ρ Π² ΠΎΠ±ΡΠ΅ΠΌ ΡΠΎ ΠΎΠ΄ΠΈΠ½ β ΡΠΏΡΠ°ΠΉΡΡ Π½ΡΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅ΡΠ»ΠΈ Ρ Π²Π°Ρ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΌΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π»ΠΊΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΠ΅Π²Π°ΠΆΠ½ΠΎ ΠΊΠ°ΠΊΠΈΠ΅ ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡΠ»ΠΈ Ρ Π²Π°Ρ ΠΌΠ½ΠΎΠ³ΠΎ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠ² Ρ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΌ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ, ΠΌΠ½ΠΎΠ³ΠΎ ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΈ.Π΄. ΠΡΠ»ΠΈ Π½Π° ΠΊΠ°ΠΊΠΎΠΉ ΡΠΎ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΌΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π»ΠΊΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΡΠΌΠ°ΡΡ Π½Π°Π΄ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΏΡΠ°ΠΉΡΠΎΠ².
ΠΠ° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Π±ΡΠ²Π°ΡΡ ΡΡΠΈ Π²ΠΈΠ΄Π° ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ β jpg, png ΠΈ gif. Π£ Π²ΡΠ΅Ρ ΡΡΠΈΡ ΡΠΎΡΠΌΠ°ΡΠΎΠ² Π΅ΡΡΡ Π΄Π²Π° ΡΠ΅ΠΆΠΈΠΌΠ° Π·Π°Π³ΡΡΠ·ΠΊΠΈ β ΡΡΠΎ ΠΎΠ±ΡΡΠ½ΡΠΉ ΡΠ΅ΠΆΠΈΠΌ ΠΈ ΡΠ΅ΠΆΠΈΠΌ ΠΏΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ.
Π€ΠΎΡΠΌΠ°Ρ jpg ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΎΠ±ΡΡΠ½ΡΠΌ (Π±Π°Π·ΠΎΠ²ΡΠΌ) ΠΈ ΠΏΡΠΎΠ³ΡΠ΅ΡΡΠΈΠ²Π½ΡΠΌ (progressive). Π ΠΎΠ±ΡΡΠ½ΠΎΠΌ ΡΠ΅ΠΆΠΈΠΌΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Π½Π°ΡΠΈΠ½Π°Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΏΠΎ ΡΡΡΠΎΠΊΠ°ΠΌ ΠΏΠΎ ΠΌΠ΅ΡΠ΅ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈ ΡΡΠ°Π·Ρ Π² Ρ ΠΎΡΠΎΡΠ΅ΠΌ ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅. Π ΠΏΡΠΎΠ³ΡΠ΅ΡΡΠΈΠ²Π½ΠΎΠΌ ΡΠ΅ΠΆΠΈΠΌΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° jpg Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΡΡ ΡΡΠ°Π·Ρ ΡΠ΅Π»ΠΈΠΊΠΎΠΌ, Π½ΠΎ Π² ΠΏΠ»ΠΎΡ ΠΎΠΌ ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΈ ΠΏΠΎ ΠΌΠ΅ΡΠ΅ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΊΠ°ΡΠ΅ΡΡΠ²ΠΎ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅ΡΡΡ.
Π’Π°ΠΊΠΎΠ΅ ΠΆΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π΅ΡΡΡ Ρ gif ΠΈ png. GIF ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΎΠ±ΡΡΠ½ΡΠΌ ΠΈ ΡΠ΅ΡΠ΅Π·ΡΡΡΠΎΡΠ½ΡΠΌ (interlaced). PNG ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΎΠ±ΡΡΠ½ΡΠΌ ΠΈ ΡΠ΅ΡΠ΅Π·ΡΡΡΠΎΡΠ½ΡΠΌ (interlaced). ΠΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΡΠ΅ΡΠ΅Π·ΡΡΡΠΎΡΠ½ΡΡ gif ΠΈ png Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ ΠΏΡΠΎΠ³ΡΠ΅ΡΡΠΈΠ²Π½ΠΎΠ³ΠΎ jpg. Π’Π°ΠΊΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ°ΠΉΠ»Π°.
ΠΡΠΎΠ³ΠΎ. ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΡΠ²ΠΈΡΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΡΡΠ°Π·Ρ, Π° ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΡΠ²ΠΈΡΡΡΡ Ρ Π·Π°Π΄Π΅ΡΠΆΠΊΠΎΠΉ. ΠΡΠΈΠΌΠ΅Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΊ ΡΠΏΡΠ°ΠΉΡΠ°ΠΌ ΡΡΠΎ Π²Π°ΠΆΠ½ΠΎ Π·Π½Π°ΡΡ. Π‘ΠΏΡΠ°ΠΉΡΡ ΠΆΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΠΎ Π΄Π΅Π»Π°ΡΡ ΡΠ΅ΡΠ΅Π·ΡΡΡΠΎΡΠ½ΡΠΌΠΈ ΠΈΠ»ΠΈ ΠΏΡΠΎΠ³ΡΠ΅ΡΡΠΈΠ²Π½ΡΠΌΠΈ. ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΡΡΡΠ΅Π΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΠΏΡΡΡΡ ΠΈ Π² ΠΏΠ»ΠΎΡ ΠΎΠΌ ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅.
ΠΠΎ!Β ΠΡΠ»ΠΈ ΡΠΈΠ½Π°Π»ΡΠ½ΡΠΉ ΡΠ°ΠΉΠ» ΡΠΎ Π²ΡΠ΅ΠΌΠΈ ΡΠΏΡΠ°ΠΉΡΠ°ΠΌΠΈ Π±ΡΠ΄Π΅Ρ ΡΠ»ΠΈΡΠΊΠΎΠΌ Π±ΠΎΠ»ΡΡΠΎΠΉ, ΡΠΎ Π½Π΅ΡΠΌΠΎΡΡΡ Π½Π° Π²ΡΡ ΠΏΡΠΎΠ³ΡΠ΅ΡΡΠΈΠ²Π½ΠΎΡΡΡ ΠΈ ΡΠ΅ΡΠ΅Π·ΡΡΡΠΎΡΠ½ΠΎΡΡΡ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Ρ ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΠΆΠ΄Π°ΡΡ Π΄Π°ΠΆΠ΅ ΡΠ°ΡΡΠΈΡΠ½ΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ ΡΠ°ΠΉΠ»Π°. ΠΠΎΡΡΠΎΠΌΡ Ρ Π½Π΅ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π±ΠΎΠ»ΡΡΠΈΠ΅ Π½Π°Π±ΠΎΡΡ ΡΠΏΡΠ°ΠΉΡΠΎΠ². ΠΡΠ»ΠΈ ΡΠ°ΠΉΠ» Π±ΠΎΠ»ΡΡΠΎΠΉ ΡΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠ΅ΡΡΠ΅ΡΡΡ Π²Π΅ΡΡ ΡΠΌΡΡΠ» ΡΠΏΡΠ°ΠΉΡΠΎΠ² β ΡΡΠΊΠΎΡΡΡΡ ΡΠ°Π±ΠΎΡΡ ΡΠ°ΠΉΡΠ°. Π‘ Π±ΠΎΠ»ΡΡΠΈΠΌΠΈ Π½Π°Π±ΠΎΡΠ°ΠΌΠΈ ΡΠΏΡΠ°ΠΉΡΠΎΠ² ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΠΆΠ΄Π°ΡΡ ΡΡΠΎΠ»ΡΠΊΠΎ ΠΆΠ΅, Π΅ΡΠ»ΠΈ Π½Π΅ Π±ΠΎΠ»ΡΡΠ΅, ΠΊΠ°ΠΊ ΠΈ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΎΠ±ΡΡΠ½ΡΡ ΡΠ°Π·Π΄Π΅Π»ΡΠ½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
ΠΠΎΠ»ΡΡΠΈΠΌΠΈ ΠΌΠ½Π΅ ΠΊΠ°ΠΆΡΡΡΡ ΡΠ°ΠΉΠ»Ρ ΡΠ²ΡΡΠ΅ 30 ΠΊΠΈΠ»ΠΎΠ±Π°ΠΉΡ. ΠΡΠΎ ΡΡΠ±ΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ. Π£ Π²Π°Ρ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΊΠ°ΠΊΠΈΠ΅ ΡΠΎ ΡΠ²ΠΎΠΈ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΎ Π²Π΅Π»ΠΈΡΠΈΠ½Π΅ ΡΠ°ΠΉΠ»Π°. Π€Π°ΠΉΠ» ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ 30 ΠΊΠΈΠ»ΠΎΠ±Π°ΠΉΡ Π±ΡΠ΄Π΅Ρ Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ ΠΎΠΊΠΎΠ»ΠΎ 7 ΡΠ΅ΠΊΡΠ½Π΄ ΠΏΡΠΈ ΡΠΊΠΎΡΠΎΡΡΠΈ ΠΈΠ½ΡΠ΅ΡΠ½Π΅ΡΠ° 56,6 ΠΊΠ±ΠΈΡ/Ρ.
ΠΡΠΈΠΌΠ΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠΏΡΠ°ΠΉΡΠΎΠ²
Π’Π΅ΠΏΠ΅ΡΡ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΎ ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠΏΡΠ°ΠΉΡΠΎΠ². Π― ΠΏΡΠΈΠ²Π΅Π΄Ρ Π΄Π²Π° ΠΏΡΠΈΠΌΠ΅ΡΠ° ΡΠΏΡΠ°ΠΉΡΠΎΠ² β ΡΠΏΡΠ°ΠΉΡΡ Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΌΠΈ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ ΠΈ ΡΠΏΡΠ°ΠΉΡΡ Ρ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ°ΠΌΠΈ. Π Π°Π±ΠΎΡΠΈΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΎΠ±ΠΎΠΈΡ
ΡΠΏΡΠ°ΠΉΡΠΎΠ² ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π·Π΄Π΅ΡΡ:
https://verstaem.com/examples/sprites/index.html
Π‘ΠΏΡΠ°ΠΉΡΡ Ρ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ
Π ΠΎΠ΄Π½ΠΎΠΌ ΡΠΏΡΠ°ΠΉΡΠ΅ Ρ ΠΌΠ΅Π½Ρ Π±ΡΠ΄ΡΡ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π΄Π»Ρ:
- Π‘ΠΏΠΈΡΠΊΠ° β ΠΎΠ΄Π½Π° ΠΈΠΊΠΎΠ½ΠΊΠ°
- Π‘ΡΡΠ»ΠΎΠΊ β ΡΡΠΈ ΠΈΠΊΠΎΠ½ΠΊΠΈ
- Π€ΠΎΡΠΌΡ ΠΏΠΎΠΈΡΠΊΠ° β ΠΎΠ΄Π½Π° ΠΈΠΊΠΎΠ½ΠΊΠ°
Π’ΠΎ Π΅ΡΡΡ ΠΏΠ΅ΡΠ²ΡΠΉ Π½Π°Π±ΠΎΡ ΡΠΏΡΠ°ΠΉΡΠΎΠ² Ρ ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ ΠΏΡΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ. ΠΡΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Ρ ΠΌΠ΅Π½Ρ Π±ΡΠ΄ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° β 16 Π½Π° 16 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. Π‘ΠΏΡΠ°ΠΉΡΠ°ΠΌΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π΄Π΅Π»Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΡΠ°Π·Π½ΡΠΌΠΈ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡΠΌΠΈ, Π½Π΅ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ ΡΡΠΎΠ±Ρ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π²ΡΠ΅Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ ΡΠΎΠ²ΠΏΠ΄Π°Π»ΠΎ. ΠΡΠΈ ΡΠ°Π·Π½ΠΎΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ ΡΡΡΡ ΡΡΠ»ΠΎΠΆΠ½ΡΠ΅ΡΡΡ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈ ΡΡΠΈΡ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ Π² ΠΎΠ΄ΠΈΠ½ ΡΠ°ΠΉΠ».
Π ΠΈΡΠΎΠ³Π΅ ΠΏΠ΅ΡΠ²ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ:
Π― Π½Π°ΡΠ΅Π» ΠΏΡΡΡ ΠΈΠΊΠΎΠ½ΠΎΠΊ. ΠΠΎΡΠ»Π΅ ΡΠ΅Π³ΠΎ ΠΏΡΠΎΡΡΠΎ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΠ» ΠΈΡ Π²ΡΠ΅ Π² ΠΎΠ΄Π½ΠΎΠΌ ΡΠ°ΠΉΠ»Π΅. ΠΠΎΡ ΡΠ°ΠΊΠΎΠΉ Π²ΠΎΡ ΡΠ°ΠΉΠ» Ρ ΠΌΠ΅Π½Ρ ΠΏΠΎΠ»ΡΡΠΈΠ»ΡΡ Π² ΠΈΡΠΎΠ³Π΅:
ΠΠ±ΡΠ°ΡΠ°Ρ Π²Π°ΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅. Π Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ Π½Π΅ Π²ΠΏΠ»ΠΎΡΠ½ΡΡ, ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠΌΠΈ Π΅ΡΡΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ. ΠΠ°ΠΊ ΠΏΠΎΠ΄ΠΎΠ±ΡΠ°ΡΡ ΡΡΠΈ ΠΎΡΡΡΡΠΏΡ? ΠΠΎΠΆΠ½ΠΎ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ ΡΠ°ΡΡΡΠΈΡΠ°ΡΡ Π²ΡΠ΅ ΠΏΠΎ ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌ, Π½ΠΎ Π½Π°Ρ ΡΠ»ΡΡΠ°ΠΉ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎΠΉ, ΠΏΠΎΡΡΠΎΠΌΡ Π·Π΄Π΅ΡΡ Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΏΠΎΠ΄ΠΎΠ±ΡΠ°ΡΡ ΡΡΠΈ ΠΎΡΡΡΡΠΏΡ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ΅ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΡΠΌ ΠΏΡΡΠ΅ΠΌ. Π‘Π½Π°ΡΠ°Π»Π° ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΠ΅ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΎΡΡΠΎ Π½Π° Π³Π»Π°Π·, ΠΏΠΎΡΠΎΠΌ Π±Π΅ΡΠ΅ΠΌ ΡΠ°ΠΌΡΡ Π²Π΅ΡΡ Π½ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ, ΡΡΠ°Π²ΠΈΠΌ Π΅Π΅ Π½Π° Π½ΡΠΆΠ½ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ. ΠΡΠ»ΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ ΠΌΠ΅ΡΡΠ΅, Π½ΠΎ ΠΏΡΠΈ ΡΡΠΎΠΌ ΠΎΡΠΊΡΠ΄Π° ΡΠΎ ΡΠΎΡΡΠΈΡ ΠΊΡΡΠΎΠΊ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΠΎ Π·Π½Π°ΡΠΈΡ ΠΎΡΡΡΡΠΏ Π½ΡΠΆΠ½ΠΎ ΡΠ²Π΅Π»ΠΈΡΠΈΡΡ.
ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΌΠΎΠΌΠ΅Π½Ρ. ΠΠΎΡΠ»Π΅Π΄Π½Π΅ΠΉ Π² ΡΠΏΠΈΡΠΊΠ΅ ΠΈΠ΄Π΅Ρ ΠΈΠΊΠΎΠ½ΠΊΠ° Π΄Π»Ρ ΡΠΏΠΈΡΠΊΠ° β Π·Π΅Π»Π΅Π½Π°Ρ ΡΡΡΠ΅Π»ΠΊΠ°. ΠΠΎΡΠ΅ΠΌΡ ΠΎΠ½Π° ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΏΠΎΡΠ»Π΅Π΄Π½ΡΡ? Π Π°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΡΡ ΠΈΠΊΠΎΠ½ΠΎΠΊ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ΅ Π½Π°ΠΌ Π±Π΅Π·ΡΠ°Π·Π»ΠΈΡΠ½ΠΎ, Π½ΠΎ Π² ΡΠΏΠΈΡΠΊΠ΅ Π»ΡΠ±ΠΎΠΉ ΠΏΡΠ½ΠΊΡ ΠΌΠΎΠΆΠ΅Ρ Π·Π°Π½ΠΈΠΌΠ°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΡΠΎΠΊ ΠΈ Π΅ΡΠ»ΠΈ Π·Π΅Π»Π΅Π½Π°Ρ ΡΡΡΠ΅Π»ΠΊΠ° Π±ΡΠ΄Π΅Ρ Π³Π΄Π΅-ΡΠΎ ΠΏΠΎΡΠ΅ΡΠ΅Π΄ΠΈΠ½Π΅, ΡΠΎ Π½Π° ΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΡΡΡΠΎΠΊΠ°Ρ Π±ΡΠ΄ΡΡ ΡΠΎΡΡΠ°ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ. ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΡΠΏΠΈΡΠΊΠ° Π²ΡΡΠ΅, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ½ΡΡΡ ΠΎ ΡΠ΅ΠΌ Ρ Π³ΠΎΠ²ΠΎΡΡ.
Π ΡΠ°ΠΊ. Π― Π½Π°ΡΠ΅Π» ΠΏΡΡΡ ΠΈΠΊΠΎΠ½ΠΎΠΊ, ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΠ» ΠΈΡ Π² ΠΎΠ΄ΠΈΠ½ ΡΠ°ΠΉΠ». Π§ΡΠΎ Π΄Π΅Π»Π°Π΅ΠΌ Π΄Π°Π»ΡΡΠ΅? Π Π°Π·ΡΠΌΠ΅Π΅ΡΡΡ ΠΏΠΈΡΠ΅ΠΌ ΠΊΠΎΠ΄:
<ul> <li>ΠΡΠ½ΠΊΡ ΡΠΏΠΈΡΠΊΠ°</li> <li>ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΏΡΠ½ΠΊΡ ΡΠΏΠΈΡΠΊΠ°</li> <li>ΠΡΠ½ΠΊΡ ΡΠΏΠΈΡΠΊΠ°</li> <li>ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΏΡΠ½ΠΊΡ ΡΠΏΠΈΡΠΊΠ°,<br /> Π½ΠΎ Π² Π΄Π²Π΅ ΡΡΡΠΎΠΊΠΈ</li> <li>ΠΡΠ½ΠΊΡ ΡΠΏΠΈΡΠΊΠ°</li> <li>ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΏΡΠ½ΠΊΡ ΡΠΏΠΈΡΠΊΠ°</li> </ul>
ΠΡΠΎ html ΠΊΠΎΠ΄ ΡΠΏΠΈΡΠΊΠ°. Π’Π΅ΠΏΠ΅ΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌ ΠΊ Π½Π΅ΠΌΡ Π½Π°Ρ ΡΠΏΡΠ°ΠΉΡ:
ul li{ padding:0 0 0 21px; background:url('sprites.png') 0 -94px no-repeat; }
Π§ΡΠΎ ΠΌΡ ΡΡΡ ΡΠ΄Π΅Π»Π°Π»ΠΈ? Π‘Π΄Π΅Π»Π°Π»ΠΈ ΠΎΡΡΡΡΠΏ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ <li> ΠΎΡ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ Π² 21 ΠΏΠΈΠΊΡΠ΅Π»Ρ, ΡΡΠΎΠ±Ρ ΡΠ΅ΠΊΡΡ Π½Π΅ Π·Π°ΡΠ»ΠΎΠ½ΡΠ» ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ.
- ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌ Π½ΡΠΆΠ½ΡΡ ΡΡΡΠ»ΠΊΡ ΠΏΠΎ href. ΠΡΠΎΡ Π°ΡΡΠΈΠ±ΡΡ Ρ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΠΌΠΎΠΉ ΡΡΡΠ»ΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π½Π°ΡΠΈΠ½Π°ΡΡΡΡ ΡΠΎ ΡΡΡΠΎΠΊΠΈ http://verstaem.com/. ΠΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ ΠΏΡΠΈΡΠ²ΠΎΠΈΡΡ ΠΊΠ»Π°ΡΡ Π½ΡΠΆΠ½ΠΎΠΉ ΡΡΡΠ»ΠΊΠ΅ ΠΈΠ»ΠΈ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ ΡΡΠΈΠ»ΠΈ Π² Π°ΡΡΡΠΈΠ±ΡΡ style ΠΏΡΡΠΌΠΎ Π² html ΠΊΠΎΠ΄Π΅. ΠΠ»ΠΈ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΡΠΈΡΠΎΠ²Π°ΡΡ Π½ΡΠΆΠ½ΡΡ ΡΡΡΠ»ΠΊΡ Π»ΡΠ±ΡΠΌ Π΄ΡΡΠ³ΠΈΠΌ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠΌ.
- ΠΠ΅Π»Π°Π΅ΠΌ ΠΎΡΡΡΠΏ ΠΎΡ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ Ρ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠΉ ΡΡΡΠ»ΠΊΠΈ Π² 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ
- Π£ΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ sprites.png
- ΠΠ°ΡΡΠΈΠ½ΠΊΠ° ΠΊΠΎΡΠΎΡΡΡ Ρ ΠΏΠΎΠ΄ΠΎΠ±ΡΠ°Π» Π΄Π»Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ Π±Π»ΠΎΠ³Π° Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π½Π° ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠΈ 21 ΠΏΠΈΠΊΡΠ΅Π»Ρ ΠΎΡ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ ΠΊΡΠ°Ρ, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΡΠΎΠ½ ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ΄Π²ΠΈΠ½ΡΡΡ Π½Π° 21 ΠΏΠΈΠΊΡΠ΅Π»Ρ Π²Π½ΠΈΠ·. Π css Ρ ΡΡΠΎ ΠΏΡΠΎΠΏΠΈΡΠ°Π» ΡΠ°ΠΊ Β«0 -21pxΒ»
ΠΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ Π΄Π΅Π»Π°ΡΡΡΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ.
Π Π°Π·Π»ΠΈΡΠ°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ Π²ΡΠ±ΠΎΡΠ° ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠΉ ΡΡΡΠ»ΠΊΠΈ ΠΈ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ Π½Π° ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΡ Π±ΡΠ΄Π΅Ρ ΡΠ΄Π²ΠΈΠ³Π°ΡΡ ΡΠΎΠ½.ΠΠΎΠΌΠ°ΡΠ½Π΅Π΅ Π·Π°Π΄Π°Π½ΠΈΠ΅
Π‘ΠΎΡ
ΡΠ°Π½ΠΈΡΠ΅ ΠΌΠΎΠΉ Π½Π°Π±ΠΎΡ ΡΠΏΡΠ°ΠΉΡΠΎΠ². Π‘ΠΎΡ
ΡΠ°Π½ΠΈΡΠ΅ ΡΠ°ΠΉΠ» Ρ ΠΏΡΡΡΡ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ. ΠΠΎΡΠ»Π΅ ΡΠ΅Π³ΠΎ ΠΏΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΎΡΠΌΡ ΠΏΠΎΠΈΡΠΊΠ° Ρ ΠΈΠΊΠΎΠ½ΠΊΠΎΠΉ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ. ΠΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΡΠ»Π΅Π²Π° ΠΎΡ ΡΠΎΡΠΌΡ ΠΏΠΎΠΈΡΠΊΠ° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π»ΡΡ Π½ΡΠΆΠ½ΡΠΉ ΡΠΏΡΠ°ΠΉΡ ΠΈΠ· Π½Π°Π±ΠΎΡΠ°. ΠΠ°Π΄Π°Π½ΠΈΠ΅ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎΠ΅, Π½ΠΎ Π΅ΡΠ»ΠΈ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡΡ ΡΠ»ΠΎΠΆΠ½ΠΎΡΡΠΈ, ΡΠΎ Π³ΠΎΡΠΎΠ²ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π·Π΄Π΅ΡΡ, Π² ΠΈΡΡ
ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠΎΠ΄Π΅:
http://verstaem.com/examples/sprites/index.html
Π‘ΠΏΡΠ°ΠΉΡΡ Ρ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ°ΠΌΠΈ
Π’Π΅ΠΏΠ΅ΡΡ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ Π²ΡΠΎΡΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ.
ΠΠ° ΡΡΠΎΠΉ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΎ ΠΎΠΊΠΎΡΠΊΠΎ. Π£ ΠΎΠΊΠ½Π° Π΅ΡΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, ΡΠ΅Π»ΠΎ ΠΈ ΠΏΠΎΠ΄Π²Π°Π». Π£ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· ΡΡΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° ΡΠΎΠ½Π΅ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ. ΠΡΠΈΡΠΌΠΎΡΡΠΈΡΠ΅ΡΡ Π΅ΡΠ»ΠΈ ΡΡΠΎΠ³ΠΎ ΡΡΠ°Π·Ρ Π½Π΅ Π²ΠΈΠ΄Π½ΠΎ, ΡΠ°ΠΌ Π΅ΡΡΡ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ ΡΠ²Π΅ΡΠ° ΠΎΡ Π±Π»Π΅Π΄Π½ΠΎΠ³ΠΎ ΠΊ Π½Π°ΡΡΡΠ΅Π½Π½ΠΎΠΌΡ.
Π― ΠΏΠΎΠΊΠ°ΠΆΡ ΠΊΠ°ΠΊ Π³ΡΠ°Π΄Π΅Π½ΡΡ Π² ΡΡΠΎΠΌ ΠΎΠΊΠΎΡΠΊΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΏΡΠ°ΠΉΡΠ°ΠΌΠΈ. ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈ ΠΏΠΎΠ΄Π²Π°Π» ΠΎΠΊΠ½Π° Π±ΡΠ΄ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ Π²ΡΡΠΎΡΡ β 30 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. Π’Π΅Π»ΠΎ ΠΎΠΊΠ½Π° Π±ΡΠ΄Π΅Ρ ΡΡΠ½ΡΡΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π΄Π»ΠΈΠ½Ρ ΡΠ΅ΠΊΡΡΠ°.
ΠΡΡ ΠΎΠ΄Ρ ΠΈΠ· ΡΠ°ΠΊΠΈΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ² ΠΎΠΊΠ½Π° Ρ ΡΠ΄Π΅Π»Π°Π» ΡΡΠΈ ΡΠ°Π·Π½ΡΡ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ° ΠΏΠΎ 30 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π² Π²ΡΡΠΎΡΡ ΠΈ 1 Π² ΡΠΈΡΠΈΠ½Ρ. ΠΠΎΡΠ»Π΅ ΡΠ΅Π³ΠΎ Ρ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΠ» Π²ΡΠ΅ ΡΡΠΈ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ° Π² ΠΎΠ΄ΠΈΠ½ ΡΠ°ΠΉΠ». ΠΠΎΡΡΠ°Π²ΠΈΠ» ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠ² Π΄ΡΡΠ³ Π½Π°Π΄ Π΄ΡΡΠ³ΠΎΠΌ. Π ΠΈΡΠΎΠ³Π΅ ΠΏΠΎΠ»ΡΡΠΈΠ»ΡΡ ΡΠ°ΠΉΠ» Π²ΡΡΠΎΡΠΎΠΉ 90 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ ΡΠΈΡΠΈΠ½ΠΎΠΉ Π² 1 ΠΏΠΈΠΊΡΠ΅Π»Ρ. Π€Π°ΠΉΠ» ΡΠ»ΠΈΡΠΊΠΎΠΌ ΠΌΠ΅Π»ΠΊΠΈΠΉ, Π² ΡΡΠ°ΡΠ΅ΡΠΉ Π²Ρ Π΅Π³ΠΎ ΠΏΡΠΎΡΡΠΎ Π½Π΅ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅. ΠΠΎΡ ΡΡΡ ΡΠ°ΠΉΠ» ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠΊΡΡΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ http://verstaem.com/examples/sprites/gradients.png.
Π’Π΅ΠΏΠ΅ΡΡ Π½Π°ΠΏΠΈΡΠ΅ΠΌ html ΠΊΠΎΠ΄ ΠΎΠΊΠΎΡΠΊΠ°:
<div> <div></div> <div> <div></div> <div></div> </div> <div></div> </div>
ΠΠ°ΡΠΈΠ½Π°Π΅ΠΌ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΡΠΏΡΠ°ΠΉΡΡ. ΠΠ°ΡΠ½Π΅ΠΌ Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΎΠΊΠ½Π°:
#window-header{ height:30px; background:#C0C0FF url('gradients.png') 0 0 repeat-x; }
Π ΡΠ°ΠΉΠ»Π΅ gradients.png ΡΠ½Π°ΡΠ°Π»Π° ΠΈΠ΄Π΅Ρ Π³ΡΠ°Π΄Π΅Π½Ρ Π΄Π»Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, ΠΏΠΎΡΠΎΠΌ Π΄Π»Ρ ΡΠ΅Π»Π° ΠΈ ΠΏΠΎΡΠΎΠΌ Π΄Π»Ρ Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΡΡΠΎΠΊΠΈ. Π’ΠΎ Π΅ΡΡΡ Π³ΡΠ°Π΄Π΅Π½Ρ Π΄Π»Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ ΠΎΡ ΡΠ°ΠΌΠΎΠ³ΠΎ Π²Π΅ΡΡ Π°. ΠΠΎΡΡΠΎΠΌΡ ΠΌΡ ΠΏΡΠΎΡΡΠΎ ΡΡΠ°Π²ΠΈΠΌ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΠ½Π° ΡΠ°ΠΌ ΡΠ°ΠΉΠ» ΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ ΠΊΠ°ΠΊ Β«0 0Β», ΡΠΎ Π΅ΡΡΡ Π½ΠΈΠΊΡΠ΄Π° Π½Π΅ ΠΎΡΡΡΡΠΏΠ°ΡΡ.
Π§ΡΠΎΠ±Ρ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ ΡΠ°ΡΡΡΠ½ΡΠ»ΡΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°Π΅ΠΌ Β«repeat-xΒ».Π§ΡΠΎΠ±Ρ Π³ΡΠ°Π΄Π΅Π½Ρ ΡΠ΅Π»ΠΈΠΊΠΎΠΌ Π²Π»Π΅Π· Π² Π·Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ Π²ΡΡΠΎΡΡ Π² 30 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
Π’ΠΎΡΠ½ΠΎ ΡΠ°ΠΊ ΠΆΠ΅ ΠΊΠ°ΠΊ ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΏΠΎΡΡΠ°Π²ΠΈΠΌ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ Π΄Π»Ρ ΠΏΠΎΠ΄Π²Π°Π»Π°:
#window-footer{ height:30px; background: #C0FFC0 url('gradients.png') 0 -60px repeat-x; }
Π’ΠΎΠ»ΡΠΊΠΎ Π½Π° ΡΡΠΎΡ ΡΠ°Π· ΠΌΡ ΡΠ΄Π²ΠΈΠ½Π΅ΠΌ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π²Π½ΠΈΠ· Π½Π° 60 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
Π‘ ΡΠ΅Π»ΠΎΠΌ ΠΎΠΊΠΎΡΠΊΠ° ΡΠΈΡΡΠ°ΡΠΈΡ ΡΠ»ΠΎΠΆΠ½Π΅Π΅. Π’Π΅Π»ΠΎ Ρ Π½Π°Ρ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡΡΡ, Π² ΠΎΡΠ»ΠΈΡΠΈΠΈ ΠΎΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΈ ΠΏΠΎΠ΄Π²Π°Π»Π°. Π’ΠΎ Π΅ΡΡΡ Π΅ΡΠ»ΠΈ ΠΌΡ ΠΏΡΠΎΡΡΠΎ ΡΠ΄Π΅Π»Π°Π΅ΠΌ ΠΎΠ΄ΠΈΠ½ div Π΄Π»Ρ ΡΠ΅Π»Π° ΠΎΠΊΠ½Π° ΠΈ ΠΏΠΎΡΡΠ°Π²ΠΈΠΌ ΡΡΠ΄Π° Π³ΡΠ°Π΄Π΅Π½Ρ, ΡΠΎ Π² ΡΡΠΎΠΌ Π΄ΠΈΠ²Π΅ ΠΏΠΎΡΠ²ΡΡΡΡ ΡΡΠ°Π·Ρ Π²ΡΠ΅ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΡ. ΠΠ°ΠΊ Π²Π°ΡΠΈΠ°Π½Ρ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΡΠ°Π²ΠΈΡΡ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ Π΄Π»Ρ ΡΠ΅Π»Π° ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΌ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ, Π½ΠΎ ΡΡΠΎ Π΅ΡΠ»ΠΈ Ρ Π½Π°Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ Π±Π»ΠΎΠΊΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΠ½ΡΡΡΡ? ΠΡΠ΅ ΡΡΠ°Π·Ρ Π½Π΅ ΡΠ΄Π΅Π»Π°Π΅ΡΡ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΌΠΈ. ΠΡ ΡΠ΄Π΅Π»Π°Π΅ΠΌ ΡΡΡΡ Ρ ΠΈΡΡΠ΅Π΅.
CSS ΠΊΠΎΠ΄ Π±ΡΠ΄Π΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ:
#window-body{ position:relative; } #window-body-gradient{ position:absolute; left:0; top:0; width:100%; height:30px; background:url('gradients.png') 0 -30px repeat-x; } #window-body-text{ position:relative; }
Π’Π΅ΠΏΠ΅ΡΡ ΡΠ°ΡΡΠΊΠ°ΠΆΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΡΡΠΎ ΠΌΡ ΡΡΡ ΡΠ΄Π΅Π»Π°Π»ΠΈ. ΠΠΎΡ html ΠΊΠΎΠ΄ ΡΠ΅Π»Π° ΠΎΠΊΠ½Π° ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ:
<div> <div></div> <div></div> </div>
ΠΠ°ΠΊ Π²ΠΈΠ΄ΠΈΡΠ΅ Π² ΡΠ΅Π»ΠΎ Ρ Π½Π°Ρ Π²Π»ΠΎΠΆΠ΅Π½ΠΎ Π΅ΡΠ΅ Π΄Π²Π° Π΄ΠΈΠ²Π°. ΠΠ΅ΡΠ²ΡΠΉ Β«window-body-gradientΒ» Π±ΡΠ΄Π΅Ρ ΠΎΡΠ²Π΅ΡΠ°ΡΡ Π·Π° Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ. ΠΡΠΎΡΠΎΠΉ Β«window-body-textΒ» Π½ΡΠΆΠ΅Π½ Π΄Π»Ρ ΡΠ΅ΠΊΡΡΠ°. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΡΡΠΎ ΠΏΠΎΠ½ΡΡΠ½ΠΎ ΠΈΠ· CSS ΠΊΠΎΠ΄Π° ΠΌΡ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠ»ΠΈ position:relative; Π΄Π»Ρ Π²ΡΠ΅Π³ΠΎ ΡΠ΅Π»Π° ΠΎΠΊΠ½Π° ΡΠ΅Π»ΠΈΠΊΠΎΠΌ.
ΠΠ»Ρ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ²Π° ΠΌΡ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ position:absolute. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΌΡ Π²ΡΠ±ΠΈΠ»ΠΈ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ½ΡΠΉ Π΄ΠΈΠ² ΠΈΠ· ΠΎΠ±ΡΠ΅Π³ΠΎ ΠΏΠΎΡΠΎΠΊΠ°. Π’Π΅ΠΏΠ΅ΡΡ ΡΡΠΎΡ Π΄ΠΈΠ² Π½ΠΈ Π½Π° ΡΡΠΎ Π½Π΅ Π²Π»ΠΈΡΠ΅Ρ. Π’Π°ΠΊ ΠΊΠ°ΠΊ Π΄Π»Ρ Π²ΡΠ΅Π³ΠΎ ΡΠ΅Π»Π° ΡΠ΅Π»ΠΈΠΊΠΎΠΌ Ρ Π½Π°Ρ ΡΠΊΠ°Π·Π°Π½ΠΎ position:relative, ΡΠΎ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ½ΡΠΉ Π΄ΠΈΠ² Π½ΠΈΠΊΡΠ΄Π° Π΄Π°Π»ΡΡΠ΅ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ Π½Π΅ ΡΠΏΠ»ΡΠ²Π°Π΅Ρ. ΠΡΠΈΠΊΡΠ΅ΠΏΠ»ΡΠ΅ΠΌ Π΅Π³ΠΎ ΠΊ Π»Π΅Π²ΠΎΠΌΡ ΠΈ Π²Π΅ΡΡ Π½Π΅ΠΌΡ ΠΊΡΠ°Ρ ΡΠ΅Π»Π° ΠΎΠΊΠ½Π° Ρ ΠΏΠΎΠΌΠΎΡΡΡ Β«left:0; top:0;Β». Π£ΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ Π²ΡΡΠΎΡΡ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ²Π° β 30 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. Π’ΠΎ Π΅ΡΡΡ ΡΡΡ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ Π²ΡΡΠΎΡΡ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ° ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»ΡΡΡ, Π΅ΡΠ»ΠΈ Π²ΡΡΠΎΡΠ° Π΄ΠΈΠ²Π° Π±ΡΠ΄Π΅Ρ Π±ΠΎΠ»ΡΡΠ΅ Π²ΡΡΠΎΡΡ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ°, ΡΠΎ Π² Π΄ΠΈΠ²Π΅ Π±ΡΠ΄ΡΡ ΡΠΎΡΡΠ°ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠΏΡΠ°ΠΉΡΡ.
Π Π½Π°ΠΊΠΎΠ½Π΅Ρ ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»ΡΠ΅ΠΌ ΠΊ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ½ΠΎΠΌΡ Π΄ΠΈΠ²Ρ Π½Π°Ρ ΡΠ°ΠΉΠ» gradients.png. ΠΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΠΎ ΡΠ΄Π²ΠΈΠ³Π°Π΅ΠΌ ΡΠΎΠ½ Π²Π²Π΅ΡΡ Π½Π° Π½ΡΠΆΠ½ΠΎΠ΅ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅, Π² Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠ΄Π²ΠΈΠ³Π°Π΅ΠΌ ΡΠΎΠ½ Π½Π° 30 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π²Π²Π΅ΡΡ .Π’Π΅ΠΏΠ΅ΡΡ Π² ΡΠ΅Π»Π΅ ΠΎΠΊΠ½Π° Ρ Π½Π°Ρ Π΅ΡΡΡ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ. ΠΠΎ ΠΎΠ½ Π·Π°ΡΠ»ΠΎΠ½ΡΠ΅Ρ ΡΠ΅ΠΊΡΡ. Π§ΡΠΎΠ±Ρ ΡΠ΅ΠΊΡΡ Π½Π΅ Π·Π°cΠ»ΠΎΠ½ΡΠ»ΡΡ ΠΎΠ±Π΅ΡΠ½Π΅ΠΌ Π²Π΅ΡΡ ΡΠ΅ΠΊΡΡ Π² Π΄ΠΈΠ² ΠΈ ΠΏΡΠΈΡΠ²ΠΎΠΈΠΌ Π΅ΠΌΡ position:relative. ΠΠΎΡΠ»Π΅ ΠΏΡΠΈΡΠ²ΠΎΠ΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ²Π΅ΡΡ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ°.
ΠΠΎΡ Π² ΠΎΠ±ΡΠ΅ΠΌ ΡΠΎ ΠΈ Π²ΡΠ΅. Π’Π΅ΠΏΠ΅ΡΡ ΠΌΡ ΡΠ°ΡΡΡΠ°Π²ΠΈΠ»ΠΈ Π²ΡΠ΅ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΡ Π² Π½Π°ΡΠ΅ ΠΎΠΊΠΎΡΠΊΠΎ. Π Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, ΠΈ Π² ΡΠ΅Π»ΠΎ, ΠΈ Π² ΠΏΠΎΠ΄Π²Π°Π».
Π’Π°ΠΊΠΈΠ΅ Π΄Π»ΠΈΠ½Π½ΡΠ΅ ΠΏΠΎΡΡΠ½Π΅Π½ΠΈΡ Ρ Π΄Π΅Π»Π°Ρ, ΡΡΠΎΠ±Ρ ΡΠΎΠ²ΡΠ΅ΠΌ Π²ΡΠ΅ Π±ΡΠ»ΠΎ ΠΏΠΎΠ½ΡΡΠ½ΠΎ. ΠΠΎ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ Π΅ΡΠ»ΠΈ Π²Ρ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ°Π·Π±ΠΈΡΠ°Π΅ΡΠ΅ΡΡ Π² Π²Π΅ΡΡΡΠΊΠ΅, ΡΠΎ Π²Π°ΠΌ Π½Π°Π²Π΅ΡΠ½ΠΎΠ΅ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΡΠ°ΠΌΠΈ ΠΏΡΠΈΠΌΠ΅ΡΡ:
Π ΠΎΡΠ΅ΡΠ΅Π΄Π½ΠΎΠΉ ΡΠ°Π· ΠΏΡΠΎΠ΄ΡΠ±Π»ΠΈΡΠΎΠ²Π°Π» ΡΡΡΠ»ΠΊΡ.
ΠΠ° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠ΄ΡΠΌΠ°ΡΡ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΏΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠΏΡΠ°ΠΉΡΠΎΠ². Π― ΠΏΠΎΠΊΠ°Π·Π°Π» ΡΠΎΠ»ΡΠΊΠΎ Π΄Π²Π° ΠΏΡΠΈΠΌΠ΅ΡΠ°, Π½ΠΎ ΡΡΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² Π΄ΠΎΠ»ΠΆΠ½ΠΎ Ρ Π²Π°ΡΠΈΡΡ Π΄Π»Ρ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΡ ΠΏΡΠΈΠ½ΡΠΈΠΏΠΎΠ² ΡΠ°Π±ΠΎΡΡ ΡΠΏΡΠ°ΠΉΡΠΎΠ². ΠΡΠ»ΠΈ ΠΎΡΡΠ°Π»ΠΈΡΡ ΠΊΠ°ΠΊΠΈΠ΅ ΡΠΎ Π²ΠΎΠΏΡΠΎΡΡ, ΡΠΎ Π·Π°Π΄Π°Π²Π°ΠΉΡΠ΅ Π² ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΡ .
CSS ΡΠΏΡΠ°ΠΉΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
Π‘ΠΏΡΠ°ΠΉΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ — ΡΡΠΎ Π½Π°Π±ΠΎΡ ΡΠ°Π·Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½Π΅Π½Ρ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΎΠ±ΡΠ΅ΠΌ ΡΠ°ΠΉΠ»Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΠ»Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΈ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ Ρ Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΡΡΠ΅Π±ΠΎΠ²Π°ΡΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ. ΠΡΠΈ ΡΡΠΎΠΌ, ΡΠ°ΠΊΠ°Ρ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ° Π³Π΅Π½Π΅ΡΠΈΡΡΠ΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π·Π°ΠΏΡΠΎΡΠΎΠ² ΠΊ ΡΠ΅ΡΠ²Π΅ΡΡ, Π·Π°Π½ΠΈΠΌΠ°Ρ ΠΊΠ°Π½Π°Π» ΡΠ²ΡΠ·ΠΈ.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΏΡΠ°ΠΉΡΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠΊΡΠ°ΡΠΈΡΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π·Π°ΠΏΡΠΎΡΠΎΠ² ΠΊ ΡΠ΅ΡΠ²Π΅ΡΡ ΠΈ ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡΡ ΠΏΠΎΡΡΠ΅Π±Π»ΡΠ΅ΠΌΡΠ΅ ΡΠ΅ΡΡΡΡΡ.
Π‘ΠΏΡΠ°ΠΉΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ — ΠΡΠΎΡΡΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ
ΠΠΌΠ΅ΡΡΠΎ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΈ ΡΠ°Π·Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ («img_navsprites.gif») ΡΠ°ΠΊΠΎΠ³ΠΎ Π²ΠΈΠ΄Π°:
ΠΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ CSS ΠΌΡ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΡ ΡΠ°ΡΡΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π½ΡΠΆΠ½Π° ΠΈΠΌΠ΅Π½Π½ΠΎ Π² Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ.
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ, ΠΊΠ°ΠΊΠ°Ρ ΡΠ°ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ «img_navsprites.gif» Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ:
<style> #home { width: 46px; height: 44px; background: url('img_navsprites.gif') 0 0; } </style> <img src="img_trans.gif">
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ:
ΠΠ±ΡΡΡΠ½Π΅Π½ΠΈΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ°:
<img src="img_trans. gif">
— ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠ΅ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π°ΡΡΠΈΠ±ΡΡ src Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΡΡΡΡΠΌ. ΠΡΠ½ΠΎΠ²Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ½ΠΎΠ²ΡΠΌ, Π΅Π³ΠΎ ΠΌΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ CSS.width: 46px; height: 44px;
— ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ Π½Π°ΠΌΠΈ ΡΠ°ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡbackground: url(img_navsprites.gif) 0 0;
— ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π΅Π³ΠΎ ΠΌΠ΅ΡΡΠΎΠ½Π°Ρ ΠΎΠΆΠ΄Π΅Π½ΠΈΠ΅ (ΡΠ»Π΅Π²Π° 0px, ΡΠ²Π΅ΡΡ Ρ 0px)
ΠΡΠΎ ΡΠ°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠΏΡΠ°ΠΉΡΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. Π’Π΅ΠΏΠ΅ΡΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΡ Π² ΡΡΡΠ»ΠΊΠ°Ρ ΠΈ Π΄Π»Ρ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΡΡΡΠ΅ΠΊΡΠ° Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΌΡΡΠΈ.
Π‘ΠΏΡΠ°ΠΉΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ — Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ ΡΠΏΠΈΡΠΎΠΊ ΡΡΡΠ»ΠΎΠΊ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ
ΠΠ»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠΏΠΈΡΠΊΠ° ΡΡΡΠ»ΠΎΠΊ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΏΡΠ°ΠΉΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ («img_navsprites.gif») ΠΈ HTML ΡΠΏΠΈΡΠΎΠΊ.
HTML ΡΠΏΠΈΡΠΎΠΊ ΡΠ΄ΠΎΠ±Π΅Π½ ΡΠ΅ΠΌ, ΡΡΠΎ ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ ΡΡΡΠ»ΠΊΠΈ ΠΈ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ:
<style> #navlist { position: relative; } #navlist li { margin: 0; padding: 0; list-style: none; position: absolute; top: 0; } #navlist li, #navlist a { height: 44px; display: block; } #home { left: 0px; width: 46px; background: url('img_navsprites. gif') 0 0; } #prev { left: 63px; width: 43px; background: url('img_navsprites.gif') -47px 0; } #next { left: 129px; width: 43px; background: url('img_navsprites.gif') -91px 0; } </style> <ul> <li><a href="default.asp"></a></li> <li><a href="css_intro.asp"></a></li> <li><a href="css_syntax.asp"></a></li> </ul>
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ:
ΠΠ±ΡΡΡΠ½Π΅Π½ΠΈΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ°:
#navlist {position:relative;}
— ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, ΡΡΠΎΠ±Ρ ΠΏΠΎΡΠΎΠΌ Π²Π½ΡΡΡΠΈ ΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅#navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;}
— ΠΎΡΡΡΡΠΏΡ (margin) ΠΈ ΠΏΠΎΠ»Ρ (padding) ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π² 0, ΡΡΠΈΠ»Ρ ΡΠΏΠΈΡΠΊΠ° (list-style) ΡΠ΄Π°Π»ΡΠ΅ΠΌ, Π° Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΏΠΈΡΠΊΠ° Π΄Π΅Π»Π°Π΅ΠΌ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠΌΠΈ#navlist li, #navlist a {height:44px;display:block;}
— Π·Π°Π΄Π°Π΅ΠΌ Π²ΡΡΠΎΡΡ Π²ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ 44px
Π’Π΅ΠΏΠ΅ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΠΈ ΡΡΠΈΠ»Ρ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠΉ ΡΠ°ΡΡΠΈ:
#home {left:0px;width:46px;}
— ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠ»Π΅Π²Π° ΠΈ Π΅Π³ΠΎ ΡΠΈΡΠΈΠ½Π° 46px#home {background:url(img_navsprites. gif) 0 0;}
— ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π΅Π³ΠΎ ΠΌΠ΅ΡΡΠΎΠ½Π°Ρ ΠΎΠΆΠ΄Π΅Π½ΠΈΠ΅ (ΡΠ»Π΅Π²Π° 0px, ΡΠ²Π΅ΡΡ Ρ 0px)#prev {left:63px;width:43px;}
— ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΄Π²ΠΈΠ½ΡΡ Π½Π° 63px Π²ΠΏΡΠ°Π²ΠΎ (46px ΡΠΈΡΠΈΠ½Ρ #home + Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΡΠΏΠΈΡΠΊΠ°), Π΅Π³ΠΎ ΡΠΈΡΠΈΠ½Π° 43px#prev {background:url('img_navsprites.gif') -47px 0;}
— ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² 47px ΡΠΏΡΠ°Π²Π° (46px ΠΎΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ #home + 1px ΠΎΡ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΠ΅Π»Ρ)#next {left:129px;width:43px;}
— ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΄Π²ΠΈΠ½ΡΡ Π½Π° 129px Π²ΠΏΡΠ°Π²ΠΎ (#prev Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ Π½Π° 63px + 43px ΠΎΡ #prev + Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ), ΠΈ Π΅Π³ΠΎ ΡΠΈΡΠΈΠ½Π° 43px#next {background:url('img_navsprites.gif') -91px 0;}
— ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² 91px ΡΠΏΡΠ°Π²Π° (46px ΠΎΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ #home + 1px ΠΎΡ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΠ΅Π»Ρ + 43px ΠΎΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ #prev + 1px ΠΎΡ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΠ΅Π»Ρ)
Π‘ΠΏΡΠ°ΠΉΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ — ΠΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΌΡΡΠΈ
Π’Π΅ΠΏΠ΅ΡΡ ΠΊ Π½Π°ΡΠ΅ΠΌΡ ΡΠΏΠΈΡΠΊΡ ΡΡΡΠ»ΠΎΠΊ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΌΡΡΠΈ.
Π‘ΡΠΎΠΈΡ ΡΠΊΠ°Π·Π°ΡΡ, ΡΡΠΎ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ :hover
ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Ρ Π»ΡΠ±ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ, Π° Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΡΡΡΠ»ΠΊΠ°ΠΌΠΈ.
ΠΠ°ΡΠ΅ Π½ΠΎΠ²ΠΎΠ΅ ΡΠΏΡΠ°ΠΉΡΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ («img_navsprites_hover.gif») ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΈ ΡΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π½ΡΠΆΠ½ΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ°:
Π’Π°ΠΊ ΠΊΠ°ΠΊ ΡΡΠΎ ΠΎΠ΄Π½ΠΎ Π΅Π΄ΠΈΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π° Π½Π΅ ΡΠ΅ΡΡΡ ΡΠ°Π·Π½ΡΡ ΡΠ°ΠΉΠ»ΠΎΠ², ΡΠΎ Π½Π΅ Π±ΡΠ΄Π΅Ρ Π½ΠΈΠΊΠ°ΠΊΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΎΡΠ½ΠΎΠΉ Π·Π°Π΄Π΅ΡΠΆΠΊΠΈ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π±ΡΠ΄Π΅Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡΡ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.
Π§ΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ Π½ΡΠΆΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ, Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΊ ΠΊΠΎΠ΄Ρ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅Π³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π²ΡΠ΅Π³ΠΎ ΡΡΠΈ ΡΡΡΠΎΡΠΊΠΈ, Π° ΡΠ°ΠΊΠΆΠ΅ Π·Π°ΠΌΠ΅Π½ΠΈΡΡ img_navsprites.gif Π½Π° img_navsprites_hover.gif:
#home a:hover { background: url('img_navsprites_hover.gif') 0 -45px; } #prev a:hover { background: url('img_navsprites_hover.gif') -47px -45px; } #next a:hover { background: url('img_navsprites_hover.gif') -91px -45px; }
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ:
ΠΠ±ΡΡΡΠ½Π΅Π½ΠΈΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ°:
#home a:hover {background: url('img_navsprites_hover.gif') 0 -45px;}
— Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π΄Π»Ρ ΡΡΡΠ΅ΠΊΡΠ°, ΠΌΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌ ΡΠ΅ ΠΆΠ΅ ΡΠ°ΠΌΡΠ΅ ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ, ΡΠΎΠ»ΡΠΊΠΎ ΡΠΌΠ΅ΡΠ΅Π½Π½ΡΠ΅ Π½Π° 45px Π²Π½ΠΈΠ·.
ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΏΡΠ°ΠΉΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ CSS
Π Π΅ΠΊΠ»Π°ΠΌΠ°
Π’Π΅Ρ Π½ΠΈΠΊΠ° ΡΠΏΡΠ°ΠΉΡΠΎΠ² CSS β ΡΡΠΎ ΡΠΏΠΎΡΠΎΠ± ΡΠΌΠ΅Π½ΡΡΠΈΡΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ HTTP-Π·Π°ΠΏΡΠΎΡΠΎΠ² ΠΊ ΡΠ΅ΡΡΡΡΠ°ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΡΡΠ΅ΠΌ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² ΠΎΠ΄ΠΈΠ½ ΡΠ°ΠΉΠ».
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΡΠΏΡΠ°ΠΉΡ
Π‘ΠΏΡΠ°ΠΉΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ ΡΠΎΠ±ΠΎΠΉ Π΄Π²ΡΠΌΠ΅ΡΠ½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΎΡΡΠΎΡΡ ΠΈΠ· ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² ΠΎΠ΄Π½ΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΊΡΡΠΏΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΌΠΈ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΠ°ΠΌΠΈ X ΠΈ Y.
Π§ΡΠΎΠ±Ρ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ· ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ CSS background-position
, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΠ΅Π΅ ΡΠΎΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ CSS Image Sprite
ΠΠ΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ° Ρ Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Ρ Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ Π·Π½Π°ΡΠΊΠΈ, ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ Ρ. Π΄., ΠΌΠΎΠΆΠ΅Ρ Π·Π°Π½ΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π΄Π»Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈ Π³Π΅Π½Π΅ΡΠΈΡΡΠ΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π·Π°ΠΏΡΠΎΡΠΎΠ² ΠΊ ΡΠ΅ΡΠ²Π΅ΡΡ.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΏΡΠ°ΠΉΡΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π²ΠΌΠ΅ΡΡΠΎ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΌΠ΅Π½ΡΡΠΈΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ HTTP-Π·Π°ΠΏΡΠΎΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΎΡΠΏΡΠ°Π²Π»ΡΠ΅Ρ Π½Π° ΡΠ΅ΡΠ²Π΅Ρ, ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΎΡΠ΅Π½Ρ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΡΠΌ Π΄Π»Ρ ΡΡΠΊΠΎΡΠ΅Π½ΠΈΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡ ΠΈ ΠΎΠ±ΡΠ΅ΠΉ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ ΡΠ°ΠΉΡΠ°.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: Π£ΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° HTTP-Π·Π°ΠΏΡΠΎΡΠΎΠ² ΠΈΠΌΠ΅Π΅Ρ Π±ΠΎΠ»ΡΡΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΡ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ ΠΎΡΠΊΠ»ΠΈΠΊΠ°, ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΠΉ Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ.
ΠΠ·Π½Π°ΠΊΠΎΠΌΡΡΠ΅ΡΡ ΡΠΎ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌΠΈ ΠΏΡΠΈΠΌΠ΅ΡΠ°ΠΌΠΈ, ΠΈ Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ ΠΎΠ΄Π½ΠΎ Π²ΠΈΠ΄ΠΈΠΌΠΎΠ΅ ΠΎΡΠ»ΠΈΡΠΈΠ΅; ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° ΠΈΠΊΠΎΠ½ΠΊΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ° Π² Π½Π΅ΡΠΏΡΠ°ΠΉΡΠΎΠ²ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ Π² ΠΏΠ΅ΡΠ²ΡΠΉ ΡΠ°Π· ΡΠ΅ΡΠ΅Π· ΠΊΠ°ΠΊΠΎΠ΅-ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΏΠΎΡΠ²ΠΈΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ, ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΈΠ·-Π·Π° ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΡΡ Ρ ΡΠ΅ΡΠ²Π΅ΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΌΡΡΠΈ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΠΎΠ΅ ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π΄Π²Π° ΡΠ°Π·Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΡΠΈΠ½ΠΈΠΌΠ°Ρ Π²ΠΎ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π² ΡΠΏΡΠ°ΠΉΡΠΎΠ²ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½Π΅Π½Ρ Π² ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΡΡΠ°Π·Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΌΡΡΠΈ, ΡΡΠΎ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ ΡΡΡΠ΅ΠΊΡΡ ΠΏΠ»Π°Π²Π½ΠΎΠ³ΠΎ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ΅Ρ Π½ΠΈΠΊΠΈ ΡΠΏΡΠ°ΠΉΡΠΎΠ² CSS ΠΏΡΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΠΎΠ²Π°Π½ΠΎ Π²: [ΠΠ ΠΠΠΠ — B]; Π½Π°ΠΌ ΡΠ΄Π°Π»ΠΎΡΡ ΡΠΌΠ΅Π½ΡΡΠΈΡΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ HTTP-Π·Π°ΠΏΡΠΎΡΠΎΠ² Π½Π° 9 ΠΈ ΠΎΠ±ΡΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ°ΠΉΠ»Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° 38,2 ΠΠ ΠΏΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ [ΠΠ ΠΠΠΠ — A];. ΠΡΠΎ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Π±ΠΎΠ»ΡΡΠΎΠ΅ ΡΠ»ΡΡΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ°. ΠΡΠ΅Π΄ΡΡΠ°Π²ΡΡΠ΅, ΡΡΠΎ Π²Ρ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π½Π° Π³ΠΎΡΠΎΠ²ΠΎΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅.
ΠΠ΅ΡΡ ΠΏΡΠΎΡΠ΅ΡΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΎΠΏΠΈΡΠ°Π½ Π½ΠΈΠΆΠ΅.
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠΏΡΠ°ΠΉΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΡΡΠΎΡ ΡΠΏΡΠ°ΠΉΡ, ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΠ² 10 ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ (mySprite.png). ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ²ΠΎΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΡΠΏΡΠ°ΠΉΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π»ΡΠ±ΠΎΠΉ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠΉ Π²Π°ΠΌ Π½ΡΠ°Π²ΠΈΡΡΡ.
Π‘ΠΎΠ²Π΅Ρ: ΠΠ»Ρ ΠΏΡΠΎΡΡΠΎΡΡ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ Π²ΡΠ΅ Π·Π½Π°ΡΠΊΠΈ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΠ»ΠΈ ΠΈΡ Π±Π»ΠΈΠ·ΠΊΠΎ Π΄ΡΡΠ³ ΠΊ Π΄ΡΡΠ³Ρ Π΄Π»Ρ ΠΎΠ±Π»Π΅Π³ΡΠ΅Π½ΠΈΡ ΡΠ°ΡΡΠ΅ΡΠ° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ.
ΠΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π½Π°ΡΠΊΠ° ΠΈΠ· ΡΠΏΡΠ°ΠΉΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΠ°ΠΊΠΎΠ½Π΅Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ CSS, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΡ ΡΠ°ΡΡΡ ΡΠΏΡΠ°ΠΉΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π½Π°ΠΌ Π½ΡΠΆΠ½Π°.
ΠΡΠ΅ΠΆΠ΄Π΅ Π²ΡΠ΅Π³ΠΎ, ΠΌΡ ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΠΊΠ»Π°ΡΡ .sprite
, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ Π·Π°Π³ΡΡΠΆΠ°ΡΡ Π½Π°ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΏΡΠ°ΠΉΡΠ°. ΠΡΠΎ Π΄Π΅Π»Π°Π΅ΡΡΡ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΡ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠΌΠ΅ΡΡ ΠΎΠ΄Π½ΠΎ ΠΈ ΡΠΎ ΠΆΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.
ΠΡΠΈΠΌΠ΅Ρ
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΡΠΎΡ ΠΊΠΎΠ΄ Β».sprite { background: url("images/mySprite.png") Π±Π΅Π· ΠΏΠΎΠ²ΡΠΎΡΠΎΠ²; }
Π’Π΅ΠΏΠ΅ΡΡ ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΠΊΠ»Π°ΡΡ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ Ρ ΠΎΡΠΈΠΌ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΠΎΠ±Ρ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ Π·Π½Π°ΡΠΎΠΊ Internet Explorer Π² Π²ΠΈΠ΄Π΅ ΡΠΏΡΠ°ΠΉΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΠ΄ CSS Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΡΠ°ΠΊΠΈΠΌ.
ΠΡΠΈΠΌΠ΅Ρ
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΡΠΎΡ ΠΊΠΎΠ΄ Β».ie { ΡΠΈΡΠΈΠ½Π°: 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; /* Π¨ΠΈΡΠΈΠ½Π° Π·Π½Π°ΡΠΊΠ° */ Π²ΡΡΠΎΡΠ°: 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; /* ΠΡΡΠΎΡΠ° Π·Π½Π°ΡΠΊΠ° */ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ; /* ΠΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π·Π½Π°ΡΠΎΠΊ ΠΊΠ°ΠΊ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ */ ΡΠΎΠ½ΠΎΠ²Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ: 0-200px; /* ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½Π° ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² ΡΠΏΡΠ°ΠΉΡΠ΅ */ }
Π’Π΅ΠΏΠ΅ΡΡ Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ Π²ΠΎΠΏΡΠΎΡ, ΠΊΠ°ΠΊ ΠΌΡ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΈ ΡΡΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π΄Π»Ρ background-position
? ΠΠ°Π²Π°ΠΉ Π²ΡΡΡΠ½ΠΈΠΌ. ΠΠ΅ΡΠ²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ β ΡΡΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ , Π° Π²ΡΠΎΡΠΎΠ΅ β Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½Π°. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π²Π΅ΡΡ
Π½ΠΈΠΉ Π»Π΅Π²ΡΠΉ ΡΠ³ΠΎΠ» Π·Π½Π°ΡΠΊΠ° Internet Explorer ΠΊΠ°ΡΠ°Π΅ΡΡΡ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ, Π΅Π³ΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΎΡ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ ΡΠΎΡΠΊΠΈ, Ρ.Π΅. Π²Π΅ΡΡ
Π½Π΅Π³ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΡΠ³Π»Π° ΡΠΏΡΠ°ΠΉΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΠ°Π²Π½ΠΎ 0 , ΠΈ ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ Π½Π° 5-ΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ , Π΅Π³ΠΎ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ ΠΎΡ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ ΡΠΎΡΠΊΠΈ ΡΠΏΡΠ°ΠΉΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 4 X 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ = 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ
, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π²ΡΡΠΎΡΠ° ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π·Π½Π°ΡΠΊΠ° ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ .
Π§ΡΠΎΠ±Ρ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ Π·Π½Π°ΡΠΎΠΊ Internet Explorer, ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ Π΅Π³ΠΎ Π»Π΅Π²ΡΠΉ Π²Π΅ΡΡ Π½ΠΈΠΉ ΡΠ³ΠΎΠ» Π² Π½Π°ΡΠ°Π»ΡΠ½ΡΡ ΡΠΎΡΠΊΡ, ΡΠΎ Π΅ΡΡΡ Π² Π»Π΅Π²ΡΠΉ Π²Π΅ΡΡ Π½ΠΈΠΉ ΡΠ³ΠΎΠ» ΡΠΏΡΠ°ΠΉΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ (mySprite.png). ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠ° ΠΈΠΊΠΎΠ½ΠΊΠ° ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π° Π½Π° ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠΈ 200px ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ, Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠΌΠ΅ΡΡΠΈΡΡ Π²ΡΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ (mySprite.png) Π²Π²Π΅ΡΡ Π½Π° 200px , ΡΡΠΎ ΡΡΠ΅Π±ΡΠ΅Ρ, ΡΡΠΎΠ±Ρ ΠΌΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ»ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΠΊ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΠΈΡΠ»ΠΎ, ΡΠΎ Π΅ΡΡΡ -200px , ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ Π΅Π³ΠΎ Π΄Π²ΠΈΠ³Π°ΡΡΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎ Π²Π²Π΅ΡΡ , ΡΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅Ρ Π΅Π³ΠΎ Π²Π½ΠΈΠ·. ΠΠ΄Π½Π°ΠΊΠΎ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ Π½Π΅ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΏΠ΅ΡΠ΅Π΄ Π»Π΅Π²ΡΠΌ Π²Π΅ΡΡ Π½ΠΈΠΌ ΡΠ³Π»ΠΎΠΌ Π·Π½Π°ΡΠΊΠ° Internet Explorer Π½Π΅Ρ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
Π‘ΠΎΠ²Π΅Ρ: ΠΡΠΎΡΡΠΎ ΠΏΠΎΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠΈΡΡΠΉΡΠ΅ ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π° background-position
Π² ΡΠ»Π΅Π΄ΡΡΡΠΈΡ
ΠΏΡΠΈΠΌΠ΅ΡΠ°Ρ
, ΠΈ Π²Ρ Π±ΡΡΡΡΠΎ ΡΠ·Π½Π°Π΅ΡΠ΅, ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ.
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΏΡΠ°ΠΉΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ CSS
Π ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌ ΡΠ°Π·Π΄Π΅Π»Π΅ ΠΌΡ ΡΠ·Π½Π°Π»ΠΈ, ΠΊΠ°ΠΊ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ Π·Π½Π°ΡΠΎΠΊ ΠΈΠ· ΡΠΏΡΠ°ΠΉΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡΠΎ ΡΠ°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠΏΡΠ°ΠΉΡΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΡΠ΅ΠΏΠ΅ΡΡ ΠΌΡ Π΄Π΅Π»Π°Π΅ΠΌ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΡΠ°Π³ Π²ΠΏΠ΅ΡΠ΅Π΄, ΡΠΎΠ·Π΄Π°Π²Π°Ρ ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Ρ ΡΡΡΠ΅ΠΊΡΠΎΠΌ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ , ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π² [ΠΠ ΠΠΠΠ — B].
ΠΠ΄Π΅ΡΡ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎ ΠΆΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΏΡΠ°ΠΉΡΠ° (mySprite.png) Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π½Π°ΡΠ΅Π³ΠΎ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ.
ΠΠ°Π·ΠΎΠ²ΡΠΉ HTML Π΄Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ
ΠΡ Π½Π°ΡΠ½Π΅ΠΌ Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π½Π°ΡΠ΅Π³ΠΎ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ Ρ Π½Π΅ΡΠΏΠΎΡΡΠ΄ΠΎΡΠ΅Π½Π½ΡΠΌ ΡΠΏΠΈΡΠΊΠΎΠΌ HTML.
ΠΡΠΈΠΌΠ΅Ρ
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΡΠΎΡ ΠΊΠΎΠ΄ Β»ΠΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ CSS Π΄Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ
Π ΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΡΠ°Π·Π΄Π΅Π»Π°Ρ ΠΎΠΏΠΈΡΠ°Π½ΠΎ, ΠΊΠ°ΠΊ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°ΡΡ ΠΏΡΠΎΡΡΠΎΠΉ Π½Π΅ΡΠΏΠΎΡΡΠ΄ΠΎΡΠ΅Π½Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ, ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π²ΡΡΠ΅, Π² Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS.
Π¨Π°Π³ 1. Π‘Π±ΡΠΎΡ ΡΡΡΡΠΊΡΡΡΡ ΡΠΏΠΈΡΠΊΠ°
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π½Π΅ΡΠΏΠΎΡΡΠ΄ΠΎΡΠ΅Π½Π½ΡΠ΅ ΡΠΏΠΈΡΠΊΠΈ HTML ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Ρ ΠΌΠ°ΡΠΊΠ΅ΡΠ°ΠΌΠΈ. ΠΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π°Π»ΠΈΡΡ ΠΌΠ°ΡΠΊΠ΅ΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ² Π΄Π»Ρ Π°ΡΡΠΈΠ±ΡΡΠ° list-style-type
Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ none
.
ΠΡΠΈΠΌΠ΅Ρ
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΡΠΎΡ ΠΊΠΎΠ΄ Β»ul.menu { ΡΠΈΠΏ ΡΡΠΈΠ»Ρ ΡΠΏΠΈΡΠΊΠ°: Π½Π΅Ρ; } ΡΠ».ΠΌΠ΅Π½Ρ Π»ΠΈ { ΠΎΡΡΡΡΠΏ: 5px; ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°: 16px; ΡΠ΅ΠΌΠ΅ΠΉΡΡΠ²ΠΎ ΡΡΠΈΡΡΠΎΠ²: "Trebuchet MS", Arial, Π±Π΅Π· Π·Π°ΡΠ΅ΡΠ΅ΠΊ; }
Π¨Π°Π³ 2: ΠΠ°ΡΡΡΠΎΠΉΠΊΠ° ΠΎΠ±ΡΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ² Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΡΠ»ΠΊΠΈ
ΠΠ° ΡΡΠΎΠΌ ΡΠ°Π³Π΅ ΠΌΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠΌ Π²ΡΠ΅ ΠΎΠ±ΡΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° CSS, ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ΄ΡΡ ΠΎΠ±ΡΠΈΠΌΠΈ Π΄Π»Ρ Π²ΡΠ΅Ρ
ΡΡΡΠ»ΠΎΠΊ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, color
, background-image
, display
, padding
ΠΈ Ρ. Π΄.
ΠΡΠΈΠΌΠ΅Ρ
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΡΠΎΡ ΠΊΠΎΠ΄ Β»ul.menu li a { Π²ΡΡΠΎΡΠ°: 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; Π²ΡΡΠΎΡΠ° ΡΡΡΠΎΠΊΠΈ: 50px; ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ; ΠΎΡΡΡΡΠΏ ΡΠ»Π΅Π²Π°: 60px; /* Π§ΡΠΎΠ±Ρ ΠΎΡΠ΄Π΅Π»ΠΈΡΡ ΡΠ΅ΠΊΡΡ ΠΎΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ */ ΡΠ²Π΅Ρ: #3E789Π€; background: url("images/mySprite.png") Π±Π΅Π· ΠΏΠΎΠ²ΡΠΎΡΠΎΠ²; /* ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π²ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ ΠΈΠΌΠ΅ΡΡ ΠΎΠ΄Π½ΠΎ ΠΈ ΡΠΎ ΠΆΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ */ }
Π¨Π°Π³ 3: Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΡΠ»ΠΊΠΈ
Π’Π΅ΠΏΠ΅ΡΡ ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΠΊΠ»Π°ΡΡ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΏΡΠ½ΠΊΡΠ° ΠΌΠ΅Π½Ρ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΏΡΠ°ΠΉΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠΌΠ΅Π΅Ρ ΡΠ°Π·Π½ΠΎΠ΅ background-position
. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π·Π½Π°ΡΠΎΠΊ Firefox ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π² Π½Π°ΡΠ°Π»ΡΠ½ΡΡ ΡΠΎΡΠΊΡ, ΡΠΎ Π΅ΡΡΡ Π² Π²Π΅ΡΡ
Π½ΠΈΠΉ Π»Π΅Π²ΡΠΉ ΡΠ³ΠΎΠ» ΡΠΏΡΠ°ΠΉΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΏΠΎΡΡΠΎΠΌΡ Π½Π΅Ρ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΡΠ΄Π²ΠΈΠ³Π°ΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. Π‘Π»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½Π° Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π±ΡΠ΄Π΅Ρ ΡΠ°Π²Π½ΠΎ 0. Π’ΠΎΡΠ½ΠΎ ΡΠ°ΠΊ ΠΆΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½Π° Π΄Π»Ρ Π΄ΡΡΠ³ΠΈΡ
Π·Π½Π°ΡΠΊΠΎΠ² Π² ΡΠΏΡΠ°ΠΉΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΡΠΈΠΌΠ΅Ρ
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΡΠΎΡ ΠΊΠΎΠ΄ Β»ul.menu li.firefox a { ΡΠΎΠ½ΠΎΠ²Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ: 0 0; } ul.menu li.chrome { ΡΠΎΠ½ΠΎΠ²Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ: 0-100px; } ul.menu li.ie a { ΡΠΎΠ½ΠΎΠ²Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ: 0-200px; } ul.menu li.safari { ΡΠΎΠ½ΠΎΠ²Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ: 0-300px; } ul.menu li.opera { ΡΠΎΠ½ΠΎΠ²Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ: 0-400px; }
Π¨Π°Π³ 4. ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π΄Π»Ρ ΡΡΡΠ»ΠΎΠΊ
ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΎΡΠ½ΠΎΠ²Π°Π½ΠΎ Π½Π° ΡΠΎΠΌ ΠΆΠ΅ ΠΏΡΠΈΠ½ΡΠΈΠΏΠ΅, ΡΡΠΎ ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠΊΠ°Π·Π°Π½Π½ΡΡ
Π²ΡΡΠ΅ ΡΡΡΠ»ΠΎΠΊ. ΠΡΠΎΡΡΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΠ΅ ΠΈΡ
Π²Π΅ΡΡ
Π½ΠΈΠΉ Π»Π΅Π²ΡΠΉ ΡΠ³ΠΎΠ» Π² Π½Π°ΡΠ°Π»ΡΠ½ΡΡ ΡΠΎΡΠΊΡ (ΡΠΎ Π΅ΡΡΡ Π² Π²Π΅ΡΡ
Π½ΠΈΠΉ Π»Π΅Π²ΡΠΉ ΡΠ³ΠΎΠ») ΡΠΏΡΠ°ΠΉΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠ°ΠΊ ΠΌΡ ΡΠ΄Π΅Π»Π°Π»ΠΈ Π²ΡΡΠ΅. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΡΠΎ ΡΠ°ΡΡΡΠΈΡΠ°ΡΡ background-position
, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ»Π΅Π΄ΡΡΡΡΡ ΡΠΎΡΠΌΡΠ»Ρ:
ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ = ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ - 50px
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠΎΠ»Π»ΠΎΠ²Π΅ΡΠ½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ ΡΡΡΡ Π½ΠΈΠΆΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, Π° Π²ΡΡΠΎΡΠ° ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π·Π½Π°ΡΠΊΠ° ΡΠ°Π²Π½Π° 50px. Π‘ΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π·Π½Π°ΡΠΊΠΎΠ² ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΡΠ°ΠΊΠΆΠ΅ Π½Π΅ ΡΡΠ΅Π±ΡΠ΅Ρ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΏΠ΅ΡΠ΅Π΄ ΠΈΡ Π»Π΅Π²ΡΠΌ Π²Π΅ΡΡ Π½ΠΈΠΌ ΡΠ³Π»ΠΎΠΌ Π½Π΅Ρ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
ΠΡΠΈΠΌΠ΅Ρ
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΡΠΎΡ ΠΊΠΎΠ΄ Β»ul.menu li.firefox a:hover { ΡΠΎΠ½ΠΎΠ²Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ: 0-50px; } ul.menu li.chrome a: hover { ΡΠΎΠ½ΠΎΠ²Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ: 0-150px; } ul.menu li.ie a:hover { ΡΠΎΠ½ΠΎΠ²Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ: 0-250px; } ul.menu li.safari a:hover { ΡΠΎΠ½ΠΎΠ²Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ: 0-350px; } ul.menu li.opera a:hover { ΡΠΎΠ½ΠΎΠ²Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ: 0-450px; }
ΠΠΎΡΠΎΠ²ΠΎ! ΠΠΎΡ Π½Π°Ρ ΠΎΠΊΠΎΠ½ΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ ΠΊΠΎΠ΄ HTML ΠΈ CSS ΠΏΠΎΡΠ»Π΅ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΡ Π²ΡΠ΅Π³ΠΎ ΠΏΡΠΎΡΠ΅ΡΡΠ°:
ΠΡΠΈΠΌΠ΅Ρ
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΡΠΎΡ ΠΊΠΎΠ΄ Β»<Π³ΠΎΠ»ΠΎΠ²Π°> <ΠΌΠ΅ΡΠ°-ΠΊΠΎΠ΄ΠΈΡΠΎΠ²ΠΊΠ°="utf-8">ΠΡΠΈΠΌΠ΅Ρ ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΡΠΏΡΠ°ΠΉΡΠ° <ΡΡΠΈΠ»Ρ> ΡΠ».ΠΌΠ΅Π½Ρ { ΡΠΈΠΏ ΡΡΠΈΠ»Ρ ΡΠΏΠΈΡΠΊΠ°: Π½Π΅Ρ; } ΡΠ».ΠΌΠ΅Π½Ρ Π»ΠΈ { ΠΎΡΡΡΡΠΏ: 5px; ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°: 16px; ΡΠ΅ΠΌΠ΅ΠΉΡΡΠ²ΠΎ ΡΡΠΈΡΡΠΎΠ²: "Trebuchet MS", Arial, Π±Π΅Π· Π·Π°ΡΠ΅ΡΠ΅ΠΊ; } ul.menu li a { Π²ΡΡΠΎΡΠ°: 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; Π²ΡΡΠΎΡΠ° ΡΡΡΠΎΠΊΠΈ: 50px; ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ; ΠΎΡΡΡΡΠΏ ΡΠ»Π΅Π²Π°: 60px; /* Π§ΡΠΎΠ±Ρ ΠΎΡΠ΄Π΅Π»ΠΈΡΡ ΡΠ΅ΠΊΡΡ ΠΎΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ */ ΡΠ²Π΅Ρ: #3E789Π€; background: url("images/mySprite. png") Π±Π΅Π· ΠΏΠΎΠ²ΡΠΎΡΠΎΠ²; /* ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π²ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ ΠΈΠΌΠ΅ΡΡ ΠΎΠ΄Π½ΠΎ ΠΈ ΡΠΎ ΠΆΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ */ } ul.menu li.firefox a { ΡΠΎΠ½ΠΎΠ²Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ: 0 0; } ul.menu li.chrome { ΡΠΎΠ½ΠΎΠ²Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ: 0-100px; } ul.menu li.ie a { ΡΠΎΠ½ΠΎΠ²Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ: 0-200px; } ul.menu li.safari { ΡΠΎΠ½ΠΎΠ²Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ: 0-300px; } ul.menu li.opera { ΡΠΎΠ½ΠΎΠ²Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ: 0-400px; } ul.menu li.firefox a:hover { ΡΠΎΠ½ΠΎΠ²Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ: 0-50px; } ul.menu li.chrome a: hover { ΡΠΎΠ½ΠΎΠ²Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ: 0-150px; } ul.menu li.ie a:hover { ΡΠΎΠ½ΠΎΠ²Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ: 0-250px; } ul.menu li.safari a:hover { ΡΠΎΠ½ΠΎΠ²Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ: 0-350px; } ul.menu li.opera a:hover { ΡΠΎΠ½ΠΎΠ²Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ: 0-450px; } <ΡΠ΅Π»ΠΎ> <ΡΠ»>
ΠΡΠ΅Π΄ΡΠ΄ΡΡΠ°Ρ ΡΡΡΠ°Π½ΠΈΡΠ° Π‘Π»Π΅Π΄ΡΡΡΠ°Ρ ΡΡΡΠ°Π½ΠΈΡΠ°
Π‘ΠΏΡΠ°ΠΉΡΡ CSS | ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠΏΡΠ°ΠΉΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΠΎΠΈΡΠΊ
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΏΡΠ°ΠΉΡΠΎΠ² CSS β ΡΡΠΎ ΡΠΏΠΎΡΠΎΠ± ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² ΠΎΠ΄ΠΈΠ½ ΡΠ°ΠΉΠ» ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π½Π° Π²Π°ΡΠ΅ΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅ Ρ ΡΠ΅Π»ΡΡ ΠΏΠΎΠ²ΡΡΠ΅Π½ΠΈΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ.
Π£ΡΠΈΡΡΠ²Π°Ρ, ΡΡΠΎ Π²Ρ ΡΠΎΠ·Π΄Π°Π΄ΠΈΡΠ΅ ΠΎΡΠ»ΠΈΡΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΠΏΡΠ°ΠΉΡ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΌ, Π½ΠΎ ΡΠΏΡΠ°ΠΉΡΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΠΎΠΌΠΎΡΡ ΠΏΡΠΎΡΡΠ½ΠΈΡΡ ΡΠΈΡΡΠ°ΡΠΈΡ. Π’Π΅ΡΠΌΠΈΠ½ Β«ΡΠΏΡΠ°ΠΉΡΡΒ» ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΎΡ ΡΠ΅Ρ Π½ΠΈΠΊΠΈ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ½ΠΎΠΉ Π³ΡΠ°ΡΠΈΠΊΠΈ, ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠΎΠΉ Π² Π²ΠΈΠ΄Π΅ΠΎΠΈΠ³ΡΠ°Ρ . ΠΠΎΠΌΠΏΡΡΡΠ΅Ρ ΠΌΠΎΠΆΠ΅Ρ ΡΠΎΡ ΡΠ°Π½ΡΡΡ Π³ΡΠ°ΡΠΈΠΊΡ Π² ΠΏΠ°ΠΌΡΡΠΈ, Π° Π·Π°ΡΠ΅ΠΌ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°ΡΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ.
Sprite β ΡΡΠΎ, ΠΏΠΎ ΡΡΡΠΈ, ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ Π³ΡΠ°ΡΠΈΠΊΠ°. CSS-ΡΠΏΡΠ°ΠΉΡΡ ΠΏΠΎΠΌΠΎΠ³Π°ΡΡ Π²Π°ΠΌ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠ΄ΠΈΠ½ ΡΠ°Π·, ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡ Π΅Π³ΠΎ ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π΅Π³ΠΎ ΡΠ°ΡΡΠΈ. ΠΡΠΎ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ½ΠΈΠΆΠ°Π΅Ρ Π½Π°ΠΊΠ»Π°Π΄Π½ΡΠ΅ ΡΠ°ΡΡ ΠΎΠ΄Ρ Π½Π° ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΠ΅ Π±ΠΎΠ»ΡΡΠ΅Π³ΠΎ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. Π‘Π»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, ΡΠΏΡΠ°ΠΉΡ β ΡΡΠΎ Π½Π°Π±ΠΎΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΡΠΎΠ±ΡΠ°Π½Π½ΡΡ Π² Π΅Π΄ΠΈΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΠ΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ° Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ ΠΌΠΎΠΆΠ΅Ρ Π΄ΠΎΠ»ΡΡΠ΅ Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ ΠΈ Π³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ Π·Π°ΠΏΡΠΎΡΠΎΠ² ΠΊ ΡΠ΅ΡΠ²Π΅ΡΡ. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΏΡΠ°ΠΉΡΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π²Π°ΠΌ ΡΠΌΠ΅Π½ΡΡΠΈΡΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π·Π°ΠΏΡΠΎΡΠΎΠ² ΠΊ ΡΠ΅ΡΠ²Π΅ΡΡ ΠΈ ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ ΡΡΠ°ΡΠΈΠΊ.
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠ΅Ρ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. Π‘ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΡ ΡΠ°ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΡ Ρ ΠΎΡΠΈΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΠ»ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ. ΠΠΈΠΆΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ ΡΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΏΡΠ°ΠΉΡΠΎΠ², ΡΠΎΠ·Π΄Π°Π½Π½ΡΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΠ΅Π½Π΅ΡΠ°ΡΠΎΡ ΡΠΏΡΠ°ΠΉΡΠΎΠ² CSS . Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠ΅ΡΠ²ΡΠΉ ΠΈΠ· Π½ΠΈΡ (sprites.gif) ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ 132×43 ΠΏΠΈΠΊΡΠ΅Π»Ρ:
Π ΡΡΡΠΎΠΊΠ°Ρ Π½ΠΈΠΆΠ΅ ΠΌΡ ΠΏΡΠΈΠ²Π΅Π΄Π΅ΠΌ ΠΏΡΠΎΡΡΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π°ΡΠ΅ CSS-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ sprites.gif:
.<Π³ΠΎΠ»ΠΎΠ²Π°> <ΡΡΠΈΠ»Ρ> #Π΄ΠΎΠΌ { ΡΠΈΡΠΈΠ½Π°: 43 ΠΏΠΈΠΊΡΠ΅Π»Ρ; Π²ΡΡΠΎΡΠ°: 43 ΠΏΠΈΠΊΡΠ΅Π»Ρ; ΡΠΎΠ½: url(sprites.gif) 0 0 Π±Π΅Π· ΠΏΠΎΠ²ΡΠΎΡΠ°; } #ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ { ΡΠΈΡΠΈΠ½Π°: 43 ΠΏΠΈΠΊΡΠ΅Π»Ρ; Π²ΡΡΠΎΡΠ°: 43 ΠΏΠΈΠΊΡΠ΅Π»Ρ; ΡΠΎΠ½: url(sprites.gif) -89px 0 Π±Π΅Π· ΠΏΠΎΠ²ΡΠΎΡΠ°; } #Π½Π°Π·Π°Π΄ { ΡΠΈΡΠΈΠ½Π°: 43 ΠΏΠΈΠΊΡΠ΅Π»Ρ; Π²ΡΡΠΎΡΠ°: 43 ΠΏΠΈΠΊΡΠ΅Π»Ρ; ΡΠΎΠ½: url(sprites.gif) -43px 0 Π±Π΅Π· ΠΏΠΎΠ²ΡΠΎΡΠ°; } <ΡΠ΅Π»ΠΎ>
gif">
ΠΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ½ΠΎΠ²ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΡ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ Π² CSS. Π¨ΠΈΡΠΈΠ½Π°: 43 ΠΏΠΈΠΊΡΠ΅Π»Ρ, ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ Π²ΡΡΠΎΡΠ° 43 ΠΏΠΈΠΊΡΠ΅Π»Ρ β ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ°ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΡ ΠΌΡ Ρ ΠΎΡΠΈΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ; background: url (sprites.gif) 0 0 Π±Π΅Π· ΠΏΠΎΠ²ΡΠΎΡΠ°; β ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π΅Π³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΡ (ΡΠ»Π΅Π²Π° 0px, ΡΠ²Π΅ΡΡ Ρ 0px) ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ no-repeat. ΠΡΡΠΈΠ±ΡΡ img ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠΉ gif, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ src Π½Π΅Π»ΡΠ·Ρ ΠΎΡΡΠ°Π²ΠΈΡΡ ΠΏΡΡΡΡΠΌ. ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π²ΡΡΠ΅, ΡΡΠ΄ΠΎΠΌ Ρ ΠΊΠΎΠ΄ΠΎΠΌ.
ΠΠ°Π»Π΅Π΅ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΏΡΠ°ΠΉΡΠ° (Β«sprites.gifΒ») Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠΏΠΈΡΠΊΠ° Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ. Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΏΠΈΡΠΎΠΊ HTML, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΡΡΠ»ΠΊΠΎΠΉ ΠΈ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.
ΠΡΠΈΠΌΠ΅Ρ:
<Π³ΠΎΠ»ΠΎΠ²Π°> <ΡΡΠΈΠ»Ρ> #Π½Π°Π²Π»ΠΈΡΡ { ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΠΈΠΊ; } #Π½Π°Π²Π»ΠΈΡΡ Π»ΠΈ { ΠΌΠ°ΡΠΆΠ°: 0; Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: 0; ΡΡΠΈΠ»Ρ ΡΠΏΠΈΡΠΊΠ°: Π½Π΅Ρ; ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅; ΡΠ²Π΅ΡΡ Ρ: 0; } #navlist li, #navlist a { Π²ΡΡΠΎΡΠ°: 43 ΠΏΠΈΠΊΡΠ΅Π»Ρ; Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π±Π»ΠΎΠΊ; } #Π΄ΠΎΠΌ { ΡΠ»Π΅Π²Π°: 0px; ΡΠΈΡΠΈΠ½Π°: 43 ΠΏΠΈΠΊΡΠ΅Π»Ρ; ΡΠΎΠ½: url('sprites. gif') 0 0; } #ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΠΉ { ΡΠ»Π΅Π²Π°: 63px; ΡΠΈΡΠΈΠ½Π°: 43 ΠΏΠΈΠΊΡΠ΅Π»Ρ; ΡΠΎΠ½: url('sprites.gif') -46px 0; } #ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ { ΠΎΡΡΠ°Π»ΠΎΡΡ: 129ΠΏΠΊΡ; ΡΠΈΡΠΈΠ½Π°: 43 ΠΏΠΈΠΊΡΠ΅Π»Ρ; ΡΠΎΠ½: url('sprites.gif') -89px 0; } <ΡΠ΅Π»ΠΎ> <ΡΠ»>
Π ΡΡΡΠΎΠΊΠ°Ρ Π½ΠΈΠΆΠ΅ ΠΌΡ Ρ ΠΎΡΠ΅Π»ΠΈ Π±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΎΡ ΠΎΠΆΠ΄Π΅Π½ΠΈΡ Π² Π½Π°Ρ ΡΠΏΠΈΡΠΎΠΊ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ» ΡΠΎΠ·Π΄Π°Π½ Π²ΡΡΠ΅. ΠΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π° ΡΠΏΡΠ°ΠΉΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π½Π°ΠΌ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ ΡΠΏΡΠ°ΠΉΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ, Π² Π½Π°ΡΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ sprites_hover.gif, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΠΌΠ΅Π΅Ρ ΡΠ΅ ΠΆΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ, ΡΡΠΎ ΠΈ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, sprites.gif. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ Π»ΡΠ±ΠΎΠΉ ΡΡΡΠ΅ΠΊΡ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ, ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΡΠΈ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΡΡΠΈ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΡΡΠ΅ΠΊΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ Ρ ΠΎΡΠΈΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ Π΄Π»Ρ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π·Π°Π³ΡΡΠ·ΠΊΠΈ. Π£ΡΠΈΡΡΠ²Π°Ρ, ΡΡΠΎ ΡΡΠΎ Π΅Π΄ΠΈΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π° Π½Π΅ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ ΡΠ°ΠΉΠ»Ρ, Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΡΠΊΠΎΡΠΎΡΡΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π΅ Π±ΡΠ΄Π΅Ρ Π·Π°Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ. ΠΡ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΡΠΎΠΊ ΠΊΠΎΠ΄Π°, ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ:
#Π΄ΠΎΠΌΠ°:Π½Π°Π²Π΅Π΄ΠΈΡΠ΅ { ΡΠΎΠ½: url('sprites_hover.gif') 0-43px; }
ΠΠΎΠ»Π½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½ Π½ΠΈΠΆΠ΅:
<Π³ΠΎΠ»ΠΎΠ²Π°> <ΡΡΠΈΠ»Ρ> /*position ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅, ΡΡΠΎΠ±Ρ ΡΠ°Π·ΡΠ΅ΡΠΈΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π²Π½ΡΡΡΠΈ Π½Π΅Π³ΠΎ*/ #Π½Π°Π²Π»ΠΈΡΡ { ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΠΈΠΊ; } /*ΠΏΠΎΠ»Π΅ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ Π½Π° 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΡΡΠΈΠ»Ρ ΡΠΏΠΈΡΠΊΠ° ΡΠ΄Π°Π»Π΅Π½, Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΏΠΈΡΠΊΠ° ΠΈΠΌΠ΅ΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, Π²Π΅ΡΡ Π½Π΅Π΅ ΠΏΠΎΠ»Π΅ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ Π½Π° 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ */ #Π½Π°Π²Π»ΠΈΡΡ Π»ΠΈ { ΠΏΠΎΠ»Π΅: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΡΡΠΈΠ»Ρ ΡΠΏΠΈΡΠΊΠ°: Π½Π΅Ρ; ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅; Π²Π΅ΡΡ : 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΠΎΡΡΡΡΠΏ ΡΠ»Π΅Π²Π°: 2px; } /*Π²ΡΡΠΎΡΠ° Π²ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ 43px*/ #navlist li, #navlist a { Π²ΡΡΠΎΡΠ°: 43 ΠΏΠΈΠΊΡΠ΅Π»Ρ; Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π±Π»ΠΎΠΊ; } /*ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π²Π»Π΅Π²ΠΎ, ΡΠΈΡΠΈΠ½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ 43 ΠΏΠΈΠΊΡΠ΅Π»Ρ, ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ sprites.gif ΠΈ Π΅Π³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΡΠ»Π΅Π²Π° 0 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΡΠ²Π΅ΡΡ Ρ 0 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ Π±Π΅Π· ΠΏΠΎΠ²ΡΠΎΡΠ°*/ #Π΄ΠΎΠΌ { ΡΠ»Π΅Π²Π°: 0px; ΡΠΈΡΠΈΠ½Π°: 43 ΠΏΠΈΠΊΡΠ΅Π»Ρ; background: url('sprites. gif') 0 0 Π±Π΅Π· ΠΏΠΎΠ²ΡΠΎΡΠ°; } /*Π Π°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ Π½Π° 63 ΠΏΠΈΠΊΡΠ΅Π»Ρ Π²Π»Π΅Π²ΠΎ, ΡΠΈΡΠΈΠ½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 43 ΠΏΠΈΠΊΡΠ΅Π»Ρ, ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ β sprites.gif, Π° Π΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ β Π½Π° 44 ΠΏΠΈΠΊΡΠ΅Π»Ρ ΡΠΏΡΠ°Π²Π° ΠΎΡ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ*/ #ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ { ΡΠ»Π΅Π²Π°: 63px; ΡΠΈΡΠΈΠ½Π°: 43 ΠΏΠΈΠΊΡΠ΅Π»Ρ; background: url('sprites.gif') -44px 0 Π±Π΅Π· ΠΏΠΎΠ²ΡΠΎΡΠ°; } /*ΠΠΎΠ·ΠΈΡΠΈΡ 129px Π²Π»Π΅Π²ΠΎ, Π° ΡΠΈΡΠΈΠ½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ β 43 ΠΏΠΈΠΊΡΠ΅Π»Ρ, Π° ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ β sprites.gif, Π° Π΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ β 89 ΠΏΠΈΠΊΡΠ΅Π»ΠΎΠ² ΡΠΏΡΠ°Π²Π° ΠΎΡ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ*/ #Π½Π°Π·Π°Π΄ { ΡΠ»Π΅Π²Π°: 129 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΡΠΈΡΠΈΠ½Π°: 43 ΠΏΠΈΠΊΡΠ΅Π»Ρ; background: url('sprites.gif') -89px 0 Π±Π΅Π· ΠΏΠΎΠ²ΡΠΎΡΠ°; } /*ΠΠΎΠ·ΠΈΡΠΈΡ 0, ΡΠΈΡΠΈΠ½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ 43 ΠΏΠΈΠΊΡΠ΅Π»Ρ, ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ sprites_hover.gif */ #Π΄ΠΎΠΌΠ°:Π½Π°Π²Π΅Π΄ΠΈΡΠ΅ { ΡΠΎΠ½: url('sprites_hover.gif') 0-43px; ΠΏΠΎΠ»Π΅ ΡΠ»Π΅Π²Π°: 1px; } /*Π Π°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ Π½Π° ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠΈ 44 ΠΏΠΈΠΊΡΠ΅Π»Ρ ΡΠΏΡΠ°Π²Π° ΠΎΡ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°, ΡΠΈΡΠΈΠ½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 43 ΠΏΠΈΠΊΡΠ΅Π»Ρ, Π° ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ β sprites_hover.gif */ #Π΄Π°Π»Π΅Π΅:Π½Π°Π²Π΅Π΄ΠΈΡΠ΅ { ΡΠΎΠ½: url('sprites_hover.gif') -44px -43px; ΠΏΠΎΠ»Π΅ ΡΠΏΡΠ°Π²Π°: 5px; ΠΎΡΡΡΡΠΏ: 1px; } /*Π Π°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π° 89px ΠΏΡΡΠΌΠΎ ΠΈΠ· ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°, ΡΠΈΡΠΈΠ½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 43 ΠΏΠΈΠΊΡΠ΅Π»Ρ, Π° ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ β sprites_hover.
Leave a Comment