[HTML Academy] ΠΠ½Π»Π°ΠΉΠ½-ΠΊΡΡΡ Β«ΠΠ½Π°ΡΠΎΠΌΠΈΡ CSS-ΠΊΠ°ΡΠΊΠ°Π΄Π°Β» (2022)
[HTML Academy] ΠΠ½Π»Π°ΠΉΠ½-ΠΊΡΡΡ Β«ΠΠ½Π°ΡΠΎΠΌΠΈΡ CSS-ΠΊΠ°ΡΠΊΠ°Π΄Π°Β» (2022)
ΠΠ· ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΡΡΠΎΠ½ΡΠ΅Π½Π΄Π΅ΡΠ° Π² ΡΠ΅Ρ Π»ΠΈΠ΄Π°
ΠΡΡΡ ΡΠΎΠ·Π΄Π°Π½ Π΄Π»Ρ ΠΏΡΠ°ΠΊΡΠΈΠΊΡΡΡΠΈΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Ρ ΠΎΡΡΡ ΠΏΠΎΠ²ΡΡΠΈΡΡ ΡΠ²ΠΎΡ ΡΠΊΡΠΏΠ΅ΡΡΠΈΠ·Ρ ΠΈ ΠΏΡΠΎΠΊΠ°ΡΠ°ΡΡ ΠΈΠ½ΠΆΠ΅Π½Π΅ΡΠ½ΠΎΠ΅ ΠΌΡΡΠ»Π΅Π½ΠΈΠ΅. Π ΠΊΡΡΡΠ΅ Π΄ΠΎΡΠΊΠΎΠ½Π°Π»ΡΠ½ΠΎ ΡΠ°Π·Π±ΠΈΡΠ°ΡΡΡΡ ΡΡΠ½Π΄Π°ΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΡΠ΅ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌΡ CSS: ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠ° Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ (value processing), ΠΊΠ°ΡΠΊΠ°Π΄ ΠΈ Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠ΅.
ΠΡΠΎΠ³ΡΠ°ΠΌΠΌΠ° ΠΊΡΡΡΠ°
ΠΡΡΡ ΠΏΡΠΎΡ ΠΎΠ΄ΠΈΡ Π² Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΠΎΠΌ ΡΠΎΡΠΌΠ°ΡΠ΅. ΠΡΠΎ Π·Π½Π°ΡΠΈΡ, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΡΠ°ΡΡ ΠΎΠ±ΡΡΠ΅Π½ΠΈΠ΅ Π² Π»ΡΠ±ΠΎΠ΅ Π²ΡΠ΅ΠΌΡ ΠΈ Π΄Π²ΠΈΠ³Π°ΡΡΡΡ ΠΏΠΎ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ΅ Ρ ΠΊΠΎΠΌΡΠΎΡΡΠ½ΠΎΠΉ Π²Π°ΠΌ ΡΠΊΠΎΡΠΎΡΡΡΡ.
ΠΡΠΎΡ ΠΎΠΆΠ΄Π΅Π½ΠΈΠ΅ ΠΊΡΡΡΠ° Π·Π°ΠΉΠΌΡΡ ΠΎΡ 2 Π΄ΠΎ 3 Π½Π΅Π΄Π΅Π»Ρ, Π΅ΡΠ»ΠΈ Π²Ρ Π³ΠΎΡΠΎΠ²Ρ Π·Π°Π½ΠΈΠΌΠ°ΡΡΡΡ 5 ΡΠ°ΡΠΎΠ² Π² Π½Π΅Π΄Π΅Π»Ρ.
Π Π°Π·Π΄Π΅Π» 1. ΠΠ±ΡΠ°Π±ΠΎΡΠΊΠ° Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΈ ΠΊΠ°ΡΠΊΠ°Π΄
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΏΠΎΠ½ΡΡΠΈΠ΅ ΠΊΠ°ΡΠΊΠ°Π΄Π° ΠΈ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ. Π Π°Π·Π±Π΅ΡΡΠΌΡΡ, ΠΊΠ°ΠΊ Π±ΡΠ°ΡΠ·Π΅Ρ Π²ΡΡΠΈΡΠ»ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΈ Π² ΠΊΠ°ΠΊΠΎΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ ΠΊΠ°ΡΠΊΠ°Π΄.
Π’Π΅ΠΎΡΠΈΡ
ΠΠΎΠ½ΡΡΠΈΠ΅ ΠΊΠ°ΡΠΊΠ°Π΄Π°.
ΠΡΡΠΈΡΠ»Π΅Π½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ: ΡΡΠ°Π΄ΠΈΠΈ declared, cascaded, specified, computed, used ΠΈ actual.
ΠΡΠ°ΠΊΡΠΈΠΊΠ°
ΠΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΠ΅ ΡΠ΅ΡΡΡ ΠΏΠΎ ΡΠ΅ΠΌΠ°ΠΌ ΡΠ°Π·Π΄Π΅Π»Π°
Π Π°Π·Π΄Π΅Π» 2. Π€ΠΈΠ»ΡΡΡΠ°ΡΠΈΡ
ΠΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΎ ΡΡΠΈΠ»ΡΡ Π°Π²ΡΠΎΡΠ°, ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΎ Β«Π²ΠΈΡΡΡΠ°Π»ΡΠ½ΡΡ Β» ΡΡΠΈΠ»ΡΡ . Π Π°Π·Π±Π΅ΡΡΠΌ, ΠΊΠ°ΠΊ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΏΠ°ΡΡΠΈΡ CSS-ΠΊΠΎΠ΄, ΡΠΈΠ»ΡΡΡΡΠ΅Ρ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΡ ΠΈ ΠΎΡΠ±ΠΈΡΠ°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ. ΠΠΎΡΠ½ΡΠΌΡΡ Π²Π°Π»ΠΈΠ΄Π½ΠΎΡΡΠΈ, ΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠ², ΠΏΡΠ΅Π²Π΄ΠΎΠ½ΠΈΠΌΠΎΠ², ΡΡΠ»ΠΎΠ²Π½ΡΡ ΠΏΡΠ°Π²ΠΈΠ» ΠΈ ΠΏΠΎΠΈΡΠΊΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² DOM-Π΄Π΅ΡΠ΅Π²Π΅.
Π’Π΅ΠΎΡΠΈΡ
ΠΡΡΠΎΡΠ½ΠΈΠΊΠΈ ΡΡΠΈΠ»Π΅ΠΉ: Π°Π²ΡΠΎΡΡΠΊΠΈΠ΅, Π±ΡΠ°ΡΠ·Π΅ΡΠ½ΡΠ΅ ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠ΅.
ΠΠ°ΡΡΠΈΠ½Π³ ΠΈ ΡΠΈΠ»ΡΡΡΠ°ΡΠΈΡ.
ΠΡΠ°ΠΊΡΠΈΠΊΠ°
ΠΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΠ΅ ΡΠ΅ΡΡΡ ΠΏΠΎ ΡΠ΅ΠΌΠ°ΠΌ ΡΠ°Π·Π΄Π΅Π»Π°
Π Π°Π·Π΄Π΅Π» 3. ΠΠ°ΡΠΊΠ°Π΄
ΠΠ΅ΡΠ°Π»ΡΠ½ΠΎ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΏΠΎΡΡΠ΄ΠΎΠΊ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ² ΠΈ ΠΊΠ°ΡΠΊΠ°Π΄ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. Π Π°Π·Π±Π΅ΡΡΠΌΡΡ Ρ ΡΠ΅ΠΌ, ΠΊΠ°ΠΊ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΡΠ°ΡΡΡΡ ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ½ΠΎΡΡΠΈ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ² ΠΈ ΠΊΠ°ΠΊΡΡ ΡΠΎΠ»Ρ ΠΎΠ½Π° ΠΈΠ³ΡΠ°Π΅Ρ Π² ΠΊΠ°ΡΠΊΠ°Π΄Π΅.
Π’Π΅ΠΎΡΠΈΡ
ΠΠ΅ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·Π±ΠΎΡ Π°Π»Π³ΠΎΡΠΈΡΠΌΠ° ΠΊΠ°ΡΠΊΠ°Π΄Π°.
ΠΠΎΡΡΠ΄ΠΎΠΊ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΡΡΠΈΠ»Π΅Π²ΡΡ ΡΠ°ΠΉΠ»ΠΎΠ² ΠΈ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ².
ΠΠΎΡΡΠ΄ΠΎΠΊ ΠΊΠ°ΡΠΊΠ°Π΄ΠΈΡΠΎΠ²Π°Π½ΠΈΡ: Π² ΠΊΠ°ΠΊΠΎΠΉ ΠΎΡΠ΅ΡΡΠ΄Π½ΠΎΡΡΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΡΡΠΈΠ»Π΅Π²ΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π°. ΠΠ½Π½ΠΎΡΠ°ΡΠΈΡ !important.
CΠ΅Π»Π΅ΠΊΡΠΎΡΡ ΠΈ ΡΠ°ΡΡΡΡ ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ½ΠΎΡΡΠΈ.
ΠΡΠ°ΠΊΡΠΈΠΊΠ°
ΠΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΠ΅ ΡΠ΅ΡΡΡ ΠΏΠΎ ΡΠ΅ΠΌΠ°ΠΌ ΡΠ°Π·Π΄Π΅Π»Π°
Π Π°Π·Π΄Π΅Π» 4. ΠΠΎΠ»ΡΡΠ΅Π½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ
ΠΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ, Π΅ΡΠ»ΠΈ Π½Π΅ Π·Π°Π΄Π°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²Π½ΠΎ. Π Π°Π·Π±Π΅ΡΡΠΌΡΡ Ρ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΠΌΡΠΌΠΈ ΠΈ Π½Π΅Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΠΌΡΠΌΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΎΠΌΠ½ΡΡ ΡΠ²ΠΎΠΉΡΡΠ² ΠΈ ΡΠΏΠΎΡΠΎΠ±Ρ ΠΏΠΎΠ²Π΅ΡΠ½ΡΡΡ ΠΊΠ°ΡΠΊΠ°Π΄ Π²ΡΠΏΡΡΡ.
Π’Π΅ΠΎΡΠΈΡ
ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅ΠΌΡΠ΅ ΠΈ Π½Π΅Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΠΌΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°.
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.
ΠΠ°ΡΡΠΎΠΌΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°.
ΠΡΠΈΠ½ΡΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠ΅. ΠΠ»ΡΡΠ΅Π²ΠΎΠ΅ ΡΠ»ΠΎΠ²ΠΎ inherit.
ΠΡΠΊΠ°Ρ ΠΊΠ°ΡΠΊΠ°Π΄Π°. ΠΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ»ΠΎΠ²Π° revert, unset, initial.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ all.
ΠΡΠ°ΠΊΡΠΈΠΊΠ°
ΠΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΠ΅ ΡΠ΅ΡΡΡ ΠΏΠΎ ΡΠ΅ΠΌΠ°ΠΌ ΡΠ°Π·Π΄Π΅Π»Π°
Π Π°Π·Π΄Π΅Π» 5. ΠΡΡΠΈΡΠ»Π΅Π½ΠΈΡ
Π Π°Π·Π±Π΅ΡΡΠΌΡΡ, ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ Ρ ΠΊΠ°ΡΠΊΠ°Π΄ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ Π΄Π°Π»ΡΡΠ΅, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ Π²ΡΡΠΈΡΠ»ΡΡΡΡΡ Π² ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ Π΄Π»Ρ ΠΎΡΡΠΈΡΠΎΠ²ΠΊΠΈ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅.
Π’Π΅ΠΎΡΠΈΡ
ΠΡΠ°ΠΏΡ Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΠΉ: computed, used, actual value.
ΠΡΠ°ΠΊΡΠΈΠΊΠ°
ΠΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΠ΅ ΡΠ΅ΡΡΡ ΠΏΠΎ ΡΠ΅ΠΌΠ°ΠΌ ΡΠ°Π·Π΄Π΅Π»Π°
Π Π°Π·Π΄Π΅Π» 6. ΠΠ°ΡΠΊΠ°Π΄ Π½Π° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅
ΠΠΎΡΠ°Π±ΠΎΡΠ°Π΅ΠΌ Ρ ΠΊΠ°ΡΠΊΠ°Π΄ΠΎΠΌ Π½Π° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅. Π ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΡΡ ΠΏΠΎΡΠ°Π³ΠΎΠ²ΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡΡ ΡΠ°Π·Π±Π΅ΡΡΠΌ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ ΡΠΈΠΏΠΎΠ²ΡΡ ΠΏΡΠΈΠ΅ΠΌΠΎΠ² ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ².
Π’Π΅ΠΎΡΠΈΡ
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ font-size-adjust.
Π‘ΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° ΡΠΏΠΈΠ½Π½Π΅ΡΠ°.
Π‘ΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ ΠΊΠ°ΡΡΠΎΠΌΠ½ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ².
Β«ΠΠΈΠΏΠΊΠΈΠΉΒ» ΠΏΠΎΠ΄Π²Π°Π» ΡΡΡΠ°Π½ΠΈΡΡ.
Π€ΡΠ½ΠΊΡΠΈΠΈ Π΄Π»Ρ Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΠΉ Π² CSS.
ΠΡΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΈΡΠΏΡΡΠ°Π½ΠΈΠ΅
ΠΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ Π·Π°Π΄Π°Π½ΠΈΠ΅ β ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ Π°Π»Π³ΠΎΡΠΈΡΠΌ ΠΊΠ°ΡΠΊΠ°Π΄Π° Π½Π° JavaScript, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π²ΡΠ΅ ΠΏΠΎΠ»ΡΡΠ΅Π½Π½ΡΠ΅ Π·Π½Π°Π½ΠΈΡ ΠΎ CSS-ΠΊΠ°ΡΠΊΠ°Π΄Π΅.
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΡΠ΅Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΡΠΈΡΡΠ΅ΠΌΠ° ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ.
ΠΠ£ΠΠΠ’Π¬
https://l.htmlacademy.ru/anatomy-of-cascade
ΠΠ· ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΡΡΠΎΠ½ΡΠ΅Π½Π΄Π΅ΡΠ° Π² ΡΠ΅Ρ Π»ΠΈΠ΄Π°
ΠΡΡΡ ΡΠΎΠ·Π΄Π°Π½ Π΄Π»Ρ ΠΏΡΠ°ΠΊΡΠΈΠΊΡΡΡΠΈΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Ρ ΠΎΡΡΡ ΠΏΠΎΠ²ΡΡΠΈΡΡ ΡΠ²ΠΎΡ ΡΠΊΡΠΏΠ΅ΡΡΠΈΠ·Ρ ΠΈ ΠΏΡΠΎΠΊΠ°ΡΠ°ΡΡ ΠΈΠ½ΠΆΠ΅Π½Π΅ΡΠ½ΠΎΠ΅ ΠΌΡΡΠ»Π΅Π½ΠΈΠ΅. Π ΠΊΡΡΡΠ΅ Π΄ΠΎΡΠΊΠΎΠ½Π°Π»ΡΠ½ΠΎ ΡΠ°Π·Π±ΠΈΡΠ°ΡΡΡΡ ΡΡΠ½Π΄Π°ΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΡΠ΅ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌΡ CSS: ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠ° Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ (value processing), ΠΊΠ°ΡΠΊΠ°Π΄ ΠΈ Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠ΅.
ΠΡΠΎΠ³ΡΠ°ΠΌΠΌΠ° ΠΊΡΡΡΠ°
ΠΡΡΡ ΠΏΡΠΎΡ ΠΎΠ΄ΠΈΡ Π² Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΠΎΠΌ ΡΠΎΡΠΌΠ°ΡΠ΅. ΠΡΠΎ Π·Π½Π°ΡΠΈΡ, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΡΠ°ΡΡ ΠΎΠ±ΡΡΠ΅Π½ΠΈΠ΅ Π² Π»ΡΠ±ΠΎΠ΅ Π²ΡΠ΅ΠΌΡ ΠΈ Π΄Π²ΠΈΠ³Π°ΡΡΡΡ ΠΏΠΎ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ΅ Ρ ΠΊΠΎΠΌΡΠΎΡΡΠ½ΠΎΠΉ Π²Π°ΠΌ ΡΠΊΠΎΡΠΎΡΡΡΡ.
ΠΡΠΎΡ ΠΎΠΆΠ΄Π΅Π½ΠΈΠ΅ ΠΊΡΡΡΠ° Π·Π°ΠΉΠΌΡΡ ΠΎΡ 2 Π΄ΠΎ 3 Π½Π΅Π΄Π΅Π»Ρ, Π΅ΡΠ»ΠΈ Π²Ρ Π³ΠΎΡΠΎΠ²Ρ Π·Π°Π½ΠΈΠΌΠ°ΡΡΡΡ 5 ΡΠ°ΡΠΎΠ² Π² Π½Π΅Π΄Π΅Π»Ρ.
Π Π°Π·Π΄Π΅Π» 1. ΠΠ±ΡΠ°Π±ΠΎΡΠΊΠ° Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΈ ΠΊΠ°ΡΠΊΠ°Π΄
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΏΠΎΠ½ΡΡΠΈΠ΅ ΠΊΠ°ΡΠΊΠ°Π΄Π° ΠΈ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ. Π Π°Π·Π±Π΅ΡΡΠΌΡΡ, ΠΊΠ°ΠΊ Π±ΡΠ°ΡΠ·Π΅Ρ Π²ΡΡΠΈΡΠ»ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΈ Π² ΠΊΠ°ΠΊΠΎΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ ΠΊΠ°ΡΠΊΠ°Π΄.
Π’Π΅ΠΎΡΠΈΡ
ΠΠΎΠ½ΡΡΠΈΠ΅ ΠΊΠ°ΡΠΊΠ°Π΄Π°.
ΠΡΡΠΈΡΠ»Π΅Π½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ: ΡΡΠ°Π΄ΠΈΠΈ declared, cascaded, specified, computed, used ΠΈ actual.
ΠΡΠ°ΠΊΡΠΈΠΊΠ°
ΠΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΠ΅ ΡΠ΅ΡΡΡ ΠΏΠΎ ΡΠ΅ΠΌΠ°ΠΌ ΡΠ°Π·Π΄Π΅Π»Π°
Π Π°Π·Π΄Π΅Π» 2. Π€ΠΈΠ»ΡΡΡΠ°ΡΠΈΡ
ΠΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΎ ΡΡΠΈΠ»ΡΡ Π°Π²ΡΠΎΡΠ°, ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΎ Β«Π²ΠΈΡΡΡΠ°Π»ΡΠ½ΡΡ Β» ΡΡΠΈΠ»ΡΡ . Π Π°Π·Π±Π΅ΡΡΠΌ, ΠΊΠ°ΠΊ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΏΠ°ΡΡΠΈΡ CSS-ΠΊΠΎΠ΄, ΡΠΈΠ»ΡΡΡΡΠ΅Ρ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΡ ΠΈ ΠΎΡΠ±ΠΈΡΠ°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ. ΠΠΎΡΠ½ΡΠΌΡΡ Π²Π°Π»ΠΈΠ΄Π½ΠΎΡΡΠΈ, ΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠ², ΠΏΡΠ΅Π²Π΄ΠΎΠ½ΠΈΠΌΠΎΠ², ΡΡΠ»ΠΎΠ²Π½ΡΡ ΠΏΡΠ°Π²ΠΈΠ» ΠΈ ΠΏΠΎΠΈΡΠΊΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² DOM-Π΄Π΅ΡΠ΅Π²Π΅.
Π’Π΅ΠΎΡΠΈΡ
ΠΡΡΠΎΡΠ½ΠΈΠΊΠΈ ΡΡΠΈΠ»Π΅ΠΉ: Π°Π²ΡΠΎΡΡΠΊΠΈΠ΅, Π±ΡΠ°ΡΠ·Π΅ΡΠ½ΡΠ΅ ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠ΅.
ΠΠ°ΡΡΠΈΠ½Π³ ΠΈ ΡΠΈΠ»ΡΡΡΠ°ΡΠΈΡ.
ΠΡΠ°ΠΊΡΠΈΠΊΠ°
ΠΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΠ΅ ΡΠ΅ΡΡΡ ΠΏΠΎ ΡΠ΅ΠΌΠ°ΠΌ ΡΠ°Π·Π΄Π΅Π»Π°
Π Π°Π·Π΄Π΅Π» 3. ΠΠ°ΡΠΊΠ°Π΄
ΠΠ΅ΡΠ°Π»ΡΠ½ΠΎ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΏΠΎΡΡΠ΄ΠΎΠΊ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ² ΠΈ ΠΊΠ°ΡΠΊΠ°Π΄ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. Π Π°Π·Π±Π΅ΡΡΠΌΡΡ Ρ ΡΠ΅ΠΌ, ΠΊΠ°ΠΊ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΡΠ°ΡΡΡΡ ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ½ΠΎΡΡΠΈ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ² ΠΈ ΠΊΠ°ΠΊΡΡ ΡΠΎΠ»Ρ ΠΎΠ½Π° ΠΈΠ³ΡΠ°Π΅Ρ Π² ΠΊΠ°ΡΠΊΠ°Π΄Π΅.
Π’Π΅ΠΎΡΠΈΡ
ΠΠ΅ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·Π±ΠΎΡ Π°Π»Π³ΠΎΡΠΈΡΠΌΠ° ΠΊΠ°ΡΠΊΠ°Π΄Π°.
ΠΠΎΡΡΠ΄ΠΎΠΊ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΡΡΠΈΠ»Π΅Π²ΡΡ ΡΠ°ΠΉΠ»ΠΎΠ² ΠΈ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ².
ΠΠΎΡΡΠ΄ΠΎΠΊ ΠΊΠ°ΡΠΊΠ°Π΄ΠΈΡΠΎΠ²Π°Π½ΠΈΡ: Π² ΠΊΠ°ΠΊΠΎΠΉ ΠΎΡΠ΅ΡΡΠ΄Π½ΠΎΡΡΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΡΡΠΈΠ»Π΅Π²ΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π°. ΠΠ½Π½ΠΎΡΠ°ΡΠΈΡ !important.
CΠ΅Π»Π΅ΠΊΡΠΎΡΡ ΠΈ ΡΠ°ΡΡΡΡ ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ½ΠΎΡΡΠΈ.
ΠΡΠ°ΠΊΡΠΈΠΊΠ°
ΠΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΠ΅ ΡΠ΅ΡΡΡ ΠΏΠΎ ΡΠ΅ΠΌΠ°ΠΌ ΡΠ°Π·Π΄Π΅Π»Π°
Π Π°Π·Π΄Π΅Π» 4. ΠΠΎΠ»ΡΡΠ΅Π½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ
ΠΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ, Π΅ΡΠ»ΠΈ Π½Π΅ Π·Π°Π΄Π°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²Π½ΠΎ. Π Π°Π·Π±Π΅ΡΡΠΌΡΡ Ρ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΠΌΡΠΌΠΈ ΠΈ Π½Π΅Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΠΌΡΠΌΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΎΠΌΠ½ΡΡ ΡΠ²ΠΎΠΉΡΡΠ² ΠΈ ΡΠΏΠΎΡΠΎΠ±Ρ ΠΏΠΎΠ²Π΅ΡΠ½ΡΡΡ ΠΊΠ°ΡΠΊΠ°Π΄ Π²ΡΠΏΡΡΡ.
Π’Π΅ΠΎΡΠΈΡ
ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅ΠΌΡΠ΅ ΠΈ Π½Π΅Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΠΌΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°.
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.
ΠΠ°ΡΡΠΎΠΌΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°.
ΠΡΠΈΠ½ΡΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠ΅. ΠΠ»ΡΡΠ΅Π²ΠΎΠ΅ ΡΠ»ΠΎΠ²ΠΎ inherit.
ΠΡΠΊΠ°Ρ ΠΊΠ°ΡΠΊΠ°Π΄Π°. ΠΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ»ΠΎΠ²Π° revert, unset, initial.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ all.
ΠΡΠ°ΠΊΡΠΈΠΊΠ°
ΠΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΠ΅ ΡΠ΅ΡΡΡ ΠΏΠΎ ΡΠ΅ΠΌΠ°ΠΌ ΡΠ°Π·Π΄Π΅Π»Π°
Π Π°Π·Π΄Π΅Π» 5. ΠΡΡΠΈΡΠ»Π΅Π½ΠΈΡ
Π Π°Π·Π±Π΅ΡΡΠΌΡΡ, ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ Ρ ΠΊΠ°ΡΠΊΠ°Π΄ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ Π΄Π°Π»ΡΡΠ΅, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ Π²ΡΡΠΈΡΠ»ΡΡΡΡΡ Π² ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ Π΄Π»Ρ ΠΎΡΡΠΈΡΠΎΠ²ΠΊΠΈ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅.
Π’Π΅ΠΎΡΠΈΡ
ΠΡΠ°ΠΏΡ Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΠΉ: computed, used, actual value.
ΠΡΠ°ΠΊΡΠΈΠΊΠ°
ΠΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΠ΅ ΡΠ΅ΡΡΡ ΠΏΠΎ ΡΠ΅ΠΌΠ°ΠΌ ΡΠ°Π·Π΄Π΅Π»Π°
Π Π°Π·Π΄Π΅Π» 6. ΠΠ°ΡΠΊΠ°Π΄ Π½Π° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅
ΠΠΎΡΠ°Π±ΠΎΡΠ°Π΅ΠΌ Ρ ΠΊΠ°ΡΠΊΠ°Π΄ΠΎΠΌ Π½Π° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅. Π ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΡΡ ΠΏΠΎΡΠ°Π³ΠΎΠ²ΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡΡ ΡΠ°Π·Π±Π΅ΡΡΠΌ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ ΡΠΈΠΏΠΎΠ²ΡΡ ΠΏΡΠΈΠ΅ΠΌΠΎΠ² ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ².
Π’Π΅ΠΎΡΠΈΡ
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ font-size-adjust.
Π‘ΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° ΡΠΏΠΈΠ½Π½Π΅ΡΠ°.
Π‘ΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ ΠΊΠ°ΡΡΠΎΠΌΠ½ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ².
Β«ΠΠΈΠΏΠΊΠΈΠΉΒ» ΠΏΠΎΠ΄Π²Π°Π» ΡΡΡΠ°Π½ΠΈΡΡ.
Π€ΡΠ½ΠΊΡΠΈΠΈ Π΄Π»Ρ Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΠΉ Π² CSS.
ΠΡΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΈΡΠΏΡΡΠ°Π½ΠΈΠ΅
ΠΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ Π·Π°Π΄Π°Π½ΠΈΠ΅ β ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ Π°Π»Π³ΠΎΡΠΈΡΠΌ ΠΊΠ°ΡΠΊΠ°Π΄Π° Π½Π° JavaScript, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π²ΡΠ΅ ΠΏΠΎΠ»ΡΡΠ΅Π½Π½ΡΠ΅ Π·Π½Π°Π½ΠΈΡ ΠΎ CSS-ΠΊΠ°ΡΠΊΠ°Π΄Π΅.
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΡΠ΅Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΡΠΈΡΡΠ΅ΠΌΠ° ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ.
ΠΠ£ΠΠΠ’Π¬
https://l.htmlacademy.ru/anatomy-of-cascade
favorite
0
star
0
