ΠΠ°ΡΠΊΠ°Π΄Π½ΠΎΡΡΡ Π² CSS | ΠΡΠ½ΠΎΠ²Ρ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ Π²Π΅ΡΡΡΠΊΠΈ
ΠΠ°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΡΠΉΡΠ΅ΡΡ Π΄Π»Ρ Π΄ΠΎΡΡΡΠΏΠ° ΠΊ 15+ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠΌ ΠΊΡΡΡΠ°ΠΌ ΠΏΠΎ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ Ρ ΡΡΠ΅Π½Π°ΠΆΠ΅ΡΠΎΠΌ
ΠΠΈΠ΄Π΅ΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π·Π°Π±Π»ΠΎΠΊΠΈΡΠΎΠ²Π°Π½ΠΎ ΠΈΠ·-Π·Π° ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠΉ Π±ΡΠ°ΡΠ·Π΅ΡΠ°. Π ΡΡΠ°ΡΡΠ΅ Π²Ρ Π½Π°ΠΉΠ΄Π΅ΡΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ.
Π ΠΏΡΠΎΡΠ»ΠΎΠΌ ΡΡΠΎΠΊΠ΅ Π±ΡΠ»Π° ΡΠ°Π·ΠΎΠ±ΡΠ°Π½Π° Π²ΡΠΎΡΠ°Ρ ΡΠ°ΡΡΡ ΡΠ»ΠΎΠ²ΠΎΡΠΎΡΠ΅ΡΠ°Π½ΠΈΡ ΠΠ°ΡΠΊΠ°Π΄Π½ΡΠ΅ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ. ΠΡ ΠΈΠ·ΡΡΠΈΠ»ΠΈ, ΠΊΠ°ΠΊ Π·Π°ΠΏΠΈΡΡΠ²Π°ΡΡΡΡ ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΡΡΠΈΠ»ΠΈ ΠΊ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌ HTML ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ. Π ΡΡΠΎΠΌ ΡΡΠΎΠΊΠ΅ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠΈ ΡΠ»ΠΎΠ²Π° ΠΊΠ°ΡΠΊΠ°Π΄Π½ΡΠ΅.
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΠΊΠ°ΡΠΊΠ°Π΄Π½ΠΎΡΡΡ? ΠΡΠ΅Π΄ΡΡΠ°Π²ΡΡΠ΅ ΡΠ΅Π±Π΅ ΠΊΠ°ΡΠΊΠ°Π΄ Π²ΠΎΠ΄ΠΎΠΏΠ°Π΄ΠΎΠ². Π Π½ΠΈΡ Π²ΠΎΠ΄Π° ΠΏΠ΅ΡΠ΅ΡΠ΅ΠΊΠ°Π΅Ρ ΠΈΠ· ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π²ΠΎΠ΄ΠΎΠΏΠ°Π΄Π° Π² Π΄ΡΡΠ³ΠΎΠΉ ΠΈ ΡΠ°ΠΊ Π΄ΠΎ ΡΠ΅Ρ ΠΏΠΎΡ, ΠΏΠΎΠΊΠ° ΡΡΠΎ Π²ΡΠ΅ Π½Π΅ ΡΠΉΠ΄Π΅Ρ Π² ΠΎΠ±ΡΠΈΠΉ Π±Π°ΡΡΠ΅ΠΉΠ½.
Π CSS ΡΠ»ΠΎΠ²ΠΎ ΠΊΠ°ΡΠΊΠ°Π΄Π½ΠΎΡΡΡ ΠΈΠΌΠ΅Π΅Ρ ΡΠ°ΠΊΠΎΠ΅ ΠΆΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅. Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π²ΠΎΠ΄Ρ Ρ Π½Π°Ρ CSS ΡΠ²ΠΎΠΉΡΡΠ²Π°. ΠΠ½ΠΈ ΠΌΠΎΠ³ΡΡ Π½Π°ΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ ΠΈ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡ Π΄ΡΡΠ³ Π΄ΡΡΠ³Π°. ΠΡΡΠ³ΠΈΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ ΠΊΠ°ΡΠΊΠ°Π΄Π½ΠΎΡΡΡ β Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠ·ΡΠΊΠ° CSS Π½Π°ΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π°, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠ°ΡΡΠΈΡΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π² ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ°Ρ .
ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°ΠΊΠΎΠ΅ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠ»ΠΎΠΆΠ½ΠΎΠ΅, Π½ΠΎ Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΠ΅. Π‘ΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΠΏΠ°ΡΠ°Π³ΡΠ°Ρ Ρ Π΄Π²ΡΠΌΡ ΠΊΠ»Π°ΡΡΠ°ΠΌΠΈ: text-bold
ΠΈ text-dark
. ΠΠ΅ΡΠ²ΡΠΉ ΠΊΠ»Π°ΡΡ Π±ΡΠ΄Π΅Ρ ΠΎΡΠ²Π΅ΡΠ°ΡΡ Π·Π° ΠΆΠΈΡΠ½ΠΎΠ΅ Π½Π°ΡΠ΅ΡΡΠ°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°, Π° Π²ΡΠΎΡΠΎΠΉ Π·Π° ΡΡΡΠ°Π½ΠΎΠ²ΠΊΡ ΡΠ΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ° ΡΡΠΈΡΡΠ°. Π’Π°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ ΠΏΠΎ ΡΠ΅Π³Ρ ΠΈ ΡΠΊΠ°ΠΆΠ΅ΠΌ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° 24 ΠΏΠΈΠΊΡΠ΅Π»Ρ.
<p> ΠΠ°ΠΊΠΎΠΉ-ΡΠΎ ΠΎΡΠ΅Π½Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ ΡΠ΅ΠΊΡΡ ΠΎΠ± ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠΉ Π²Π΅ΡΠΈ. ΠΡΠ΅Π½Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ. </p>
Π CSS ΡΠ°ΠΉΠ»Π΅ ΡΠΊΠ°ΠΆΠ΅ΠΌ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΡΠΈΠ»ΠΈ:
p { font-size: 24px; } .text-bold { font-weight: bold; } .text-dark { color: #333333; }
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅ΡΡΠΈ ΡΡΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ, ΠΈ Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΠΎ ΡΠ΅ΠΊΡΡ Π²ΡΠ²ΠΎΠ΄ΠΈΡΡΡ ΡΠ΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ° ΠΈ Ρ ΠΆΠΈΡΠ½ΡΠΌ Π½Π°ΡΠ΅ΡΡΠ°Π½ΠΈΠ΅ΠΌ. Π‘ΡΠΈΠ»ΠΈ ΠΎΡ ΠΊΠ»Π°ΡΡΠΎΠ²
ΠΈ text-dark
ΡΠ»ΠΎΠΆΠΈΠ»ΠΈΡΡ ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠ»ΠΈΡΡ ΠΊ Π½Π°ΡΠ΅ΠΌΡ ΠΏΠ°ΡΠ°Π³ΡΠ°ΡΡ. Π’Π°ΠΊΠΆΠ΅ ΡΠ΅ΠΊΡΡ ΠΈΠΌΠ΅Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ 24 ΠΏΠΈΠΊΡΠ΅Π»Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ ΡΠΊΠ°Π·Π°Π»ΠΈ Π΄Π»Ρ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ° ΠΏΠΎ ΡΠ΅Π³Ρ.
ΠΡΠΎΠ³ΠΎΠ²ΡΠΌΠΈ ΡΡΠΈΠ»ΡΠΌΠΈ Π΄Π»Ρ Π½Π°ΡΠ΅Π³ΠΎ ΠΏΠ°ΡΠ°Π³ΡΠ°ΡΠ° Π±ΡΠ΄ΡΡ:
{ color: #333333; font-weight: bold; font-size: 24px; }
ΠΡΠΎ ΠΈ Π΅ΡΡΡ ΠΊΠ°ΡΠΊΠ°Π΄Π½ΠΎΡΡΡ ΡΡΠΈΠ»Π΅ΠΉ CSS. Π₯ΠΎΡΡ ΠΌΡ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ ΡΠ°Π·Π½ΡΠ΅ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ ΠΈ ΠΊΠ»Π°ΡΡΡ Π΄Π»Ρ ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ, Π½ΠΎ Π² ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΌ ΠΈΡΠΎΠ³Π΅ ΠΎΠ½ΠΈ ΡΡΠΌΠΌΠΈΡΠΎΠ²Π°Π»ΠΈΡΡ.
ΠΡΠΈΠΎΡΠΈΡΠ΅Ρ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ²
ΠΠ°ΠΆΠ½ΠΎΠΉ ΡΠ΅ΡΡΠΎΠΉ CSS ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎ, ΡΡΠΎ ΡΠ°Π·Π½ΡΠ΅ ΡΠΈΠΏΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ² ΠΈΠΌΠ΅ΡΡ ΡΠ°Π·Π½ΡΠΉ ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ. ΠΡΠ»ΠΈ ΡΡΠΈΠ»ΠΈ ΠΏΡΠΎΡΠΈΠ²ΠΎΡΠ΅ΡΠ°Ρ Π΄ΡΡΠ³ Π΄ΡΡΠ³Ρ Π² ΡΠ°Π·Π½ΡΡ
ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ°Ρ
, ΡΠΎ Π²ΡΡΡΠΏΠ°Π΅Ρ Π² Π΄Π΅Π»ΠΎ ΠΏΡΠΈΠ½ΡΠΈΠΏ ΠΏΡΠΈΠΎΡΠΈΡΠ΅ΡΠ°. Π Π°Π·Π±Π΅ΡΠ΅ΠΌ Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΠ΅. ΠΠΎΠ·ΡΠΌΠ΅ΠΌ ΠΏΠ°ΡΠ°Π³ΡΠ°Ρ Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ
ΠΈ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠΎΠΌ blue
. Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΠΌ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠ΅ ΡΠ²Π΅ΡΠ° Π΄Π»Ρ ΡΠ΅ΠΊΡΡΠ°. ΠΠ»Ρ Π²ΡΠ΅Ρ
ΠΆΠ΅ ΠΏΠ°ΡΠ°Π³ΡΠ°ΡΠΎΠ² Π² ΡΠ΅ΠΊΡΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠΌ Π·Π΅Π»Π΅Π½ΡΠΉ ΡΠ²Π΅Ρ.
p { color: green; } .red { color: red; } #blue { color: blue; }
<p>ΠΠ°ΠΊΠΎΠ³ΠΎ ΠΆΠ΅ ΡΠ²Π΅ΡΠ° Π±ΡΠ΄Π΅Ρ ΠΏΠ°ΡΠ°Π³ΡΠ°Ρ?</p>
ΠΠ΅ΡΠ΅Π΄ ΡΠ΅ΠΌ, ΠΊΠ°ΠΊ ΡΠΈΡΠ°ΡΡ Π΄Π°Π»ΡΡΠ΅ ΠΏΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ ΡΡΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ Π² Π»ΡΠ±ΠΎΠΌ ΡΠ΄ΠΎΠ±Π½ΠΎΠΌ Π²Π°ΠΌ ΠΌΠ΅ΡΡΠ΅.
ΠΠ°ΠΊ Π²Ρ ΡΠΌΠΎΠ³Π»ΠΈ Π·Π°ΠΌΠ΅ΡΠΈΡΡ, ΡΠ΅ΠΊΡΡ ΠΏΠ°ΡΠ°Π³ΡΠ°ΡΠ° Π±ΡΠ΄Π΅Ρ ΡΠΈΠ½ΠΈΠΌ. ΠΠΎ ΠΏΠΎΡΠ΅ΠΌΡ ΡΠ°ΠΊ? ΠΠΎΠΆΠ΅Ρ Π±ΡΡΡ, Π΄Π΅Π»ΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎ ΡΠΈΠ½ΠΈΠΉ ΡΠ²Π΅Ρ Π² CSS ΡΠΊΠ°Π·Π°Π½ ΡΠ°ΠΌΡΠΌ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΌ? Π Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π½Π΅Ρ. ΠΠ°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΠΌΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΠΌ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ ΠΏΠΎ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΡ Π² ΡΠ°ΠΌΡΠΉ Π²Π²Π΅ΡΡ , ΠΏΠ°ΡΠ°Π³ΡΠ°Ρ Π²ΡΠ΅ ΡΠ°Π²Π½ΠΎ ΠΎΡΡΠ°Π½Π΅ΡΡΡ ΡΠΈΠ½ΠΈΠΌ.
ΠΡΠ΅ Π΄Π΅Π»ΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ ΠΏΠΎ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΡ ΠΈΠΌΠ΅Π΅Ρ ΡΠ°ΠΌΡΠΉ Π²ΡΡΠΎΠΊΠΈΠΉ ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ. ΠΡΡΡΠ΅ΡΠΈΠ² Π΅Π³ΠΎ, Π±ΡΠ°ΡΠ·Π΅Ρ Π±ΡΠ΄Π΅Ρ ΡΡΠΈΡΠ°ΡΡ ΡΡΠΈ ΡΡΠΈΠ»ΠΈ ΡΠ°ΠΌΡΠΌΠΈ Π²Π°ΠΆΠ½ΡΠΌΠΈ Π΄Π»Ρ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ Π² ΡΠ»ΡΡΠ°Π΅ ΠΏΡΠΎΡΠΈΠ²ΠΎΡΠ΅ΡΠΈΠΉ Π²ΠΎΠ·ΡΠΌΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π² ΠΏΠ΅ΡΠ²ΡΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ ΠΈΠ· ΡΡΠΈΠ»Π΅ΠΉ Π΄Π»Ρ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠ°.
Π£ΡΠ»ΠΎΠ²Π½ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°ΡΡΡΠ°Π²ΠΈΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ Π² ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅ ΠΏΠΎ ΠΏΡΠΈΠΎΡΠΈΡΠ΅ΡΡ:
- Π‘Π΅Π»Π΅ΠΊΡΠΎΡ ΠΏΠΎ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΡ (
#blue
) - Π‘Π΅Π»Π΅ΠΊΡΠΎΡ ΠΏΠΎ ΠΊΠ»Π°ΡΡΡ (
.red
) - Π‘Π΅Π»Π΅ΠΊΡΠΎΡ ΠΏΠΎ ΡΠ΅Π³Ρ (
p
)
ΠΠ΄Π΅ 1 β ΡΠ°ΠΌΡΠΉ Π²ΡΡΠΎΠΊΠΈΠΉ ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ, Π° 3 β ΡΠ°ΠΌΡΠΉ Π½ΠΈΠ·ΠΊΠΈΠΉ.
Π Π°Π·Π±Π΅ΡΠ΅ΠΌ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΏΡΠΈΠΌΠ΅Ρ:
p { color: blue; font-weight: bold; } .important { color: purple; font-style: italic; } #intro { color: green; }
<p>ΠΠ½Π΄Π΅ΠΉΡΠΊΠΈΠ΅ ΠΏΠ»Π΅ΠΌΠ΅Π½Π° ΠΠ°Π½Π°Ρ Π°ΡΡΠΎΡ ΠΈ ΠΠ°Π½Π°ΡΡΠΈ.</p>
ΠΡΠΎΡ ΡΠ΅ΠΊΡΡ Π±ΡΠ΄Π΅Ρ Π½Π°ΠΊΠ»ΠΎΠ½Π½ΡΠΌ, ΠΆΠΈΡΠ½ΡΠΌ ΠΈ Π·Π΅Π»Π΅Π½ΡΠΌ. Π Π²ΠΎΡ ΠΏΠΎΡΠ΅ΠΌΡ:
- Π‘Π΅Π»Π΅ΠΊΡΠΎΡ ΠΏΠΎ ΡΠ΅Π³Ρ
p
:- ΠΠΎΠ±Π°Π²ΠΈΡ ΡΠΈΠ½ΠΈΠΉ ΡΠ²Π΅Ρ
- ΠΠΎΠ±Π°Π²ΠΈΡ ΠΆΠΈΡΠ½ΠΎΠ΅ Π½Π°ΡΠ΅ΡΡΠ°Π½ΠΈΠ΅
- Π‘Π΅Π»Π΅ΠΊΡΠΎΡ ΠΏΠΎ ΠΊΠ»Π°ΡΡΡ
. important
:- ΠΠ°ΠΌΠ΅Π½ΠΈΡ
ΡΠΈΠ½ΠΈΠΉ ΡΠ²Π΅ΡΠ½Π° ΠΏΡΡΠΏΡΡΠ½ΡΠΉ - Π‘Π΄Π΅Π»Π°Π΅Ρ ΡΠ΅ΠΊΡΡ ΠΊΡΡΡΠΈΠ²Π½ΡΠΌ
- ΠΠ°ΠΌΠ΅Π½ΠΈΡ
- Π‘Π΅Π»Π΅ΠΊΡΠΎΡ ΠΏΠΎ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΡ
#intro
:- ΠΠ°ΠΌΠ΅Π½ΠΈΡ
ΠΏΡΡΠΏΡΡΠ½ΡΠΉ ΡΠ²Π΅ΡΠ½Π° Π·Π΅Π»Π΅Π½ΡΠΉ
- ΠΠ°ΠΌΠ΅Π½ΠΈΡ
ΠΠΎΡΠ»Π΅ Π²ΡΠ΅Ρ ΡΠ°ΠΊΠΈΡ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠΉ ΠΈΡΠΎΠ³ΠΎΠ²ΡΠ΅ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ ΠΏΠ°ΡΠ°Π³ΡΠ°ΡΠ° ΡΠ»ΠΎΠΆΠ°ΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
{ color: green; font-weight: bold; font-style: italic; }
ΠΠ°ΠΆΠ½ΠΎ: ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ ΠΏΠΎ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΡ ΠΈΠΌΠ΅Π΅Ρ ΡΠ°ΠΌΡΠΉ Π²ΡΡΠΎΠΊΠΈΠΉ ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ ΠΈ ΠΏΠ΅ΡΠ΅Π±ΠΈΠ²Π°Π΅Ρ Π²ΡΠ΅ ΡΡΠΈΠ»ΠΈ ΠΊΠ»Π°ΡΡΠΎΠ², ΡΠΎ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΡΠΈΡΠ°Π΅ΡΡΡ Π½Π΅ ΠΎΡΠ΅Π½Ρ Ρ ΠΎΡΠΎΡΠ΅ΠΉ ΠΏΡΠ°ΠΊΡΠΈΠΊΠΎΠΉ. Π£ΠΊΠ°Π·Π°Π² ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠ° ΠΌΡ Π»ΠΈΡΠ°Π΅ΠΌ ΡΠ΅Π±Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΡΡΠΈΠ»ΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»Π°ΡΡΠΎΠ². ΠΡΠΎ Π±ΡΠ²Π°Π΅Ρ ΠΎΡΠ΅Π½Ρ Π²Π°ΠΆΠ½ΠΎ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΡ ΠΊ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΠ°ΠΉΡΠΎΠ², ΠΊΠΎΠ³Π΄Π° Π½Π° Π΅Π³ΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΌΡ ΠΌΠ΅Π½ΡΠ΅ΠΌ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²
ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Ρ Π²Π°Ρ Π²ΠΎΠ·Π½ΠΈΠΊ Π²ΠΎΠΏΡΠΎΡ, Π° ΡΡΠΎ ΡΠ»ΡΡΠΈΡΡΡ, Π΅ΡΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΊΠ»Π°ΡΡΠΎΠ², ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΊΠΎΡΠΎΡΡΡ ΠΏΡΠΎΡΠΈΠ²ΠΎΡΠ΅ΡΠ°Ρ Π΄ΡΡΠ³ Π΄ΡΡΠ³Ρ? ΠΠ΄Π΅ΡΡ ΠΊΠ°ΡΠΊΠ°Π΄Π½ΠΎΡΡΡ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΏΠΎ ΠΏΡΠΈΠ½ΡΠΈΠΏΡ Β«ΠΡΠΎ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ, ΡΠΎΡ ΠΈ ΠΏΡΠ°Π²Β». ΠΡΠΎΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΡΡΠΎ ΡΠ°ΠΊ ΠΆΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΠ΅:
.alert { color: gray; } .alert-error { color: red; }
<p>ΠΠ°ΠΆΠ½ΠΎΠ΅ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅! Π‘ΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅ ΠΊΡΠ°ΡΠ½ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ°</p>
ΠΡΡΠ°Π»ΠΊΠΈΠ²Π°ΡΡΡ ΠΎΡ ΠΏΡΠΈΠ½ΡΠΈΠΏΠ° ΠΊΠ°ΡΠΊΠ°Π΄Π½ΠΎΡΡΠΈ, Π±ΡΠ°ΡΠ·Π΅Ρ Π²Π½Π°ΡΠ°Π»Π΅ ΡΠ²ΠΈΠ΄ΠΈΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ .alert
ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡ ΡΠ΅ΡΡΠΉ ΡΠ²Π΅Ρ ΡΠ΅ΠΊΡΡΠ°. ΠΠ°Π»Π΅Π΅ Π΅ΠΌΡ Π²ΡΡΡΠ΅ΡΠΈΡΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ
, ΠΊΠΎΡΠΎΡΡΠΉ Π³ΠΎΠ²ΠΎΡΠΈΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΊΡΠ°ΡΠ½ΡΠΉ ΡΠ²Π΅Ρ. Π Π±ΡΠ°ΡΠ·Π΅Ρ ΠΏΡΠΎΡΡΠΎ ΠΏΠ΅ΡΠ΅Π·Π°ΠΏΠΈΡΠ΅Ρ ΡΠ΅ΡΡΠΉ ΡΠ²Π΅Ρ Π½Π° ΠΊΡΠ°ΡΠ½ΡΠΉ. ΠΠΎΡΡΠ΄ΠΎΠΊ ΠΊΠ»Π°ΡΡΠΎΠ² Π² HTML Π² Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π½Π΅ ΠΈΠ³ΡΠ°Π΅Ρ Π½ΠΈΠΊΠ°ΠΊΠΎΠΉ ΡΠΎΠ»ΠΈ. ΠΠ°ΠΆΠ΅ Π² ΡΠ°ΠΊΠΎΠΌ ΡΠ»ΡΡΠ°Π΅
<p>ΠΠ°ΠΆΠ½ΠΎΠ΅ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅! Π‘ΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅ ΠΊΡΠ°ΡΠ½ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ°</p>
ΡΠ²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° Π±ΡΠ΄Π΅Ρ ΠΊΡΠ°ΡΠ½ΡΠΌ. ΠΡΠΎ Π½Π°Π³Π»ΡΠ΄Π½ΠΎ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΡ CSS ΠΎΡ HTML. ΠΡΠ»ΠΈ ΠΆΠ΅ ΠΏΠΎΠΌΠ΅Π½ΡΡΡ ΠΌΠ΅ΡΡΠ°ΠΌΠΈ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ Π² CSS, ΡΠΎ ΠΏΠΎΠΌΠ΅Π½ΡΡΡΡΡ ΠΈ ΠΈΡΠΎΠ³ΠΎΠ²ΡΠ΅ ΡΡΠΈΠ»ΠΈ.
.alert-error { color: red; } .alert { color: gray; }
<p>ΠΠ°ΠΆΠ½ΠΎΠ΅ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅! Π‘ΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅ ΡΠ΅ΡΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ°</p>
ΠΠ΅Ρ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ²
ΠΠΎ Π²ΡΠ΅ΠΌΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ Π²Ρ Π±ΡΠ΄Π΅ΡΠ΅ Π²ΡΡΡΠ΅ΡΠ°ΡΡ ΡΠ°Π·Π½ΡΠ΅ ΡΠΈΡΡΠ°ΡΠΈΠΈ, ΠΏΡΠΈ ΠΊΠΎΡΠΎΡΡΡ ΠΎΠ΄Π½ΠΈ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ Π±ΡΠ΄ΡΡ ΠΈΠΌΠ΅ΡΡ Π±ΠΎΠ»ΡΡΠΈΠΉ Π²Π΅Ρ, ΡΠ΅ΠΌ Π΄ΡΡΠ³ΠΈΠ΅.
<textarea></textarea>
.form-input { height: 50px; } textarea { height: 200px; }
ΠΠ°ΠΊΠΎΠΉ Π²ΡΡΠΎΡΡ Π±ΡΠ΄Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <textarea>
? ΠΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΉ ΠΎΡΠ²Π΅Ρ β 50px, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ ΠΏΠΎ ΠΊΠ»Π°ΡΡΡ ΠΈΠΌΠ΅Π΅Ρ Π±ΠΎΠ»ΡΡΠΈΠΉ ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ, ΡΠ΅ΠΌ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ ΠΏΠΎ ΡΠ΅Π³Ρ. ΠΠΎ ΠΊΠ°ΠΊ ΠΆΠ΅ Π·Π°Π΄Π°ΡΡ Π²ΡΡΠΎΡΡ Π² 200px ΠΈ Π½Π΅ Π²Π²ΠΎΠ΄ΠΈΡΡ Π½ΠΎΠ²ΡΠ΅ ΠΊΠ»Π°ΡΡΡ? ΠΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΠΎΠ΄ΡΡΠ°Π²ΠΈΡΡ ΠΊ ΡΠ΅Π³Ρ Π΅ΡΠ΅ ΠΈ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΊΠ»Π°ΡΡΠ°:
.form-input { height: 50px; } textarea.form-input { height: 200px; }
Π’Π΅ΠΏΠ΅ΡΡ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <textarea>
Π±ΡΠ΄Π΅Ρ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π° Π²ΡΡΠΎΡΠ° Π² 200px. ΠΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΡΠ»ΠΎ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΠΎΠΌΡ, ΡΡΠΎ ΠΏΡΠΈΠΎΡΠΈΡΠ΅ΡΡ Β«ΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡΒ» Π² ΡΠ°ΠΌΠΊΠ°Ρ
ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ°. ΠΠ»Ρ Π±ΠΎΠ»ΡΡΠ΅Π³ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΡ ΡΠ°ΠΊΠΈΡ
ΡΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΡΡ, ΡΡΠΎ ΠΎΠ±ΡΠΈΠΉ Π²Π΅Ρ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΡΡΠ΅ΠΌΡ ΡΠΈΡΡΠ°ΠΌΠΈ, Π³Π΄Π΅:
- ΠΠ΅ΡΠ²Π°Ρ ΡΠΈΡΡΠ° ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠΎΠ² Π² ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ΅
- ΠΡΠΎΡΠ°Ρ ΡΠΈΡΡΠ° ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΊΠ»Π°ΡΡΠΎΠ² Π² ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ΅
- Π’ΡΠ΅ΡΡΡ ΡΠΈΡΡΠ° ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠ΅Π³ΠΎΠ² Π² ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ΅
ΠΠΎΠΆΠ΅Ρ Π·Π²ΡΡΠ°ΡΡ ΡΠ»ΠΎΠΆΠ½ΠΎ, Π½ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ ΠΏΡΠΎΡΡΠ°Ρ. Π Π°Π·Π±Π΅ΡΠ΅ΠΌ ΠΏΡΠΎΡΠ»ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ:
<textarea></textarea>
.form-input { height: 50px; } textarea { height: 200px; }
- Π‘Π΅Π»Π΅ΠΊΡΠΎΡ
.form-input
ΡΠΎΡΡΠΎΠΈΡ ΠΈΠ· ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΊΠ»Π°ΡΡΠ°, ΠΏΠΎΡΡΠΎΠΌΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π²ΡΠΎΡΠΎΠΉ ΡΠΈΡΡΡ ΠΏΠΎΡΡΠ°Π²ΠΈΠΌ Π΅Π΄ΠΈΠ½ΠΈΡΡ ΠΈ ΠΏΠΎΠ»ΡΡΠΈΠΌ: 010 - Π‘Π΅Π»Π΅ΠΊΡΠΎΡ
textarea
ΡΠΎΡΡΠΎΠΈΡ ΠΈΠ· ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ΅Π³Π°. ΠΠ°ΠΏΠΈΡΡΠ²Π°Π΅ΠΌ Π΅Π΄ΠΈΠ½ΠΈΡΡ Π² ΡΡΠ΅ΡΠΈΠΉ ΡΠ°Π·ΡΡΠ΄ Π½Π°ΡΠ΅Π³ΠΎ ΡΠΈΡΠ»Π°: 001
ΠΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ ΠΏΠΎΠ½ΡΡΠ½ΠΎ, ΡΡΠΎ 010 > 001, ΠΏΠΎΡΡΠΎΠΌΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π²Π½ΡΡΡΠΈ ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΈΠΌΠ΅ΡΡ Π±ΠΎΠ»ΡΡΠΈΠΉ ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ. ΠΡ Π·Π°Ρ ΠΎΡΠ΅Π»ΠΈ ΡΡΠΎ ΠΈΡΠΏΡΠ°Π²ΠΈΡΡ ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΠ»ΠΈ Π½Π°Ρ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ:
.form-input { height: 50px; } textarea.form-input { height: 200px; }
Π’Π΅ΠΏΠ΅ΡΡ ΠΏΠΎΡΡΠ΄ΠΎΠΊ ΡΠΈΠ» Π²ΠΎ Π²ΡΠ΅Π»Π΅Π½Π½ΠΎΠΉ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»ΡΡ:
- Π‘Π΅Π»Π΅ΠΊΡΠΎΡ
.form-input
ΡΠΎΡΡΠΎΠΈΡ ΠΈΠ· ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΊΠ»Π°ΡΡΠ°, ΠΏΠΎΡΡΠΎΠΌΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π²ΡΠΎΡΠΎΠΉ ΡΠΈΡΡΡ ΠΏΠΎΡΡΠ°Π²ΠΈΠΌ Π΅Π΄ΠΈΠ½ΠΈΡΡ ΠΈ ΠΏΠΎΠ»ΡΡΠΈΠΌ: 010 - Π‘Π΅Π»Π΅ΠΊΡΠΎΡ
textarea.form-input
ΡΠΎΡΡΠΎΠΈΡ ΠΈΠ· ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΊΠ»Π°ΡΡΠ° ΠΈ ΡΠ΅Π³Π°. ΠΠ°ΠΏΠΈΡΡΠ²Π°Π΅ΠΌ Π΅Π΄ΠΈΠ½ΠΈΡΡ Π²ΠΎ Π²ΡΠΎΡΠΎΠΉ ΠΈ ΡΡΠ΅ΡΠΈΠΉ ΡΠ°Π·ΡΡΠ΄ Π½Π°ΡΠ΅Π³ΠΎ ΡΠΈΡΠ»Π°: 011
ΠΠΎΠ»ΡΡΠ°Π΅ΠΌ, ΡΡΠΎ 010 < 011, Π° Π·Π½Π°ΡΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π²Π½ΡΡΡΠΈ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ° textarea. form-input
Π±ΡΠ΄ΡΡ ΠΈΠΌΠ΅ΡΡ Π±ΠΎΠ»ΡΡΠΈΠΉ ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ.
Π’Π°ΠΊΠΎΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π²Π°ΠΌ Π»ΡΡΡΠ΅ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ, ΠΊΠ°ΠΊ Π΄Π΅ΠΉΡΡΠ²ΡΡΡ ΡΠ΅ ΠΈΠ»ΠΈ ΠΈΠ½ΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π°, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΡΠ΅ΠΌΡ Π²ΡΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΡΡΠ°ΡΠ°ΡΡΡΡ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ ΡΠΉΡΠΈ ΠΎΡ ΡΠ»ΠΎΠΆΠ½ΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ². ΠΡΠΈ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΠΈ ΠΎΠΏΡΡΠ°, Π²Ρ Π²ΡΠ΅ ΡΠ΅ΠΆΠ΅ Π±ΡΠ΄Π΅ΡΠ΅ ΡΡΠΈΡΠ°ΡΡ Π²Π΅Ρ ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π° ΡΠΆΠ΅ Π±ΡΠ΄Π΅ΡΠ΅ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ, ΠΊΠ°ΠΊ ΡΠ°ΡΡΡΠ°Π²Π»Π΅Π½Ρ ΠΏΡΠΈΠΎΡΠΈΡΠ΅ΡΡ.
Π‘Π°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½Π°Ρ ΡΠ°Π±ΠΎΡΠ°
Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΡΠ°ΠΉΠ»Ρ index.html ΠΈ style.css Π½Π° ΡΠ²ΠΎΠ΅ΠΌ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ΅.
ΠΠ½ΡΡΡΠΈ HTML ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΡΡ Π·Π°ΠΏΠΈΡΡ:
<div>ΠΠ°ΠΊΠΎΠΉ-ΡΠΎ ΡΠ΅ΠΊΡΡ</div>
ΠΈ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ CSS ΡΡΠΈΠ»ΠΈ:
div { width: 500px; height: 500px; background: #333333; } #main { color: white; width: 750px; } .text-white { color: white; } .alert { height: 350px; color: gray; } div { background: blue; } .alert-warning { background: #000000; color: yellow; }
ΠΡΠΎΠ°Π½Π°Π»ΠΈΠ·ΠΈΡΡΠΉΡΠ΅ ΠΏΠΎΠ»ΡΡΠΈΠ²ΡΠΈΠΉΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ
ΠΡΡΠ°Π»ΠΈΡΡ Π²ΠΎΠΏΡΠΎΡΡ? ΠΠ°Π΄Π°ΠΉΡΠ΅ ΠΈΡ Π² ΡΠ°Π·Π΄Π΅Π»Π΅ Β«ΠΠ±ΡΡΠΆΠ΄Π΅Π½ΠΈΠ΅Β»
ΠΠ°ΠΌ ΠΎΡΠ²Π΅ΡΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Π° ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ Π₯Π΅ΠΊΡΠ»Π΅ΡΠ° ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΡΡΠ΄Π΅Π½ΡΡ.
ΠΡΡΡΡΠΊΠ° | WebReference
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ::after ΠΈ ::before ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· ΡΠ°ΠΌΡΡ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ ΠΏΡΠΈΡΠΌΠΎΠ² ΠΏΡΠΈ Π²ΡΡΡΡΠΊΠ΅ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠΎΠ² Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡ ΠΈ ΠΈΡ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ. Π‘ ΠΈΡ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΠ²ΠΎΠ΄ΠΈΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ»ΡΠ½ΡΠΉ ΡΠ΅ΠΊΡΡ, Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΡΠ΅Π½ΠΈ, ΡΡΠ΅ΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠΈ, Π»ΠΈΠ½ΠΈΠΈ ΠΈ Π΄Ρ.
ΠΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π»ΡΠ±Π°Ρ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΠΏΠΎΡ ΠΎΠΆΠΈΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π²ΡΡΡΠ΅ΡΠ°ΡΡΡΡ ΠΈ Π½Π° Π΄ΡΡΠ³ΠΈΡ ΡΠ°ΠΉΡΠ°Ρ . ΠΡΠΎ ΠΌΠ΅Π½Ρ, Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ, ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΎΡΠΌ, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ ΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ. Π§ΡΠΎΠ±Ρ ΠΌΠ΅Π½ΡΡΠ΅ ΠΏΠΈΡΠ°ΡΡ ΠΊΠΎΠ΄Π° ΠΈ ΠΏΠΎ ΠΌΠ°ΠΊΡΠΈΠΌΡΠΌΡ Π·Π°Π΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ ΡΠΆΠ΅ Π³ΠΎΡΠΎΠ²ΡΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ, ΠΈΡ ΡΠ°ΡΡΠΎ Π½Π°Π·ΡΠ²Π°ΡΡ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ°ΠΌΠΈ. ΠΠ΄Π½ΠΈΠΌ ΠΈΠ· ΡΠ°ΠΊΠΈΡ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΎΠ² Π΄Π»Ρ Π²ΡΡΡΡΠΊΠΈ ΡΠ²Π»ΡΠ΅ΡΡΡ Bootstrap.
Font Awesome β ΡΡΠΎ ΡΡΠΈΡΡ Ρ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡΡΡ ΠΊ Π»ΡΠ±ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ²ΡΡΠΈΡΡ ΠΈΡ Π½Π°Π³Π»ΡΠ΄Π½ΠΎΡΡΡ ΠΈ ΡΠ»ΡΡΡΠΈΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½. Π Π°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΡΠΉΠ² ΠΠ°Π½Π΄ΠΈ ΡΠΎΠ±ΡΠ°Π» Π²ΠΏΠ΅ΡΠ°ΡΠ»ΡΡΡΡΡ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΡ ΠΈΠ· Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΎΡΠ΅Π½ ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠΈΡ ΠΏΠΎΠ΄ Π»ΡΠ±ΡΠ΅ Π·Π°Π΄Π°ΡΠΈ.
HTML (HyperText Markup Language, ΡΠ·ΡΠΊ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ Π³ΠΈΠΏΠ΅ΡΡΠ΅ΠΊΡΡΠ°) β ΡΡΠΎ ΠΏΡΠ΅ΠΆΠ΄Π΅ Π²ΡΠ΅Π³ΠΎ ΡΠΈΡΡΠ΅ΠΌΠ° Π²ΡΡΡΡΠΊΠΈ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ, ΠΊΠ°ΠΊ ΠΈ ΠΊΠ°ΠΊΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅.
Less β ΡΡΠΎ ΠΏΡΠ΅ΠΏΡΠΎΡΠ΅ΡΡΠΎΡ CSS, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠΈΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅, ΡΡΠ½ΠΊΡΠΈΠΈ, ΡΠΈΠΊΠ»Ρ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ Π΄Π»Ρ ΡΠΏΡΠΎΡΠ΅Π½ΠΈΡ ΡΠ°Π±ΠΎΡΡ ΡΠΎ ΡΡΠΈΠ»ΡΠΌΠΈ. ΠΡΠ΅ΠΏΡΠΎΡΠ΅ΡΡΠΎΡ Π² Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΌΡ ΠΈΠΌΠ΅Π΅ΠΌ Π΄Π΅Π»ΠΎ Ρ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠΌ ΡΠ·ΡΠΊΠΎΠΌ ΡΡΠΈΠ»Π΅ΠΉ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΡΠ΅ΡΡΡ Π² CSS.
Π CSS Π½Π΅Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ , Π½Π΅Ρ ΡΡΠ½ΠΊΡΠΈΠΉ, Π½Π΅Ρ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΠΈΡ ΡΡ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠΎΠ² ΠΊΠΎΠ΄Π°, Π² ΠΎΠ±ΡΠ΅ΠΌ, Π½Π΅Ρ Π½ΠΈΡΠ΅Π³ΠΎ, ΡΡΠΎ Ρ Π°ΡΠ°ΠΊΡΠ΅ΡΠ½ΠΎ Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠ·ΡΠΊΠ° ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈ ΠΎΠ±Π»Π΅Π³ΡΠ΅Π½ΠΈΡ ΡΠ°Π±ΠΎΡΡ. ΠΠ° ΠΏΠΎΠΌΠΎΡΡ ΠΏΡΠΈΡ ΠΎΠ΄ΡΡ ΠΏΡΠ΅ΠΏΡΠΎΡΠ΅ΡΡΠΎΡΡ CSS, ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· Π½ΠΈΡ ΠΊΠ°ΠΊ ΡΠ°Π· ΠΈ ΡΠ²Π»ΡΠ΅ΡΡΡ Sass (Syntactically Awesome Stylesheets). Sass ΡΡΠΎ ΠΎΡΠΎΠ±ΡΠΉ ΠΌΠ΅ΡΠ°ΡΠ·ΡΠΊ, ΠΏΠΎΡ ΠΎΠΆΠΈΠΉ Π½Π° CSS, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΡ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ ΡΠΎ ΡΡΠΈΠ»ΡΠΌΠΈ.
ΠΡΡΡΡΠΊΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ flexbox, ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΠΎ Π½Π°Π·ΡΠ²Π°Π΅ΠΌΠ°Ρ CSS Flexible Box Layout Module, ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ Π½ΠΎΠ²ΡΠΉ ΠΌΠΎΠ΄ΡΠ»Ρ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ Π² CSS3, ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π½ΡΠΉ Π΄Π»Ρ ΡΠ»ΡΡΡΠ΅Π½ΠΈΡ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ, Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΈ ΠΏΠΎΡΡΠ΄ΠΊΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² ΠΊΠΎΠ½ΡΠ΅ΠΉ
ΠΡΠΎ ΠΊΠ½ΠΈΠ³Π° ΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΡΠ°ΠΉΡΠΎΠ² Π½Π° HTML5 ΠΈ CSS Π΄Π»Ρ ΡΠ°ΠΌΡΡ Π½ΠΎΠ²ΠΈΡΠΊΠΎΠ². Π¦Π΅Π»Ρ ΡΡΠΎΠΉ ΠΊΠ½ΠΈΠ³ΠΈ β ΡΠ°ΡΡΠΊΠ°Π·Π°ΡΡ ΠΎΠ± ΠΈΡΠΊΡΡΡΡΠ²Π΅ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°ΠΉΡΠΎΠ² ΠΏΡΠΎΡΡΡΠΌ ΡΠ·ΡΠΊΠΎΠΌ, ΠΏΠΎΠ»Π½ΡΠΌ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΡ Π°Π½Π°Π»ΠΎΠ³ΠΈΠΉ. ΠΠΎΡΠ»Π΅ ΠΏΡΠΎΡΡΠ΅Π½ΠΈΡ ΡΠ²ΡΡΠ΅ 100 ΠΏΠ΅ΡΠ°ΡΠ½ΡΡ ΡΡΡΠ°Π½ΠΈΡ Π²Ρ ΠΎΡΠ²ΠΎΠΈΡΠ΅ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΏΠΎΠ½ΡΡΠΈΡ ΠΈ ΠΌΠ΅ΡΠΎΠ΄Ρ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΈ Π±ΡΠ΄Π΅ΡΠ΅ Π² ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ²ΠΎΠΉ ΠΏΠ΅ΡΠ²ΡΠΉ ΡΠ°ΠΉΡ!
CSS Π·Π°ΠΏΡΡΠ°Π½. ΠΡ Π²ΡΠ΅ Π»ΡΠ±ΠΈΠΌ Π΅Π³ΠΎ, Π½ΠΎ ΠΎΠ½ Π·Π°ΠΏΡΡΠ°Π½Π½ΡΠΉ. Π― ΡΡΠ°Π²Π½ΠΈΠ²Π°Ρ Π΅Π³ΠΎ Ρ Π°Π½Π³Π»ΠΈΠΉΡΠΊΠΈΠΌ ΡΠ·ΡΠΊΠΎΠΌ: Π΅ΡΡΡ ΠΊΡΡΠ° ΠΏΡΠ°Π²ΠΈΠ» ΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ·Π½Π°ΡΡ ΠΈΡ . ΠΠΎ ΠΈΠ½ΠΎΠ³Π΄Π° Π³ΠΎΡΠ°Π·Π΄ΠΎ Π»ΡΡΡΠ΅ ΠΏΡΠΎΡΡΠΎ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ Π²ΡΡΠΊΡΡ Π³Π°Π΄ΠΎΡΡΡ ΠΈ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ, Π° ΡΡΠΎ Π½Π΅Ρ. ΠΠ°Π³ΠΈΡΒ β ΡΡΠΎ ΡΠΏΠΎΡΡΠ΄ΠΎΡΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ³ΠΎ, ΡΡΠΎ Ρ ΡΠ·Π½Π°Π» ΠΈΠ· ΡΡΠΎΠ³ΠΎ ΡΡΠΌΠ°ΡΡΠ΅Π΄ΡΠ΅Π³ΠΎ ΠΏΡΠΎΡΠ΅ΡΡΠ°.
ΠΠΎΠ³ΡΡΠΆΠ΅Π½ΠΈΠ΅ Π² HTML5 ΠΎΡΠ½ΠΎΠ²Π°Π½ΠΎ Π½Π° ΡΠΈΡΠΊΠ°Ρ , Π²ΡΡΡΠ½ΡΡ ΠΎΡΠΎΠ±ΡΠ°Π½Π½ΡΡ ΠΈΠ· ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ HTML5 ΠΈ Π΄ΡΡΠ³ΠΈΡ Π·Π°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΡΡ ΡΡΠ°Π½Π΄Π°ΡΡΠΎΠ².
ΠΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡΠ΅ ΡΡΠΎΠΊΠΈ ΠΏΠΎ HTML ΠΈ CSS β ΡΡΠΎ Π±ΠΎΠ»Π΅Π΅ Π³Π»ΡΠ±ΠΎΠΊΠΈΠΉ Π²Π·Π³Π»ΡΠ΄ Π½Π° ΡΡΠΎΠ½ΡΠ΅Π½Π΄-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΡ, ΡΡΠΎΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°ΡΡΠΈΡΡΡΡ Π·Π½Π°Π½ΠΈΡ, ΠΏΠΎΠ»ΡΡΠ΅Π½Π½ΡΠ΅ Π² ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π΅ Π΄Π»Ρ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ .
ΠΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ :checked ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ, ΠΏΠΎΠΌΠ΅ΡΠ΅Π½ ΡΠ»Π°ΠΆΠΎΠΊ (<input type=»checkbox»>), ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ (<input type=»radio»>) ΠΈΠ»ΠΈ ΠΏΡΠ½ΠΊΡ ΡΠΏΠΈΡΠΊΠ° (<option>), ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½
ΠΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ :focus ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΡΠΈΠ»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ ΡΠΎΠΊΡΡ, ΠΈΠ½ΡΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π°ΠΊΡΠΈΠ²Π½ΡΠΌ Π΄Π»Ρ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ. Π ΠΏΡΠΈΠΌΠ΅ΡΡ, ΠΏΡΠΈ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΠΈ ΡΠΎΠΊΡΡΠ° Π² ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠΌ ΠΏΠΎΠ»Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Π±ΠΈΡΠ°ΡΡ ΡΠ΅ΠΊΡΡ, Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ Π²ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ ΡΠΊΡΠ°Π½Π½Π°Ρ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΠ°.
ΠΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ :hover ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΡΠΈΠ»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Π³ΠΎ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ. ΠΡΠΎ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ°ΠΌΡΡ ΡΠ°ΠΌΡΡ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΠΎΠ², ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΏΡΠΎΡΡΡΠΌΠΈ ΠΌΠ΅ΡΠΎΠ΄Π°ΠΌΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ°Π·Π½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ ΠΈ ΠΏΡΠΈΠ²Π»Π΅ΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°.
Bootstrap 4 ΠΊΠ°ΠΏΠΈΡΠ°Π»ΡΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΡΠ°Π±ΠΎΡΠ°Π» Bootstrap 3 ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ ΠΏΠΎΠΌΠ΅Π½ΡΠ» Π² Π΅Π³ΠΎ ΡΡΠ½ΠΊΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ. ΠΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π±ΡΠ»ΠΎ Π²Π½Π΅ΡΠ΅Π½ΠΎ Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ, ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ ΡΠ°Π±Π»ΠΈΡΡ, ΡΠΎΡΠΌΡ, ΡΠ΅ΡΠΊΠΈ, Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠ΅ ΡΠΏΠΈΡΠΊΠΈ, ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅.
Π€Π»Π΅ΠΊΡΠ±ΠΎΠΊΡΡ (Flexbox, ΠΎΡ flexible boxΒ β Π³ΠΈΠ±ΠΊΠΈΠ΅ Π±Π»ΠΎΠΊΠΈ) Π΄Π°ΡΡ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ Π½Π°Π΄ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΈΡ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ Π²Π½ΡΡΡΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°.
Π‘ΡΠΈΠ»Π΅Π²ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ clip-path β ΡΡΠΎ ΡΠΏΠΎΡΠΎΠ± ΠΎΡΠΊΠ°Π·Π°ΡΡΡΡ ΠΎΡ ΠΎΠ΄Π½ΠΎΠΎΠ±ΡΠ°Π·Π½ΡΡ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΡΡ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ², ΡΡΠ°Π΄ΠΈΡΠΈΠΎΠ½Π½ΠΎ Π°ΡΡΠΎΡΠΈΠΈΡΡΠ΅ΠΌΡΡ Ρ ΠΏΠ»ΠΎΡΠΊΠΈΠΌ, Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ.
Π‘ΡΡΡΠΊΡΡΡΠ½ΡΠ΅ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π²ΡΠ±ΡΠ°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΎΡΠ½ΠΎΠ²ΡΠ²Π°ΡΡΡ Π½Π° ΠΈΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π² Π΄Π΅ΡΠ΅Π²Π΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΈ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠΈ ΠΊ Π΄ΡΡΠ³ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ. Π ΠΏΡΠΈΠΌΠ΅ΡΡ, :first-child Π²ΡΠ±ΠΈΡΠ°Π΅Ρ ΠΏΠ΅ΡΠ²ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² Π³ΡΡΠΏΠΏΠ΅ Π±ΡΠ°ΡΡΠΊΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Ρ.Β Π΅., ΠΈΠΌΠ΅ΡΡΠΈΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ.
Β«Π£ΡΠΎΠΊΠΈ ΠΏΠΎ HTML ΠΈ CSSΒ» ΡΠ²Π»ΡΡΡΡΡ ΠΏΡΠΎΡΡΡΠΌ ΠΈ ΠΏΠΎΠ»Π½ΡΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎΠΌ, ΡΠ΅Π»ΡΡ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΠ»ΡΠΆΠΈΡ ΠΏΠΎΠΌΠΎΡΡ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΠΌ ΠΏΡΠΈ ΠΎΠ±ΡΡΠ΅Π½ΠΈΠΈ HTML ΠΈ CSS. ΠΠ·Π»Π°Π³Π°Ρ ΠΎΡΠ½ΠΎΠ²Ρ, ΡΡΠΎ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΡΠΎΡ ΠΎΠ΄ΠΈΡ ΡΠ΅ΡΠ΅Π· Π²ΡΠ΅ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΡΠ°ΠΏΡ ΠΏΡΠΎΠ΅ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ.
ΠΡΠ½ΠΎΠ²Ρ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΡ ΠΌΠ°ΠΊΠ΅ΡΠ° β ΠΠ·ΡΡΠΈΡΠ΅ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΡ
- ΠΡΠ΅Π΄ΡΠ΄ΡΡΠΈΠΉ
- ΠΠ±Π·ΠΎΡ: ΠΌΠ°ΠΊΠ΅Ρ CSS
ΠΡΠ»ΠΈ Π²Ρ ΡΠ°Π±ΠΎΡΠ°Π»ΠΈ Ρ ΡΡΠΈΠΌ ΠΌΠΎΠ΄ΡΠ»Π΅ΠΌ, Π·Π½Π°ΡΠΈΡ, Π²Ρ ΡΠΆΠ΅ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΠ»ΠΈΡΡ Ρ ΠΎΡΠ½ΠΎΠ²Π°ΠΌΠΈ ΡΠΎΠ³ΠΎ, ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π·Π½Π°ΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΌΠ°ΠΊΠ΅ΡΠ° CSS ΡΠ΅Π³ΠΎΠ΄Π½Ρ, Π° ΡΠ°ΠΊΠΆΠ΅ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Ρ Π±ΠΎΠ»Π΅Π΅ ΡΡΠ°ΡΡΠΌΠΈ CSS. ΠΡΠΎ Π·Π°Π΄Π°Π½ΠΈΠ΅ ΠΏΡΠΎΠ²Π΅ΡΠΈΡ Π²Π°ΡΠΈ Π·Π½Π°Π½ΠΈΡ ΠΏΡΡΠ΅ΠΌ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ².
ΠΡΠ΅Π΄ΠΏΠΎΡΡΠ»ΠΊΠΈ: | ΠΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΠΏΡΠΈΡΡΡΠΏΠ°ΡΡ ΠΊ ΡΡΠΎΠΉ ΠΎΡΠ΅Π½ΠΊΠ΅, Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΠ»ΠΈ ΡΠΆΠ΅ ΠΏΡΠΎΡΠ°Π±ΠΎΡΠ°ΡΡ Π²ΡΠ΅ ΡΡΠ°ΡΡΠΈ ΡΡΠΎΠ³ΠΎ ΠΌΠΎΠ΄ΡΠ»Ρ. |
---|---|
Π¦Π΅Π»Ρ: | ΠΠ»Ρ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ CSS Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Flexbox, Grid, Floating ΠΈ Positioning. |
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°ΡΠ°ΡΡ HTML, CSS ΠΈ Π½Π°Π±ΠΎΡ ΠΈΠ· ΡΠ΅ΡΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π·Π΄Π΅ΡΡ.
Π‘ΠΎΡ
ΡΠ°Π½ΠΈΡΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ HTML ΠΈ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ Π² ΠΊΠ°ΡΠ°Π»ΠΎΠ³Π΅ Π½Π° Π²Π°ΡΠ΅ΠΌ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ΅ ΠΈ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΠΏΠ°ΠΏΠΊΡ Ρ ΠΈΠΌΠ΅Π½Π΅ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
. ΠΡΠΈ ΠΎΡΠΊΡΡΡΠΈΠΈ ΡΠ°ΠΉΠ»Π° index.html
Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Ρ Π±Π°Π·ΠΎΠ²ΡΠΌ ΡΡΠΈΠ»Π΅ΠΌ, Π½ΠΎ Π±Π΅Π· ΠΌΠ°ΠΊΠ΅ΡΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ Π΄ΠΎΠ»ΠΆΠ½Π° Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½Π° ΡΠΈΡΡΠ½ΠΊΠ΅ Π½ΠΈΠΆΠ΅.
ΠΡΠ° Π½Π°ΡΠ°Π»ΡΠ½Π°Ρ ΡΠΎΡΠΊΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π²ΡΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΌΠ°ΠΊΠ΅ΡΠ°, ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌΠΎΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ Π² ΠΎΠ±ΡΡΠ½ΠΎΠΌ ΡΠ΅ΠΆΠΈΠΌΠ΅.
Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Ρ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ°ΠΊΠΎΠΉ ΡΠ°ΠΉΡ, ΠΊΠ°ΠΊ Glitch, ΡΡΠΎΠ±Ρ ΠΏΡΠΎΠ²Π΅ΡΡΠΈ ΠΎΡΠ΅Π½ΠΊΡ, Π²ΡΡΠ°Π²ΠΈΠ² HTML ΠΈ CSS. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π΅ΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΠΎΠ½Π»Π°ΠΉΠ½-ΡΠ΅Π΄Π°ΠΊΡΠΎΡ, Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π·Π°Π³ΡΡΠ·ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ Π·Π°ΠΌΠ΅Π½ΠΈΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π² src
Π°ΡΡΠΈΠ±ΡΡΡ, ΡΡΠΎΠ±Ρ ΡΠΊΠ°Π·Π°ΡΡ Π½Π° Π½ΠΎΠ²ΡΠ΅ ΠΌΠ΅ΡΡΠΎΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΡΠ»ΠΈ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠΎΠΌ Π²Π°ΠΌΠΈ ΠΎΠ½Π»Π°ΠΉΠ½-ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅ Π½Π΅Ρ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ CSS, Π½Π΅ ΡΡΠ΅ΡΠ½ΡΠΉΡΠ΅ΡΡ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ Π΅Π΅ Π² ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅:ΠΡΠ»ΠΈ Π²Ρ Π·Π°ΡΡΡΡΠ»ΠΈ,ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ΡΡ ΠΊ Π½Π°ΠΌ Π·Π° ΠΏΠΎΠΌΠΎΡΡΡ β ΡΠΌ. ΡΠ°Π·Π΄Π΅Π» Β«ΠΡΠ΅Π½ΠΊΠ° ΠΈΠ»ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½Π°Ρ ΠΏΠΎΠΌΠΎΡΡΒ» Π²Π½ΠΈΠ·Ρ ΡΡΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΠ°ΠΌ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΠ»ΠΈ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ HTML,Π±Π°Π·ΠΎΠ²ΡΠΉ CSS ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ β ΡΠ΅ΠΏΠ΅ΡΡ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΠΌΠ°ΠΊΠ΅Ρ Π΄Π»Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.
ΠΠ°ΡΠΈ Π·Π°Π΄Π°ΡΠΈ
Π’Π΅ΠΏΠ΅ΡΡ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΌΠ°ΠΊΠ΅Ρ. ΠΠ°Π΄Π°ΡΠΈ,ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ:
- Π§ΡΠΎΠ±Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Π² ΡΡΠ΄ Ρ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΌ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ΠΌ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ.
- ΠΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Π΄ΠΎΠ»ΠΆΠ½Π° ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ,Π° Π·Π°ΡΠ΅ΠΌ Π·Π°Π²ΠΈΡΠ°ΡΡ Π² Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ°,ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΎ Π΄ΠΎΡΡΠΈΠ³Π°Π΅Ρ Π΅Π³ΠΎ.
- ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π½ΡΡΡΠΈ ΡΡΠ°ΡΡΠΈ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΠΎΠ±ΡΡΠ½ΡΡΠΎ ΡΠ΅ΠΊΡΡΠΎΠΌ.
<Π°ΡΡΠΈΠΊΡΠ»>
ΠΈΠΠ»Π΅ΠΌΠ΅Π½ΡΡ
Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π² Π²ΠΈΠ΄Π΅ Π΄Π²ΡΡ ΡΡΠΎΠ»Π±ΡΠΎΠ². Π‘ΡΠΎΠ»Π±ΡΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ Π³ΠΈΠ±ΠΊΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°,ΡΡΠΎΠ±Ρ ΠΏΡΠΈ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΡΡΠΎΠ»Π±ΡΡ ΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΈΡΡ ΡΠΆΠ΅.- Π€ΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π² Π²ΠΈΠ΄Π΅ ΡΠ΅ΡΠΊΠΈ ΠΈΠ· Π΄Π²ΡΡ ΡΡΠΎΠ»Π±ΡΠΎΠ² Ρ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΊΠΎΠΌ Π² 1 ΠΏΠΈΠΊΡΠ΅Π»Ρ ΠΌΠ΅ΠΆΠ΄Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ.
ΠΠ°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ HTML,ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΡΠΎΡ ΠΌΠ°ΠΊΠ΅Ρ,ΠΈ ΠΌΠ΅ΡΠΎΠ΄Ρ,ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ:
- Flexbox
- Π‘Π΅ΡΠΊΠ°
- ΠΠ»Π°Π²Π°ΡΡΠΈΠΉ
- ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
ΠΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΠΈΠ· ΡΡΠΈΡ Π·Π°Π΄Π°Ρ,ΠΈ ΡΠ°ΡΡΠΎ Π½Π΅ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΈΠ»ΠΈ Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΡΠΏΠΎΡΠΎΠ±Π° ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ-ΡΠΎ. ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·Π½ΡΡ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΎΠ² ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠΈΡΠ΅,ΠΊΠ°ΠΊΠΎΠΉ ΠΈΠ· Π½ΠΈΡ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ. ΠΠ΅Π»Π°ΠΉΡΠ΅ Π·Π°ΠΌΠ΅ΡΠΊΠΈ Π²ΠΎ Π²ΡΠ΅ΠΌΡ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ°.
ΠΠ° ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΡΠ½ΠΈΠΌΠΊΠ΅ ΡΠΊΡΠ°Π½Π° ΠΏΠΎΠΊΠ°Π·Π°Π½ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠΎΠ³ΠΎ,ΠΊΠ°ΠΊ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ Π³ΠΎΡΠΎΠ²ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π°:
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΎΡΠ΅Π½ΠΈΡΡ ΡΠ²ΠΎΡ ΡΠ°Π±ΠΎΡΡ ΠΈΠ»ΠΈ Π·Π°ΡΡΡΡΠ»ΠΈ ΠΈ Ρ ΠΎΡΠΈΡΠ΅ ΠΎΠ±ΡΠ°ΡΠΈΡΡΡΡ Π·Π° ΠΏΠΎΠΌΠΎΡΡΡ:
- ΠΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ ΡΠ²ΠΎΡ ΡΠ°Π±ΠΎΡΡ Π² ΠΎΠ±ΡΠ΅Π΄ΠΎΡΡΡΠΏΠ½ΡΠΉ ΠΎΠ½Π»Π°ΠΉΠ½-ΡΠ΅Π΄Π°ΠΊΡΠΎΡ,ΡΠ°ΠΊΠΎΠΉ ΠΊΠ°ΠΊ CodePen,jsFiddle ΠΈΠ»ΠΈ Glitch.
- ΠΠ°ΠΏΠΈΡΠΈΡΠ΅ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅ Ρ ΠΏΡΠΎΡΡΠ±ΠΎΠΉ ΠΎΠ± ΠΎΡΠ΅Π½ΠΊΠ΅ ΠΈ/ΠΈΠ»ΠΈ ΠΏΠΎΠΌΠΎΡΠΈ Π² ΡΠ°Π·Π΄Π΅Π»Π΅ Β«ΠΠ±ΡΡΠ΅Π½ΠΈΠ΅Β» ΡΠΎΡΡΠΌΠ° MDN Discourse. ΠΠ°Ρ ΠΏΠΎΡΡ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²ΠΊΠ»ΡΡΠ°ΡΡ:
- ΠΠΏΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ,ΡΠ°ΠΊΠΎΠΉ ΠΊΠ°ΠΊ Β«Π’ΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΎΡΠ΅Π½ΠΊΠ° Π΄Π»Ρ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΡ ΡΡΠ½Π΄Π°ΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ°Β».
- ΠΠΎΠ΄ΡΠΎΠ±Π½Π°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ ΡΠΎΠΌ,ΡΡΠΎ Π²Ρ ΡΠΆΠ΅ ΠΏΡΠΎΠ±ΠΎΠ²Π°Π»ΠΈ ΠΈ ΡΡΠΎ Π²Ρ Ρ ΠΎΡΠ΅Π»ΠΈ Π±Ρ,ΡΡΠΎΠ±Ρ ΠΌΡ ΡΠ΄Π΅Π»Π°Π»ΠΈ;Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ,ΡΠΎΠΎΠ±ΡΠΈΡΠ΅ Π½Π°ΠΌ,Π΅ΡΠ»ΠΈ Π²Ρ Π·Π°ΡΡΡΡΠ»ΠΈ ΠΈ Π½ΡΠΆΠ΄Π°Π΅ΡΠ΅ΡΡ Π² ΠΏΠΎΠΌΠΎΡΠΈ ΠΈΠ»ΠΈ Ρ ΠΎΡΠΈΡΠ΅ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΎΡΠ΅Π½ΠΊΡ.
- Π‘ΡΡΠ»ΠΊΠ° Π½Π° ΠΏΡΠΈΠΌΠ΅Ρ,ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΎΡΠ΅Π½ΠΈΡΡ ΠΈΠ»ΠΈ Ρ ΠΊΠΎΡΠΎΡΡΠΌ Π²Π°ΠΌ Π½ΡΠΆΠ½Π° ΠΏΠΎΠΌΠΎΡΡ,Π² ΠΎΠ±ΡΠ΅Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠΌ ΠΎΠ½Π»Π°ΠΉΠ½-ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅ (ΠΊΠ°ΠΊ ΡΠΊΠ°Π·Π°Π½ΠΎ Π² ΡΠ°Π³Π΅ 1 Π²ΡΡΠ΅). ΠΡΠΎ Ρ ΠΎΡΠΎΡΠ°Ρ ΠΏΡΠ°ΠΊΡΠΈΠΊΠ° β ΠΎΡΠ΅Π½Ρ ΡΠ»ΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΌΠΎΡΡ ΠΊΠΎΠΌΡ-ΡΠΎ Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠΎΠΉ ΠΊΠΎΠ΄ΠΈΡΠΎΠ²Π°Π½ΠΈΡ,Π΅ΡΠ»ΠΈ Π²Ρ Π½Π΅ Π²ΠΈΠ΄ΠΈΡΠ΅ Π΅Π³ΠΎ ΠΊΠΎΠ΄.
- Π‘ΡΡΠ»ΠΊΠ° Π½Π° ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ Π·Π°Π΄Π°Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΡΡΡΠ°Π½ΠΈΡΡ ΠΎΡΠ΅Π½ΠΈΠ²Π°Π½ΠΈΡ,ΡΡΠΎΠ±Ρ ΠΌΡ ΠΌΠΎΠ³Π»ΠΈ Π½Π°ΠΉΡΠΈ Π²ΠΎΠΏΡΠΎΡ,ΠΏΠΎ ΠΊΠΎΡΠΎΡΠΎΠΌΡ Π²Π°ΠΌ Π½ΡΠΆΠ½Π° ΠΏΠΎΠΌΠΎΡΡ.
- ΠΡΠ΅Π΄ΡΠ΄ΡΡΠΈΠΉ
- ΠΠ±Π·ΠΎΡ:ΠΌΠ°ΠΊΠ΅Ρ CSS
- ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² ΠΌΠ°ΠΊΠ΅Ρ CSS
- ΠΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΠΏΠΎΡΠΎΠΊ
- Π€Π»Π΅ΠΊΡΠ±ΠΎΠΊΡ
- Π‘Π΅ΡΠΊΠ°
- ΠΠΎΠΏΠ»Π°Π²ΠΊΠΈ
- ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
- ΠΠ°ΠΊΠ΅Ρ Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ
- ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½
- Π ΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ Π΄Π»Ρ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ ΠΏΠΎ ΠΌΠ΅Π΄ΠΈΠ°Π·Π°ΠΏΡΠΎΡΠ°ΠΌ
- Π£ΡΡΠ°ΡΠ΅Π²ΡΠΈΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ
- ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΡΡΠ°ΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ²
- ΠΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ°
ΠΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅: 000Z">11 ΡΠ΅Π½ΡΡΠ±ΡΡ 2022 Π³. ,ΡΡΠ°ΡΡΠ½ΠΈΠΊΠ°ΠΌΠΈ MDN
ΠΠΎΠ²ΡΠΎΡΠ½ΠΎΠ΅ ΠΈΠ·ΡΡΠ΅Π½ΠΈΠ΅ ΠΌΠ°ΠΊΠ΅ΡΠ° CSS:ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ
ΠΡΠ»ΠΈ Π²Ρ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΡΠ΅,ΡΡΠΎ Π±ΠΎΡΠ΅ΡΠ΅ΡΡ Ρ ΠΌΠ°ΠΊΠ΅ΡΠΎΠΌ CSS,ΡΠΊΠΎΡΠ΅Π΅ Π²ΡΠ΅Π³ΠΎ,Π²Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅ΡΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ²,ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ Π΄Π΅Π»Π°ΡΡ ΡΠ°ΠΌΠΈ.
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅ΡΠΈΠΈ ΠΏΡΠΎΡΡΡΡ ΡΠΎΡΡΠ°Π²Π½ΡΡ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² Every Layout Π½Π°ΡΡΠΈΡ Π²Π°Ρ Π»ΡΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ Π°Π»Π³ΠΎΡΠΈΡΠΌΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² ΠΈ CSS.
ΠΡΠΏΠΈΡΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ Π·Π° 69 Π΄ΠΎΠ»Π»Π°ΡΠΎΠ²
Π§ΠΈΡΠ°ΡΡ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ ΡΡΠ΄ΠΈΠΌΠ΅Π½ΡΡ ΠΈ Π°ΠΊΡΠΈΠΎΠΌΡ
Π£ΠΆΠ΅ ΠΏΡΠΈΠΎΠ±ΡΠ΅Π»ΠΈ Every Layout,Π½ΠΎ ΠΏΠΎΡΠ΅ΡΡΠ»ΠΈ Π΄ΠΎΡΡΡΠΏ?
ΠΠ΅ Π±Π΅ΡΠΏΠΎΠΊΠΎΠΉΡΠ΅ΡΡ. ΠΠΎΠ±Π°Π²ΡΡΠ΅ Π°Π΄ΡΠ΅Ρ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠΉ ΠΏΠΎΡΡΡ ,ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ Π΄Π»Ρ ΠΏΠΎΠΊΡΠΏΠΊΠΈ Every Layout ,ΠΈ ΠΌΡ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎ ΠΎΡΠΏΡΠ°Π²ΠΈΠΌ Π²Π°ΠΌ ΡΡΡΠ»ΠΊΡ Π΄Π»Ρ Π΄ΠΎΡΡΡΠΏΠ°.
ΠΠ°Ρ Π°Π΄ΡΠ΅Ρ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠΉ ΠΏΠΎΡΡΡEvery Layout ΠΏΠΎΠΌΠΎΠ³ ΡΡΡΡΡΠ°ΠΌ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² ΠΈ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΉ ΡΠΏΡΠΎΡΡΠΈΡΡ ΠΌΠ°ΠΊΠ΅Ρ CSS Π² ΡΠ²ΠΎΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°Ρ
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π°Π»Π³ΠΎΡΠΈΡΠΌΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΌΠ°ΠΊΠ΅ΡΠ° ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΠΎΡΠΊΠ°Π· ΠΎΡ @media
ΡΠΎΡΠΊΠΈ ΠΎΡΡΠ°Π½ΠΎΠ²Π°,Β«ΠΌΠ°Π³ΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΠΈΡΠ»Π°Β» ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΠΏΡΠΈΠ΅ΠΌΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎ-Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΡΡ
ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΠΌΠ°ΠΊΠ΅ΡΠ°.
ΠΠ°ΡΠΈ Π±ΡΠ΄ΡΡΠΈΠ΅ ΡΠΈΡΡΠ΅ΠΌΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π±ΡΠ΄ΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΡΠΌΠΈ,Ρ Π±ΠΎΠ»Π΅Π΅ ΠΊΡΠ°ΡΠΊΠΈΠΌ ΠΊΠΎΠ΄ΠΎΠΌ ΠΈ Π±ΠΎΠ»Π΅Π΅ Π³ΠΈΠ±ΠΊΠΈΠΌΠΈ Π² ΡΡΠΊΠ°Ρ Π²Π°ΡΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΠΈ ΠΈΡ ΡΡΡΡΠΎΠΉΡΡΠ². ΠΠ°ΠΆΠ΄ΡΠΉ Layout ΡΠ΅ΠΏΠ΅ΡΡ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² 3-ΠΌ ΠΈΠ·Π΄Π°Π½ΠΈΠΈ ΠΈ ΠΏΠΎΠΌΠΎΠ³ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΌ ΠΈΠ· ΠΊΡΡΠΏΠ½Π΅ΠΉΡΠΈΡ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΉ Π² ΠΌΠΈΡΠ΅ Π΄ΠΎΡΡΠΈΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΡΠΎΠ³ΠΎ.
ΠΡΡΡΡ ΡΡΠΈ ΡΡΠ°ΡΡΠ»ΠΈΠ²ΡΠ΅ Π»ΡΠ΄ΠΈ ΡΠ°ΡΡΠΊΠ°ΠΆΡΡ Π²Π°ΠΌ,ΠΊΠ°ΠΊ ΠΈΠΌ ΠΏΠΎΠΌΠΎΠ³ Every Layout
ΠΠ΅Π²ΠΈΠ½ ΠΠ°ΡΡΠ»Π»
Π― Π½Π΅ ΠΌΠΎΠ³Ρ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°ΡΡ Every Layout Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ. Π€Π°Π½ΡΠ°ΡΡΠΈΡΠ΅ΡΠΊΠΈΠΉ Π΄Π»Ρ Π²ΡΠ΅Ρ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ²,ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΡΠ²ΠΎΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°Ρ ,ΠΎΡΠ΅Π²ΠΈΠ΄Π½ΠΎ,Π½ΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΈ Π΄Π»Ρ ΡΠΎΠ³ΠΎ,ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Ρ ΡΠ·Π½Π°Π΅ΡΠ΅ ΠΎ flexbox ΠΈ CSS Π² ΡΠ΅Π»ΠΎΠΌ.
ΠΠΌΠΈ Π§Π΅Π½
CSS β ΠΎΠ΄Π½Π° ΠΈΠ· Π½Π΅ΠΌΠ½ΠΎΠ³ΠΈΡ Π²Π΅ΡΠ΅ΠΉ,Ρ ΠΊΠΎΡΠΎΡΡΠΌΠΈ ΠΌΠ½Π΅ ΠΊΠΎΠΌΡΠΎΡΡΠ½ΠΎ,Π½ΠΎ Ρ Π²ΡΠ΅ Π΅ΡΠ΅ ΡΡΡΡΡ Π’ΠΠΠΠΠ,ΡΠΈΡΠ°Ρ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ. Π’Π°ΠΊΠΎΠΉ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΡΠ΅ΡΡΡΡ!
ΠΠΆΠΎΡ Π’ΡΠΌΠ°Ρ
ΠΠ°ΠΆΠ΅ Π΄Π²Π° Π³ΠΎΠ΄Π° ΡΠΏΡΡΡΡ Every Layout ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΠΎΡΡΠ°Π΅ΡΡΡ Π»ΡΡΡΠΈΠΌ ΡΠ΅ΡΡΡΡΠΎΠΌ Π΄Π»Ρ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΡ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ² ΠΌΠ°ΠΊΠ΅ΡΠΎΠ².ΠΡΠΎ ΠΏΡΠΎΠΈΠ·Π²Π΅Π»ΠΎ ΡΠ΅Π²ΠΎΠ»ΡΡΠΈΡ Π² Π½Π°ΡΠ΅ΠΉ ΡΠΈΡΡΠ΅ΠΌΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π½Π° BBC. Π― Π²ΡΠ΅Π³Π΄Π° Π΄Π΅Π»ΡΡΡ ΠΈΠΌ Ρ ΠΊΠΎΠ»Π»Π΅Π³Π°ΠΌΠΈ,ΠΊΠΎΡΠΎΡΡΠ΅ Ρ ΠΎΡΡΡ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΎΠΏΡΡΠ° ΡΠ°Π±ΠΎΡΡ Ρ CSS.
ΠΠ°ΡΠΈΠ°Π½Π° ΠΠΎΡΡΠ΅Ρ Π ΡΡΠ΄Π°
ΠΡΠΎ Π»ΡΠ±ΠΎΠ²Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² Π² ΡΠΎΡΠΌΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π° ΠΏΠΎ ΡΠ΅ΡΡΡΡΠ°ΠΌ,ΠΈ Π²Π°ΠΌ Π±ΡΠ»ΠΎ Π±Ρ Π½Π΅ΠΏΠ»ΠΎΡ ΠΎ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΡΡΡ Ρ Π½ΠΈΠΌ ΠΈ ΠΏΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ ΠΈΠΌ. ΠΠ°. ΠΠΠ―Π’Π¬ Π’ΠΠΠ. Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ Π₯Π΅ΠΉΠ΄ΠΎΠ½Ρ ΠΈ ΠΠ½Π΄ΠΈ Π·Π° ΡΡΠΎ ΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π½ΠΈΡΠ΅Π²ΠΎΠ³ΠΎ ΠΈΡΠΊΡΡΡΡΠ²Π°.
ΠΠΆΠ΅ΡΡ ΠΠ΅ΠΊ
Every Layout β ΡΠ°Π½ΡΠ°ΡΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠ΅ΡΡΡΡ,ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΡΠΏΡΠ°Π²ΠΎΡΠ½ΠΈΠΊ,Π° ΡΠ°ΠΊΠΆΠ΅ ΠΎΠ½ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠΌΠΎΠ³ ΠΌΠ½Π΅ ΠΏΠΎΠ½ΡΡΡ ΡΡΡΡΠΊΡΡΡΡ ΠΈ ΡΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΠΎ ΡΡΠΈΠ»Ρ,ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΠΏΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ².
ΠΡΠΈΡ Π£ΠΈΠΊΠ»ΠΈ
ΠΠ°ΠΆΠ΄ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ ΠΈΠΌΠ΅Π΅Ρ ΡΠ°Π½ΡΠ°ΡΡΠΈΡΠ΅ΡΠΊΠΈΠΉ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ,Π½ΠΎ ΠΏΠΎΠ»Π½Π°Ρ ΡΡΠΎΠΈΠΌΠΎΡΡΡ Π²ΡΠ΅Ρ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΠΎΠ² (ΠΊΠ½ΠΈΠ³Π°,ΡΠ°ΠΉΡ,ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ) ΠΏΡΠΈΠ½Π΅ΡΠ»Π° ΠΌΠ½Π΅ Π°Π±ΡΡΡΠ΄Π½ΠΎ Π²ΡΡΠΎΠΊΡΡ ΡΠ΅Π½ΡΠ°Π±Π΅Π»ΡΠ½ΠΎΡΡΡ ΠΈΠ½Π²Π΅ΡΡΠΈΡΠΈΠΉ.Π― ΠΏΠΎΡΡΠ°ΡΠΈΠ» ΠΌΠ΅Π½ΡΡΠ΅ ΡΠ°ΡΠ° Π½Π° ΠΎΠΏΠ»Π°ΡΡ ΠΊΠΎΠ½ΡΠ°Π»ΡΠΈΠ½Π³Π°,ΠΈ ΡΡΠΎ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΈΠ»ΠΎ ΠΌΠ΅Π½Ρ β ΠΏΠΎΠ΄Π°ΡΠΎΠΊ,ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°Π΅Ρ ΠΏΡΠΈΠ½ΠΎΡΠΈΡΡ ΠΏΠΎΠ»ΡΠ·Ρ. ΠΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Π°Ρ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΡ
Π. Π―. ΠΠ°ΡΠΊΠΎΠ²ΠΈΡ
ΠΠ°ΡΠ°Π» Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΡ Π² 1997 Π³ΠΎΠ΄Ρ ΠΈ Ρ Π³ΠΎΠ΄Π°ΠΌΠΈ ΡΠ΅ΡΠ°Π» ΠΎΠ΄Π½ΠΈ ΠΈ ΡΠ΅ ΠΆΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½Π½ΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΠΉ. ΠΠ°ΠΆΠ΅ ΠΏΠΎ ΠΏΡΠΎΡΠ΅ΡΡΠ²ΠΈΠΈ ΡΡΠΎΠ»ΡΠΊΠΈΡ Π»Π΅Ρ ΡΠ°ΠΊΠΈΠ΅ ΡΡΡΠ»ΠΊΠΈ,ΠΊΠ°ΠΊ Every Layout ΠΎΡ Andy ΠΈ Heydon,ΡΠ²Π»ΡΡΡΡΡ Π±Π΅ΡΡΠ΅Π½Π½ΡΠΌ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΠΎΠΌ Π΄Π»Ρ ΠΏΠ΅ΡΠ΅ΡΠΈΡΡΠ²Π°Π½ΠΈΡ ΠΈ ΡΠ»ΡΡΡΠ΅Π½ΠΈΡ.
ΠΡΡΡΠΈΠ΅ ΠΏΡΠ°ΠΊΡΠΈΠΊΠΈ ΡΠ°Π±ΠΎΡΠ°ΡΡ
ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π»ΠΈΡΡΠ΅Π»ΡΠ½ΡΠ΅ Π»ΡΠ΄ΠΈ Π½Π°Π·Π²Π°Π»ΠΈ CSS Π΄Π΅ΡΠ΅ΠΊΡΠ½ΠΎΠΉ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠ΅ΠΉ. ΠΠ½ΠΈ ΠΏΠΎΠΎΡΡΡΠ»ΠΈ Π°Π²ΡΠΎΡΠΎΠ² CSS ΠΊ Π³ΡΡΠ±ΠΎΠΉ ΡΠΈΠ»Π΅ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ,ΡΡΠΎΠ±Ρ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ CSS ΠΏΠΎ ΠΌΠ°ΠΊΡΠΈΠΌΡΠΌΡ.
Π Π½Π°ΡΠΈΡ Π²Π²ΠΎΠ΄Π½ΡΡ Π³Π»Π°Π²Π°Ρ ,Β«Π·Π°ΡΠ°ΡΠΊΠ°Ρ Β»,ΠΌΡ ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΠΌ Π²Π°Ρ Ρ ΡΠ΅ΠΌ,Π½Π°ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΌΠ½ΡΠΌ ΠΈ ΡΠ»Π΅Π³Π°Π½ΡΠ½ΡΠΌ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΉ CSS. Π’ΠΎ,ΡΡΠΎ Π²Ρ ΡΠ·Π½Π°Π΅ΡΠ΅ Π² ΡΡΠΈΡ Π³Π»Π°Π²Π°Ρ ,Π·Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ 12 ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½Π½ΡΠΌ ΡΠ΅ΡΠ΅Π½ΠΈΡΠΌ ΠΌΠΎΠ΄ΡΠ»ΡΠ½ΠΎΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ,Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΡ Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡΠΎΠ² ΠΊΠΎΠ΄Π° ΠΈ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ Π² Π²ΠΈΠ΄Π΅ ΡΠ΄ΠΎΠ±Π½ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΡ Π½Π°ΡΡΠΈΠΌ Π²Π°Ρ ΠΏΠ΅ΡΠ΅Π΄ΠΎΠ²ΡΠΌ ΠΌΠ΅ΡΠΎΠ΄Π°ΠΌ,ΠΊΠΎΡΠΎΡΡΠ΅ Π³Π°ΡΠ°Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π²Π°Ρ Π»ΡΡΡΠΈΠΌ,Π²ΡΠ΅ΡΡΠΎΡΠΎΠ½Π½ΠΈΠΌ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΡΠΎΠΌ CSS,Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ,ΡΠ²Π»ΡΠ΅ΡΠ΅ΡΡ Π»ΠΈ Π²Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠΌ ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ ΡΡΠ΅ΠΊΠ°,Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠΎΠΌ,Π±ΡΠΊΠ΅Π½Π΄-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠΌ ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ ${yourJobTitleHere}
.
Π§ΠΈΡΠ°ΡΡ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ ΡΡΠ΄ΠΈΠΌΠ΅Π½ΡΡ ΠΈ Π°ΠΊΡΠΈΠΎΠΌΡ
Π‘ΡΠ΅ΠΊ
ΡΠΈΡΠ°ΡΡΠ΄Π»Ρ
Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ
ΠΠΎΡΠΎΠ±ΠΊΠ°
Π¦Π΅Π½ΡΡ
ΠΠ»Π°ΡΡΠ΅Ρ
ΠΠΎΠΊΠΎΠ²Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ
ΡΠΈΡΠ°ΡΡΠ΄Π»Ρ
Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ
ΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ
ΠΡΡΡΠΊΠ°
ΡΠΈΡΠ°ΡΡΠ΄Π»Ρ
Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ
Π‘Π΅ΡΡ
Π Π°ΠΌΠΊΠ°
ΠΠ°ΡΡΡΠΊΠ°
Π‘Π°ΠΌΠΎΠ·Π²Π°Π½Π΅Ρ
ΠΠ½Π°ΡΠΎΠΊ
ΠΠΎΠ·Π½Π°ΠΊΠΎΠΌΡΡΠ΅ΡΡ Ρ Π°Π²ΡΠΎΡΠ°ΠΌΠΈ,ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΎΠ·Π΄Π°Π»ΠΈ Π΄Π»Ρ Π²Π°Ρ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ
Π₯Π΅ΠΉΠ΄ΠΎΠ½ ΠΠΈΠΊΠ΅ΡΠΈΠ½Π³
Π₯Π΅ΠΉΠ΄ΠΎΠ½ β ΡΡΠΎΠ½ΡΠ΅Π½Π΄-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΈ ΡΠ΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΏΠΈΡΠ°ΡΠ΅Π»Ρ,ΡΠΏΠ΅ΡΠΈΠ°Π»ΠΈΠ·ΠΈΡΡΡΡΠΈΠΉΡΡ Π½Π° ΠΈΠ½ΠΊΠ»ΡΠ·ΠΈΠ²Π½ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠΎΠ².