Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стили

ΠŸΠΎΡ‡Π΅ΠΌΡƒ ΠΈΠ½Π»Π°ΠΉΠ½ΠΈΡ‚ΡŒ стили β€” ΠΏΠ»ΠΎΡ…ΠΎ

Π’ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ стили глобально:

Π’ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° 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 Бвойство

Частота использования

ОписаниС

color960 Ρ€Π°Π·Π¦Π²Π΅Ρ‚ тСкста элСмСнта: Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стили. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стили. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стили. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стили. Π€ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стилиbackground-color755 Ρ€Π°Π·Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° элСмСнта: Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стили. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стили. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стили. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стили. Π€ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стилиfont-size524 Ρ€Π°Π·Π°Π Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π°: Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стили. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стили. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стили. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стили. Π€ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стилиopacity435 Ρ€Π°Π·Π£Ρ€ΠΎΠ²Π΅Π½ΡŒ прозрачности элСмСнта: Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стили. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стили. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стили. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стили. Π€ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стилиpadding372 Ρ€Π°Π·Π°Π Π°Π·ΠΌΠ΅Ρ€ ΠΏΠΎΠ»Π΅ΠΉ Π²Π½ΡƒΡ‚Ρ€ΠΈ элСмСнта: Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стили. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стили. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стили. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стили. Π€ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стилиwidth356 Ρ€Π°Π·Π¨ΠΈΡ€ΠΈΠ½Π° Π±Π»ΠΎΡ‡Π½ΠΎΠ³ΠΎ элСмСнта, Π½Π΅ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ Π³Ρ€Π°Π½ΠΈΡ† ΠΈ ΠΏΠΎΠ»Π΅ΠΉ: Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стили. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стили. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стили. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стили. Π€ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стилиmargin311 Ρ€Π°Π·Π’Π½Π΅ΡˆΠ½ΠΈΠ΅ отступы элСмСнта: Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стили. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стили. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стили. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стили. Π€ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стилиheight305 разВысота Π±Π»ΠΎΡ‡Π½ΠΎΠ³ΠΎ элСмСнта, Π½Π΅ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ Π³Ρ€Π°Π½ΠΈΡ† ΠΈ ΠΏΠΎΠ»Π΅ΠΉ: Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стили. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стили. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стили. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стили. Π€ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стилиfont-weight280 Ρ€Π°Π·ΠΠ°ΡΡ‹Ρ‰Π΅Π½Π½ΠΎΡΡ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚Π°: Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стили. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стили. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стили. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стили. Π€ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стилиtext-align245 Ρ€Π°Π·Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста: Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стили. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стили. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стили. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стили. Π€ΠΎΡ‚ΠΎ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ стили

Π§Π°ΡΡ‚ΡŒ 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, анимациями ΠΈ всСм ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹ΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒΡΡ Π½Π° Ρ€Π°Π±ΠΎΡ‚Ρƒ ΠΌΠ΅Ρ‡Ρ‚Ρ‹.

НаТатиС Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ β€” согласиС Π½Π° ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ ΠΏΠ΅Ρ€ΡΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… Π΄Π°Π½Π½Ρ‹Ρ…

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *