ΠΊΠ°ΠΊ ΠΏΠΈΡΠ°ΡΡ css Π² html ΠΊΠΎΠ΄Π΅
ΠΡΡΡΡΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ CSS ΠΊ HTML
ΠΡΠ½ΠΎΠ²Π½Π°Ρ Π·Π°Π΄Π°ΡΠ° ΠΊΠ°ΡΠΊΠ°Π΄Π½ΡΡ ΡΠ°Π±Π»ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ (CSS) β Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΠΌ HTML ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ Π±Π΅Π· ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ»ΠΈ ΡΠ»ΠΎΠΆΠ½ΠΎΠΉ Π»ΠΎΠ³ΠΈΠΊΠΈ. ΠΡΠΎ ΡΠ²Π΅ΡΠ°, ΡΡΠΈΡΡΡ, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ Π±Π»ΠΎΠΊΠΎΠ² Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΈ Ρ.Π΄. Π£ΡΠΈΠΌΡΡ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°ΡΡ CSS ΠΊ ΡΠ°ΠΉΡΡ.
Π ΠΏΡΠΈΠ½ΡΠΈΠΏΠ΅, Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΡΠ΅ΠΊΡΡΠ° ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π°ΡΡΠΈΠ±ΡΡΠ°ΠΌΠΈ HTML (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π²ΡΠ΄Π΅Π»ΠΈΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ), Π½ΠΎ ΡΡΠΎ ΡΡΡΠ°ΡΠ΅Π²ΡΠΈΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ, Π»ΡΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠ΅Π΄ΡΡΠ²Π° CSS.
Π ΡΠ°Π±Π»ΠΈΡΠ΅ ΡΡΠΈΠ»Π΅ΠΉ ΠΌΡ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°Π΅ΠΌ ΡΡΠΈΠ»ΠΈ (ΠΏΡΠ°Π²ΠΈΠ»Π°) ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠ°ΠΆΠ΄ΠΎΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ ΡΠΎΡΡΠΎΠΈΡ ΠΈΠ· ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ° ΠΈ Π±Π»ΠΎΠΊΠ° ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠΉ. Π‘Π΅Π»Π΅ΠΊΡΠΎΡ Π² Π»Π΅Π²ΠΎΠΉ ΡΠ°ΡΡΠΈ ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ, Π½Π° ΠΊΠ°ΠΊΠΈΠ΅ ΡΠ°ΡΡΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΠ΅ΡΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ. ΠΠ»ΠΎΠΊ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠΉ Π² ΠΏΡΠ°Π²ΠΎΠΉ ΡΠ°ΡΡΠΈ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π² ΡΠΈΠ³ΡΡΠ½ΡΠ΅ ΡΠΊΠΎΠ±ΠΊΠΈ ΠΈ ΡΠΎΡΡΠΎΠΈΡ ΠΈΠ· ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠΉ, ΡΠ°Π·Π΄Π΅Π»Π΅Π½Π½ΡΡ ΡΠΎΡΠΊΠΎΠΉ Ρ Π·Π°ΠΏΡΡΠΎΠΉ. ΠΡΡΠ³ΠΈΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, Π΄Π°Π½Π½ΠΎΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Π³ΠΎΠ²ΠΎΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ, ΡΡΠΎ ΠΈ ΠΊΠ°ΠΊ ΠΌΡ Ρ ΠΎΡΠΈΠΌ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π² Π½Π°ΡΠ΅ΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅. Π§ΡΠΎ β ΡΡΠΎ ΡΠ°ΡΡΡ ΡΠ»Π΅Π²Π° (ΡΠ΅Π»Π΅ΠΊΡΠΎΡ), Π° ΠΊΠ°ΠΊ β ΡΡΠΎ ΡΠ°ΡΡΡ ΡΠΏΡΠ°Π²Π° (Π±Π»ΠΎΠΊ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠΉ Π² ΡΠΈΠ³ΡΡΠ½ΡΡ ΡΠΊΠΎΠ±ΠΊΠ°Ρ ).
Π‘Π΅Π»Π΅ΠΊΡΠΎΡΠΎΠ² ΡΠ»Π΅Π²Π° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ, Π΅ΡΠ»ΠΈ ΠΌΡ Ρ ΠΎΡΠΈΠΌ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². Π’Π°ΠΊΠΆΠ΅ ΠΈ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠΉ ΡΠΏΡΠ°Π²Π° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ, Π΅ΡΠ»ΠΈ ΠΌΡ Ρ ΠΎΡΠΈΠΌ Π΄Π°ΡΡ ΡΠ΅Π»ΡΠΉ ΡΡΠ΄ ΡΠΊΠ°Π·Π°Π½ΠΈΠΉ Π΄Π»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠΌΠ΅Π½ΠΈΡΡ ΠΈ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°, ΠΈ ΡΠ²Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΈ Π΅Π³ΠΎ ΠΌΠ΅ΡΡΠΎΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅, Π° Π΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ°ΠΌΠΊΡ).
Π‘ΠΏΠΎΡΠΎΠ±Ρ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ CSS
Π’Π°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎ Π² ΠΊΠΎΠ΄Π΅ HTML-ΡΡΡΠ°Π½ΠΈΡΡ, ΠΎΠ±ΡΠ°ΠΌΠΈΠ² ΠΏΡΠ°Π²ΠΈΠ»Π° ΡΠ΅Π³Π°ΠΌΠΈ . ΠΡΠ΅ ΡΡΠΎ Π²ΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Π² ΠΊΠΎΠ΄ ΡΡΡΠ°Π½ΠΈΡΡ ΡΡΠ°Π·Ρ ΠΏΠΎΡΠ»Π΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° (ΡΠ΅Π³ ).
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π½Π°ΡΠ° ΡΡΡΠ°Π½ΠΈΡΠ° Π±ΡΠ΄Π΅Ρ ΡΠ΅ΠΏΠ΅ΡΡ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
ΠΠΎΠ»Π½ΡΠΉ ΠΊΠΎΠ΄ ΡΠ°ΠΊΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ:
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° CSS. ΠΠ° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ Π½Π΅ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π½Π°ΡΠΈΠ½Π°ΡΡ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠ΅ Ρ Π½ΠΎΠ²ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ ΠΈΠ»ΠΈ ΠΎΡΡΠ°Π²Π»ΡΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ ΡΡΡΠΎΠΊΠΈ Π΄Π»Ρ ΡΠΈΠ³ΡΡΠ½ΡΡ ΡΠΊΠΎΠ±ΠΎΠΊ. ΠΡΠΎΡΡΠΎ ΠΏΡΠΈΠ½ΡΡΠΎ ΠΎΡΠΎΡΠΌΠ»ΡΡΡ ΠΊΠΎΠ΄ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠ°ΠΊ Π΄Π»Ρ Π»ΡΡΡΠ΅ΠΉ ΡΠΈΡΠ°Π΅ΠΌΠΎΡΡΠΈ, ΠΏΡΠΈ ΡΡΠΎΠΌ ΠΏΠ΅ΡΠ΅Π΄ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΡΠΌΠΈ ΡΡΠ°Π²ΠΈΡΡΡ ΡΠ°Π±ΡΠ»ΡΡΠΈΡ ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΎΠ±Π΅Π»ΠΎΠ².
ΠΠ½Π΅ΡΠ½ΠΈΠ΅ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ
Π’Π΅ΠΏΠ΅ΡΡ Π²ΠΌΠ΅ΡΡΠΎ ΡΠ΅Π³ΠΎΠ² Π² HTML-ΡΠ°ΠΉΠ»Ρ Π½ΡΠΆΠ½ΠΎ Π²ΡΡΠ°Π²ΠΈΡΡ ΠΊΠΎΠ΄, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π½Π° ΠΌΠ΅ΡΡΠΎΠ½Π°Ρ ΠΎΠΆΠ΄Π΅Π½ΠΈΠ΅ Π²Π½Π΅ΡΠ½Π΅ΠΉ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ. ΠΠ½ Π²ΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Π² ΡΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ ΠΏΠΎΡΠ»Π΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ( ), Π³Π΄Π΅ ΠΌΡ ΡΠ°Π½ΡΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π»ΠΈ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ ΡΡΠΈΠ»ΠΈ:
ΠΠ½ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ:
Π Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π½Π΅ ΡΠΊΠ°Π·Π°Π½ ΠΏΡΡΡ Π΄ΠΎ ΡΠ°ΠΉΠ»Π° styles.css, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΎΠ½ Π»Π΅ΠΆΠΈΡ Π² ΡΠΎΠΉ ΠΆΠ΅ ΠΏΠ°ΠΏΠΊΠ΅, ΡΡΠΎ ΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ HTML. ΠΡΠ»ΠΈ ΠΆΠ΅ ΡΠ°ΠΉΠ» Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² Π΄ΡΡΠ³ΠΎΠΉ ΠΏΠ°ΠΏΠΊΠ΅ ΠΈΠ»ΠΈ Π²ΠΎΠΎΠ±ΡΠ΅ Π½Π° Π΄ΡΡΠ³ΠΎΠΌ ΡΠ΅ΡΠ²Π΅ΡΠ΅, ΡΠΎ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΠΊΠ°Π·Π°ΡΡ ΠΏΠΎΠ»Π½ΡΠΉ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΉ ΠΈΠ»ΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΏΡΡΡ ΠΊ Π½Π΅ΠΌΡ. Π ΡΠ»ΡΡΠ°Π΅ Π½Π°ΡΠ΅Π³ΠΎ ΡΠ΅ΡΠ²Π΅ΡΠ° Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΡΠΈ Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΠ΅ΠΌ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠ°ΠΏΠΊΠΈ, Π³Π΄Π΅ Π»Π΅ΠΆΠΈΡ ΡΠ°ΠΉΠ». Π ΡΠ»ΡΡΠ°Π΅ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΡΠ΅ΡΠ²Π΅ΡΠ° ΠΏΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΏΠΎΠ»Π½ΡΠΉ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΉ ΠΏΡΡΡ Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΠ΅ΠΌ Π΄ΠΎΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ ΠΈΠΌΠ΅Π½ΠΈ.
ΠΠΌΠΏΠΎΡΡ ΡΡΠΆΠΎΠ³ΠΎ CSS
ΠΠ· ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅Π³ΠΎ ΡΠ°Π·Π΄Π΅Π»Π° ΠΏΠΎΠ½ΡΡΠ½ΠΎ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΆΠΎΠΉ ΡΡΠΈΠ»Ρ Π² ΡΠ²ΠΎΠ΅ΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅: ΠΏΡΠΎΡΡΠΎ ΡΠΊΠ°ΠΆΠΈΡΠ΅ URL ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅Π³ΠΎ ΡΠ°ΠΉΠ»Π° Π² ΡΠ²ΠΎΠΈΡ HTML-Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°Ρ .
ΠΠ°ΠΊ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ CSS β ΡΡΠΎ Π»ΠΈΡΡ Π½Π°ΡΠ°Π»ΠΎ Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΈ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠΉ Π΄ΠΎΡΠΎΠ³ΠΈ ΠΏΠΎ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ Π²Π΅Π±-ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΠΡΡΡ Β«ΠΡΠΎΡΠ΅ΡΡΠΈΡ β Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΒ» ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ Π²Π°Ρ Ρ ΠΎΡΠ½ΠΎΠ²Π½ΡΠΌΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°: HTML, CSS, JavaScript ΠΈ PHP. ΠΠΎΠ΄ΠΎΠ²Π°Ρ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ° ΠΎΠ±ΡΡΠ΅Π½ΠΈΡ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π»ΡΠ΄ΡΠΌ, ΠΊΠΎΡΠΎΡΡΠ΅ Ρ ΠΎΡΡΡ Ρ ΡΠΈΡΡΠΎΠ³ΠΎ Π»ΠΈΡΡΠ° ΠΎΡΠ²ΠΎΠΈΡΡ Π½Π°Π²ΡΠΊΠΈ ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΠ³ΠΎ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°, Π° ΡΠ°ΠΊΠΆΠ΅ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΠΌ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΡΠ°ΠΌ.
Π ΠΈΡΠΎΠ³Π΅ Π²Ρ Π½Π°ΡΡΠΈΡΠ΅ΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠ²ΠΎΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ Π²Π΅Π±-ΠΏΡΠΎΠ΅ΠΊΡΡ ΠΈ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠ΅ΡΠ΅Π½Π΄ΠΎΠ²Π°ΡΡ Π½Π° ΠΏΠΎΠ·ΠΈΡΠΈΡ Π΄ΠΆΡΠ½ΠΈΠΎΡ-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°.
ΠΠΈΡΠ΅Ρ ΠΏΡΠΎ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΡ Π² Skillbox. Π Π°Π±ΠΎΡΠ°Π» Π³Π»Π°Π²Π½ΡΠΌ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠΎΠΌ ΡΠ°ΠΉΡΠ° Β«Π₯Π°Π±ΡΠ°Ρ Π°Π±ΡΒ», Π²Π΅Π΄Π΅Ρ ΠΊΠΎΡΠΏΠΎΡΠ°ΡΠΈΠ²Π½ΡΠ΅ Π±Π»ΠΎΠ³ΠΈ.
ΠΡΠ½ΠΎΠ²Ρ ΡΠ°Π±ΠΎΡΡ Ρ ΡΠ·ΡΠΊΠΎΠΌ CSS
Π£ΡΠ΅Π±Π½ΠΈΠΊ HTML CSS
ΠΡΠ°ΠΊΡΠΈΠΊΠ°
ΠΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡΠΉ ΠΊΡΡΡ
ΠΡΠ°ΠΊΡΠΈΠΊΠ°
ΠΠ΄Π°ΠΏΡΠΈΠ²
ΠΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡΠ΅ Π²Π΅ΡΠΈ
ΠΡΠ°ΠΊΡΠΈΠΊΠ°
ΠΡ Ρ Π²Π°ΠΌΠΈ ΡΠΆΠ΅ ΡΠ°Π·ΠΎΠ±ΡΠ°Π»ΠΈ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΠ΅Π³ΠΈ ΡΠ·ΡΠΊΠ° HTML ΠΈ ΡΠ΅ΠΏΠ΅ΡΡ ΠΏΡΠΈΡΠ»ΠΎ Π²ΡΠ΅ΠΌΡ Π½Π°Π²Π΅ΡΡΠΈ ΠΊΡΠ°ΡΠΎΡΡ. Π₯ΠΎΡΠ΅Π»ΠΎΡΡ Π±Ρ ΠΈΠΌΠ΅ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΌΠ΅Π½ΡΡΡ ΡΠ²Π΅Ρ ΡΠ΅ΠΊΡΡΠ°, Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅Ρ, ΡΠΎΠ½ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅. ΠΡΠΎ Π΄Π΅Π»Π°Π΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ·ΡΠΊΠ° CSS.
ΠΠ°ΠΆΠ΄ΠΎΠΌΡ ΡΠ΅Π³Ρ Π² HTML ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΡΠ°ΠΊ Π½Π°Π·ΡΠ²Π°Π΅ΠΌΡΠΉ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ CSS. Π ΠΏΡΠΈΠΌΠ΅ΡΡ, ΡΠ΅Π³Ρ
ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ CSS ΡΠ΅Π»Π΅ΠΊΡΠΎΡ p, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΎΠ±ΡΠ°ΡΠΈΡΡΡΡ ΠΊΠΎ Π²ΡΠ΅ΠΌ Π°Π±Π·Π°ΡΠ°ΠΌ HTML ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠΎΠΊΡΠ°ΡΠΈΡΡ ΠΈΡ Π²ΡΠ΅Ρ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ Π² ΠΊΡΠ°ΡΠ½ΡΠΉ ΡΠ²Π΅Ρ. ΠΠΎΡΠ»Π΅ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ° ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΡΠ°Π²ΠΈΡΡ ΡΠΈΠ³ΡΡΠ½ΡΠ΅ ΡΠΊΠΎΠ±ΠΊΠΈ <>, Π²Π½ΡΡΡΠΈ ΠΊΠΎΡΠΎΡΡΡ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΏΠΈΡΠ°ΡΡ CSS ΡΠ²ΠΎΠΉΡΡΠ²Π°.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠΊΡΠ°ΡΠΈΠΌ Π²ΡΠ΅ Π°Π±Π·Π°ΡΡ Π² ΠΊΡΠ°ΡΠ½ΡΠΉ ΡΠ²Π΅Ρ:
Π’Π°ΠΊ ΠΊΠΎΠ΄ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅:
Π ΡΠ΅ΠΏΠ΅ΡΡ Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠΊΡΠ°ΡΠΈΠΌ Π°Π±Π·Π°ΡΡ Π² Π·Π΅Π»Π΅Π½ΡΠΉ ΡΠ²Π΅ΡΠΈ ΡΠ΄Π΅Π»Π°Π΅ΠΌ ΠΈΡ Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°:
Π’Π°ΠΊ ΠΊΠΎΠ΄ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅:
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ CSS ΠΊΠΎΠ΄Π°: ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ Π½ΠΎΠ²ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠΈΡΠ΅ΡΡΡ Ρ Π½ΠΎΠ²ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ΅ΠΏΠ΅ΡΡ ΡΠ°Π·Π±Π΅ΡΠ΅ΠΌΡΡ Ρ ΡΠ΅ΠΌ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ Π½Π°ΠΏΠΈΡΠ°Π½Π½ΡΠΉ CSS ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠ»ΡΡ ΠΊ Π½Π°ΡΠ΅ΠΌΡ HTML ΠΊΠΎΠ΄Ρ. ΠΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠ΅ΠΌΡ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ.
ΠΠ΅ΡΠ²ΡΠΉ ΡΠΏΠΎΡΠΎΠ± Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ CSSΠ±ΡΠ΄Π΅Ρ Π½Π°ΠΏΠΈΡΠ°Π½ Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠΌ ΡΠ°ΠΉΠ»Π΅ ΠΈ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ ΠΊ Π½Π°ΡΠ΅ΠΉ HTML ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΡΠ΅ Π΄Π²Π° ΡΠΏΠΎΡΠΎΠ±Π° Π·Π°ΠΊΠ»ΡΡΠ°ΡΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ CSS ΠΊΠΎΠ΄ Π±ΡΠ΄Π΅Ρ Π½Π°ΠΏΠΈΡΠ°Π½ ΠΏΡΡΠΌΠΎ Π½Π° HTML ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΠ΅ΡΠ²ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π³ΠΎΡΠ°Π·Π΄ΠΎ ΡΠ°ΡΠ΅ (Π² ΠΏΠΎΠ΄Π°Π²Π»ΡΡΡΠ΅ΠΌ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠ»ΡΡΠ°Π΅Π²). ΠΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ Π²ΡΠ΅ ΡΡΠΈ ΡΠΏΠΎΡΠΎΠ±Π°.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ°Π·Π±Π΅ΡΠ΅ΠΌΡΡ Ρ ΡΡΠΈΠΌΠΈ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ.
Π‘ΠΏΠΎΡΠΎΠ± 1. ΠΡΠ΄Π΅Π»ΡΠ½ΡΠΉ CSS ΡΠ°ΠΉΠ»
ΠΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²ΠΎ ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄Π° Π² ΡΠΎΠΌ, ΡΡΠΎ CSS ΡΠ°ΠΉΠ» ΠΎΠ΄ΠΈΠ½, Π° HTML ΡΠ°ΠΉΠ»ΠΎΠ² ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π»ΡΠ±ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ, Ρ ΠΎΡΡ ΡΡΡΡΡΠ°. ΠΡ ΡΠ΄Π΅Π»Π°Π΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ CSS ΡΠ°ΠΉΠ»Π°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠΎΠΊΡΠ°ΡΠΈΠΌ Π²ΡΠ΅ Π°Π±Π·Π°ΡΡ Π² ΠΊΡΠ°ΡΠ½ΡΠΉ ΡΠ²Π΅Ρ, ΠΈ ΡΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡ Π½Π° Π²ΡΠ΅ΠΉ 1000 HTML ΡΡΡΠ°Π½ΠΈΡ, ΠΊ ΠΊΠΎΡΠΎΡΡΠΌ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ Π½Π°Ρ CSS ΡΠ°ΠΉΠ». ΠΡΠ΅Π½Ρ ΡΠ΄ΠΎΠ±Π½ΠΎ ΠΈ Π±ΡΡΡΡΠΎ.
Π§ΡΠΎΠ±Ρ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ CSS ΡΠ°ΠΉΠ» ΠΊ HTML ΡΡΡΠ°Π½ΠΈΡΠ΅, Π² ΡΠ΅Π³Π΅ head ΡΠ»Π΅Π΄ΡΠ΅Ρ Π½Π°ΠΏΠΈΡΠ°ΡΡ ΡΠ°ΠΊΡΡ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΈΡ: .
Π‘Π°ΠΌ CSS ΡΠ°ΠΉΠ» Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ Ρ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ΠΌ .css. ΠΠ±ΡΡΠ½ΠΎ Π΅Π³ΠΎ Π½Π°Π·ΡΠ²Π°ΡΡ styles.css ΠΈΠ»ΠΈ style.css.
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΊ Π½Π°ΡΠ΅ΠΌΡ HTML ΡΠ°ΠΉΠ»Ρ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ CSS ΡΠ°ΠΉΠ» style.css:
ΠΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°ΡΡ Π½Π΅ ΠΎΠ΄ΠΈΠ½ ΡΠ°ΠΉΠ», Π° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ. ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΠΌ ΡΠ°ΠΉΠ»Ρ style1.css, style2.css ΠΈ style3.css:
Π‘ΠΏΠΎΡΠΎΠ± 2. CSS Π²Π½ΡΡΡΠΈ ΡΠ΅Π³Π° style
ΠΡΠΎΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ CSS ΠΊΠΎΠ΄ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΏΠΈΡΠ°ΡΡ Π² ΡΠ΅Π³Π΅
ΠΠ°ΡΠ°Π»ΠΎ ΡΠ°Π±ΠΎΡΡ Ρ CSS
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ Π²ΠΎΠ·ΡΠΌΡΠΌ ΠΏΡΠΎΡΡΠΎΠΉ HTML-Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌ ΠΊ Π½Π΅ΠΌΡ CSS, ΠΈΠ·ΡΡΠ°Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ Π²Π΅ΡΠΈ ΠΎ ΡΠ·ΡΠΊΠ΅.
ΠΠ΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠ΅ Π·Π½Π°Π½ΠΈΡ: | ΠΠ°Π·ΠΎΠ²Π°Ρ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ½Π°Ρ Π³ΡΠ°ΠΌΠΎΡΠ½ΠΎΡΡΡ, ΠΠ°Π·ΠΎΠ²ΠΎΠ΅ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠ΅ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΠ΅, Π±Π°Π·ΠΎΠ²ΡΠ΅ Π·Π½Π°Π½ΠΈΡ ΡΠ°Π±ΠΎΡΠ° Ρ ΡΠ°ΠΉΠ»Π°ΠΌΠΈ, ΠΈ Π±Π°Π·ΠΎΠ²ΡΠ΅ Π·Π½Π°Π½ΠΈΡ HTML (ΡΠΌΠΎΡΡΠΈΡΠ΅ ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² HTML.) |
---|---|
ΠΠ°Π΄Π°ΡΠ°: | ΠΠΎΠ½ΡΡΡ ΠΎΡΠ½ΠΎΠ²Ρ ΡΠ²ΡΠ·ΡΠ²Π°Π½ΠΈΡ CSS-Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° Ρ HTML-ΡΠ°ΠΉΠ»ΠΎΠΌ ΠΈ ΡΠΌΠ΅ΡΡ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ ΠΏΡΠΎΡΡΠΎΠ΅ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS. |
ΠΠ°ΡΠ½ΡΠΌ Ρ HTML
ΠΠ°ΡΠ΅ΠΉ ΠΎΡΠΏΡΠ°Π²Π½ΠΎΠΉ ΡΠΎΡΠΊΠΎΠΉ ΡΠ²Π»ΡΠ΅ΡΡΡ HTML-Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠΎΠ΄ ΡΠ½ΠΈΠ·Ρ, Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π° ΡΠ²ΠΎΡΠΌ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ΅. Π‘ΠΎΡ ΡΠ°Π½ΠΈΡΠ΅ ΠΏΡΠΈΠ²Π΅Π΄ΡΠ½Π½ΡΠΉ Π½ΠΈΠΆΠ΅ ΠΊΠΎΠ΄ ΠΊΠ°ΠΊ index.html Π² ΠΏΠ°ΠΏΠΊΠ΅ Π½Π° Π²Π°ΡΠ΅ΠΌ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ΅.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΠΡΠ»ΠΈ Π²Ρ ΡΠΈΡΠ°Π΅ΡΠ΅ ΡΡΠΎ Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π΅ ΠΈΠ»ΠΈ Π² ΡΡΠ΅Π΄Π΅, Π³Π΄Π΅ Π²Ρ Π½Π΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠ°ΠΉΠ»Ρ, Π½Π΅ Π±Π΅ΡΠΏΠΎΠΊΠΎΠΉΡΠ΅ΡΡ β Π½ΠΈΠΆΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΡ ΠΊΠΎΠ΄Π°, ΡΡΠΎΠ±Ρ Π²Ρ ΠΌΠΎΠ³Π»ΠΈ Π½Π°ΠΏΠΈΡΠ°ΡΡ ΠΊΠΎΠ΄ ΠΏΡΡΠΌΠΎ Π·Π΄Π΅ΡΡ, Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ CSS Π² Π½Π°Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ
Π‘Π°ΠΌΠΎΠ΅ ΠΏΠ΅ΡΠ²ΠΎΠ΅, ΡΡΠΎ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ, β ΡΡΠΎ ΡΠΎΠΎΠ±ΡΠΈΡΡ HTML-Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΡ, ΡΡΠΎ Ρ Π½Π°Ρ Π΅ΡΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π° CSS, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ Ρ ΠΎΡΠΈΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ. Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΡΡΠΈ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠΏΠΎΡΠΎΠ±Π° ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ CSS ΠΊ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΡ HTML, Ρ ΠΊΠΎΡΠΎΡΡΠΌ Π²Ρ ΠΎΠ±ΡΡΠ½ΠΎ ΡΡΠ°Π»ΠΊΠΈΠ²Π°Π΅ΡΠ΅ΡΡ, ΠΎΠ΄Π½Π°ΠΊΠΎ ΡΠ΅ΠΉΡΠ°Ρ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΎΠ±ΡΡΠ½ΡΠΉ ΠΈ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ β ΡΠ²ΡΠ·Π°ΡΡ CSS Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ Π²Π°ΡΠ΅Π³ΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°.
Π§ΡΠΎΠ±Ρ ΡΠ²ΡΠ·Π°ΡΡ styles.css Ρ index.html, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΡΡ ΡΡΡΠΎΠΊΡ Π³Π΄Π΅-ΡΠΎ Π²Π½ΡΡΡΠΈ HTML Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°:
Π‘ΠΎΡ ΡΠ°Π½ΠΈΡΠ΅ ΡΠ°ΠΉΠ»Ρ HTML ΠΈ CSS ΠΈ ΠΏΠ΅ΡΠ΅Π·Π°Π³ΡΡΠ·ΠΈΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ Π² Π²Π΅Π±-Π±ΡΠ°ΡΠ·Π΅ΡΠ΅. ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΡΡΠΎΠ²Π½Ρ Π² Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΡΠ΅ΠΏΠ΅ΡΡ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΠΊΡΠ°ΡΠ½ΡΠΌ. ΠΡΠ»ΠΈ ΡΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄ΡΡ, ΠΏΠΎΠ·Π΄ΡΠ°Π²Π»ΡΡ β Π²Ρ ΡΡΠΏΠ΅ΡΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠ»ΠΈ CSS ΠΊ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΡ HTML. ΠΡΠ»ΠΈ ΡΡΠΎΠ³ΠΎ Π½Π΅ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄ΡΡ, Π²Π½ΠΈΠΌΠ°ΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠΎΠ²Π΅ΡΡΡΠ΅, ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ Π»ΠΈ Π²Ρ Π²Π²Π΅Π»ΠΈ Π²ΡΡ.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΡ ΡΠ°Π±ΠΎΡΡ Π² styles.css Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎ, ΠΈΠ»ΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π°Ρ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠΉ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ Π½ΠΈΠΆΠ΅, ΡΡΠΎΠ±Ρ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΡ ΡΡΠΎΡ ΡΡΠΎΠΊ. ΠΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠΉ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ Π΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π΅ΡΠ»ΠΈ Π±Ρ CSS Π½Π° ΠΏΠ΅ΡΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Π±ΡΠ» ΡΠ²ΡΠ·Π°Π½ Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠΌ HTML, ΠΊΠ°ΠΊ ΡΡΠΎ Π±ΡΠ»ΠΎ Π² Π½Π°ΡΠ΅ΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅ Π²ΡΡΠ΅.
Π‘ΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ HTML-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ±ΡΠ°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ² ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ, ΡΠ°Π·Π΄Π΅Π»ΠΈΠ² ΠΈΡ Π·Π°ΠΏΡΡΡΠΌΠΈ. ΠΡΠ»ΠΈ Ρ Ρ ΠΎΡΡ, ΡΡΠΎΠ±Ρ Π²ΡΠ΅ ΠΏΠ°ΡΠ°Π³ΡΠ°ΡΡ ΠΈ Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΏΠΈΡΠΊΠ° Π±ΡΠ»ΠΈ Π·Π΅Π»ΡΠ½ΡΠΌΠΈ, ΠΌΠΎΡ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ°ΠΊ:
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΡΠΎ Π² ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΠΌ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅ Π½ΠΈΠΆΠ΅ (ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΡΠΉΡΠ΅ ΠΏΠΎΠ»Ρ ΠΊΠΎΠ΄Π°) ΠΈΠ»ΠΈ Π² ΡΠ²ΠΎΡΠΌ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅ CSS.
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ
ΠΠΎΠ³Π΄Π° ΠΌΡ ΡΠΌΠΎΡΡΠΈΠΌ Π½Π° Ρ ΠΎΡΠΎΡΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½Π½ΡΠΉ HTML-Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ, Π΄Π°ΠΆΠ΅ ΡΠ°ΠΊΠΎΠΉ ΠΏΡΠΎΡΡΠΎΠΉ, ΠΊΠ°ΠΊ Π½Π°Ρ ΠΏΡΠΈΠΌΠ΅Ρ, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ Π±ΡΠ°ΡΠ·Π΅Ρ Π΄Π΅Π»Π°Π΅Ρ HTML ΡΠΈΡΠ°Π΅ΠΌΡΠΌ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΠΈΠ»ΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ Π±ΠΎΠ»ΡΡΠΈΠ΅ ΠΈ ΠΆΠΈΡΠ½ΡΠ΅, Π² Π½Π°ΡΠ΅ΠΌ ΡΠΏΠΈΡΠΊΠ΅ Π΅ΡΡΡ ΠΌΠ°ΡΠΊΠ΅ΡΡ. ΠΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΏΠΎΡΠΎΠΌΡ, ΡΡΠΎ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ Π΅ΡΡΡ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠ΅ ΡΡΠΈΠ»ΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΊΠΎ Π²ΡΠ΅ΠΌ ΡΡΡΠ°Π½ΠΈΡΠ°ΠΌ; Π±Π΅Π· Π½ΠΈΡ Π²Π΅ΡΡ ΡΠ΅ΠΊΡΡ ΡΠ°Π±ΠΎΡΠ°Π» Π±Ρ Π²ΠΌΠ΅ΡΡΠ΅, ΠΈ ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΠ»ΠΈ Π±Ρ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ Π²ΡΡ Ρ Π½ΡΠ»Ρ. ΠΡΠ΅ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ HTML-ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ.
ΠΠ΄Π½Π°ΠΊΠΎ Π²Π°ΠΌ ΡΠ°ΡΡΠΎ Π·Π°Ρ ΠΎΡΠ΅ΡΡΡ ΡΡΠΎ-ΡΠΎ Π΄ΡΡΠ³ΠΎΠ΅, ΠΊΡΠΎΠΌΠ΅ Π²ΡΠ±ΠΎΡΠ°, ΡΠ΄Π΅Π»Π°Π½Π½ΠΎΠ³ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ. ΠΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ, ΠΏΡΠΎΡΡΠΎ Π²ΡΠ±ΡΠ°Π² ΡΠ»Π΅ΠΌΠ΅Π½Ρ HTML, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ, ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ CSS, ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π΅Π³ΠΎ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄. Π₯ΠΎΡΠΎΡΠΈΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠΌ ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π°Ρ
- β Π½Π΅ΡΠΏΠΎΡΡΠ΄ΠΎΡΠ΅Π½Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ. ΠΠ½ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΠΌΠ°ΡΠΊΠ΅ΡΡ, ΠΈ Π΅ΡΠ»ΠΈ Ρ ΡΠ΅ΡΡ, ΡΡΠΎ Ρ Π½Π΅ Ρ
ΠΎΡΡ ΡΡΠΈ ΠΌΠ°ΡΠΊΠ΅ΡΡ, Ρ ΠΌΠΎΠ³Ρ ΡΠ΄Π°Π»ΠΈΡΡ ΠΈΡ
Π²ΠΎΡ ΡΠ°ΠΊ:
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΠΎ Π² ΡΠ²ΠΎΠΉ CSS ΡΠ΅ΠΉΡΠ°Ρ.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ list-style-type β ΡΡΠΎ Ρ ΠΎΡΠΎΡΠ΅Π΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ, ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ Π½Π° MDN, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ. ΠΠ·Π³Π»ΡΠ½ΠΈΡΠ΅ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ Π΄Π»Ρ list-style-type ΠΈ Π²Ρ Π½Π°ΠΉΠ΄ΡΡΠ΅ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ Π² Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΡΠΎΠ±Ρ ΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΡΡΠ³ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, Π·Π°ΡΠ΅ΠΌ Π²ΡΠ΅ Π΄ΠΎΠΏΡΡΡΠΈΠΌΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π±ΡΠ΄ΡΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΠΎΠΏΠΈΡΠ°Π½Ρ Π½ΠΈΠΆΠ΅.
ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΊΠ»Π°ΡΡΠ°
ΠΠΎΠΊΠ° Ρ Π½Π°Ρ Π΅ΡΡΡ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΡΠ΅ Π½Π° ΠΈΡ ΠΈΠΌΠ΅Π½Π°Ρ HTML-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π΄ΠΎ ΡΠ΅Ρ ΠΏΠΎΡ, ΠΏΠΎΠΊΠ° Π²Ρ Ρ ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΠΎΠ³ΠΎ ΡΠΈΠΏΠ° Π² Π²Π°ΡΠ΅ΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅ Π²ΡΠ³Π»ΡΠ΄Π΅Π»ΠΈ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ. Π Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠ»ΡΡΠ°Π΅Π² ΡΡΠΎ Π½Π΅ ΡΠ°ΠΊ, ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π½Π°ΠΉΡΠΈ ΡΠΏΠΎΡΠΎΠ± Π²ΡΠ±ΡΠ°ΡΡ ΠΏΠΎΠ΄ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π½Π΅ ΠΌΠ΅Π½ΡΡ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅. Π‘Π°ΠΌΡΠΉ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΠ½Π½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ β Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠ»Π°ΡΡ ΠΊ Π²Π°ΡΠ΅ΠΌΡ HTML-ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈ Π½Π°ΡΠ΅Π»ΠΈΡΡΡΡ Π½Π° ΡΡΠΎΡ ΠΊΠ»Π°ΡΡ.
Π ΡΠ²ΠΎΡΠΌ HTML-Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΠΡΡΠΈΠ±ΡΡ class ΠΊΠΎ Π²ΡΠΎΡΠΎΠΌΡ ΠΏΡΠ½ΠΊΡΡ ΡΠΏΠΈΡΠΊΠ°. ΠΠ°Ρ ΡΠΏΠΈΡΠΎΠΊ ΡΠ΅ΠΏΠ΅ΡΡ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ:
Π Π²Π°ΡΠ΅ΠΌ CSS Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ±ΡΠ°ΡΡ ΠΊΠ»Π°ΡΡ special ΠΊ Π»ΡΠ±ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΠΎΠ½ Π²ΡΠ³Π»ΡΠ΄Π΅Π» ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ ΡΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΏΠΈΡΠΊΠ°. ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ Π² Π²Π°Ρ ΡΠ°ΠΉΠ» CSS:
Π‘ΠΎΡ ΡΠ°Π½ΠΈΡΠ΅ ΠΈ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ.
ΠΠ½ΠΎΠ³Π΄Π° Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π° Ρ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠΌ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»ΡΠ΅Ρ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ HTML-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ:
ΠΡΠΎΡ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ Β«ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ°ΡΡΡΡ Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° li, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΠΌΠ΅Π΅Ρ ΠΊΠ»Π°ΡΡ specialΒ». ΠΡΠ»ΠΈ Π±Ρ Π²Ρ ΡΠ΄Π΅Π»Π°Π»ΠΈ ΡΡΠΎ, Π²Ρ Π±Ρ Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ ΡΠΌΠΎΠ³Π»ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΊΠ»Π°ΡΡ ΠΊ ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΏΡΠΎΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΠ² ΠΊ Π½Π΅ΠΌΡ ΠΊΠ»Π°ΡΡ; Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΡΠΏΠΈΡΠΎΠΊ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ²:
ΠΠ°ΠΊ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΅Π±Π΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΡΡ, Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΊΠ»Π°ΡΡΡ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½Ρ ΠΊΠΎ ΠΌΠ½ΠΎΠ³ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ, ΠΈ Π²Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΡΡΠΎΡΠ½Π½ΠΎ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉ CSS ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ°Π·, ΠΊΠΎΠ³Π΄Π° ΡΡΠΎ-ΡΠΎ Π½ΠΎΠ²ΠΎΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΡΠΈΠ½ΡΡΡ ΡΡΠΎΡ ΡΡΠΈΠ»Ρ. ΠΠΎΡΡΠΎΠΌΡ ΠΈΠ½ΠΎΠ³Π΄Π° Π»ΡΡΡΠ΅ ΠΎΠ±ΠΎΠΉΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈ ΠΏΡΠΎΡΡΠΎ ΠΎΠ±ΡΠ°ΡΠΈΡΡΡΡ ΠΊ ΠΊΠ»Π°ΡΡΡ, Π΅ΡΠ»ΠΈ ΡΠΎΠ»ΡΠΊΠΎ Π²Ρ Π½Π΅ Π·Π½Π°Π΅ΡΠ΅, ΡΡΠΎ Ρ ΠΎΡΠΈΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π° Π΄Π»Ρ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Ρ ΠΎΡΠΈΡΠ΅ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ ΠΎΠ½ΠΈ Π½Π΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΊ Π΄ΡΡΠ³ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ.
Π‘ΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΈΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅
ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Π² ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ.
ΠΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ Π°Π±Π·Π°Ρ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ ΠΈΠ΄ΡΡ ΡΡΠ°Π·Ρ ΠΏΠΎΡΠ»Π΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π½Π° ΡΠΎΠΌ ΠΆΠ΅ ΡΡΠΎΠ²Π½Π΅ ΠΈΠ΅ΡΠ°ΡΡ ΠΈΠΈ Π² HTML. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ + (ΡΠΎΡΠ΅Π΄Π½ΠΈΠΉ Π±ΡΠ°ΡΡΠΊΠΈΠΉ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΎΡ) ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ°ΠΌΠΈ.
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Π² ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ:
ΠΡΠΈΠΌΠ΅Ρ Π½ΠΈΠΆΠ΅ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ Π΄Π²Π° ΠΏΡΠ°Π²ΠΈΠ»Π° Π²ΡΡΠ΅. ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ span ΠΊΡΠ°ΡΠ½ΡΠΉ, Π΅ΡΠ»ΠΈ ΠΎΠ½ Π²Π½ΡΡΡΠΈ Π°Π±Π·Π°ΡΠ°. ΠΡ ΡΠ·Π½Π°Π΅ΡΠ΅, ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ Π»ΠΈ Π²Ρ ΡΡΠΎ ΡΠ΄Π΅Π»Π°Π»ΠΈ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΠΊ Π² ΠΏΠ΅ΡΠ²ΠΎΠΌ Π°Π±Π·Π°ΡΠ΅ Π±ΡΠ΄Π΅Ρ ΠΊΡΠ°ΡΠ½ΡΠΌ, Π½ΠΎ ΡΠ²Π΅Ρ Π² ΠΏΠ΅ΡΠ²ΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ ΡΠΏΠΈΡΠΊΠ° Π½Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ ΡΠ²Π΅Ρ.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΠΠ°ΠΊ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΈΠ΄Π΅ΡΡ, CSS Π΄Π°ΡΡ Π½Π°ΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² Π½Π°ΡΠ΅Π»ΠΈΠ²Π°Π½ΠΈΡ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΈ ΠΌΡ ΠΏΠΎΠΊΠ° ΡΠΎΠ»ΡΠΊΠΎ ΡΠ»Π΅Π³ΠΊΠ° ΠΈΠ·ΡΡΠΈΠ»ΠΈ Π΅Π³ΠΎ! ΠΡ Π±ΡΠ΄Π΅ΠΌ Π²Π½ΠΈΠΌΠ°ΡΠ΅Π»ΡΠ½ΠΎ ΡΠΌΠΎΡΡΠ΅ΡΡ Π½Π° Π²ΡΠ΅ ΡΡΠΈ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅ Π² Π½Π°ΡΠ΅ΠΉ ΡΡΠ°ΡΡΠ΅ Π‘Π΅Π»Π΅ΠΊΡΠΎΡΡ ΠΏΠΎΠ·ΠΆΠ΅ Π² Π½Π°ΡΠ΅ΠΌ ΠΊΡΡΡΠ΅.
Π‘ΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΡΡΡΠ»ΠΊΠΈ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡ Π½Π° Π½Π΅Ρ ΠΊΡΡΡΠΎΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ΄Π°Π»ΠΈΠ² ΠΏΠΎΠ΄ΡΡΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅, ΡΡΠΎ Π΄ΠΎΡΡΠΈΠ³Π°Π΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π³ΠΎ ΠΏΡΠ°Π²ΠΈΠ»Π°:
Π ΠΏΡΠΈΠ²Π΅Π΄ΡΠ½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠΈΠ³ΡΠ°ΡΡ Ρ ΡΠ°Π·Π½ΡΠΌΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ Π΄Π»Ρ ΡΠ°Π·Π½ΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ ΡΡΡΠ»ΠΊΠΈ. Π― Π΄ΠΎΠ±Π°Π²ΠΈΠ» ΠΊ Π½Π΅ΠΌΡ ΠΏΡΠ°Π²ΠΈΠ»Π°, ΠΏΡΠΈΠ²Π΅Π΄ΡΠ½Π½ΡΠ΅ Π²ΡΡΠ΅, ΠΈ ΡΠ΅ΠΏΠ΅ΡΡ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ, ΡΡΠΎ ΡΠΎΠ·ΠΎΠ²ΡΠΉ ΡΠ²Π΅Ρ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Π»ΡΠ³ΠΊΠΈΠΉ ΠΈ ΡΡΡΠ΄Π½ΠΎ ΡΠΈΡΠ°Π΅ΠΌΡΠΉ β ΠΏΠΎΡΠ΅ΠΌΡ Π±Ρ Π½Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π΅Π³ΠΎ Π½Π° Π»ΡΡΡΠΈΠΉ ΡΠ²Π΅Ρ? ΠΠΎΠΆΠ΅ΡΠ΅ Π»ΠΈ Π²Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΡΠ»ΠΊΠΈ ΠΆΠΈΡΠ½ΡΠΌ ΡΡΠΈΡΡΠΎΠΌ?
ΠΡ ΡΠ΄Π°Π»ΠΈΠ»ΠΈ ΠΏΠΎΠ΄ΡΡΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ Π½Π° Π½Π°ΡΠ΅ΠΉ ΡΡΡΠ»ΠΊΠ΅ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π°Π»ΠΈΡΡ ΠΏΠΎΠ΄ΡΡΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΠ· Π²ΡΠ΅Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ ΡΡΡΠ»ΠΊΠΈ. ΠΠ΄Π½Π°ΠΊΠΎ ΡΡΠΎΠΈΡ ΠΏΠΎΠΌΠ½ΠΈΡΡ, ΡΡΠΎ Π½Π° ΡΠ΅Π°Π»ΡΠ½ΠΎΠΌ ΡΠ°ΠΉΡΠ΅ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»ΠΈ Π·Π½Π°Π»ΠΈ, ΡΡΠΎ ΡΡΡΠ»ΠΊΠ° ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΡΡΠ»ΠΊΠΎΠΉ. ΠΡΡΠ°Π²ΠΈΠ² ΠΏΠΎΠ΄ΡΡΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ Π½Π° ΠΌΠ΅ΡΡΠ΅, Π»ΡΠ΄ΠΈ ΠΌΠΎΠ³ΡΡ ΠΏΠΎΠ½ΡΡΡ, ΡΡΠΎ Π½Π° ΠΊΠ°ΠΊΠΎΠΉ-ΡΠΎ ΡΠ΅ΠΊΡΡ Π²Π½ΡΡΡΠΈ Π°Π±Π·Π°ΡΠ° ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΆΠΈΠΌΠ°ΡΡ β ΠΊ ΡΠ°ΠΊΠΎΠΌΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ ΠΎΠ½ΠΈ ΠΏΡΠΈΠ²ΡΠΊΠ»ΠΈ. ΠΠ°ΠΊ ΠΈ Π²ΡΡ Π² CSS, ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠ΄Π΅Π»Π°ΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ ΠΌΠ΅Π½Π΅Π΅ Π΄ΠΎΡΡΡΠΏΠ½ΡΠΌ Ρ Π²Π°ΡΠΈΠΌΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡΠΌΠΈ β ΠΌΡ ΠΏΠΎΡΡΠ°ΡΠ°Π΅ΠΌΡΡ Π²ΡΠ΄Π΅Π»ΠΈΡΡ ΠΏΠΎΡΠ΅Π½ΡΠΈΠ°Π»ΡΠ½ΡΠ΅ ΠΏΠΎΠ΄Π²ΠΎΠ΄Π½ΡΠ΅ ΠΊΠ°ΠΌΠ½ΠΈ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΡ ΠΌΠ΅ΡΡΠ°Ρ .
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: Π²Ρ ΡΠ°ΡΡΠΎ Π±ΡΠ΄Π΅ΡΠ΅ Π²ΠΈΠ΄Π΅ΡΡ ΡΠΏΠΎΠΌΠΈΠ½Π°Π½ΠΈΠ΅ ΠΎ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΠΈ Π² ΡΡΠΈΡ ΡΡΠΎΠΊΠ°Ρ ΠΈ ΠΏΠΎ Π²ΡΠ΅ΠΉ MDN. ΠΠΎΠ³Π΄Π° ΠΌΡ Π³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΎ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΠΈ, ΠΌΡ ΠΈΠΌΠ΅Π΅ΠΌ Π² Π²ΠΈΠ΄Ρ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΠ΅, ΡΡΠΎΠ±Ρ Π½Π°ΡΠΈ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ Π±ΡΠ»ΠΈ ΠΏΠΎΠ½ΡΡΠ½ΡΠΌΠΈ ΠΈ Π΄ΠΎΡΡΡΠΏΠ½ΡΠΌΠΈ Π΄Π»Ρ Π²ΡΠ΅Ρ .
ΠΠ°Ρ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Ρ Π²ΠΏΠΎΠ»Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π° ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ΅ Ρ ΠΌΡΡΡΡ ΠΈΠ»ΠΈ ΡΠ΅Π½ΡΠΎΡΠ½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΡΡ ΠΈΠ»ΠΈ Π½Π° ΡΠ΅Π»Π΅ΡΠΎΠ½Π΅ Ρ ΡΠ΅Π½ΡΠΎΡΠ½ΡΠΌ ΡΠΊΡΠ°Π½ΠΎΠΌ. ΠΠΈΠ±ΠΎ ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ ΡΡΠ΅Π½ΠΈΡ Ρ ΡΠΊΡΠ°Π½Π°, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΡΠΈΡΡΠ²Π°Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, Π»ΠΈΠ±ΠΎ ΠΈΠΌ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΡΡΠ΅Π±ΠΎΠ²Π°ΡΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ΅ΠΊΡΡ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π±ΠΎΠ»ΡΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, Π»ΠΈΠ±ΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΏΠΎ ΡΠ°ΠΉΡΡ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ.
ΠΡΠΎΡΡΠΎΠΉ HTML-Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ, ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, Π΄ΠΎΡΡΡΠΏΠ΅Π½ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ β ΠΊΠΎΠ³Π΄Π° Π²Ρ Π½Π°ΡΠΈΠ½Π°Π΅ΡΠ΅ ΠΎΡΠΎΡΠΌΠ»ΡΡΡ ΡΡΠΎΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ, Π²Π°ΠΆΠ½ΠΎ, ΡΡΠΎΠ±Ρ Π²Ρ Π½Π΅ ΡΠ΄Π΅Π»Π°Π»ΠΈ Π΅Π³ΠΎ ΠΌΠ΅Π½Π΅Π΅ Π΄ΠΎΡΡΡΠΏΠ½ΡΠΌ.
Π‘ΠΎΡΠ΅ΡΠ°Π½ΠΈΠ΅ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ² ΠΈ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΎΡΠΎΠ²
Π‘ΡΠΎΠΈΡ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΠΎΠ²Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ² ΠΈ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΎΡΠΎΠ² Π²ΠΌΠ΅ΡΡΠ΅. ΠΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ:
ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΠΎΠ²Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΈΠΏΠΎΠ² Π²ΠΌΠ΅ΡΡΠ΅. ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ Π² Π²Π°Ρ ΠΊΠΎΠ΄:
, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡ ΡΡΠ°Π·Ρ ΠΏΠΎΡΠ»Π΅
ΠΠ΅ Π±Π΅ΡΠΏΠΎΠΊΠΎΠΉΡΠ΅ΡΡ, Π΅ΡΠ»ΠΈ ΡΡΠΎ ΠΏΠΎΠΊΠ°ΠΆΠ΅ΡΡΡ ΡΠ»ΠΎΠΆΠ½ΡΠΌ β Π²Ρ ΡΠΊΠΎΡΠΎ Π½Π°ΡΠ½ΡΡΠ΅ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ ΡΡΠΎ, ΠΊΠΎΠ³Π΄Π° Π±ΡΠ΄Π΅ΡΠ΅ ΠΏΠΈΡΠ°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ Π½Π° CSS.
ΠΠ°Π²Π΅ΡΡΠ΅Π½ΠΈΠ΅
Π ΡΡΠΎΠΌ ΡΡΠΎΠΊΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ CSS. ΠΡ Π±ΡΠ΄Π΅ΠΌ ΡΠ°Π·Π²ΠΈΠ²Π°ΡΡ ΡΡΠΈ Π·Π½Π°Π½ΠΈΡ ΠΏΠΎ ΠΌΠ΅ΡΠ΅ ΠΏΡΠΎΡ ΠΎΠΆΠ΄Π΅Π½ΠΈΡ ΠΎΡΡΠ°Π»ΡΠ½ΡΡ ΡΡΠΎΠΊΠΎΠ². ΠΠ΄Π½Π°ΠΊΠΎ Π²Ρ ΡΠΆΠ΅ Π·Π½Π°Π΅ΡΠ΅ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ, ΡΡΠΎΠ±Ρ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΠ΅ΠΊΡΡ, ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ CSS Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² Π½Π°ΡΠ΅Π»ΠΈΠ²Π°Π½ΠΈΡ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅ ΠΈ ΠΈΡΠΊΠ°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ MDN.
ΠΠ° ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΡΡΠΎΠΊΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΡΡΡΠΊΡΡΡΡ CSS.
ΠΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ css ΠΊ html
Π‘ΠΏΠΎΡΠΎΠ±Ρ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ CSS ΠΊ HTML ΡΡΡΠ°Π½ΠΈΡΠ΅
1 ΡΠΏΠΎΡΠΎΠ±: Π‘ΡΠΈΠ»ΠΈ Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠΌ ΡΠ°ΠΉΠ»Π΅.
ΠΠ°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ ΡΡΠΎ, Π²ΡΠ΅ ΡΡΠΈΠ»ΠΈ ΠΏΠΈΡΡΡΡΡ Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ ΡΠ°ΠΉΠ», ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΠΌΠ΅Π΅Ρ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ .css. ΠΡΠΎΡ ΡΠ°ΠΉΠ» ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ ΠΊ html ΡΡΡΠ°Π½ΠΈΡΠ΅ ΡΠ΅ΡΠ΅Π· ΡΠ΅Π³ , ΠΎΠ½ ΡΠ»ΡΠΆΠΈΡ Π΄Π»Ρ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ Π²Π½Π΅ΡΠ½ΠΈΡ ΡΠ°Π»ΠΎΠ². Π‘ΡΡΠΎΠΊΠ° Ρ ΡΠ΅Π³ΠΎΠΌ Π²ΡΠ΅Π³Π΄Π° ΠΏΠΈΡΠ΅ΡΡΡ Π² ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠ΅Π³Π° head. Π‘Π΅ΠΉΡΠ°Ρ Ρ Π²Π°ΠΌ ΠΏΠΎΠΊΠ°ΠΆΡ, ΠΊΠ°ΠΊ ΡΡΠΎ Π΄Π΅Π»Π°Π΅ΡΡΡ Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΠ΅.
ΠΠΎΠΏΡΡΡΠΈΠΌ, Ρ Π½Π°Ρ Π΅ΡΡΡ html ΡΡΡΠ°Π½ΠΈΡΠ° Ρ ΡΠ°ΠΊΠΈΠΌ ΠΊΠΎΠ΄ΠΎΠΌ:
ΠΡ Ρ ΠΎΡΠΈΠΌ ΡΠ΄Π΅Π»Π°ΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΊΡΠ°ΡΠ½ΡΠΌ ΠΈ Π·Π°Π΄Π°ΡΡ ΠΆΠ΅Π»ΡΡΡ ΡΠ°ΠΌΠΊΡ Π΄Π»Ρ Π±Π»ΠΎΠΊΠ° div. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π΄Π΅Π»Π°Π΅ΠΌ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ°Π³ΠΈ:
Π§Π΅ΡΠ΅Π· ΡΡΠΈ ΡΡΡΠΎΠΊΠΈ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΡ, ΡΡΠΎ Π±Ρ Π²ΡΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΡΡΠΎΠ²Π½Ρ ΠΊΠΎΡΠΎΡΡΠ΅ Π΅ΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅, ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ ΠΊΡΠ°ΡΠ½ΡΠΌ ΡΠ²Π΅ΡΠΎΠΌ. Π¦Π²Π΅Ρ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°ΡΡ ΡΡΠ΅ΠΌΡ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ:
Π ΡΠ΅ΡΡΠ½Π°Π΄ΡΠ°ΡΠ΅ΡΠΈΡΠ½ΠΎΠΌ ΠΊΠΎΠ΄Π΅, Π°Π½Π³Π»ΠΈΠΉΡΠΊΠΎΠ΅ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠ° ΠΈΠ»ΠΈ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ RGB.
ΠΠ»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ Π·Π°Π΄Π°ΡΡ ΡΠ°ΠΌΠΊΡ Π΄Π»Ρ Π±Π»ΠΎΠΊΠ° div, ΠΏΠΈΡΠ΅ΠΌ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΡΡΠΎΠΊΠΈ:
Π CSS, ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ ΠΏΠΈΡΡΡΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠΈΠΌΠ²ΠΎΠ»Π°ΠΌΠΈ ΡΠ»Π΅Ρ ΠΈ Π·Π²Π΅Π·Π΄ΠΎΡΠΊΠ°. ΠΡΠΈΠΌΠ΅Ρ: /* ΡΡΠΎ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ */
Π ΠΈΡΠΎΠ³Π΅, ΡΠ°ΠΉΠ» ΡΠΎ ΡΡΠΈΠ»ΡΠΌΠΈ ΡΠΎΡΡΠΎΠΈΡ ΠΈΠ· ΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΡΡΡΠΎΠΊ:
ΠΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΡ ΡΠ°Π½ΡΠ΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ.
ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π² html ΡΡΡΠ°Π½ΠΈΡΠ΅ ( index.html ), ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ΅Π³Π°ΠΌΠΈ ΠΈ ΠΏΠΈΡΠ΅ΠΌ ΡΠ»Π΅Π΄ΡΡΡΡΡ ΡΡΡΠΎΠΊΡ:
Π Π°ΡΡΠΈΠ±ΡΡΠ΅ href, Π² ΠΊΠ°Π²ΡΡΠΊΠ°Ρ , ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ ΠΏΡΡΡ ΠΊ ΡΠ°ΠΉΠ»Ρ ΡΠΎ ΡΡΠΈΠ»ΡΠΌΠΈ. Π Π½Π°ΡΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠ°ΠΉΠ» Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² ΡΠΎΠΉ ΠΆΠ΅ ΠΏΠ°ΠΏΠΊΠ΅ Π³Π΄Π΅ ΠΈ html ΡΡΡΠ°Π½ΠΈΡΠ°, ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΠΈΡΠ΅ΠΌ ΡΠΎΠ»ΡΠΊΠΎ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΡΠ°ΠΉΠ»Π°, style.css. ΠΡΠ»ΠΈ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ°ΠΉΠ» style.css, Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π²Π½ΡΡΡΠΈ ΠΏΠ°ΠΏΠΊΠ΅ Ρ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ css, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² ΠΏΠ°ΠΏΠΊΡ Ρ Π½Π°ΡΠΈΠΌ ΡΠ°ΠΉΡΠΎΠΌ, ΡΠΎ ΠΏΡΡΡ ΠΊ ΡΠ°ΠΉΠ»Ρ Π±ΡΠ΄Π΅Ρ, Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ°ΠΊ: href=»css/style.css».
CΠΎΡ ΡΠ°Π½ΡΠ΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ, ΠΎΡΠΊΡΡΠ²Π°Π΅ΠΌ html ΡΠ°ΠΉΠ» Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ ΠΈ ΡΠΌΠΎΡΡΠΈΠΌ ΡΡΠΎ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΎΡΡ:
2 Π‘ΠΏΠΎΡΠΎΠ±: ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ
ΠΠΎ Π²ΡΠΎΡΠΎΠΌ ΡΠΏΠΎΡΠΎΠ±Π΅ ΡΡΠΈΠ»ΠΈ ΠΏΠΈΡΡΡΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ΅Π³Π°ΠΌΠΈ Π² ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠ΅Π³Π° head. ΠΡΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
Π§Π΅ΡΠ΅Π· ΡΡΠΈΠ»ΠΈ ΠΌΡ Π·Π°Π΄Π°Π»ΠΈ ΡΠΈΠΎΠ»Π΅ΡΠΎΠ²ΡΠΉ ΡΠ²Π΅Ρ Π΄Π»Ρ ΡΠ΅ΠΊΡΡΠ° ΠΈ ΡΠ±ΡΠ°Π»ΠΈ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ Ρ ΡΡΡΠ»ΠΊΠΈ. ΠΠΎΠ»ΡΡΠΈΠ»Π°ΡΡ ΡΠ°ΠΊΠ°Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°:
Π ΡΡΠΎΠΌ ΡΠΏΠΎΡΠΎΠ±Π΅ ΡΡΠΈΠ»ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΊ ΡΠΎΠΉ html ΡΡΡΠ°Π½ΠΈΡΠ΅, Π³Π΄Π΅ ΠΎΠ½ΠΈ Π·Π°Π΄Π°Π½Ρ. ΠΠ½ΠΈ Π½Π΅ Π²Π»ΠΈΡΡΡ Π½Π° ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ.
3 Π‘ΠΏΠΎΡΠΎΠ±: Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ ΡΡΠΈΠ»ΠΈ
Π ΡΡΠ΅ΡΡΠ΅ΠΌ ΡΠΏΠΎΡΠΎΠ±Π΅ ΡΡΠΈΠ»ΠΈ Π·Π°Π΄Π°ΡΡΡΡ Π² ΠΊΠ°Π²ΡΡΠΊΠ°Ρ , Π² ΡΠ°ΠΌΠΎΠΌ ΡΠ΅Π³Π΅, ΡΠ΅ΡΠ΅Π· Π°ΡΡΠΈΠ±ΡΡ style. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΌΡ Ρ ΠΎΡΠΈΠΌ Π·Π°Π΄Π°ΡΡ ΠΊΡΠ°ΡΠ½ΡΠΉ ΡΠ²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° Π² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌ ΠΏΠ°ΡΠ°Π³ΡΠ°ΡΠ΅. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΏΠΈΡΠ΅ΠΌ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΡΡΠΎΠΊΠΈ:
Π‘ΠΎΡ ΡΠ°Π½ΡΠ΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΈ ΡΠΌΠΎΡΡΠΈΠΌ Π½Π° ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ:
ΠΠ΅ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΡΡΠΎΡ ΡΠΏΠΎΡΠΎΠ± Π΄Π»Ρ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ ΠΊ html ΡΡΡΠ°Π½ΠΈΡΠ΅, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π΅ΡΠ»ΠΈ Ρ Π²Π°Ρ Π±ΡΠ΄ΡΡ ΠΌΠ½ΠΎΠ³ΠΎ ΡΡΡΠ°Π½ΠΈΡ ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ Π±ΡΠ΄ΡΡ ΠΏΠ°ΡΠ°Π³ΡΠ°ΡΡ, ΡΡΡΠ»ΠΊΠΈ ΠΈΡ. Π΄. ΡΠΎ Π²Π°ΠΌ Π±ΡΠ΄Π΅Ρ ΠΎΡΠ΅Π½Ρ ΡΡΡΠ΄Π½ΠΎ ΡΠΏΡΠ°Π²Π»ΡΡΡ ΡΡΠΈΠ»ΡΠΌΠΈ. Π ΡΠ»ΡΡΠ°Π΅ Π΅ΡΠ»ΠΈ Π²Ρ Π·Π°Ρ ΠΎΡΠΈΡΠ΅ ΠΏΠΎΠΌΠ΅Π½ΡΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ°ΠΉΡΠ°, ΡΠΎ Π²Π°ΠΌ ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΠΏΠΎΡΡΠ°ΡΠΈΡΡ ΠΌΠ½ΠΎΠ³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ. ΠΠ°ΠΌ ΠΏΡΠΈΠ΄Π΅ΡΡΡ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅, ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΡΠΈΠ»Ρ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠΎΡΡΠΎΠΌΡ ΠΏΠΎΡΡΠ°ΡΠ°ΠΉΡΠ΅ΡΡ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΡΡΠΎΠ³ΠΎ ΠΌΠ΅ΡΠΎΠ΄Π° ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π΅Π³ΠΎ ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠ°ΠΌΡΡ ΠΊΡΠ°ΠΉΠ½ΠΈΡ ΡΠ»ΡΡΠ°ΡΡ .
ΠΠΎΡ ΠΈ Π²ΡΠ΅ ΠΎ ΡΠ΅ΠΌ Ρ Ρ ΠΎΡΠ΅Π» Π²Π°ΠΌ ΡΠ°ΡΡΠΊΠ°Π·Π°ΡΡ Π² ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅. Π’Π΅ΠΏΠ΅ΡΡ Π²Ρ Π·Π½Π°Π΅ΡΠ΅, ΠΊΠ°ΠΊΠΈΠΌΠΈ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ ΡΡΠΈΠ»ΠΈ ΠΊ html ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΈ ΠΊΠ°ΠΊΠΎΠΉ ΠΈΠ· ΡΡΠΈΡ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² Π»ΡΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ.
ΠΠΎΡ ΠΎΠΆΠΈΠ΅ ΡΡΠ°ΡΡΠΈ:
ΠΠΈΠ΄Π΅ΠΎ:
ΠΠΎΠ½ΡΠ°Π²ΠΈΠ»Π°ΡΡ ΡΡΠ°ΡΡΡ?
Π’ΠΎΠ³Π΄Π° ΠΏΠΎΠ΄Π΅Π»ΠΈΡΠ΅ΡΡ Π΅Ρ Ρ Π΄ΡΡΠ·ΡΡΠΌΠΈ ΠΈ ΠΏΠΎΠ΄ΠΏΠΈΡΠΈΡΠ΅ΡΡ Π½Π° Π½ΠΎΠ²ΡΠ΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠ΅ ΡΡΠ°ΡΡΠΈ.
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ Ρ Π΄ΡΡΠ·ΡΡΠΌΠΈ:
ΠΠΎΠ΄ΠΏΠΈΡΠ°ΡΡΡΡ Π½Π° Π½ΠΎΠ²ΡΠ΅ ΡΡΠ°ΡΡΠΈ:
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΡΠ΅ ΠΏΠΎΠΆΠ°Π»ΡΠΉΡΡΠ° ΠΌΠΎΠΉ ΠΏΡΠΎΠ΅ΠΊΡ!
ΠΡΠ»ΠΈ Ρ ΠΠ°Ρ Π΅ΡΡΡ ΠΊΠ°ΠΊΠΈΠ΅-ΡΠΎ Π²ΠΎΠΏΡΠΎΡΡ ΠΈΠ»ΠΈ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΡ, ΡΠΎ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΈΡΠ°ΡΡ ΠΈΡ Π² ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΡ ΠΈΠ»ΠΈ ΠΌΠ½Π΅ Π½Π° ΠΏΠΎΡΡΡ sergiu1607@gmail.com. Π Π΅ΡΠ»ΠΈ ΠΡ Π·Π°ΠΌΠ΅ΡΠΈΠ»ΠΈ ΠΊΠ°ΠΊΡΡ-ΡΠΎ ΠΎΡΠΈΠ±ΠΊΡ Π² ΡΡΠ°ΡΡΠ΅, ΡΠΎ ΠΏΡΠΎΡΡ ΠΠ°Ρ, ΡΠΎΠΎΠ±ΡΠΈΡΠ΅ ΠΌΠ½Π΅ ΠΎΠ± ΡΡΠΎΠΌ, ΠΈ Π² Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Ρ Π²ΡΡ ΠΈΡΠΏΡΠ°Π²Π»Ρ.
ΠΠ²ΡΠΎΡ ΡΡΠ°ΡΡΠΈ: ΠΡΠ½ΡΡΠ½ Π‘Π΅ΡΠ³Π΅ΠΉ
ΠΠ±ΡΡΠ΅Π½ΠΈΠ΅ CSS
ΠΠ°ΡΠΈΠ½Π°Π΅ΠΌ ΡΠ°Π±ΠΎΡΡ Ρ HTML + CSS
ΠΠ³Π»Π°Π²Π»Π΅Π½ΠΈΠ΅
ΠΡΠΎ ΠΊΡΠ°ΡΠΊΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΎ Π΄Π»Ρ Π»ΡΠ΄Π΅ΠΉ, Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ ΡΠ²ΠΎΠ΅ ΠΈΠ·ΡΡΠ΅Π½ΠΈΠ΅ CSS Π² ΠΏΠ΅ΡΠ²ΡΠΉ ΡΠ°Π·.
ΠΠ½ΠΎ Π½Π΅ Π΄Π°Π΅Ρ Π³Π»ΡΠ±ΠΎΠΊΠΈΡ Π·Π½Π°Π½ΠΈΠΉ ΠΎ CSS. Π ΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΡΠΎΡΡΠΎ ΠΎΠ±ΡΡΡΠ½ΡΠ΅Ρ ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ HTML ΡΠ°ΠΉΠ», CSS ΡΠ°ΠΉΠ» ΠΈ ΠΊΠ°ΠΊ Π·Π°ΡΡΠ°Π²ΠΈΡΡ ΠΈΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π²ΠΌΠ΅ΡΡΠ΅. ΠΠΎΡΠ»Π΅ ΠΏΡΠΎΡΡΠ΅Π½ΠΈΡ Π΄Π°Π½Π½ΠΎΠΉ ΡΡΠ°ΡΡΠΈ, ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΡ Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅Π΅ ΠΈΠ·ΡΡΠ΅Π½ΠΈΠ΅ Π΄ΡΡΠ³ΠΈΡ ΠΎΠ±ΡΡΠ°ΡΡΠΈΡ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ² Π΄Π»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΎ Π±ΠΎΠ»Π΅Π΅ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΡΡ HTML ΠΈ CSS. ΠΠ»ΠΈ ΠΆΠ΅ ΠΏΠ΅ΡΠ΅ΠΉΡΠΈ ΠΊ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π° Π² ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ HTML ΠΈΠ»ΠΈ CSS ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ°Ρ , ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΌΠΎΠ³ΡΡ ΠΠ°ΠΌ ΠΏΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΡΠ°ΠΉΡΠΎΠ².
Π ΠΊΠΎΠ½ΡΠ΅ Π΄Π°Π½Π½ΠΎΠΉ ΡΡΠ°ΡΡΠΈ ΠΡ ΡΠΎΠ·Π΄Π°Π΄ΠΈΡΠ΅ HTML ΡΠ°ΠΉΠ» ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΠΊΠ°ΠΊ ΡΡΠΎΡ:
ΠΠΎΠ»ΡΡΠ΅Π½Π½Π°Ρ HTML ΡΡΡΠ°Π½ΠΈΡΠ° Ρ ΡΠ²Π΅ΡΠ°ΠΌΠΈ ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΎΠΉ ΡΠ΄Π΅Π»Π°Π½Π½ΠΎΠΉ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ CSS.
ΠΠ°ΠΌΠ΅ΡΡΡΠ΅, ΡΡΠΎ Ρ Π½Π΅ ΠΏΡΠ΅ΡΠ΅Π½Π΄ΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ ΡΡΠΎ ΠΎΡΠ΅Π½Ρ ΠΊΡΠ°ΡΠΈΠ²ΠΎ ☺
Π Π°Π·Π΄Π΅Π»Ρ ΠΏΠΎΠΌΠ΅ΡΠ΅Π½Π½ΡΠ΅ Π΄Π°Π½ΡΠΌ Π·Π½Π°ΠΊΠΎΠΌ Π½Π΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½Ρ. ΠΠ½ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠ°Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΎΠ±ΡΡΡΠ½Π΅Π½ΠΈΡ HTML ΠΈ CSS ΠΊΠΎΠ΄Π° Π² ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠ°Ρ . ΠΠ½Π°ΠΊ βΠ²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅!β Π² Π½Π°ΡΠ°Π»Π΅ Π°Π±Π·Π°ΡΠ° ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ Π±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΡΠΈΡΠ΅Π½Π½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΡΠ΅ΠΌ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠΉ ΡΠ΅ΠΊΡΡ.
Π¨ΠΠ 1: Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΠ΅ HTML ΠΊΠΎΠ΄Π°
ΠΠ»Ρ ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠΈ Ρ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠΎΡΡΠ΅ΠΉΡΠΈΠ΅ ΡΡΠΈΠ»ΠΈΡΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΠΠ»ΠΎΠΊΠ½ΠΎΡ ΠΎΡ Windows, TextEdit Π½Π° Mac ΠΈΠ»ΠΈ KEdit ΠΏΠΎΠ΄ KDE Π²ΠΏΠΎΠ»Π½Π΅ ΠΏΠΎΠ΄ΠΎΠΉΠ΄ΡΡ ΠΏΠΎΠ΄ Π·Π°Π΄Π°ΡΡ. ΠΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ ΠΡ ΠΏΠΎΠΉΠΌΠ΅ΡΠ΅ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΏΡΠΈΠ½ΡΠΈΠΏΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠΈΡΡΡΡ Π½Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ Π½Π° ΡΠ°ΠΊΠΈΠ΅ ΠΊΠΎΠΌΠΌΠ΅ΡΡΠ΅ΡΠΊΠΈΠ΅ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ ΠΊΠ°ΠΊ Style Master ΠΈΠ»ΠΈ DreamWeaver. ΠΠΎ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ CSS ΡΠ°ΠΉΠ»Π° Π½Π΅ ΡΡΠΎΠΈΡ ΠΎΡΠ²Π»Π΅ΠΊΠ°ΡΡΡΡ Π½Π° ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΠ°ΡΡΠΈΡΠ΅Π½Π½ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ.
ΠΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΉ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ Π½Π°ΠΏΠΎΠ΄ΠΎΠ±ΠΈΠ΅ Microsoft Word ΠΈΠ»ΠΈ OpenOffice. ΠΡΠΈ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ ΠΎΠ±ΡΡΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ°ΠΉΠ»Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΏΡΠΎΡΠΈΡΠ°Π½Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ. ΠΠ»Ρ HTML ΠΈ CSS ΡΠ°ΠΉΠ»ΠΎΠ² Π½Π°ΠΌ Π½ΡΠΆΠ½Ρ ΠΎΠ±ΡΡΠ½ΡΠ΅ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠ΅ ΡΠ°ΠΉΠ»Ρ Π±Π΅Π· ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ ΡΠΎΡΠΌΠ°ΡΠ°.
ΠΠ΅ΡΠ²ΡΠΉ ΡΠ°Π³ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΠΎΡΠΊΡΡΡΠΈΠΈ ΠΏΡΡΡΠΎΠ³ΠΎ ΠΎΠΊΠ½Π° ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠ³ΠΎ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ° (Notepad, TextEdit, KEdit ΠΈΠ»ΠΈ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΠ°ΡΠ΅Π³ΠΎ Π»ΡΠ±ΠΈΠΌΠΎΠ³ΠΎ) ΠΈ Π½Π°Π±ΠΎΡΠ΅ Π² Π½Π΅ΠΌ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π³ΠΎ ΡΠ΅ΠΊΡΡΠ°:
(ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ TextEdit Π½Π° ΠΠ°ΠΊΠΈΠ½ΡΠΎΡΠ΅, Π½Π΅ Π·Π°Π±ΡΠ΄ΡΡΠ΅ ΡΠΊΠ°Π·Π°ΡΡ TextEdit’Ρ, ΡΡΠΎ ΡΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΉ ΡΠ°ΠΉΠ», ΠΎΡΠΊΡΡΠ² ΠΌΠ΅Π½Ρ Format ΠΈ Π²ΡΠ±ΡΠ°Π² ΠΎΠΏΡΠΈΡ βMake plain textβ.)
Π‘Π»ΠΎΠ²Π° ΠΌΠ΅ΠΆΠ΄Ρ Π½Π°Π·ΡΠ²Π°ΡΡΡΡ ΡΡΠ³Π°ΠΌΠΈ ΠΈ ΠΊΠ°ΠΊ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΈΠ΄Π΅ΡΡ, Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΠΈ ΡΡΠ³Π°ΠΌΠΈ. ΠΠ΅ΠΆΠ΄Ρ and Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½Π°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π½Π΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π² ΡΠ°ΠΌΠΎΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ°ΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. ΠΠΎΠ·ΠΆΠ΅ ΠΌΡ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΡΡΠ΄Π° ΠΈ ΡΠ²ΡΠ·Ρ Ρ CSS ΡΠ°ΠΉΠ»ΠΎΠΌ.
ΠΠΎΠ΄ HTML Π² ΡΠ΅Π΄Π°ΠΊΡΠΎΡ KEdit.
ΠΡΠΌΠ΅ΡΡΡΠ΅, ΡΡΠΎ Ρ Π½Π΅ Π·Π°ΠΊΡΡΠ» βliβ ΠΈ βpβ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. Π HTML (Π½ΠΎ Π½Π΅ Π² XHTML), ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΡΡΠΊΠ°ΡΡ Π·Π°ΠΊΡΡΠ²Π°ΡΡΠΈΠ΅ ΡΡΠ³ΠΈ ΠΈ
, ΡΡΠΎ Ρ ΠΈ ΡΠ΄Π΅Π»Π°Π» Π² Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, Π΄Π»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ Π±ΡΠ»ΠΎ ΠΏΡΠΎΡΠ΅ ΡΠ΅ΠΊΡΡ. ΠΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΈΡ , Π΅ΡΠ»ΠΈ ΡΡΠΈΡΠ°Π΅ΡΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠΌ.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, ΡΡΠΎ Π΄Π°Π½Π½Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠ° Π±ΡΠ΄Π΅Ρ ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· ΡΡΡΠ°Π½ΠΈΡ ΠΠ΅Π± ΡΠ°ΠΉΡΠ°, ΡΠΎΡΡΠΎΡΡΠ΅Π³ΠΎ ΠΈΠ· Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΠΏΠΎΡ ΠΎΠΆΠΈΡ ΡΡΡΠ°Π½ΠΈΡ. ΠΠ°ΠΊ ΠΌΡ ΠΈ Π΄ΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠ»ΠΈΡΡ, ΡΡΠ° ΡΡΡΠ°Π½ΠΈΡΠ° Π±ΡΠ΄Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ ΡΡΡΠ»ΠΊΠΈ Π½Π° Π΄ΡΡΠ³ΠΈΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ Π½Π°ΡΠ΅Π³ΠΎ Π³ΠΈΠΏΠΎΡΠ΅ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ°, ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΈ ΠΏΠΎΠ΄ΠΏΠΈΡΡ.
ΠΡΠ±Π΅ΡΠΈΡΠ΅ βΠ‘ΠΎΡ ΡΠ°Π½ΠΈΡΡ ΠΊΠ°ΠΊβ¦β ΠΈΠ»ΠΈ βSave Asβ¦β ΠΈΠ· Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ Π€Π°ΠΉΠ» ΠΈΠ»ΠΈ File, ΡΠΊΠ°ΠΆΠΈΡΠ΅ ΠΊΠ°ΡΠ°Π»ΠΎΠ³ Π΄Π»Ρ ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΡ ΡΠ°ΠΉΠ»Π° (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ Π Π°Π±ΠΎΡΠΈΠΉ Π‘ΡΠΎΠ») ΠΈ ΡΠΎΡ ΡΠ°Π½ΠΈΡΠ΅ Π΄Π°Π½Π½ΡΠΉ ΡΠ°ΠΉΠ» ΠΊΠ°ΠΊ βmypage.htmlβ. ΠΠ΅ Π·Π°ΠΊΡΡΠ²Π°ΠΉΡΠ΅ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ, ΠΎΠ½ Π½Π°ΠΌ Π΅ΡΠ΅ ΠΏΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ.
ΠΠ°Π»Π΅Π΅, ΠΎΡΠΊΡΠΎΠΉΡΠ΅ ΡΠ°ΠΉΠ» Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ: Π½Π°ΠΉΠ΄ΠΈΡΠ΅ ΡΠ°ΠΉΠ» Π²Π°ΡΠΈΠΌ ΡΠ°ΠΉΠ»ΠΎΠ²ΡΠΌ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅ΡΠΎΠΌ (ΠΡΠΎΠ²ΠΎΠ΄Π½ΠΈΠΊ, Windows Explorer, Finder or Konqueror) ΠΈ ΡΠ΅Π»ΠΊΠ½ΠΈΡΠ΅ (Π΅Π΄ΠΈΠ½ΠΎΠΆΠ΄Ρ ΠΈΠ»ΠΈ Π΄Π²Π°ΠΆΠ΄Ρ) Π½Π° Π½Π΅ΠΌ. ΠΡΠ»ΠΈ Π²Ρ Π΄Π΅Π»Π°Π»ΠΈ Π²ΡΠ΅ ΠΊΠ°ΠΊ ΠΎΠΏΠΈΡΠ°Π½ΠΎ ΡΠΎ ΠΈΠΌΡ ΡΠ°ΠΉΠ»Π° Π±ΡΠ΄Π΅Ρ βmypage.htmlβ. Π£ Π²Π°Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΡΠΊΡΡΡΡΡΡ ΡΠ°ΠΉΠ» Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅, ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΠΎΠΌ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. (ΠΡΠ»ΠΈ Π½Π΅Ρ, ΡΠΎ ΠΎΡΠΊΡΠΎΠΉΡΠ΅ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΈ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΈΡΠ΅ ΡΠ°ΠΉΠ» Π² Π΅Π³ΠΎ ΠΎΠΊΠ½ΠΎ.)
ΠΠ°ΠΊ ΠΡ Π²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΡΠ°Π½ΠΈΡΠ° Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠΊΡΡΠ½ΠΎβ¦
Π¨ΠΠ 2: ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΠΌ ΡΠ²Π΅ΡΠ°
ΠΡ Π½Π°ΡΠ½Π΅ΠΌ ΡΠΎ ΡΡΠΈΠ»Π΅ΠΉ, Π²ΡΡΡΠΎΠ΅Π½Π½ΡΡ Π² HTML ΡΠ°ΠΉΠ». ΠΠΎΠ·ΠΆΠ΅, ΠΌΡ ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ CSS ΡΡΠΈΠ»ΠΈ ΠΈ HTML ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ Π² ΡΠ°Π·Π½ΡΠ΅ ΡΠ°ΠΉΠ»Ρ. Π Π°Π·Π΄Π΅Π»ΡΠ½ΠΎΠ΅ Ρ ΡΠ°Π½Π΅Π½ΠΈΠ΅ Ρ ΠΎΡΠΎΡΠΎ ΡΠ΅ΠΌ, ΡΡΠΎ Π»Π΅Π³ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ΅ ΠΆΠ΅ ΡΠ°ΠΌΡΠ΅ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²Π° HTML ΡΠ°ΠΉΠ»ΠΎΠ²: ΠΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ Π½Π°ΠΏΠΈΡΠ°ΡΡ CSS ΡΡΠΈΠ»ΠΈ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΡΠ°Π·. ΠΠΎ Π½Π° ΡΡΠΎΠΌ ΡΠ°Π³Π΅ ΠΌΡ ΠΎΡΡΠ°Π²ΠΈΠΌ Π²ΡΠ΅ Π² ΠΎΠ΄Π½ΠΎΠΌ ΡΠ°ΠΉΠ»Π΅.
ΠΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ [ΠΈ Ρ.Π΄.]
ΠΠ΅ΡΠ²Π°Ρ ΡΡΡΠΎΠΊΠ° Π³ΠΎΠ²ΠΎΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ ΡΡΠΎ ΡΠ°Π±Π»ΠΈΡΠ° ΡΡΠΈΠ»Π΅ΠΉ ΠΈ ΡΡΠΎ ΠΎΠ½Π° Π½Π°ΠΏΠΈΡΠ°Π½Π° Π½Π° CSS (βtext/cssβ). ΠΡΠΎΡΠ°Ρ ΡΡΡΠΎΠΊΠ° Π³ΠΎΠ²ΠΎΡΠΈΡ, ΡΡΠΎ ΠΌΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌ ΡΡΠΈΠ»Ρ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ βbodyβ. Π’ΡΠ΅ΡΡΡ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠ²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° Π² ΠΏΡΡΠΏΡΡΠ½ΡΠΉ, Π° ΡΠ»Π΅Π΄ΡΡΡΠ°Ρ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠ²Π΅Ρ ΡΠΎΠ½Π° Π² ΠΆΠ΅Π»ΡΠΎ-Π·Π΅Π»Π΅Π½ΡΠΉ ΠΎΡΡΠ΅Π½ΠΎΠΊ.
ΠΠ°Ρ ΠΏΡΠΈΠΌΠ΅Ρ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΡΠΎ ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΡΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΠΎΠ²Π°Π½Ρ. ΠΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΈ Π΄Π²Π° ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΡΠ°ΠΊ ΠΆΠ΅ ΠΌΡ ΠΌΠΎΠ³Π»ΠΈ Π·Π°Π΄Π°ΡΡ ΠΈΡ ΡΠ°Π·Π΄Π΅Π»ΡΠ½ΠΎ:
Π€ΠΎΠ½ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° body ΡΠ°ΠΊ ΠΆΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠ½ΠΎΠΌ ΡΠ΅Π»ΠΎΠ³ΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. ΠΡ ΡΠ²Π½ΠΎ Π½Π΅ Π½Π°Π·Π½Π°ΡΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ (p, li, addressβ¦) ΡΠΎΠ½Π°, ΡΠ°ΠΊ ΡΡΠΎ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Ρ Π½ΠΈΡ Π΅Π³ΠΎ Π½Π΅Ρ (ΠΈΠ»ΠΈ ΠΎΠ½ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠΉ). Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ‘color’ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠ²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° body, Π½ΠΎ Π²ΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²Π½ΡΡΡΠΈ body Π½Π°ΡΠ»Π΅Π΄ΡΡΡ ΡΡΠΎΡ ΡΠ²Π΅Ρ, ΠΏΠΎΠΊΠ° Π΄Π»Ρ Π½ΠΈΡ Π½Π΅ Π·Π°Π΄Π°Π½ Π΄ΡΡΠ³ΠΎΠΉ Π² Π²ΠΈΠ΄Π΅ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΠΏΡΠ°Π²ΠΈΠ»Π°. (ΠΡ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ²Π΅ΡΠ° ΠΏΠΎΠ·ΠΆΠ΅.)
Π’Π΅ΠΏΠ΅ΡΡ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΡΡΠ°Π½ΠΈΡΡ ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΌΡ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ ΡΠ²Π΅Ρ.
Π CSS ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Π²Π°ΡΡ ΡΠ²Π΅ΡΠ° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ. ΠΠ°Ρ ΠΏΡΠΈΠΌΠ΅Ρ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π΄Π²Π° ΠΈΠ· Π½ΠΈΡ : ΠΏΠΎ ΠΈΠΌΠ΅Π½ΠΈ (βpurpleβ) ΠΈ ΠΏΠΎ ΡΠ΅ΡΡΠ½Π°Π΄ΡΠ°ΡΠΈΡΠΈΡΠ½ΠΎΠΌΡ ΠΊΠΎΠ΄Ρ (β#d8da3dβ). Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΏΠΎΡΡΠ΄ΠΊΠ° 140 ΠΈΠΌΠ΅Π½ ΡΠ²Π΅ΡΠΎΠ² ΠΈ 16 ΡΠ΅ΡΡΠ½Π°Π΄ΡΠ°ΡΠΈΡΠΈΡΠ½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ. ΠΠΎΠ±Π°Π²Π»ΡΡ ΠΏΡΠΈΠΊΠΎΡΠ½ΠΎΠ²Π΅Π½ΠΈΠ΅ ΡΡΠΈΠ»Ρ ΠΎΠ±ΡΡΡΠ½ΡΠ΅Ρ Π΄Π΅ΡΠ°Π»ΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΡΠΈΡ ΠΊΠΎΠ΄ΠΎΠ².
Π¨ΠΠ 3: ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΠΌ ΡΡΠΈΡΡΡ
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π² Web Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅Π»ΡΠ·Ρ Π±ΡΡΡ ΡΠ΅Π»ΠΈΠΊΠΎΠΌ ΡΠ²Π΅ΡΠ΅Π½Π½ΡΠΌ Π² ΡΠΎΠΌ, ΠΊΠ°ΠΊΠΈΠ΅ ΡΡΠΈΡΡΡ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Ρ Π½Π° ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ°Ρ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Π΅ΠΉ, ΠΌΡ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠ΅ ΡΠΏΠΎΡΠΎΠ±Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ: Π΅ΡΠ»ΠΈ Georgia Π½Π΅ Π½Π°ΠΉΠ΄Π΅Π½Π°, ΡΠΎ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Times New Roman ΠΈΠ»ΠΈ Times, Π° Π΅ΡΠ»ΠΈ ΠΈ ΠΎΠ½ Π½Π΅ Π½Π°ΠΉΠ΄Π΅Π½, ΡΠΎ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΌΠΎΠΆΠ΅Ρ Π²Π·ΡΡΡ Π»ΡΠ±ΠΎΠΉ ΡΡΠΈΡΡ Ρ Π·Π°ΡΠ΅ΡΠΊΠ°ΠΌΠΈ. ΠΡΠ»ΠΈ ΠΎΡΡΡΡΡΡΠ²ΡΠ΅Ρ Helvetica, ΡΠΎ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Geneva, Arial ΠΈΠ»ΠΈ SunSans-Regular ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ΠΈ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΡ ΠΎΠΆΠΈ ΠΏΠΎ Π½Π°ΡΠ΅ΡΡΠ°Π½ΠΈΡ, Π½Ρ Π° Π΅ΡΠ»ΠΈ Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π΅Ρ ΡΠ°ΠΊΠΈΡ ΡΡΠΈΡΡΠΎΠ², ΡΠΎ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ±ΡΠ°ΡΡ Π»ΡΠ±ΠΎΠΉ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΈΡΡ Π±Π΅Π· Π·Π°ΡΠ΅ΡΠ΅ΠΊ.
Π ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠΌ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΡΡΠΎΠΊΠΈ (ΡΡΡΠΎΠΊΠΈ 7-8 ΠΈ 11-13) :
ΠΡΠ»ΠΈ Π²Ρ ΡΠΎΡ ΡΠ°Π½ΠΈΡΠ΅ ΡΠ°ΠΉΠ» ΡΠ½ΠΎΠ²Π° ΠΈ Π½Π°ΠΆΠΌΠ΅ΡΠ΅ βΠΎΠ±Π½ΠΎΠ²ΠΈΡΡβ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅, ΡΠΎ Ρ Π²Π°Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΡΠ°Π·Π½ΡΠ΅ ΡΡΠΈΡΡΡ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°Ρ ΠΈ Π² ΡΠ΅ΠΊΡΡΠ΅.
Π‘Π΅ΠΉΡΠ°Ρ ΡΡΠΈΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΠΈ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ° ΡΠ°Π·Π»ΠΈΡΠ°Π΅ΡΡΡ.
Π¨ΠΠ 4: Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ
Π‘ΠΏΠΈΡΠΎΠΊ Π½Π°Π²Π΅ΡΡ Ρ HTML ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΈΠ· ΡΠ΅Π±Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΏΠΎ ΡΠ°ΠΉΡΡ. ΠΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΠ°ΠΉΡΠΎΠ² ΠΈΠΌΠ΅ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π²Π²Π΅ΡΡ Ρ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈΠ»ΠΈ ΠΏΠΎ ΡΡΠΎΡΠΎΠ½Π°ΠΌ ΠΎΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ. ΠΠ°ΡΠ° ΡΡΡΠ°Π½ΠΈΡΠ° ΡΠΎΠΆΠ΅ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ. ΠΡ ΠΏΠΎΠΌΠ΅ΡΡΠΈΠΌ ΠΌΠ΅Π½Ρ ΡΠ»Π΅Π²Π°, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΡΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½Π΅Π΅, ΡΠ΅ΠΌ Π½Π°Π²Π΅ΡΡ Ρ.
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΡ ΡΠΆΠ΅ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΡΠΎ ΡΠΏΠΈΡΠΎΠΊ
- Π²Π²Π΅ΡΡ
Ρ. Π‘ΡΡΠ»ΠΊΠΈ Π² Π½Π΅ΠΌ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°ΡΡ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π½Π°Ρ βΡΠ°ΠΉΡβ ΠΏΠΎΠΊΠ° ΡΡΠΎ ΡΠΎΡΡΠΎΠΈΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΈΠ· ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ, Π½ΠΎ ΡΡΠΎ Π½Π΅Π²Π°ΠΆΠ½ΠΎ Π² Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ. ΠΠΎΠ½Π΅ΡΠ½ΠΎ ΠΆΠ΅, Π½Π° Π½Π°ΡΡΠΎΡΡΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ Π½Π΅ΡΠ°Π±ΠΎΡΠ°ΡΡΠΈΡ
ΡΡΡΠ»ΠΎΠΊ.
Π ΠΎΠΊΠ½Π΅ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ° Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΡΡΠΎΠΊΠΈ ΠΊ HTML ΡΠ°ΠΉΠ»Ρ (ΡΡΡΠΎΠΊΠΈ 7 ΠΈ 12-16) :
ΠΡΠ»ΠΈ Π²Ρ ΡΠ½ΠΎΠ²Π° ΡΠΎΡ ΡΠ°Π½ΠΈΡΠ΅ ΡΠ°ΠΉΠ» ΠΈ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΠ΅ Π΅Π³ΠΎ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ ΡΠΎ ΡΠΏΠΈΡΠΎΠΊ ΡΡΡΠ»ΠΎΠΊ ΠΏΠΎΠ»ΡΡΠΈΡΡΡ Ρ Π²Π°Ρ ΡΠ»Π΅Π²Π° ΠΎΡ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ°. ΠΡΠΎ ΡΠΆΠ΅ ΡΠΌΠΎΡΡΠΈΡΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½Π΅Π΅, Π½Π΅ ΡΠ°ΠΊ Π»ΠΈ?
Π ΠΎΡΠ»ΠΈΡΠΈΠΈ ΠΎΡ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅Π³ΠΎ ΡΠ°ΠΉΠ»Π°, Π² ΡΡΠΎΠΌ Π³Π»Π°Π²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΠ»ΡΡ Π½Π°ΠΏΡΠ°Π²ΠΎ Π° Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Π½Π°Π»Π΅Π²ΠΎ
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ‘position: absolute’ Π³ΠΎΠ²ΠΎΡΠΈΡ ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ul ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ° ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠ΅Π΄ΡΠ΅ΡΡΠ²ΠΎΠ²Π°Π» ΠΈΠ»ΠΈ Π±ΡΠ΄Π΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ Π·Π° ΡΡΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ, Π° ΡΠ²ΠΎΠΉΡΡΠ²Π° ‘left’ ΠΈ ‘top’ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°ΡΡ ΡΡΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. Π Π½Π°ΡΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΡΠΎ 2em ΡΠ²Π΅ΡΡ Ρ ΠΈ 1em ΠΎΡ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΠΎΠΊΠ½Π°.
‘2em’ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ 2 ΡΠ°Π·Π° ΠΏΠΎ ΡΠ°ΡΡΠΎΡΠ½ΠΈΡ, ΡΠ°Π²Π½ΠΎΠΌΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠ΅ΠΊΡΡΠ΅Π³ΠΎ ΡΡΠΈΡΡΠ°. Π’.Π΅., Π΅ΡΠ»ΠΈ ΠΌΠ΅Π½Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΡΡΠΈΡΡΠΎΠΌ Π² 12 ΠΏΡΠ½ΠΊΡΠΎΠ², ΡΠΎ 2em Π±ΡΠ΄Π΅Ρ ΡΠ°Π²Π½ΡΡΡΡΡ 24 ΠΏΡΠ½ΠΊΡΠ°ΠΌ. `em` ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ»Π΅Π·Π½Π°Ρ Π΅Π΄ΠΈΠ½ΠΈΡΠ° ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π² CSS, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΌΠΎΠΆΠ΅Ρ Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°ΡΡΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΊ ΡΡΠΈΡΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠΎΠΌΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ. ΠΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² ΠΈΠΌΠ΅ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΡΠΈΡΡΠ°: Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ ΡΠ²Π΅Π»ΠΈΡΠΈΡΡ ΠΈΠ»ΠΈ ΡΠΌΠ΅Π½ΡΡΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΡΡΠΎ ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΡΠΈΡΡΠ°, ΡΠ΅Π³ΠΎ Π±Ρ Π½Π΅ ΡΠ»ΡΡΠΈΠ»ΠΎΡΡ, Π΅ΡΠ»ΠΈ Π±Ρ ΠΌΡ ΡΠΊΠ°Π·Π°Π»ΠΈ ΠΎΡΡΡΡΠΏ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ
Π¨ΠΠ 5: ΡΠΊΡΠ°ΡΠ°Π΅ΠΌ ΡΡΡΠ»ΠΊΠΈ
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π²ΡΠ΅ Π΅ΡΠ΅ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΊΠ°ΠΊ ΡΠΏΠΈΡΠΎΠΊ, Π²ΠΌΠ΅ΡΡΠΎ ΠΌΠ΅Π½Ρ. ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΡΠΈΠ»ΠΈΠ·ΡΠ΅ΠΌ Π΅Π³ΠΎ. ΠΡ ΡΠ±Π΅ΡΠ΅ΠΌ ΠΌΠ°ΡΠΊΠ΅ΡΡ ΡΠΏΠΈΡΠΊΠΎΠ² ΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π°Π»Π΅Π²ΠΎ, Π³Π΄Π΅ Π±ΡΠ»ΠΈ ΠΌΠ°ΡΠΊΠ΅ΡΡ. Π’Π°ΠΊ ΠΆΠ΅ ΠΌΡ Π½Π°ΡΠΈΡΡΠ΅ΠΌ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΏΠΈΡΠΊΠ° Π½Π° Π±Π΅Π»ΠΎΠΌ ΡΠΎΠ½Π΅ Π² ΡΠ²ΠΎΠ΅ΠΌ ΡΠ΅ΡΠ½ΠΎΠΌ ΠΊΠ²Π°Π΄ΡΠ°ΡΠ΅ (Π·Π°ΡΠ΅ΠΌ? ΠΏΡΠΎΡΡΠΎ ΡΠ°ΠΊ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΌΠΎΠΆΠ΅ΠΌ).
ΠΠ±ΡΡΠ½ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π²ΡΠ΄Π΅Π»ΡΡΡ Π³ΠΈΠΏΠ΅ΡΡΡΡΠ»ΠΊΠΈ ΡΠ²Π΅ΡΠΎΠΌ ΠΈ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ. ΠΠ±ΡΡΠ½ΠΎ, ΡΠ²Π΅ΡΠ° ΠΏΠΎΡ ΠΎΠΆΠΈ Π½Π° ΡΠ΅, ΡΡΠΎ ΠΌΡ ΡΠΊΠ°Π·Π°Π»ΠΈ: ΡΠΈΠ½ΠΈΠ΅ Π΄Π»Ρ ΡΡΡΠ»ΠΎΠΊ ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π΅ΡΠ΅ Π½Π΅ ΠΎΡΠΊΡΡΠ²Π°Π» (ΠΈΠ»ΠΈ ΠΎΡΠΊΡΡΠ²Π°Π» Π΄ΠΎΠ»Π³ΠΎΠ΅ Π²ΡΠ΅ΠΌΡ Π½Π°Π·Π°Π΄), ΠΏΡΡΠΏΡΡΠ½ΡΠ΅ Π΄ΡΠ» ΡΡΡΠ°Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠ½ ΡΠΆΠ΅ Π²ΠΈΠ΄Π΅Π».
Π¨ΠΠ 6: Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠ΅ Π»ΠΈΠ½ΠΈΠΈ
ΠΠΎΡΠ»Π΅Π΄Π½ΠΈΠΌ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ ΠΊ Π½Π°ΡΠ΅ΠΉ ΡΠ°Π±Π»ΠΈΡΠ΅ ΡΡΠΈΠ»Π΅ΠΉ ΡΡΠ°Π½Π΅Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°Ρ ΠΏΠΎΠ»ΠΎΡΠ° Π΄Π»Ρ ΡΠ°Π·Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ° ΠΈ ΠΏΠΎΠ΄ΠΏΠΈΡΠΈ ΡΠ½ΠΈΠ·Ρ. ΠΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ‘border-top’ Π΄Π»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΡΠ΅ΡΡΠ²ΠΈΡΡΡΡ Π»ΠΈΠ½ΠΈΡ Π½Π°Π΄ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ (ΡΡΡΠΎΠΊΠΈ 34-37) :
Π’Π΅ΠΏΠ΅ΡΡ Π½Π°ΡΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ Π·Π°ΠΊΠΎΠ½ΡΠ΅Π½ΠΎ. ΠΠ°Π²Π°ΠΉΡΠ΅ Π²ΡΠ½Π΅ΡΠ΅ΠΌ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ ΡΠ°ΠΉΠ», ΡΡΠΎΠ±Ρ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ°ΠΉΠ»Ρ ΠΌΠΎΠ³Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡ ΠΆΠ΅ ΡΠ°ΠΌΡΡ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ, ΡΡΠΎ ΠΈ ΠΏΠ΅ΡΠ²ΡΠΉ ΡΠ°ΠΉΠ».
Π¨ΠΠ 7: Π²Π½Π΅ΡΠ½ΠΈΠΉ CSS
ΠΡΠ±Π΅ΡΠΈΡΠ΅ βΠ‘ΠΎΡ ΡΠ°Π½ΠΈΡΡ ΠΊΠ°ΠΊβ¦β ΠΈΠ· ΠΌΠ΅Π½Ρ «Π€Π°ΠΉΠ»», ΡΠ±Π΅Π΄ΠΈΡΠ΅ΡΡ ΡΡΠΎ Π²Ρ Π² ΡΠΎΠΉ ΠΆΠ΅ Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΠΈ/ΠΏΠ°ΠΏΠΊΠ΅ ΡΡΠΎ ΠΈ ΡΠ°ΠΉΠ» mypage.html, ΠΈ ΡΠΎΡ ΡΠ°Π½ΠΈΡΠ΅ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ ΠΏΠΎΠ΄ ΠΈΠΌΠ΅Π½Π΅ΠΌ βmystyle.cssβ.
Π’Π°ΠΊΠ°Ρ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΈΡ ΡΠΊΠ°ΠΆΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ ΡΠ°Π±Π»ΠΈΡΠ° ΡΡΠΈΠ»Π΅ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ Π² ΡΠ°ΠΉΠ»Π΅ ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ βmystyle.cssβ, ΠΈ ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΡ Π½Π΅ ΡΠΏΠΎΠΌΡΠ½ΡΡΠ°, Π±ΡΠ°ΡΠ·Π΅Ρ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΊΠ°ΡΡ ΡΡΠΎΡ ΡΠ°ΠΉΠ» ΡΠ°ΠΌ ΠΆΠ΅, Π³Π΄Π΅ Π»ΠΈΠΆΠΈΡ HTML ΡΠ°ΠΉΠ».
ΠΡΠ»ΠΈ Π²Ρ ΡΠΎΡ ΡΠ°Π½ΠΈΡΠ΅ ΡΠ°ΠΉΠ» ΠΈ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΠ΅ Π΅Π³ΠΎ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅, ΡΠΎ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΡΠΈ Π½ΠΈΠΊΠ°ΠΊΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ: ΡΡΡΠ°Π½ΠΈΡΠ° ΠΏΠΎ ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠΎ ΠΆΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΡΡΠΎ ΠΈ Π² ΠΏΡΠΎΡΠ»ΡΠΉ ΡΠ°Π·, Π½ΠΎ Π½Π° ΡΡΠΎΡ ΡΠ°Π· ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ Ρ ΡΠ°Π½ΠΈΡΡΡ Π²ΠΎ Π²Π½Π΅ΡΠ½Π΅ΠΌ ΡΠ°ΠΉΠ»Π΅.
ΠΠ°Π»ΡΠ½Π΅ΠΉΡΠ΅Π΅ ΠΈΠ·ΡΡΠ΅Π½ΠΈΠ΅
ΠΡΡΠ³Π°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ, Π²ΠΊΠ»ΡΡΠ°Ρ Π±ΠΎΠ»ΡΡΠ΅Π΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΡΠΎΠΊΠΎΠ² ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π°ΠΉΠ΄Π΅Π½Π° Π² ΡΠ°Π·Π΄Π΅Π»Π΅ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ CSS.