Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²ΡΠ΅ ΡΡΠΈΠ»ΠΈ
ΠΠΎΡΠ΅ΠΌΡ ΠΈΠ½Π»Π°ΠΉΠ½ΠΈΡΡ ΡΡΠΈΠ»ΠΈ β ΠΏΠ»ΠΎΡ ΠΎ
ΠΡΡΡΠΎΠΈΡΡ ΡΡΠΈΠ»ΠΈ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΠΎ:
ΠΡΡΡΠΎΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π°ΡΡΠΈΠ±ΡΡΠ° style :
ΠΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠΈΠ»ΠΈ ΠΈΠ· Π²Π½Π΅ΡΠ½ΠΈΡ ΡΠ°ΠΉΠ»ΠΎΠ²:
ΠΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ Π²Π½Π΅ΡΠ½ΠΈΠ΅ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ:
ΠΠΎΡΠ΅ΠΌΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΏΡΠ΅Π΄ΠΏΠΎΡΠΈΡΠ°ΡΡ Π²Π½Π΅ΡΠ½ΠΈΠ΅ ΡΡΠΈΠ»ΠΈ
Π§Π°ΡΠ΅ Π²ΡΠ΅Π³ΠΎ Π² Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡΡΠ΅ΡΠΈΡΡ ΠΏΡΠΎΠ΅ΠΊΡΡ Ρ Π²Π½Π΅ΡΠ½ΠΈΠΌΠΈ ΡΠ°Π±Π»ΠΈΡΠ°ΠΌΠΈ ΡΡΠΈΠ»Π΅ΠΉ. ΠΠ΅Π»ΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎ ΡΠ°ΠΊΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΡΠ΄ΠΎΠ±Π΅Π½ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°ΠΉΡΠΎΠ² ΠΈΠ»ΠΈ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Ρ Π½ΡΠ»Ρ, Π½ΠΎ ΠΈ Π΄Π»Ρ ΠΈΡ Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅ΠΉ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ. Π‘ Π΅Π³ΠΎ ΠΏΠΎΠΌΠΎΡΡΡ Π»Π΅Π³ΠΊΠΎ ΡΠΏΡΠ°Π²Π»ΡΡΡ CSS-ΠΏΡΠ°Π²ΠΈΠ»Π°ΠΌΠΈ, ΡΠ»Π΅Π΄ΠΈΡΡ Π·Π° Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΈ ΠΊΠ°ΡΠΊΠ°Π΄Π½ΠΎΡΡΡΡ, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΠΈΡΡΠΎΡΡ ΠΊΠΎΠ΄Π° Π² ΡΠ΅Π»ΠΎΠΌ.
ΠΠ½Π»Π°ΠΉΠ½-ΡΡΠΈΠ»ΠΈ Π½Π΅ ΡΠ°ΠΊ Π³ΠΈΠ±ΠΊΠΈ, ΠΊΠ°ΠΊ Π²Π½Π΅ΡΠ½ΠΈΠΉ CSS. ΠΡ ΡΠ»ΠΎΠΆΠ½Π΅Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΠΈ ΠΏΠΎΡΡΠΈ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ. ΠΠ·-Π·Π° Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ HTML-ΡΠ°ΠΉΠ» ΡΠ°Π·Π΄ΡΠ²Π°Π΅ΡΡΡ ΠΈ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΡΡΠΆΠ΅Π»Π΅Π΅. Π€ΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡ CSS Π½Π΅ ΡΠ°ΠΊ ΠΎΠ±ΡΠΈΡΠ½Π°, ΠΊΠ°ΠΊ ΠΏΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ Ρ Π²Π½Π΅ΡΠ½ΠΈΠΌΠΈ ΡΡΠΈΠ»ΡΠΌΠΈ. Π§ΡΠΎΠ±Ρ ΠΏΠΎΠ½ΡΡΡ Π²ΡΡ Π³Π»ΡΠ±ΠΈΠ½Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ, ΡΡΠ°Π²Π½ΠΈΠΌ ΠΎΠ±Π° ΡΠΏΠΎΡΠΎΠ±Π° ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ.
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΠΊΠΎΠ΄Π°. ΠΡΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠΈ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ ΡΡΠΈΠ»Π΅Π²ΠΎΠ³ΠΎ ΡΠ°ΠΉΠ»Π° CSS ΠΎΡΠ΄Π΅Π»ΡΠ½ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ, ΠΏΠΎΡΡΠΎΠΌΡ Π΅Π³ΠΎ ΠΏΡΠΎΡΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ. ΠΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΡΡΠΈΠ»Π΅ΠΉ ΠΈΠ·Π²Π½Π΅ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠ΅ΠΏΡΠΎΡΠ΅ΡΡΠΎΡΡ, ΡΡΠΎΠ±Ρ ΡΡΠΊΠΎΡΠΈΡΡ ΠΏΡΠΎΡΠ΅ΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΈ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠΎΠ΄ Π»Π΅Π³ΠΊΠΎ ΡΠΈΡΠ°Π΅ΠΌΡΠΌ. Π Π΅ΡΠ»ΠΈ Π²Ρ ΡΠ°Π±ΠΎΡΠ°Π΅ΡΠ΅ Π½Π°Π΄ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠΌ Π²ΠΌΠ΅ΡΡΠ΅ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ Π»ΡΠ΄ΡΠΌΠΈ, ΡΠ°ΠΊΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²ΡΠ΅ΠΌ ΡΡΠ°ΡΡΠ½ΠΈΠΊΠ°ΠΌ Π±ΡΡΡΡΠ΅Π΅ ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡΡΡ Π² ΡΡΠΈΠ»ΡΡ .
ΠΡΠΈΠΌΠ΅Ρ ΡΡΠΈΠ»Π΅ΠΉ Π² ΡΡΠΎΡΠΎΠ½Π½Π΅ΠΌ CSS-ΡΠ°ΠΉΠ»Π΅
ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ CSS Π²Ρ Π²ΠΈΠ΄ΠΈΡΠ΅ ΡΡΡΡΠΊΡΡΡΡ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ°. ΠΡ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅ΡΠ΅, Π³Π΄Π΅ ΠΈ ΠΊΠ°ΠΊΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π·Π°Π΄Π°Π½Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΠΈΡ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ. ΠΡ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅ΡΠ΅ Π»ΠΎΠ³ΠΈΠΊΡ: ΠΊΠ°ΠΊΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Ρ ΠΈ ΠΏΠΎΡΠ΅ΠΌΡ. Π Π°Π·Π±ΠΈΡΠ°Π΅ΡΠ΅ΡΡ Π² Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠΈ ΠΈ ΠΊΠ°ΡΠΊΠ°Π΄ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ ΠΈ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΏΡΠ°Π²Π»ΡΡΡ ΠΈΠΌΠΈ.
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½Π°Ρ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡ. ΠΠ½Π΅ΡΠ½ΠΈΠ΅ ΡΡΠΈΠ»ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π³ΠΈΠ±ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ ΠΈ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΌΠΎΠΆΠ΅Ρ Π·Π°Π΄Π°ΡΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ Π²ΡΠ±ΡΠ°Π½Π½ΡΠΌ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ, ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΡΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΏΠΈΡΠΊΠ° ΠΈΠ»ΠΈ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ Π΄ΡΡΠ³ΠΈΠ΅ Π·Π°Π΄Π°ΡΠΈ.
ΠΠ½Π΅ΡΠ½ΠΈΠΉ CSS ΡΠ°ΠΊΠΆΠ΅ ΠΎΡΠΊΡΡΠ²Π°Π΅Ρ Π΄ΠΎΡΡΡΠΏ ΠΊ ΠΊΠ°ΡΡΠΎΠΌΠ½ΡΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌ. ΠΡΠΎΡ ΡΠΏΠΎΡΠΎΠ± ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΠΈ Ρ ΠΈΡ ΠΏΠΎΠΌΠΎΡΡΡ Π³ΠΈΠ±ΠΊΠΎ ΡΠΏΡΠ°Π²Π»ΡΡΡ ΡΡΠΈΠ»ΡΠΌΠΈ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π±ΡΡΡΡΠΎ ΠΌΠ΅Π½ΡΡΡ ΡΠ²Π΅ΡΠ°.
ΠΡΠΈΠΌΠ΅Ρ ΡΡΠΈΠ»Π΅ΠΉ Π² ΡΡΠΎΡΠΎΠ½Π½Π΅ΠΌ CSS-ΡΠ°ΠΉΠ»Π΅
ΠΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°Ρ Π²ΡΠ΅ ΡΠ²Π΅ΡΠ°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ Π½Π° ΡΠ°ΠΉΡΠ΅. ΠΡΠ»ΠΈ Π·Π°ΠΊΠ°Π·ΡΠΈΠΊ Π·Π°Ρ ΠΎΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π·Π΅Π»ΡΠ½ΡΠΉ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΠΎΡΡΠ΅Π½ΠΊΠ°, ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΡ Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΊΠ°ΡΡ ΠΈ ΠΌΠ΅Π½ΡΡΡ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΡΡΠΈΠ»Π΅Π²ΠΎΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Ρ ΡΡΠΈΠΌ ΡΠ²Π΅ΡΠΎΠΌ. ΠΠ½ ΠΏΡΠΎΡΡΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ ΡΠ²Π΅Ρ Π² ΠΎΠ΄Π½ΠΎΠΉ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ.
Π‘ Π²Π½Π΅ΡΠ½ΠΈΠΌΠΈ ΡΠ°Π±Π»ΠΈΡΠ°ΠΌΠΈ ΡΡΠΈΠ»Π΅ΠΉ ΠΏΡΠΎΡΠ΅ ΠΏΡΠΈΠ΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ ΠΏΡΠΈΠ½ΡΠΈΠΏΠ° DRY. ΠΠ΅Π΄Ρ Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π²ΡΠ΅ ΡΡΠΈΠ»ΠΈ, ΠΊΠΎΡΠΎΡΡΠΌΠΈ Π½ΡΠΆΠ½ΠΎ ΡΠΏΡΠ°Π²Π»ΡΡΡ, Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅, Π° Π½Π΅ Π½Π° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΡΡΠ°Π½ΠΈΡΠ°Ρ ΠΏΡΠΎΠ΅ΠΊΡΠ°.
ΠΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΡΠΈΠ»Π΅ΠΉ. Π‘ΡΠΈΠ»ΠΈ ΠΈΠ· Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ CSS ΡΠ°ΠΉΠ»Π° Π»Π΅Π³ΠΊΠΎ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ° ΡΠ²ΠΎΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ½ΠΎΡΡΠΈ. ΠΠ»Π°ΡΡ ΠΏΡΠΈΠΎΡΠΈΡΠ΅ΡΠ½Π΅Π΅ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ° ΡΠ΅Π³Π°, Π° ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡ ΠΏΡΠΈΠΎΡΠΈΡΠ΅ΡΠ½Π΅Π΅ ΠΊΠ»Π°ΡΡΠ°.
Π‘ΠΊΠΎΡΠΎΡΡΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈ ΡΡΠ°ΡΠΈΠΊ. ΠΠΎ Π²ΡΠ΅ΠΌΡ ΠΏΠ΅ΡΠ²ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ Π²Π½Π΅ΡΠ½ΠΈΠ΅ ΡΡΠΈΠ»ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Ρ Π·Π°Π΄Π΅ΡΠΆΠΊΠΎΠΉ: Π±ΡΠ°ΡΠ·Π΅ΡΡ Π½ΡΠΆΠ½ΠΎ Π²ΡΠ΅ΠΌΡ, ΡΡΠΎΠ±Ρ ΡΠΊΠ°ΡΠ°ΡΡ ΡΡΠΈΠ»Π΅Π²ΠΎΠΉ ΡΠ°ΠΉΠ». ΠΡΠΎΠ±Π΅Π½Π½ΠΎ Π·Π°ΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΠΊΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΡΠΈ ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎΠΌ ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΠΈ. ΠΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΎΡΠ΅Π½ ΠΌΠΈΠ»Π»ΠΈΡΠ΅ΠΊΡΠ½Π΄ ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ ΡΠ΅Π»ΡΠ΅ ΡΠ΅ΠΊΡΠ½Π΄Ρ, ΡΡΠΎΠ±Ρ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΏΠΎΡΠ²ΠΈΠ»ΠΈΡΡ ΡΡΠΈΠ»ΠΈ. Π ΡΠΎΠΌΡ ΠΆΠ΅ Π²Π½Π΅ΡΠ½ΠΈΠΉ ΡΡΠΈΠ»Π΅Π²ΠΎΠΉ ΡΠ°ΠΉΠ» ΠΎΡΠ½ΠΎΡΠΈΡΡΡ ΠΊ Π±Π»ΠΎΠΊΠΈΡΡΡΡΠΈΠΌ ΡΠ΅ΡΡΡΡΠ°ΠΌ. ΠΠΎΠΊΠ° ΠΎΠ½ Π½Π΅ Π·Π°Π³ΡΡΠ·ΠΈΡΡΡ, ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ Π½Π΅ Π·Π°Π²Π΅ΡΡΠΈΡΡΡ.
ΠΠΏΡΠΎΡΠ΅ΠΌ, Π±ΡΠ°ΡΠ·Π΅Ρ ΠΊΠ΅ΡΠΈΡΡΠ΅Ρ ΡΠ°ΠΉΠ»Ρ CSS, ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΡΠΈ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠ΅ Π΅ΠΌΡ Π½Π΅ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ Π²ΡΠΎΡΠΎΠΉ ΡΠ°Π· ΡΠΊΠ°ΡΠΈΠ²Π°ΡΡ ΡΡΠΈΠ»ΠΈ. ΠΡΠΎ ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ ΡΡΠ°ΡΠΈΠΊ ΠΈ ΡΠ²Π΅Π»ΠΈΡΠΈΡ ΡΠΊΠΎΡΠΎΡΡΡ ΠΎΡΡΠΈΡΠΎΠ²ΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΠ½ΡΡΡΠ΅Π½Π½ΡΡ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡΡΡ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ Π² HTML-ΠΊΠΎΠ΄Π΅, ΠΏΠΎΡΡΠΎΠΌΡ Ρ ΠΊΠ°ΠΆΠ΄ΡΠΌ Π½ΠΎΠ²ΡΠΌ ΠΏΡΠ°Π²ΠΈΠ»ΠΎΠΌ Π²Π΅Ρ ΡΠ°ΠΉΠ»Π° Π±ΡΠ΄Π΅Ρ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡΡΡ. ΠΠΌΠ΅ΡΡΠ΅ Ρ Π½ΠΈΠΌ ΡΠ°ΡΡΡΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΏΠΎΡΡΠ΅Π±Π»ΡΠ΅ΠΌΠΎΠ³ΠΎ ΡΡΠ°ΡΠΈΠΊΠ° ΠΈ ΡΠΌΠ΅Π½ΡΡΠ°Π΅ΡΡΡ ΡΠΊΠΎΡΠΎΡΡΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ° Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ ΡΠ°ΠΉΡΠ°Ρ ΡΡΠ° ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π΅ ΡΠ°ΠΊ ΠΊΡΠΈΡΠΈΡΠ½Π°. ΠΠΎ Π½Π° ΠΊΡΡΠΏΠ½ΡΡ ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΠΌΠ°Π³Π°Π·ΠΈΠ½Π°Ρ ΠΈΠ»ΠΈ ΠΏΠΎΡΡΠ°Π»Π°Ρ , Π° ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΈ ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎΠΌ ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΠΈ ΡΠ°Π·Π½ΠΈΡΠ° Π±ΡΠ΄Π΅Ρ ΠΎΡΠ΅Π²ΠΈΠ΄Π½Π° ΠΈ Π³ΡΠΎΠ·ΠΈΡ ΠΏΠΎΡΠ΅ΡΠ΅ΠΉ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Π΅ΠΉ.
ΠΠΎΠ³Π΄Π° ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ inline-ΡΡΠΈΠ»ΠΈ?
ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΡΡΠΈΠ»ΠΈ ΠΈΠΌΠ΅ΡΡ ΡΠ΅ΡΡΠ΅Π·Π½ΡΠ΅ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠΈ, ΠΏΠΎΡΡΠΎΠΌΡ ΡΡΠΎΠ½ΡΠ΅Π½Π΄-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΡΠ΅Π΄ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΠΈΡ Π² ΡΠ°Π±ΠΎΡΠ΅. ΠΠΎ Ρ ΡΡΠΎΠ³ΠΎ ΡΠΏΠΎΡΠΎΠ±Π° ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ Π΅ΡΡΡ ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΡΠΎΡΠΎΠ½Ρ.
Π£ΡΠΊΠΎΡΠ΅Π½ΠΈΠ΅ ΠΎΡΡΠΈΡΠΎΠ²ΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡ. ΠΡ ΡΠΆΠ΅ ΡΠΏΠΎΠΌΠΈΠ½Π°Π»ΠΈ ΠΏΡΠΈΠ½ΡΠΈΠΏ ΡΠ°Π±ΠΎΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°: ΠΏΡΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠΈ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ CSS Π΅ΠΌΡ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡΡΡ ΠΎΡΠΏΡΠ°Π²Π»ΡΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ Π·Π°ΠΏΡΠΎΡ Π½Π° ΡΠ΅ΡΠ²Π΅Ρ, ΡΡΠΎΠ±Ρ ΡΠΊΠ°ΡΠ°ΡΡ ΡΡΠΈΠ»Π΅Π²ΠΎΠΉ ΡΠ°ΠΉΠ». ΠΠΎ Π² ΡΠ»ΡΡΠ°Π΅ Ρ inline-ΡΡΠΈΠ»ΡΠΌΠΈ ΡΡΠΎΠ³ΠΎ Π΄Π΅Π»Π°ΡΡ Π½Π΅ Π½ΡΠΆΠ½ΠΎ. ΠΠ½ΠΈ ΡΠΆΠ΅ Π΄ΠΎΡΡΡΠΏΠ½Ρ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡΡ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ Π² ΡΠ°ΠΉΠ»Π΅ HTML, ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΡΠΈ ΠΏΠ΅ΡΠ²ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠ΅ ΡΡΠΈΠ»ΠΈ ΠΎΡΡΠΈΡΡΡΡΡΡ Π±ΡΡΡΡΠ΅Π΅.
ΠΡΠΎ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π½Π° Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ ΡΡΡΠ°Π½ΠΈΡΠ°Ρ , Π½Π΅ ΠΏΠ΅ΡΠ΅Π³ΡΡΠΆΠ΅Π½Π½ΡΡ ΡΡΠΈΠ»ΡΠΌΠΈ, Π½ΠΎ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈ Π½Π° ΠΊΡΡΠΏΠ½ΡΡ ΡΠ΅ΡΡΡΡΠ°Ρ Π΄Π»Ρ ΠΏΠΎΠ²ΡΡΠ΅Π½ΠΈΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ CSS. Π‘ ΠΏΠΎΠΌΠΎΡΡΡ inline-ΡΡΠΈΠ»Π΅ΠΉ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΠΊΠΎΡΠΈΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠΉ ΡΠ°ΡΡΠΈ ΡΠ°ΠΉΡΠ°, ΠΊΠΎΡΠΎΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΏΠ΅ΡΠ²ΠΎΠΉ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΌΠ΅Π½Ρ ΠΈ ΠΏΠ΅ΡΠ²ΡΠΉ Π±Π»ΠΎΠΊ Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠ΅ΠΉ. ΠΡΡ, ΡΡΠΎ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ Π½ΡΠΆΠ½ΠΎ β ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ ΡΡΠΈΠ»ΠΈ ΡΡΠΈΡ Π±Π»ΠΎΠΊΠΎΠ² ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²Π½ΡΡΡΠΈ HTML.
ΠΠΎΡΡΠΎΠ²ΡΠ΅ ΡΠ°ΡΡΡΠ»ΠΊΠΈ. ΠΡΡ ΠΎΠ΄ΠΈΠ½ ΡΠ»ΡΡΠ°ΠΉ, ΠΊΠΎΠ³Π΄Π° Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΡΡΠΈΠ»ΠΈ β ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ email-ΡΠ°ΡΡΡΠ»ΠΎΠΊ. ΠΠΎ ΡΠΎΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΡΡΠΈ ΠΏΠΎΡΡΠΎΠ²ΡΠ΅ ΡΠ΅ΡΠ²ΠΈΡΡ Π±Π»ΠΎΠΊΠΈΡΡΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ Π²Π½Π΅ΡΠ½ΠΈΡ ΡΠ΅ΡΡΡΡΠΎΠ², Π² ΡΠΎΠΌ ΡΠΈΡΠ»Π΅ ΡΡΠΈΠ»Π΅Π²ΡΡ ΡΠ°ΠΉΠ»ΠΎΠ² Π² HTML-ΠΊΠΎΠ΄Π΅ ΠΏΠΈΡΡΠΌΠ°. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠΎ ΡΠ°ΠΊΠΈΠΌ ΠΏΡΠΈΠ½ΡΠΈΠΏΠ°ΠΌ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π―Π½Π΄Π΅ΠΊΡ.ΠΠΎΡΡΠ°, Yahoo, Gmail ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΠΏΠΎΡΡΠΎΠ²ΡΠ΅ ΠΊΠ»ΠΈΠ΅Π½ΡΡ. ΠΠΎΡΡΠΎΠΌΡ Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² Π½Π΅Ρ ΠΈΠ½ΠΎΠ³ΠΎ Π²ΡΡ ΠΎΠ΄Π°, ΠΊΡΠΎΠΌΠ΅ ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ inline CSS.
ΠΡΠΈΠΌΠ΅Ρ Π²ΡΡΡΡΠΊΠΈ ΠΏΠΈΡΡΠΌΠ° Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ
Π’Π΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΡΠ°Π±ΠΎΡΠ° ΡΠΎ ΡΡΠΎΡΠΎΠ½Π½ΠΈΠΌΠΈ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ°ΠΌΠΈ. Inline-ΡΡΠΈΠ»ΠΈ ΡΠ°ΠΊΠΆΠ΅ Π±ΡΠ²Π°ΡΡ ΡΠ΄ΠΎΠ±Π½Ρ, Π΅ΡΠ»ΠΈ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ Π·Π°Π΄Π°Π½Π° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΎΡΠΎΠ½Π½ΠΈΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌ ΠΈΠ»ΠΈ ΡΠ΅ΡΠ΅Π· CMS. ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ ΠΏΠΎΠΈΡΠΊΠ° ΠΈ ΡΠ΅ΡΠ΅Π½ΠΈΡ ΠΊΠ°ΠΊΠΈΡ -ΡΠΎ ΠΎΡΠΈΠ±ΠΎΠΊ. ΠΠ° ΡΡΠ΅Ρ ΠΊΠ°ΡΠΊΠ°Π΄Π½ΠΎΡΡΠΈ ΠΏΡΠ°Π²ΠΈΠ»Π° Π²Π½ΡΡΡΠΈ Π°ΡΡΠΈΠ±ΡΡΠ° style ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΡΡΠΈΠ»ΠΈ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»Π° CSS Π² ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ΅ ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π½Π° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠΎ ΡΡΠΎΡ ΡΠΏΠΎΡΠΎΠ± Π»ΡΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Ρ ΠΎΡΡΠΎΡΠΎΠΆΠ½ΠΎΡΡΡΡ ΠΈ ΠΏΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΡΡΠ°Π·Ρ Π²Π½ΠΎΡΠΈΡΡ ΠΏΡΠ°Π²ΠΊΠΈ Π²ΠΎ Π²Π½Π΅ΡΠ½ΠΈΠΉ ΡΡΠΈΠ»Π΅Π²ΠΎΠΉ ΡΠ°ΠΉΠ».
ΠΡΡ ΡΡΠ°ΡΡΠΈ ΠΎ Π²ΡΡΡΡΠΊΠ΅
ΠΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½-ΡΡΠΈΠ»Π΅ΠΉ Π½Π΅ ΡΠ°ΠΌΠ°Ρ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΠ½Π½Π°Ρ ΠΏΡΠ°ΠΊΡΠΈΠΊΠ°, ΡΠ°ΡΠ΅ Π²ΡΠ΅Π³ΠΎ Π²Π°ΠΌ ΠΏΡΠ΅Π΄ΡΡΠΎΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²Π½Π΅ΡΠ½ΠΈΠΉ CSS. ΠΠΎ ΠΏΠΎΠΌΠ½ΠΈΡΠ΅, ΡΡΠΎ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΡΡΠΈΠ»ΠΈ ΡΠΎΠΆΠ΅ Π±ΡΠ²Π°ΡΡ ΠΏΠΎΠ»Π΅Π·Π½Ρ.
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΎΡΠ²ΠΎΠΈΡΡ ΡΠ°Π·Π½ΡΠ΅ ΡΠΏΠΎΡΠΎΠ±Ρ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ ΠΈ ΠΏΠΎΠ±Π»ΠΈΠΆΠ΅ ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΡΡΡ Ρ CSS, ΠΏΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ Π½Π°ΡΠΈ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠ΅ ΡΡΠ΅Π½Π°ΠΆΡΡΡ. ΠΠ½ΠΈ ΠΏΠΎΠΌΠΎΠ³ΡΡ Π²Π°ΠΌ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ ΡΠΎ Π²ΡΠ΅ΠΌΠΈ Π²Π°ΡΠΈΠ°Π½ΡΠ°ΠΌΠΈ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ, ΠΊΠ°ΠΊ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΌΠΈ, ΡΠ°ΠΊ ΠΈ Π²Π½Π΅ΡΠ½ΠΈΠΌΠΈ.
ΠΡΠ½ΠΎΠ²Ρ CSS β ΠΡΠ½ΠΎΠ²Ρ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ Π²ΡΡΡΡΠΊΠΈ
Π ΠΏΡΠΎΡΠ»ΡΡ ΡΡΠΎΠΊΠ°Ρ ΠΌΡ ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΠ»ΠΈΡΡ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Ρ ΠΏΠΎΠΌΠΎΡΡΡ HTML. ΠΠ½ΠΎΠ³ΠΈΠ΅ ΠΈΠ· ΡΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠΆΠ΅ ΠΈΠΌΠ΅ΡΡ ΠΊΠ°ΠΊΠΎΠ΅-ΡΠΎ ΡΠ²ΠΎΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅: ΠΏΠ°ΡΠ°Π³ΡΠ°ΡΡ ΠΈΠΌΠ΅ΡΡ ΠΎΡΡΡΡΠΏΡ, ΡΡΡΠ»ΠΊΠΈ Π²ΡΠ΄Π΅Π»ΡΡΡΡΡ ΠΏΠΎΠ΄ΡΡΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΈ ΡΠ²Π΅ΡΠΎΠΌ, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΌ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡΡΡ Π΄ΡΡΠ³ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΡΠΈΡΡΠ°. ΠΠ±ΡΡΠ½ΠΎ ΡΡΠΎΠ³ΠΎ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΠΎΠ»Π½ΠΎΡΠ΅Π½Π½ΡΡ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ ΡΠ°ΠΉΡΠΎΠ². ΠΠ°ΠΊΠΈΠ΅-ΡΠΎ ΡΡΠΈΠ»ΠΈ Π½Π°ΠΌ ΠΏΡΠΎΡΡΠΎ Π½Π΅ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡ, Π° ΠΊΠ°ΠΊΠΈΠ΅-ΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΡ Ρ ΠΎΡΠΈΠΌ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ.
ΠΠ»Ρ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ WEB-ΡΡΡΠ°Π½ΠΈΡΡ ΡΠΎΠ·Π΄Π°Π½ ΡΠ·ΡΠΊ CSS. CSS ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ΠΈΡΡΡ ΠΊΠ°ΠΊ ΠΊΠ°ΡΠΊΠ°Π΄Π½ΡΠ΅ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ (Cascading Style Sheets). ΠΠΌΠ΅Π½Π½ΠΎ ΡΡΠΎΡ ΡΠ·ΡΠΊ ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ Π·Π° ΡΠΎ, ΠΊΠ°ΠΊ Π½Π°ΡΠΈ HTML-ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π±ΡΠ΄ΡΡ Π²ΡΠ²Π΅Π΄Π΅Π½Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅.
Π ΡΡΠΎΠΌ ΡΡΠΎΠΊΠ΅ ΠΌΡ ΡΠ°Π·Π±Π΅ΡΡΠΌ ΡΡ ΡΠ°ΡΡΡ Π°Π±Π±ΡΠ΅Π²ΠΈΠ°ΡΡΡΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΎΡΠ½ΠΎΡΠΈΡΡΡ ΠΊ ΡΠ°Π±Π»ΠΈΡΠ°ΠΌ ΡΡΠΈΠ»Π΅ΠΉ. Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΠΊΠ°ΡΠΊΠ°Π΄Π½ΠΎΡΡΡ ΠΈ ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ Π² ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΡΡΠΎΠΊΠ΅.
Π‘ΡΠΈΠ»ΠΈ CSS
Π§ΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΠΈΠ»Ρ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ. ΠΠ½ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΠΊ ΠΊΠ°ΠΊΠΎΠΌΡ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π°ΡΠΈ ΡΡΠΈΠ»ΠΈ. ΠΠ»Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ° Π²ΠΎΠ·ΡΠΌΡΠΌ ΡΠ»Π΅Π΄ΡΡΡΡΡ HTML-ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ:
ΠΠ·ΠΌΠ΅Π½ΠΈΠΌ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈ ΡΠ²Π΅Ρ ΡΡΠΈΡΡΠ° Π² ΡΡΠΎΠΌ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠΈ. ΠΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ CSS-Π·Π°ΠΏΠΈΡΡΡ:
Π§ΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΡΡΠ° ΡΠ°ΠΈΠ½ΡΡΠ²Π΅Π½Π½Π°Ρ Π·Π°ΠΏΠΈΡΡ Π²ΡΡΠ΅? ΠΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠ»ΠΎΠ²Π½ΠΎ ΡΠ°Π·Π±ΠΈΡΡ Π½Π° ΡΡΠΈ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΠΎΡΡΠ°Π²Π»ΡΡΡΠΈΠ΅:
Π Π°Π·Π±Π΅ΡΡΠΌ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΌΠΎΠ³ΡΡ Π²Π°ΠΌ ΠΎΡΠΎΡΠΌΠ»ΡΡΡ ΡΠ΅ΠΊΡΡ:
ΠΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ CSS
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ CSS Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ²:
ΠΠ°ΡΠ°Π³ΡΠ°Ρ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΡΡΠΈΡΡΠ° 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. Π’Π΅ΠΊΡΡ Π½Π°ΠΏΠΈΡΠ°Π½ ΠΊΡΠ°ΡΠ½ΡΠΌ ΡΠ²Π΅ΡΠΎΠΌ.
Π§Π°ΡΡΡ 1. ΠΡΠ½ΠΎΠ²Ρ CSS
ΠΠ°Π½Π½ΡΠΉ ΡΡΠΎΠΊ ΡΠ²Π»ΡΠ΅ΡΡΡ Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΈΠΌ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΡΡΠΎΠΊΠ° «ΠΡΠ½ΠΎΠ²Ρ HTML Π΄Π»Ρ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ », Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Ρ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΠΎΠ±ΡΡΡΠ½ΡΠ», ΡΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΡΠ·ΡΠΊ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ HTML, ΠΊΠ°ΠΊ ΠΎΠ½ ΡΡΡΡΠΎΠ΅Π½ ΠΈ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ, Π±Π°Π·ΠΎΠ²ΡΠ΅ ΡΠ΅Π³ΠΈ ΠΈ ΠΏΡΠ°Π²ΠΈΠ»Π° Π²Π΅ΡΡΡΠΊΠΈ. Π Π΄Π°Π½Π½ΠΎΠΌ ΠΆΠ΅ ΡΡΠΎΠΊΠ΅ ΠΌΡ Π·Π°ΡΡΠΎΠ½Π΅ΠΌ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, ΡΠΎΠ·Π΄Π°Π½Π½ΠΎΠ³ΠΎ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ·ΡΠΊΠ° ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ, Ρ.Π΅. ΠΏΡΠΈΠ΄Π°Π½ΠΈΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΡΠΎΡΠΌΡ, ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ°, ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ, ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈ ΡΠ΅ΠΊΡΡΠ° Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅, ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΡΠ΅ ΠΏΡΠΈΠ΅ΠΌΡ ΡΠ°Π±ΠΎΡΡ Ρ ΠΊΠ°ΡΠΊΠ°Π΄Π½ΡΠΌΠΈ ΡΠ°Π±Π»ΠΈΡΠ°ΠΌΠΈ ΡΡΠΈΠ»Π΅ΠΉ. ΠΠΎΠ½ΡΠ² ΠΎΡΠ½ΠΎΠ²Ρ, Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΈ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ HTML Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΡ.
ΠΠ±ΡΠ°ΡΠ°Ρ Π²Π°ΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π² Π΄Π°Π½Π½ΠΎΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π΅ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ CSS ΡΠΎΠ»ΡΠΊΠΎ Π² ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Ρ HTML Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π² Π²Π΅Π±-Π±ΡΠ°ΡΠ·Π΅ΡΠ΅. Π‘ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΠ΅ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠ·ΡΠΊΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ XML Π² Android ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΡ , SVG ΠΈΠ»ΠΈ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Desktop Environment Π² Unix-ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΡ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΎΠ½Π½ΡΡ ΡΠΈΡΡΠ΅ΠΌΠ°Ρ .
1.1 ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ CSS Π² HTML Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°Ρ
CSS Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² HTML Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°Ρ . ΠΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ:
ΠΡΠΎΠΏΠΈΡΠ°ΡΡ ΡΡΠΈΠ»ΠΈ Π² ΡΠ°ΠΌΠΎΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ΅Π³
ΠΠ½Π»Π°ΠΉΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ CSS ΡΠ²ΠΎΠΉΡΡΠ² Π² ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΡ ΡΠ΅Π³Π°Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π°ΡΡΠΈΠ±ΡΡΠ° style.
Π’Π°ΠΊΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± Π²Π½ΡΡΡΠ΅Π½Π½Π΅ΠΉ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΎΡΠ΅Π½Ρ ΡΠ΅Π΄ΠΊΠΎ Π² ΠΎΡΠΎΠ±ΡΡ ΡΠ»ΡΡΠ°ΡΡ , ΠΊΠΎΠ³Π΄Π° Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ: Π. ΠΡΠ²Π΅ΡΡΠΈ ΠΈΠ· Π°Π΄ΠΌΠΈΠ½. ΠΏΠ°Π½Π΅Π»ΠΈ ΡΠ°ΠΉΡΠ° ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ Π΄Π»Ρ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΡ ΡΠ΅Π³ΠΎΠ²; Π. Π‘Π΄Π΅Π»Π°ΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΡΡ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²ΠΎΠΌ JavaScript.
ΠΡΠΈΠΌΠ΅Ρ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²ΠΎΠ³ΠΎ Π²ΡΠ²ΠΎΠ΄Π° ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ΅ΠΊΡΠΈΠΈ ΠΈΠ· Π°Π΄ΠΌΠΈΠ½. ΠΏΠ°Π½Π΅Π»ΠΈ ΡΠ°ΠΉΡΠ°:
1.2 CSS ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
ΠΠ°ΠΊ Ρ ΡΠΆΠ΅ Π³ΠΎΠ²ΠΎΡΠΈΠ» ΡΠ°Π½Π΅Π΅, CSS ΠΈΠΌΠ΅Π΅Ρ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ. ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ°Π·Π±Π΅ΡΠ΅ΠΌ Π΅Π³ΠΎ.
ΠΡΠ°Π²ΠΈΠ»Π° ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠΉ Π½Π°ΡΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΎΡΡΡ, ΡΡΠΎ ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΠΈΡΠ°ΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠΈ. Π‘Π½Π°ΡΠ°Π»Π° ΠΏΠΈΡΠ΅ΡΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΡΠ±ΠΈΡΠ°Π΅Ρ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅, ΠΏΠΎΡΠ»Π΅ ΡΠΈΠ³ΡΡΠ½ΡΡ ΡΠΊΠΎΠ±ΠΎΠΊ ΠΏΠΈΡΡΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ ΠΏΠΎΡΠ»Π΅ Π΄Π²ΠΎΠ΅ΡΠΎΡΠΈΡ, Π° ΡΠ°ΠΌΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΡΠ΄Π΅Π»ΡΡΡΡΡ Π΄ΡΡΠ³ ΠΎΡ Π΄ΡΡΠ³Π° ΡΠΎΡΠΊΠΎΠΉ Ρ Π·Π°ΠΏΡΡΠΎΠΉ. ΠΡΠΎ Π²ΡΠ΅.
ΠΡΠΎΡΡΠΎ, Π½Π΅ ΠΏΡΠ°Π²Π΄Π° Π»ΠΈ?
1.3 ΠΠ°ΡΠΊΠ°Π΄ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ
ΠΠΎΠ½ΡΡΡ ΠΏΡΠΈΠ½ΡΠΈΠΏ ΠΊΠ°ΡΠΊΠ°Π΄ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π½Π΅ΡΠ»ΠΎΠΆΠ½ΠΎ. ΠΠ°Π²Π°ΠΉΡΠ΅ Π²Π·Π³Π»ΡΠ½Π΅ΠΌ Π½Π° ΠΏΡΠΈΠΌΠ΅Ρ:
ΠΠ· ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΌΡ Π²ΠΈΠ΄ΠΈΠΌ, ΡΡΠΎ Π² CSS Π½Π°ΠΏΠΈΡΠ°Π½ ΠΊΠ°ΡΠΊΠ°Π΄, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΊΠ»Π°ΡΡ .parent ΡΡΠΎΠΈΡ Π½Π° ΠΏΠ΅ΡΠ²ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅, ΠΏΠΎΡΠ»Π΅ Π½Π΅Π³ΠΎ ΡΠ΅ΡΠ΅Π· ΠΏΡΠΎΠ±Π΅Π» ΡΠΊΠ°Π·Π°Π½ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΉ ΠΊΠ»Π°ΡΡ .children, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ ΡΠΆΠ΅ Π·Π° ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ ΡΠΎΠ»ΡΠΊΠΎ Π΄ΠΎΡΠ΅ΡΠ½Π΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠΎΡΠ΅ΡΠ½ΠΈΠΉ ΡΠ΅Π³ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ Π²Π»ΠΎΠΆΠ΅Π½ Π² ΡΠ΅Π³ Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ .parent. ΠΡΠ»ΠΈ Π² HTML Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅ ΠΌΡ Π²ΡΠ½Π΅ΡΠ΅ΠΌ ΡΠ΅Π³ .children ΠΈΠ· ΡΠ΅Π³Π° div Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ .parent, ΠΎΠ½ ΠΏΠΎΡΠ΅ΡΡΠ΅Ρ ΡΠ²ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΊΠ°ΡΠΊΠ°Π΄ ΡΠΆΠ΅ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ, ΡΡΡΡΠΊΡΡΡΠ° Π½Π°ΡΡΡΠ΅Π½Π°.
ΠΠ°ΡΠΊΠ°Π΄ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌΡΡ ΡΡΠΈΠ»Π΅ΠΉ. ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΈΠ΅ΡΠ°ΡΡ ΠΈΡ ΠΏΡΠΈΠΎΡΠΈΡΠ΅ΡΠΎΠ².
Π‘ΡΠΎΠΈΡ ΡΠ°ΠΊΠΆΠ΅ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΊΠ»Π°ΡΡΠΎΠ² ΠΈΠ»ΠΈ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠΎΠ², Π° ΡΠ°ΠΊΠΆΠ΅ Π½Π°Π»ΠΈΡΠΈΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΠΎΠ² ΠΈ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΈΠΉ Π² ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ΅ ΠΏΠΎΠ²ΡΡΠ°ΡΡ ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ:
Π Ρ.Π΄. ΠΏΠΎ Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΎΠΉ ΡΠ΅ΠΏΠΎΡΠΊΠ΅.
Π Π² Π·Π°Π²Π΅ΡΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΠΏΡΠΈΠΎΡΠΈΡΠ΅ΡΠ°ΠΌ Π²Π°ΠΆΠ½ΠΎ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ ΡΡΠΈΠ»ΠΈ, ΠΈΠ΄ΡΡΠΈΠ΅ Π² ΠΏΠΎΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΡΡ Π½ΠΈΠΆΠ΅ ΠΏΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΡ ΡΠ°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅ΡΡ Π½Π°ΠΈΠ±ΠΎΠ»ΡΡΠΈΠΉ ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ:
Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ Π² ΠΏΠΎΡΠΎΠΊΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΏΠΎΠ»ΡΡΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° margin: 15px, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΡΠΈΠΎΡΠΈΡΠ΅ΡΠ½ΡΠΌ. ΠΠ΄Π½Π°ΠΊΠΎ Π΅ΡΠ»ΠΈ Π±Ρ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΡ Π±ΡΠ» Π΄Π»ΠΈΠ½Π½Π΅Π΅, Π·Π½Π°ΡΠ½ΠΈΡ Π΅Π³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ² Π½Π΅ΡΠΎΠΌΠ½Π΅Π½Π½ΠΎ Π±Ρ ΠΏΡΠ΅Π²Π°Π»ΠΈΡΠΎΠ²Π°Π»ΠΈ.
Π§Π°ΡΡΡ 2. CSS ΡΠ²ΠΎΠΉΡΡΠ²Π°
Π― Π΄ΡΠΌΠ°Ρ Π½Π΅Ρ ΡΠΌΡΡΠ»Π° ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»ΡΡΡ Π²ΡΠ΅ CSS ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΈΡ ΠΎΡΠ΅Π½Ρ ΠΌΠ½ΠΎΠ³ΠΎ ΠΈ ΠΏΡΠ°ΠΊΡΠΈΡΠ½Π΅ΠΉ ΠΎΠ±ΡΠ°ΡΠΈΡΡΡΡ ΠΊ ΡΠΏΡΠ°Π²ΠΎΡΠ½ΠΈΠΊΡ Π²ΡΠ΅Ρ CSS ΡΠ²ΠΎΠΉΡΡΠ². Π― ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡ ΠΈΠ·ΡΡΠΈΡΡ CSS ΡΠ²ΠΎΠΉΡΡΠ²Π° Π² ΡΠΏΡΠ°Π²ΠΎΡΠ½ΠΈΠΊΠ΅ Π½Π° HTMLBook.
ΠΠ΄Π½Π°ΠΊΠΎ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ 10 ΡΠ°ΠΌΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ CSS ΡΠ²ΠΎΠΉΡΡΠ² Π² Π²Π΅ΡΡΡΠΊΠ΅. Π― Π²Π·ΡΠ» 10 Π±ΠΎΠ»ΡΡΠΈΡ CSS ΡΠ°ΠΉΠ»ΠΎΠ² ΠΈΠ· ΡΠ²ΠΎΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ² ΠΈ ΠΎΡΡΠΎΡΡΠΈΡΠΎΠ²Π°Π» ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΠΎ ΡΠ°ΡΡΠΎΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
CSS Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ
Π§Π°ΡΡΠΎΡΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅
Π§Π°ΡΡΡ 3. ΠΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ
Π Π΄Π°Π½Π½ΠΎΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π±Π°Π·ΠΎΠ²ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡ Π΄Π»Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ Π²Π΅ΡΡΡΠΊΠΈ ΡΠ°ΠΉΡΠΎΠ² ΠΈ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠΎΠ»Π΅Π·Π½Ρ.
ΠΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡ ΠΏΠΈΡΠ΅ΡΡΡ Π² ΡΠ°ΠΌΠΎΠΌ ΡΠ°ΠΉΠ»Π΅ ΡΡΠΈΠ»Π΅ΠΉ ΠΈΠ»ΠΈ Π² ΡΠ΅Π»Π΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° (ΡΠ΅Π³ style) ΠΈ Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ Ρ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΡ ΠΏΡΠ°Π²ΠΈΠ»Π° @media. Π‘ΡΡΡΠΊΡΡΡΠ° ΠΌΠ΅Π΄ΠΈΠ° Π·Π°ΠΏΡΠΎΡΠ° Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΠ°:
ΠΠ°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ ΠΌΠ΅Π΄ΠΈΠ°-ΡΡΠ½ΠΊΡΠΈΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠΊΡΠ°Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°:
ΠΡΠΎΠΌΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΏΡΠΎΡΠ΅Π³ΠΎ, ΠΊΠ°ΠΊ ΠΌΡ Π²ΠΈΠ΄ΠΈΠΌ ΠΈΠ· ΠΏΡΠΈΠΌΠ΅ΡΠ°, ΡΡΠ½ΠΊΡΠΈΠΈ ΠΌΠΎΠ³ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ ΡΡΠ»ΠΎΠ²ΠΈΡ and (Π), not (ΠΠ) ΠΈ only (ΠΠ»Ρ ΡΡΠ°ΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ², Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΠΈΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ). ΠΠ΅Ρ Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΎΠΏΠ΅ΡΠ°ΡΠΎΡΠ° or (ΠΠΠ), Π΅Π³ΠΎ ΡΠΎΠ»Ρ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅Ρ Π·Π°ΠΏΡΡΠ°Ρ. ΠΠ΅Π΄ΠΈΠ°-ΡΡΠ½ΠΊΡΠΈΠΈ, ΠΊΠ°ΠΊ ΠΌΡ Π²ΠΈΠ΄ΠΈΠΌ Π·Π°ΠΊΠ»ΡΡΠ°ΡΡ Π² ΠΎΠ±ΡΡΠ½ΡΠ΅ ΠΊΡΡΠ³Π»ΡΠ΅ ΡΠΊΠΎΠ±ΠΊΠΈ.
Π Π°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ² Π² ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠ΅ Π½Π΅ Π΄Π°Π΅Ρ Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ ΠΏΡΠΈΠΎΡΠΈΡΠ΅ΡΠ°, ΠΏΠΎΡΡΠΎΠΌΡ Π»ΠΎΠ³ΠΈΡΠ½Π΅ΠΉ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ Π² ΠΊΠΎΠ½ΡΠ΅ CSS Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, Π»ΠΈΠ±ΠΎ Π·Π°Π³ΡΡΠΆΠ°ΡΡ ΡΠ΅Π³ΠΎΠΌ link Π²Π½Π΅ΡΠ½ΠΈΠΉ CSS ΡΠ°ΠΉΠ» Ρ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠ°ΠΌΠΈ ΠΏΠΎΡΠ»Π΅ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΡΡΠΈΠ»Π΅ΠΉ ΡΠ°ΠΉΡΠ° Π΄Π»Ρ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΡ Π½Π° ΡΠ°Π·Π½ΡΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡΡ ΠΈΠ»ΠΈ Π½Π° ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ .
Π§Π°ΡΡΡ 4. Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΠΈ
ΠΡ ΠΈ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ-ΠΆΠ΅ ΠΌΠΎΠΈ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΠΈ. ΠΠ° Π²ΡΡ ΠΏΡΠ°ΠΊΡΠΈΠΊΡ Π²Π΅ΡΡΡΠΊΠΈ Ρ ΠΌΠ΅Π½Ρ Π½Π°ΠΊΠΎΠΏΠΈΠ»ΠΈΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π°, ΠΊΠΎΡΠΎΡΡΠΌΠΈ Ρ Ρ ΡΠ°Π΄ΠΎΡΡΡΡ ΠΏΠΎΠ΄Π΅Π»ΡΡΡ.
ΠΡΠ΅ΠΌΠΈΡΠΌ ΡΡΠΎΠΊΠΈ ΠΎΡ WebDesign Master
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠ°ΠΉΡΠ° ΠΎΡ Π Π΄ΠΎ Π―. ΠΠΎΠΌΠΏΠ»Π΅ΠΊΡΠ½ΡΠΉ ΠΊΡΡΡ
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΠΌΠ°Π³Π°Π·ΠΈΠ½Π° ΠΎΡ Π Π΄ΠΎ Π―
ΠΠΎΡΠ΅ΠΌΡ ΠΈΠ½Π»Π°ΠΉΠ½ΠΈΡΡ ΡΡΠΈΠ»ΠΈ β ΠΏΠ»ΠΎΡ ΠΎ
ΠΡΡΡΠΎΠΈΡΡ ΡΡΠΈΠ»ΠΈ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΠΎ:
ΠΡΡΡΠΎΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π°ΡΡΠΈΠ±ΡΡΠ° style :
ΠΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠΈΠ»ΠΈ ΠΈΠ· Π²Π½Π΅ΡΠ½ΠΈΡ ΡΠ°ΠΉΠ»ΠΎΠ²:
ΠΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ Π²Π½Π΅ΡΠ½ΠΈΠ΅ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ:
ΠΠΎΡΠ΅ΠΌΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΏΡΠ΅Π΄ΠΏΠΎΡΠΈΡΠ°ΡΡ Π²Π½Π΅ΡΠ½ΠΈΠ΅ ΡΡΠΈΠ»ΠΈ
Π§Π°ΡΠ΅ Π²ΡΠ΅Π³ΠΎ Π² Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡΡΠ΅ΡΠΈΡΡ ΠΏΡΠΎΠ΅ΠΊΡΡ Ρ Π²Π½Π΅ΡΠ½ΠΈΠΌΠΈ ΡΠ°Π±Π»ΠΈΡΠ°ΠΌΠΈ ΡΡΠΈΠ»Π΅ΠΉ. ΠΠ΅Π»ΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎ ΡΠ°ΠΊΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΡΠ΄ΠΎΠ±Π΅Π½ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°ΠΉΡΠΎΠ² ΠΈΠ»ΠΈ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Ρ Π½ΡΠ»Ρ, Π½ΠΎ ΠΈ Π΄Π»Ρ ΠΈΡ Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅ΠΉ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ. Π‘ Π΅Π³ΠΎ ΠΏΠΎΠΌΠΎΡΡΡ Π»Π΅Π³ΠΊΠΎ ΡΠΏΡΠ°Π²Π»ΡΡΡ CSS-ΠΏΡΠ°Π²ΠΈΠ»Π°ΠΌΠΈ, ΡΠ»Π΅Π΄ΠΈΡΡ Π·Π° Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΈ ΠΊΠ°ΡΠΊΠ°Π΄Π½ΠΎΡΡΡΡ, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΠΈΡΡΠΎΡΡ ΠΊΠΎΠ΄Π° Π² ΡΠ΅Π»ΠΎΠΌ.
Inline-ΡΡΠΈΠ»ΠΈ Π½Π΅ ΡΠ°ΠΊ Π³ΠΈΠ±ΠΊΠΈ, ΠΊΠ°ΠΊ Π²Π½Π΅ΡΠ½ΠΈΠΉ CSS. ΠΡ ΡΠ»ΠΎΠΆΠ½Π΅Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΠΈ ΠΏΠΎΡΡΠΈ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ. ΠΠ·-Π·Π° Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ HTML-ΡΠ°ΠΉΠ» ΡΠ°Π·Π΄ΡΠ²Π°Π΅ΡΡΡ ΠΈ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΡΡΠΆΠ΅Π»Π΅Π΅. Π€ΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡ CSS Π½Π΅ ΡΠ°ΠΊ ΠΎΠ±ΡΠΈΡΠ½Π°, ΠΊΠ°ΠΊ ΠΏΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ Ρ Π²Π½Π΅ΡΠ½ΠΈΠΌΠΈ ΡΡΠΈΠ»ΡΠΌΠΈ. Π§ΡΠΎΠ±Ρ ΠΏΠΎΠ½ΡΡΡ Π²ΡΡ Π³Π»ΡΠ±ΠΈΠ½Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ, ΡΡΠ°Π²Π½ΠΈΠΌ ΠΎΠ±Π° ΡΠΏΠΎΡΠΎΠ±Π° ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ.
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΠΊΠΎΠ΄Π°. ΠΡΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠΈ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ ΡΡΠΈΠ»Π΅Π²ΠΎΠ³ΠΎ ΡΠ°ΠΉΠ»Π° CSS ΠΎΡΠ΄Π΅Π»ΡΠ½ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ, ΠΏΠΎΡΡΠΎΠΌΡ Π΅Π³ΠΎ ΠΏΡΠΎΡΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ. ΠΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΡΡΠΈΠ»Π΅ΠΉ ΠΈΠ·Π²Π½Π΅ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠ΅ΠΏΡΠΎΡΠ΅ΡΡΠΎΡΡ, ΡΡΠΎΠ±Ρ ΡΡΠΊΠΎΡΠΈΡΡ ΠΏΡΠΎΡΠ΅ΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΈ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠΎΠ΄ Π»Π΅Π³ΠΊΠΎ ΡΠΈΡΠ°Π΅ΠΌΡΠΌ. Π Π΅ΡΠ»ΠΈ Π²Ρ ΡΠ°Π±ΠΎΡΠ°Π΅ΡΠ΅ Π½Π°Π΄ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠΌ Π²ΠΌΠ΅ΡΡΠ΅ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ Π»ΡΠ΄ΡΠΌΠΈ, ΡΠ°ΠΊΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²ΡΠ΅ΠΌ ΡΡΠ°ΡΡΠ½ΠΈΠΊΠ°ΠΌ Π±ΡΡΡΡΠ΅Π΅ ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡΡΡ Π² ΡΡΠΈΠ»ΡΡ .
ΠΡΠΈΠΌΠ΅Ρ ΡΡΠΈΠ»Π΅ΠΉ Π² ΡΡΠΎΡΠΎΠ½Π½Π΅ΠΌ CSS-ΡΠ°ΠΉΠ»Π΅
ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ CSS Π²Ρ Π²ΠΈΠ΄ΠΈΡΠ΅ ΡΡΡΡΠΊΡΡΡΡ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ°. ΠΡ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅ΡΠ΅, Π³Π΄Π΅ ΠΈ ΠΊΠ°ΠΊΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π·Π°Π΄Π°Π½Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΠΈΡ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ. ΠΡ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅ΡΠ΅ Π»ΠΎΠ³ΠΈΠΊΡ: ΠΊΠ°ΠΊΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Ρ ΠΈ ΠΏΠΎΡΠ΅ΠΌΡ. Π Π°Π·Π±ΠΈΡΠ°Π΅ΡΠ΅ΡΡ Π² Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠΈ ΠΈ ΠΊΠ°ΡΠΊΠ°Π΄ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ ΠΈ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΏΡΠ°Π²Π»ΡΡΡ ΠΈΠΌΠΈ.
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½Π°Ρ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡ. ΠΠ½Π΅ΡΠ½ΠΈΠ΅ ΡΡΠΈΠ»ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π³ΠΈΠ±ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ ΠΈ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΌΠΎΠΆΠ΅Ρ Π·Π°Π΄Π°ΡΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ Π²ΡΠ±ΡΠ°Π½Π½ΡΠΌ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ, ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΡΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΏΠΈΡΠΊΠ° ΠΈΠ»ΠΈ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ Π΄ΡΡΠ³ΠΈΠ΅ Π·Π°Π΄Π°ΡΠΈ.
ΠΠ½Π΅ΡΠ½ΠΈΠΉ CSS ΡΠ°ΠΊΠΆΠ΅ ΠΎΡΠΊΡΡΠ²Π°Π΅Ρ Π΄ΠΎΡΡΡΠΏ ΠΊ ΠΊΠ°ΡΡΠΎΠΌΠ½ΡΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌ. ΠΡΠΎΡ ΡΠΏΠΎΡΠΎΠ± ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΠΈ Ρ ΠΈΡ ΠΏΠΎΠΌΠΎΡΡΡ Π³ΠΈΠ±ΠΊΠΎ ΡΠΏΡΠ°Π²Π»ΡΡΡ ΡΡΠΈΠ»ΡΠΌΠΈ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π±ΡΡΡΡΠΎ ΠΌΠ΅Π½ΡΡΡ ΡΠ²Π΅ΡΠ°.
ΠΡΠΈΠΌΠ΅Ρ ΡΡΠΈΠ»Π΅ΠΉ Π² ΡΡΠΎΡΠΎΠ½Π½Π΅ΠΌ CSS-ΡΠ°ΠΉΠ»Π΅
ΠΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°Ρ Π²ΡΠ΅ ΡΠ²Π΅ΡΠ°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ Π½Π° ΡΠ°ΠΉΡΠ΅. ΠΡΠ»ΠΈ Π·Π°ΠΊΠ°Π·ΡΠΈΠΊ Π·Π°Ρ ΠΎΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π·Π΅Π»ΡΠ½ΡΠΉ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΠΎΡΡΠ΅Π½ΠΊΠ°, ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΡ Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΊΠ°ΡΡ ΠΈ ΠΌΠ΅Π½ΡΡΡ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΡΡΠΈΠ»Π΅Π²ΠΎΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Ρ ΡΡΠΈΠΌ ΡΠ²Π΅ΡΠΎΠΌ. ΠΠ½ ΠΏΡΠΎΡΡΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ ΡΠ²Π΅Ρ Π² ΠΎΠ΄Π½ΠΎΠΉ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ.
ΠΡΠ±Π»ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. ΠΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°ΠΆΠ½Π΅ΠΉΡΠΈΡ ΠΏΡΠΈΠ½ΡΠΈΠΏΠΎΠ² ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ β Donβt repeat yourself ΠΈΠ»ΠΈ DRY. ΠΠ½ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π²Π°Ρ ΠΊΠΎΠ΄ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΡΡ. Π ΠΏΡΠΈΠΌΠ΅ΡΡ, Π΅ΡΠ»ΠΈ Ρ Π²Π°Ρ Π²ΡΡΡΠ΅ΡΠ°ΡΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΌ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ΠΌ, Π±ΡΠ»ΠΎ Π±Ρ ΠΎΡΠΈΠ±ΠΊΠΎΠΉ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΈΠ· Π½ΠΈΡ Π·Π°Π½ΠΎΠ²ΠΎ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°ΡΡ ΡΠ²Π΅Ρ, ΡΠ°Π·ΠΌΠ΅Ρ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ.
Π‘ Π²Π½Π΅ΡΠ½ΠΈΠΌΠΈ ΡΠ°Π±Π»ΠΈΡΠ°ΠΌΠΈ ΡΡΠΈΠ»Π΅ΠΉ ΠΏΡΠΎΡΠ΅ ΠΏΡΠΈΠ΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ ΠΏΡΠΈΠ½ΡΠΈΠΏΠ° DRY. ΠΠ΅Π΄Ρ Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π²ΡΠ΅ ΡΡΠΈΠ»ΠΈ, ΠΊΠΎΡΠΎΡΡΠΌΠΈ Π½ΡΠΆΠ½ΠΎ ΡΠΏΡΠ°Π²Π»ΡΡΡ, Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅, Π° Π½Π΅ Π½Π° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΡΡΠ°Π½ΠΈΡΠ°Ρ ΠΏΡΠΎΠ΅ΠΊΡΠ°.
ΠΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΡΠΈΠ»Π΅ΠΉ. Π‘ΡΠΈΠ»ΠΈ ΠΈΠ· Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ CSS ΡΠ°ΠΉΠ»Π° Π»Π΅Π³ΠΊΠΎ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ° ΡΠ²ΠΎΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ½ΠΎΡΡΠΈ. ΠΠ»Π°ΡΡ ΠΏΡΠΈΠΎΡΠΈΡΠ΅ΡΠ½Π΅Π΅ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ° ΡΠ΅Π³Π°, Π° ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡ ΠΏΡΠΈΠΎΡΠΈΡΠ΅ΡΠ½Π΅Π΅ ΠΊΠ»Π°ΡΡΠ°.
ΠΡΠΈΠΌΠ΅Ρ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΊΡΡΠΏΠ½ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ°. ΠΠ·-Π·Π° ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π·Π°Π΄Π°Π½Ρ ΠΈΠ½Π»Π°ΠΉΠ½, ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΡ ΠΏΡΠΈΡΠ»ΠΎΡΡ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΠΈΡ Π²Π½ΡΡΡΠΈ ΡΠ°ΠΉΠ»Π° CSS Ρ ΠΏΠΎΠΌΠΎΡΡΡ `! important.`
Π‘ΠΊΠΎΡΠΎΡΡΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈ ΡΡΠ°ΡΠΈΠΊ. ΠΠΎ Π²ΡΠ΅ΠΌΡ ΠΏΠ΅ΡΠ²ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ Π²Π½Π΅ΡΠ½ΠΈΠ΅ ΡΡΠΈΠ»ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Ρ Π·Π°Π΄Π΅ΡΠΆΠΊΠΎΠΉ: Π±ΡΠ°ΡΠ·Π΅ΡΡ Π½ΡΠΆΠ½ΠΎ Π²ΡΠ΅ΠΌΡ, ΡΡΠΎΠ±Ρ ΡΠΊΠ°ΡΠ°ΡΡ ΡΡΠΈΠ»Π΅Π²ΠΎΠΉ ΡΠ°ΠΉΠ». ΠΡΠΎΠ±Π΅Π½Π½ΠΎ Π·Π°ΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΠΊΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΡΠΈ ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎΠΌ ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΠΈ. ΠΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΎΡΠ΅Π½ ΠΌΠΈΠ»Π»ΠΈΡΠ΅ΠΊΡΠ½Π΄ ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ ΡΠ΅Π»ΡΠ΅ ΡΠ΅ΠΊΡΠ½Π΄Ρ, ΡΡΠΎΠ±Ρ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΏΠΎΡΠ²ΠΈΠ»ΠΈΡΡ ΡΡΠΈΠ»ΠΈ. Π ΡΠΎΠΌΡ ΠΆΠ΅ Π²Π½Π΅ΡΠ½ΠΈΠΉ ΡΡΠΈΠ»Π΅Π²ΠΎΠΉ ΡΠ°ΠΉΠ» ΠΎΡΠ½ΠΎΡΠΈΡΡΡ ΠΊ Π±Π»ΠΎΠΊΠΈΡΡΡΡΠΈΠΌ ΡΠ΅ΡΡΡΡΠ°ΠΌ. ΠΠΎΠΊΠ° ΠΎΠ½ Π½Π΅ Π·Π°Π³ΡΡΠ·ΠΈΡΡΡ, ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ Π½Π΅ Π·Π°Π²Π΅ΡΡΠΈΡΡΡ.
ΠΠΏΡΠΎΡΠ΅ΠΌ, Π±ΡΠ°ΡΠ·Π΅Ρ ΠΊΠ΅ΡΠΈΡΡΠ΅Ρ ΡΠ°ΠΉΠ»Ρ CSS, ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΡΠΈ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠ΅ Π΅ΠΌΡ Π½Π΅ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ Π²ΡΠΎΡΠΎΠΉ ΡΠ°Π· ΡΠΊΠ°ΡΠΈΠ²Π°ΡΡ ΡΡΠΈΠ»ΠΈ. ΠΡΠΎ ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ ΡΡΠ°ΡΠΈΠΊ ΠΈ ΡΠ²Π΅Π»ΠΈΡΠΈΡ ΡΠΊΠΎΡΠΎΡΡΡ ΠΎΡΡΠΈΡΠΎΠ²ΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΠ½ΡΡΡΠ΅Π½Π½ΡΡ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡΡΡ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ Π² HTML-ΠΊΠΎΠ΄Π΅, ΠΏΠΎΡΡΠΎΠΌΡ Ρ ΠΊΠ°ΠΆΠ΄ΡΠΌ Π½ΠΎΠ²ΡΠΌ ΠΏΡΠ°Π²ΠΈΠ»ΠΎΠΌ Π²Π΅Ρ ΡΠ°ΠΉΠ»Π° Π±ΡΠ΄Π΅Ρ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡΡΡ. ΠΠΌΠ΅ΡΡΠ΅ Ρ Π½ΠΈΠΌ ΡΠ°ΡΡΡΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΏΠΎΡΡΠ΅Π±Π»ΡΠ΅ΠΌΠΎΠ³ΠΎ ΡΡΠ°ΡΠΈΠΊΠ° ΠΈ ΡΠΌΠ΅Π½ΡΡΠ°Π΅ΡΡΡ ΡΠΊΠΎΡΠΎΡΡΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ° Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ ΡΠ°ΠΉΡΠ°Ρ ΡΡΠ° ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π΅ ΡΠ°ΠΊ ΠΊΡΠΈΡΠΈΡΠ½Π°. ΠΠΎ Π½Π° ΠΊΡΡΠΏΠ½ΡΡ ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΠΌΠ°Π³Π°Π·ΠΈΠ½Π°Ρ ΠΈΠ»ΠΈ ΠΏΠΎΡΡΠ°Π»Π°Ρ , Π° ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΈ ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎΠΌ ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΠΈ ΡΠ°Π·Π½ΠΈΡΠ° Π±ΡΠ΄Π΅Ρ ΠΎΡΠ΅Π²ΠΈΠ΄Π½Π° ΠΈ Π³ΡΠΎΠ·ΠΈΡ ΠΏΠΎΡΠ΅ΡΠ΅ΠΉ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Π΅ΠΉ.
ΠΠΎΠ³Π΄Π° ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ inline-ΡΡΠΈΠ»ΠΈ?
ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΡΡΠΈΠ»ΠΈ ΠΈΠΌΠ΅ΡΡ ΡΠ΅ΡΡΠ΅Π·Π½ΡΠ΅ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠΈ, ΠΏΠΎΡΡΠΎΠΌΡ ΡΡΠΎΠ½ΡΠ΅Π½Π΄-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΡΠ΅Π΄ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΠΈΡ Π² ΡΠ°Π±ΠΎΡΠ΅. ΠΠΎ Ρ ΡΡΠΎΠ³ΠΎ ΡΠΏΠΎΡΠΎΠ±Π° ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ Π΅ΡΡΡ ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΡΠΎΡΠΎΠ½Ρ.
Π£ΡΠΊΠΎΡΠ΅Π½ΠΈΠ΅ ΠΎΡΡΠΈΡΠΎΠ²ΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡ. ΠΡ ΡΠΆΠ΅ ΡΠΏΠΎΠΌΠΈΠ½Π°Π»ΠΈ ΠΏΡΠΈΠ½ΡΠΈΠΏ ΡΠ°Π±ΠΎΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°: ΠΏΡΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠΈ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ CSS Π΅ΠΌΡ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡΡΡ ΠΎΡΠΏΡΠ°Π²Π»ΡΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ Π·Π°ΠΏΡΠΎΡ Π½Π° ΡΠ΅ΡΠ²Π΅Ρ, ΡΡΠΎΠ±Ρ ΡΠΊΠ°ΡΠ°ΡΡ ΡΡΠΈΠ»Π΅Π²ΠΎΠΉ ΡΠ°ΠΉΠ». ΠΠΎ Π² ΡΠ»ΡΡΠ°Π΅ Ρ inline-ΡΡΠΈΠ»ΡΠΌΠΈ ΡΡΠΎΠ³ΠΎ Π΄Π΅Π»Π°ΡΡ Π½Π΅ Π½ΡΠΆΠ½ΠΎ. ΠΠ½ΠΈ ΡΠΆΠ΅ Π΄ΠΎΡΡΡΠΏΠ½Ρ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡΡ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ Π² ΡΠ°ΠΉΠ»Π΅ HTML, ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΡΠΈ ΠΏΠ΅ΡΠ²ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠ΅ ΡΡΠΈΠ»ΠΈ ΠΎΡΡΠΈΡΡΡΡΡΡ Π±ΡΡΡΡΠ΅Π΅.
ΠΡΠΎ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π½Π° Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ ΡΡΡΠ°Π½ΠΈΡΠ°Ρ , Π½Π΅ ΠΏΠ΅ΡΠ΅Π³ΡΡΠΆΠ΅Π½Π½ΡΡ ΡΡΠΈΠ»ΡΠΌΠΈ, Π½ΠΎ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈ Π½Π° ΠΊΡΡΠΏΠ½ΡΡ ΡΠ΅ΡΡΡΡΠ°Ρ Π΄Π»Ρ ΠΏΠΎΠ²ΡΡΠ΅Π½ΠΈΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ CSS. Π‘ ΠΏΠΎΠΌΠΎΡΡΡ inline-ΡΡΠΈΠ»Π΅ΠΉ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΠΊΠΎΡΠΈΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠΉ ΡΠ°ΡΡΠΈ ΡΠ°ΠΉΡΠ°, ΠΊΠΎΡΠΎΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΏΠ΅ΡΠ²ΠΎΠΉ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΌΠ΅Π½Ρ ΠΈ ΠΏΠ΅ΡΠ²ΡΠΉ Π±Π»ΠΎΠΊ Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠ΅ΠΉ. ΠΡΡ, ΡΡΠΎ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ Π½ΡΠΆΠ½ΠΎ β ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ ΡΡΠΈΠ»ΠΈ ΡΡΠΈΡ Π±Π»ΠΎΠΊΠΎΠ² ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²Π½ΡΡΡΠΈ HTML.
ΠΠΎΡΡΠΎΠ²ΡΠ΅ ΡΠ°ΡΡΡΠ»ΠΊΠΈ. ΠΡΡ ΠΎΠ΄ΠΈΠ½ ΡΠ»ΡΡΠ°ΠΉ, ΠΊΠΎΠ³Π΄Π° Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΡΡΠΈΠ»ΠΈ β ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ email-ΡΠ°ΡΡΡΠ»ΠΎΠΊ. ΠΠΎ ΡΠΎΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΡΡΠΈ ΠΏΠΎΡΡΠΎΠ²ΡΠ΅ ΡΠ΅ΡΠ²ΠΈΡΡ Π±Π»ΠΎΠΊΠΈΡΡΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ Π²Π½Π΅ΡΠ½ΠΈΡ ΡΠ΅ΡΡΡΡΠΎΠ², Π² ΡΠΎΠΌ ΡΠΈΡΠ»Π΅ ΡΡΠΈΠ»Π΅Π²ΡΡ ΡΠ°ΠΉΠ»ΠΎΠ² Π² HTML-ΠΊΠΎΠ΄Π΅ ΠΏΠΈΡΡΠΌΠ°. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠΎ ΡΠ°ΠΊΠΈΠΌ ΠΏΡΠΈΠ½ΡΠΈΠΏΠ°ΠΌ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π―Π½Π΄Π΅ΠΊΡ.ΠΠΎΡΡΠ°, Yahoo, Gmail ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΠΏΠΎΡΡΠΎΠ²ΡΠ΅ ΠΊΠ»ΠΈΠ΅Π½ΡΡ. ΠΠΎΡΡΠΎΠΌΡ Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² Π½Π΅Ρ ΠΈΠ½ΠΎΠ³ΠΎ Π²ΡΡ ΠΎΠ΄Π°, ΠΊΡΠΎΠΌΠ΅ ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ inline CSS.
ΠΡΠΈΠΌΠ΅Ρ Π²ΡΡΡΡΠΊΠΈ ΠΏΠΈΡΡΠΌΠ° Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ
Π’Π΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΡΠ°Π±ΠΎΡΠ° ΡΠΎ ΡΡΠΎΡΠΎΠ½Π½ΠΈΠΌΠΈ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ°ΠΌΠΈ. Inline-ΡΡΠΈΠ»ΠΈ ΡΠ°ΠΊΠΆΠ΅ Π±ΡΠ²Π°ΡΡ ΡΠ΄ΠΎΠ±Π½Ρ, Π΅ΡΠ»ΠΈ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ Π·Π°Π΄Π°Π½Π° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΎΡΠΎΠ½Π½ΠΈΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌ ΠΈΠ»ΠΈ ΡΠ΅ΡΠ΅Π· CMS. ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ ΠΏΠΎΠΈΡΠΊΠ° ΠΈ ΡΠ΅ΡΠ΅Π½ΠΈΡ ΠΊΠ°ΠΊΠΈΡ -ΡΠΎ ΠΎΡΠΈΠ±ΠΎΠΊ. ΠΠ° ΡΡΠ΅Ρ ΠΊΠ°ΡΠΊΠ°Π΄Π½ΠΎΡΡΠΈ ΠΏΡΠ°Π²ΠΈΠ»Π° Π²Π½ΡΡΡΠΈ Π°ΡΡΠΈΠ±ΡΡΠ° style ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΡΡΠΈΠ»ΠΈ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»Π° CSS Π² ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ΅ ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π½Π° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠΎ ΡΡΠΎΡ ΡΠΏΠΎΡΠΎΠ± Π»ΡΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Ρ ΠΎΡΡΠΎΡΠΎΠΆΠ½ΠΎΡΡΡΡ ΠΈ ΠΏΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΡΡΠ°Π·Ρ Π²Π½ΠΎΡΠΈΡΡ ΠΏΡΠ°Π²ΠΊΠΈ Π²ΠΎ Π²Π½Π΅ΡΠ½ΠΈΠΉ ΡΡΠΈΠ»Π΅Π²ΠΎΠΉ ΡΠ°ΠΉΠ».
ΠΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ inline-ΡΡΠΈΠ»Π΅ΠΉ Π½Π΅ ΡΠ°ΠΌΠ°Ρ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΠ½Π½Π°Ρ ΠΏΡΠ°ΠΊΡΠΈΠΊΠ°, ΡΠ°ΡΠ΅ Π²ΡΠ΅Π³ΠΎ Π²Π°ΠΌ ΠΏΡΠ΅Π΄ΡΡΠΎΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²Π½Π΅ΡΠ½ΠΈΠΉ CSS. ΠΠΎ ΠΏΠΎΠΌΠ½ΠΈΡΠ΅, ΡΡΠΎ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΡΡΠΈΠ»ΠΈ ΡΠΎΠΆΠ΅ Π±ΡΠ²Π°ΡΡ ΠΏΠΎΠ»Π΅Π·Π½Ρ.
Π£ΠΌΠ΅Π½ΠΈΠ΅ ΡΠΌΠ΅ΡΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΡΡΠΈΠ»ΠΈ β Π½Π°Π²ΡΠΊ, ΠΊΠΎΡΠΎΡΡΠΌ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΠ±Π»Π°Π΄Π°ΡΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΡΠΎΠ½ΡΠ΅Π½Π΄-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ. ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΎΡΠ²ΠΎΠΈΡΡ ΡΠ°Π·Π½ΡΠ΅ ΡΠΏΠΎΡΠΎΠ±Ρ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ ΠΈ ΠΏΠΎΠ±Π»ΠΈΠΆΠ΅ ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΡΡΡ Ρ CSS, ΠΏΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ Π½Π°ΡΠΈ ΡΡΠ΅Π½Π°ΠΆΡΡΡ. ΠΠ½ΠΈ ΠΏΠΎΠΌΠΎΠ³ΡΡ Π²Π°ΠΌ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ ΡΠΎ Π²ΡΠ΅ΠΌΠΈ Π²Π°ΡΠΈΠ°Π½ΡΠ°ΠΌΠΈ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ, ΠΊΠ°ΠΊ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΌΠΈ, ΡΠ°ΠΊ ΠΈ Π²Π½Π΅ΡΠ½ΠΈΠΌΠΈ.
Π‘ΠΎΠ±Π΅ΡΠΈΡΠ΅ΡΡ, ΠΏΠΎΡΠ° ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ
Π‘ HTML, CSS, JavaScript, PHP, ΡΡΠΎΠ½ΡΠ΅Π½Π΄ΠΎΠΌ, Π±ΡΠΊΠ΅Π½Π΄ΠΎΠΌ, ΡΡΠ»ΡΡΠ΅ΠΊΠΎΠΌ, Node.js, Π°Π½ΠΈΠΌΠ°ΡΠΈΡΠΌΠΈ ΠΈ Π²ΡΠ΅ΠΌ ΠΎΡΡΠ°Π»ΡΠ½ΡΠΌ, ΡΡΠΎΠ±Ρ ΡΡΡΡΠΎΠΈΡΡΡΡ Π½Π° ΡΠ°Π±ΠΎΡΡ ΠΌΠ΅ΡΡΡ.
ΠΠ°ΠΆΠ°ΡΠΈΠ΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ β ΡΠΎΠ³Π»Π°ΡΠΈΠ΅ Π½Π° ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΡ ΠΏΠ΅ΡΡΠΎΠ½Π°Π»ΡΠ½ΡΡ Π΄Π°Π½Π½ΡΡ