ΠΠ»Π°ΡΡΡ Π² CSS β ΡΠ΄ΠΎΠ±Π½ΡΠΉ ΠΏΡΡΠ΅Π²ΠΎΠ΄ΠΈΡΠ΅Π»Ρ Π΄Π»Ρ Π½ΠΎΠ²ΠΈΡΠΊΠΎΠ²
Π ΡΠ΅Π³ΠΎΠ΄Π½ΡΡΠ½Π΅ΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌΒ ΠΊΠ»Π°ΡΡΡ Π² CSS ΠΈ ΠΈΡ Π²Π·Π°ΠΈΠΌΠΎΡΠ²ΡΠ·Ρ Ρ ΡΠ·ΡΠΊΠΎΠΌ Π³ΠΈΠΏΠ΅ΡΡΠ΅ΠΊΡΡΠ°. HTML β ΡΠ΅Π³ΠΈ ΠΈ CSS ΡΠ²ΡΠ·Π°Π½Ρ Π½Π°ΠΏΡΡΠΌΡΡ. ΠΡΠ° Π²Π·Π°ΠΈΠΌΠΎΡΠ²ΡΠ·Ρ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ, ΠΊΠ°ΠΊ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ΅Π³ ΠΈΠ»ΠΈ ΠΊΠ°ΠΊ ΠΎΠ½ Π²Π΅Π΄Π΅Ρ ΡΠ΅Π±Ρ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Π΅Π³ΠΎ ΠΈΠΌΠ΅Π½ΠΈ Π² ΡΠ°Π±Π»ΠΈΡΠ΅ ΡΡΠΈΠ»Π΅ΠΉ:
tag { /* ΠΠ½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΠΈ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ. */ name:value; }
ΠΠΎ Π·Π°ΡΠ°ΡΡΡΡ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ, ΡΠ΅ΠΌ ΠΏΡΠΎΡΡΠΎ Π΄Π΅Π»Π°ΡΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠΊΠ·Π΅ΠΌΠΏΠ»ΡΡ ΡΠ΅Π³Π° ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΌ. ΠΡΠ»ΠΈ Π±Ρ Π²ΡΠ΅ ΡΡΠ΅ΠΉΠΊΠΈ HTML-ΡΠ°Π±Π»ΠΈΡΡ Π±ΡΠ»ΠΈ Π²ΡΠΏΠΎΠ»Π½Π΅Π½Ρ Π² ΠΎΠ΄Π½ΠΎΠΌ ΡΡΠΈΠ»Π΅, ΡΡΠΎ Π²ΡΠ³Π»ΡΠ΄Π΅Π»ΠΎ Π±Ρ Π½Π΅ΠΏΡΠ°ΠΊΡΠΈΡΠ½ΠΎ. Π ΠΏΡΠΈΠΌΠ΅ΡΡ, Π΅ΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π²ΡΠ΄Π΅Π»ΠΈΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ Π΄Π°Π½Π½ΡΠ΅.
ΠΠΎΡΡΠΎΠΌΡ CSS ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π½Π°ΠΌ Π΄Π²Π° ΡΠ°Π·Π½ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ β CSS ΠΊΠ»Π°ΡΡΡ ΠΈ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΡ.
ΠΠΎΠ³Π΄Π° Ρ Π²Π°Ρ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π΅ΡΡΡ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΠΈΠ΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΠΌΠ΅ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅, Π½ΡΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ CSS ΠΊΠ»Π°ΡΡΡ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ Π΄Π²Π° ΡΠ°Π³Π°:
Π§ΡΠΎΠ±Ρ ΠΏΠΎΠ²Π»ΠΈΡΡΡ Π½Π° Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ HTML-ΡΡΡΠ°Π½ΠΈΡΡ, Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ½Π°ΡΠ°Π»Π° ΡΠ°Π·ΠΌΠ΅ΡΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ class=Β»class-nameΒ». ΠΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ:
<div> ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ 1 </div> <div> ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ 2 </div> <div> ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ 3 </div>
Π Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Ρ Ρ ΠΎΡΡ ΡΠΎΠ·Π΄Π°ΡΡ ΡΡΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°. ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Ρ Π·Π°Ρ ΠΎΡΡ Π·Π°ΠΏΡΡΡΠΈΡΡ Π³Π°Π»Π΅ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΈΠ»ΠΈ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ Π² Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ HTML β ΡΡΡΠ»ΠΊΠΈ Π΄Π»Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° Π½Π° Π΄ΡΡΠ³ΠΈΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡΠΈ ΡΡΠΎΠΌ Π²ΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΌΠΈ.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π² Π½Π°ΡΠ΅ΠΌ CSS:
div.box{ height:200px; width:200px; text-align:center; font-size:14px; color:#090; background-color:#ddd; margin-right:10px; }
Π§ΡΠΎΠ±Ρ Π·Π°Π΄Π°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠ΅Π³Π° Ρ CSS ΠΊΠ»Π°ΡΡΠΎΠΌ, Π° Π½Π΅ ΠΏΡΠΎΡΡΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ tagname{ }, ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ tagname.classname{ }. Π’ΠΎΡΠΊΠ° ΠΌΠ΅ΠΆΠ΄Ρ tagname ΠΈ classname ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ΅ΠΌ, ΡΡΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ ΠΊΠ°ΠΊ CSS ΠΊΠ»Π°ΡΡ. Π’Π°ΠΊΠΆΠ΅ ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΡΠ°ΠΌ Π½Π΅Ρ ΠΏΡΠΎΠ±Π΅Π»ΠΎΠ². ΠΡΠ»ΠΈ ΠΏΠΎΡΡΠ°Π²ΠΈΡΡ ΠΏΡΠΎΠ±Π΅Π» Π² ΠΏΡΠ°Π²ΠΈΠ»Π΅, ΡΠΎ ΠΎΠ½ΠΎ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π²Ρ ΠΏΠ»Π°Π½ΠΈΡΠΎΠ²Π°Π»ΠΈ.
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΎΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ margin-right:10px. ΠΡΠ° ΡΡΡΠΎΠΊΠ° Π³Π°ΡΠ°Π½ΡΠΈΡΡΠ΅Ρ, ΡΡΠΎ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΠ΅ΠΌΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°ΠΌΠΈ ΡΠΎΡ ΡΠ°Π½ΡΠ΅ΡΡΡ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ Π² 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ float ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ left ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ, ΡΡΠΎΠ±Ρ Π²ΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π»ΠΈΡΡ ΡΠ»Π΅Π²Π°.
Π’Π°ΠΊΠΎΠ΅ ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π΄Π°ΡΡ Π²Π°ΠΌ ΡΡΠΎ-ΡΠΎ Π²ΡΠΎΠ΄Π΅ ΡΡΠΎΠ³ΠΎ:
Π§ΡΠΎΠ±Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ Π²Π°ΠΌ, ΡΡΠΎ Π²Π°Ρ CSS ΠΊΠ»Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ box ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°ΠΌ, Π³Π΄Π΅ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅, ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <div> ΠΏΠΎΡΠ»Π΅ Β«ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ 3Β»:
<div> ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ 4 </div>
ΠΠ±Π½ΠΎΠ²ΠΈΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΠΎ Π½ΠΈ ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΠΏΡΠ°Π²ΠΈΠ», ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΡ Π² div.box {} Π½Π΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ. ΠΠΎΡΠΎΠΌΡ ΡΡΠΎ Π²Ρ Π½Π΅ ΡΠΊΠ°Π·Π°Π»ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΊΠ»Π°ΡΡΠ°.
ΠΠΎΡ ΠΏΠΎΡΠ΅ΠΌΡ ΡΡΠΎΡ Π²Π°ΡΠΈΠ°Π½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΊΠ»Π°ΡΡΠΎΠ² CSS Π±ΠΎΠ»Π΅Π΅ Π³ΠΈΠ±ΠΊΠΈΠΉ, ΡΠ΅ΠΌ ΠΏΡΠΎΡΡΠΎΠ΅ tagname{ }. ΠΠ° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² <div>, Π½ΠΎ ΡΡΠΈΠ»ΠΈ Π±ΡΠ΄ΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΊ ΡΠ΅ΠΌ, Π² ΠΊΠΎΡΠΎΡΡΡ Π·Π°Π΄Π°Π½ΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π°ΡΡΠΈΠ±ΡΡΠ° class!
Π ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΌ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈΠΌΠ΅ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΠΊΠ»Π°ΡΡ CSS β ΡΠ΅Π΄ΠΊΠΎΡΡΡ. ΠΠ°Π²Π°ΠΉΡΠ΅ Π²ΠΎΠ·ΡΠΌΠ΅ΠΌ Π½Π°ΡΠΈ ΡΡΠΈ ΠΊΠ²Π°Π΄ΡΠ°ΡΠ° ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΡΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ, Π΅ΡΠ»ΠΈ Π²Ρ Π·Π°Ρ ΠΎΡΠΈΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΊΡΠ°ΡΠΈΡΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· Π½ΠΈΡ .
Π§ΡΠΎΠ±Ρ ΡΠΊΠ°Π·Π°ΡΡ, ΡΡΠΎ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² CSS Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΊΠ»Π°ΡΡΠΎΠ², Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠ»Π°ΡΡ ΡΠ΅ΡΠ΅Π· ΠΏΡΠΎΠ±Π΅Π». ΠΠ°ΠΊ Π·Π΄Π΅ΡΡ:
<div> ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ 1 </div> <div> ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ 2 </div> <div> ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ 3 </div>
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠΈΠ»ΠΈ CSS ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΠΊΠ°ΡΠΊΠ°Π΄Π½ΡΠΉ ΠΏΠΎΡΡΠ΄ΠΎΠΊ, Π²Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΠ΅ ΡΠ²ΠΎΠΈ ΠΊΠ»Π°ΡΡΡ ΠΏΠΎ ΡΡΠΎΠ²Π½Ρ Π²Π°ΠΆΠ½ΠΎΡΡΠΈ. Π Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΌΡ Ρ ΠΎΡΠΈΠΌ, ΡΡΠΎΠ±Ρ ΠΊΠ»Π°ΡΡ class=Β»boxΒ» ΠΏΡΠΈΠΌΠ΅Π½ΡΠ»ΡΡ ΠΏΠ΅ΡΠ΅Π΄ class=Β»redΒ». ΠΠ½Π°ΡΠ΅ class=Β»redΒ» Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ Π΄ΠΎ class=Β»boxΒ». ΠΠ°Π΄Π΅ΡΡΡ, ΡΡΠΎ ΠΏΠΎΠ½ΡΡΠ½ΠΎ!
ΠΠ·ΠΌΠ΅Π½ΠΈΠΌ Π½Π°Ρ ΠΊΠΎΠ΄ CSS:
div.box{ height:200px; width:200px; text-align:center; font-size:14px; color:#090; background-color:#dddddd; margin-right:10px; } div.red{ background-color:#ffcccc; } div.green{ background-color:#ccffcc; } div.blue{ background-color:#ccccff; }
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· ΡΡΠ΅Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠ² Π΅ΡΡΡ CSS ΠΊΠ»Π°ΡΡ .box, ΠΊ Π½ΠΈΠΌ Π²ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΠΏΡΠΎΠΏΠΈΡΠ°Π½Π½ΡΠ΅ Π² div.box. ΠΠΎ ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ <div> ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΊΠ»Π°ΡΡ (red, green, ΠΈΠ»ΠΈ blue). ΠΠΎΠ½Π΅ΡΠ½ΡΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ:
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: Π½Π΅ΡΠΌΠΎΡΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ div.box ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ background-color:#cccccc; Β«ΡΠ²Π΅ΡΠΎΠ²ΡΠ΅Β» ΠΊΠ»Π°ΡΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΡΡ ΠΏΠΎΡΠ»Π΅ Π½Π΅Π³ΠΎ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π² box red ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background-color, ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΌ Π² div.red, ΠΏΠ΅ΡΠ΅Π·Π°ΠΏΠΈΡΡΠ²Π°Π΅Ρ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π² div.box. ΠΡΠΎ ΡΠΎ, ΡΡΠΎ ΠΏΠΎΠ΄ΡΠ°Π·ΡΠΌΠ΅Π²Π°Π΅ΡΡΡ ΠΏΠΎΠ΄ ΠΊΠ°ΡΠΊΠ°Π΄ΠΎΠΌ: Π² CSS Π»ΠΎΠ³ΠΈΠΊΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠ²Π΅ΡΡ Ρ Π²Π½ΠΈΠ·. Π ΠΏΡΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠΈ ΠΊΠ»Π°ΡΡΠΎΠ² HTML β ΡΠ»Π΅Π²Π° Π½Π°ΠΏΡΠ°Π²ΠΎ.
ΠΠΎΠ΄ΡΠΌΠ°ΠΉΡΠ΅, Π΄Π»Ρ ΠΊΠ°ΠΊΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½ΡΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ CSS ΠΊΠ»Π°ΡΡΡ ΠΏΡΠΈ Π²Π΅ΡΡΡΠΊΠ΅ ΠΌΠ°ΠΊΠ΅ΡΠ° ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠΎΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡΡΠ»ΠΈ Π΄Π»Ρ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ:
- ΠΡΠ±ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π°ΠΌ Π·Π°Ρ ΠΎΡΠ΅ΡΡΡ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΎΠ²Π°ΡΠ°, ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΡΠ΄Π΅Π»Π°ΡΡ Π² ΡΠΎΡΠΌΠ΅ ΠΊΠ²Π°Π΄ΡΠ°ΡΠ°: Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ img.thumbnail{ width:200px;height:200px; };
- Π‘ΡΠΈΠ»ΠΈ ΡΡΡΠ»ΠΎΠΊ Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ ΠΎΡ ΡΡΠΈΠ»Π΅ΠΉ ΠΎΠ±ΡΡΠ½ΡΡ ΡΡΡΠ»ΠΎΠΊ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, a.button {};
- ΠΡΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ Π΄ΡΡΠ³ΠΎΠΉ ΡΠ²Π΅Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΡΡΡΠ»ΠΊΠΈ Π² Π²Π°ΡΠ΅ΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, a.nav:hover{ } a.nav: Hover {}.
ΠΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠ»Π°ΡΡΠΎΠ² ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π΄Π°ΡΡ ΠΈΠΌΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ CSS. ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΡΠΈ Β«ΠΈΠΌΠ΅Π½Π°Β» ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΎΠ΄ΠΈΠ½ ΡΡΠ΄ ΠΏΡΠ°Π²ΠΈΠ» Π΄Π»Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΠΊΠ·Π΅ΠΌΠΏΠ»ΡΡΠΎΠ² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π±Π΅Π· ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎΠ³ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΊΠΎΠ΄Π° CSS.
Π ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ΠΈ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΠΊΠ°ΡΠΊΠ°Π΄ΠΎΠΌ, ΠΏΠΎΡΡΠ΄ΠΎΠΊ Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π²Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΠ΅ ΡΠ²ΠΎΠΈ ΠΊΠ»Π°ΡΡΡ Π² HTML, Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΈΠΌΠ΅Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΡΠ°ΠΊ ΡΡΠΎ ΡΠ»Π΅Π΄ΠΈΡΠ΅ Π·Π° ΡΡΠΈΠΌ.
ΠΡΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ Π²ΠΎΠΏΡΠΎΡΡ, Π½Π΅ ΡΡΠ΅ΡΠ½ΡΠΉΡΠ΅ΡΡ Π·Π°Π΄Π°ΡΡ ΠΈΡ Π² ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΡ !
ΠΠ°Π½Π½Π°Ρ ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ΠΎΠΌ ΡΡΠ°ΡΡΠΈ Β«Using CSS Classes β A Handy GuideΒ» , ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²Π»Π΅Π½Π½Π°Ρ ΡΠ΅Π΄Π°ΠΊΡΠΈΠ΅ΠΉ ΠΏΡΠΎΠ΅ΠΊΡΠ°.
ΠΠ»Π°ΡΡΡ Π² CSS β ΡΠ΄ΠΎΠ±Π½ΡΠΉ ΠΏΡΡΠ΅Π²ΠΎΠ΄ΠΈΡΠ΅Π»Ρ Π΄Π»Ρ Π½ΠΎΠ²ΠΈΡΠΊΠΎΠ²
Π ΡΠ΅Π³ΠΎΠ΄Π½ΡΡΠ½Π΅ΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌΒ ΠΊΠ»Π°ΡΡΡ Π² CSS ΠΈ ΠΈΡ Π²Π·Π°ΠΈΠΌΠΎΡΠ²ΡΠ·Ρ Ρ ΡΠ·ΡΠΊΠΎΠΌ Π³ΠΈΠΏΠ΅ΡΡΠ΅ΠΊΡΡΠ°. HTML β ΡΠ΅Π³ΠΈ ΠΈ CSS ΡΠ²ΡΠ·Π°Π½Ρ Π½Π°ΠΏΡΡΠΌΡΡ. ΠΡΠ° Π²Π·Π°ΠΈΠΌΠΎΡΠ²ΡΠ·Ρ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ, ΠΊΠ°ΠΊ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ΅Π³ ΠΈΠ»ΠΈ ΠΊΠ°ΠΊ ΠΎΠ½ Π²Π΅Π΄Π΅Ρ ΡΠ΅Π±Ρ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Π΅Π³ΠΎ ΠΈΠΌΠ΅Π½ΠΈ Π² ΡΠ°Π±Π»ΠΈΡΠ΅ ΡΡΠΈΠ»Π΅ΠΉ:
tag { /* ΠΠ½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΠΈ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ. */ name:value; }
ΠΠΎ Π·Π°ΡΠ°ΡΡΡΡ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ, ΡΠ΅ΠΌ ΠΏΡΠΎΡΡΠΎ Π΄Π΅Π»Π°ΡΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠΊΠ·Π΅ΠΌΠΏΠ»ΡΡ ΡΠ΅Π³Π° ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΌ. ΠΡΠ»ΠΈ Π±Ρ Π²ΡΠ΅ ΡΡΠ΅ΠΉΠΊΠΈ HTML-ΡΠ°Π±Π»ΠΈΡΡ Π±ΡΠ»ΠΈ Π²ΡΠΏΠΎΠ»Π½Π΅Π½Ρ Π² ΠΎΠ΄Π½ΠΎΠΌ ΡΡΠΈΠ»Π΅, ΡΡΠΎ Π²ΡΠ³Π»ΡΠ΄Π΅Π»ΠΎ Π±Ρ Π½Π΅ΠΏΡΠ°ΠΊΡΠΈΡΠ½ΠΎ. Π ΠΏΡΠΈΠΌΠ΅ΡΡ, Π΅ΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π²ΡΠ΄Π΅Π»ΠΈΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ Π΄Π°Π½Π½ΡΠ΅.
ΠΠΎΡΡΠΎΠΌΡ CSS ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π½Π°ΠΌ Π΄Π²Π° ΡΠ°Π·Π½ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ β CSS ΠΊΠ»Π°ΡΡΡ ΠΈ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΡ.
ΠΠΎΠ³Π΄Π° Ρ Π²Π°Ρ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π΅ΡΡΡ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΠΈΠ΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΠΌΠ΅ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅, Π½ΡΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ CSS ΠΊΠ»Π°ΡΡΡ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ Π΄Π²Π° ΡΠ°Π³Π°:
Π§ΡΠΎΠ±Ρ ΠΏΠΎΠ²Π»ΠΈΡΡΡ Π½Π° Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ HTML-ΡΡΡΠ°Π½ΠΈΡΡ, Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ½Π°ΡΠ°Π»Π° ΡΠ°Π·ΠΌΠ΅ΡΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ class=Β»class-nameΒ». ΠΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ:
<div> ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ 1 </div> <div> ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ 2 </div> <div> ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ 3 </div>
Π Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Ρ Ρ ΠΎΡΡ ΡΠΎΠ·Π΄Π°ΡΡ ΡΡΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°. ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Ρ Π·Π°Ρ ΠΎΡΡ Π·Π°ΠΏΡΡΡΠΈΡΡ Π³Π°Π»Π΅ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΈΠ»ΠΈ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ Π² Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ HTML β ΡΡΡΠ»ΠΊΠΈ Π΄Π»Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° Π½Π° Π΄ΡΡΠ³ΠΈΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡΠΈ ΡΡΠΎΠΌ Π²ΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΌΠΈ.
div.box{ height:200px; width:200px; text-align:center; font-size:14px; color:#090; background-color:#ddd; margin-right:10px; }
Π§ΡΠΎΠ±Ρ Π·Π°Π΄Π°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠ΅Π³Π° Ρ CSS ΠΊΠ»Π°ΡΡΠΎΠΌ, Π° Π½Π΅ ΠΏΡΠΎΡΡΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ tagname{ }, ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ tagname.classname{ }. Π’ΠΎΡΠΊΠ° ΠΌΠ΅ΠΆΠ΄Ρ tagname ΠΈ classname ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ΅ΠΌ, ΡΡΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ ΠΊΠ°ΠΊ CSS ΠΊΠ»Π°ΡΡ. Π’Π°ΠΊΠΆΠ΅ ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΡΠ°ΠΌ Π½Π΅Ρ ΠΏΡΠΎΠ±Π΅Π»ΠΎΠ². ΠΡΠ»ΠΈ ΠΏΠΎΡΡΠ°Π²ΠΈΡΡ ΠΏΡΠΎΠ±Π΅Π» Π² ΠΏΡΠ°Π²ΠΈΠ»Π΅, ΡΠΎ ΠΎΠ½ΠΎ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π²Ρ ΠΏΠ»Π°Π½ΠΈΡΠΎΠ²Π°Π»ΠΈ.
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΎΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ margin-right:10px. ΠΡΠ° ΡΡΡΠΎΠΊΠ° Π³Π°ΡΠ°Π½ΡΠΈΡΡΠ΅Ρ, ΡΡΠΎ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΠ΅ΠΌΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°ΠΌΠΈ ΡΠΎΡ ΡΠ°Π½ΡΠ΅ΡΡΡ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ Π² 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ float ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ left ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ, ΡΡΠΎΠ±Ρ Π²ΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π»ΠΈΡΡ ΡΠ»Π΅Π²Π°.
Π’Π°ΠΊΠΎΠ΅ ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π΄Π°ΡΡ Π²Π°ΠΌ ΡΡΠΎ-ΡΠΎ Π²ΡΠΎΠ΄Π΅ ΡΡΠΎΠ³ΠΎ:
Π§ΡΠΎΠ±Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ Π²Π°ΠΌ, ΡΡΠΎ Π²Π°Ρ CSS ΠΊΠ»Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ box ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°ΠΌ, Π³Π΄Π΅ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅, ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <div> ΠΏΠΎΡΠ»Π΅ Β«ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ 3Β»:
<div> ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ 4 </div>
ΠΠ±Π½ΠΎΠ²ΠΈΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΠΎ Π½ΠΈ ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΠΏΡΠ°Π²ΠΈΠ», ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΡ Π² div.box {} Π½Π΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ. ΠΠΎΡΠΎΠΌΡ ΡΡΠΎ Π²Ρ Π½Π΅ ΡΠΊΠ°Π·Π°Π»ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΊΠ»Π°ΡΡΠ°.
ΠΠΎΡ ΠΏΠΎΡΠ΅ΠΌΡ ΡΡΠΎΡ Π²Π°ΡΠΈΠ°Π½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΊΠ»Π°ΡΡΠΎΠ² CSS Π±ΠΎΠ»Π΅Π΅ Π³ΠΈΠ±ΠΊΠΈΠΉ, ΡΠ΅ΠΌ ΠΏΡΠΎΡΡΠΎΠ΅ tagname{ }. ΠΠ° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² <div>, Π½ΠΎ ΡΡΠΈΠ»ΠΈ Π±ΡΠ΄ΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΊ ΡΠ΅ΠΌ, Π² ΠΊΠΎΡΠΎΡΡΡ Π·Π°Π΄Π°Π½ΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π°ΡΡΠΈΠ±ΡΡΠ° class!
Π ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΌ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈΠΌΠ΅ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΠΊΠ»Π°ΡΡ CSS β ΡΠ΅Π΄ΠΊΠΎΡΡΡ. ΠΠ°Π²Π°ΠΉΡΠ΅ Π²ΠΎΠ·ΡΠΌΠ΅ΠΌ Π½Π°ΡΠΈ ΡΡΠΈ ΠΊΠ²Π°Π΄ΡΠ°ΡΠ° ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΡΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ, Π΅ΡΠ»ΠΈ Π²Ρ Π·Π°Ρ ΠΎΡΠΈΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΊΡΠ°ΡΠΈΡΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· Π½ΠΈΡ .
Π§ΡΠΎΠ±Ρ ΡΠΊΠ°Π·Π°ΡΡ, ΡΡΠΎ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² CSS Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΊΠ»Π°ΡΡΠΎΠ², Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠ»Π°ΡΡ ΡΠ΅ΡΠ΅Π· ΠΏΡΠΎΠ±Π΅Π». ΠΠ°ΠΊ Π·Π΄Π΅ΡΡ:
<div> ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ 1 </div> <div> ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ 2 </div> <div> ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ 3 </div>
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠΈΠ»ΠΈ CSS ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΠΊΠ°ΡΠΊΠ°Π΄Π½ΡΠΉ ΠΏΠΎΡΡΠ΄ΠΎΠΊ, Π²Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΠ΅ ΡΠ²ΠΎΠΈ ΠΊΠ»Π°ΡΡΡ ΠΏΠΎ ΡΡΠΎΠ²Π½Ρ Π²Π°ΠΆΠ½ΠΎΡΡΠΈ. Π Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΌΡ Ρ ΠΎΡΠΈΠΌ, ΡΡΠΎΠ±Ρ ΠΊΠ»Π°ΡΡ class=Β»boxΒ» ΠΏΡΠΈΠΌΠ΅Π½ΡΠ»ΡΡ ΠΏΠ΅ΡΠ΅Π΄ class=Β»redΒ». ΠΠ½Π°ΡΠ΅ class=Β»redΒ» Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ Π΄ΠΎ class=Β»boxΒ». ΠΠ°Π΄Π΅ΡΡΡ, ΡΡΠΎ ΠΏΠΎΠ½ΡΡΠ½ΠΎ!
ΠΠ·ΠΌΠ΅Π½ΠΈΠΌ Π½Π°Ρ ΠΊΠΎΠ΄ CSS:
div.box{ height:200px; width:200px; text-align:center; font-size:14px; color:#090; background-color:#dddddd; margin-right:10px; } div.red{ background-color:#ffcccc; } div.green{ background-color:#ccffcc; } div.blue{ background-color:#ccccff; }
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· ΡΡΠ΅Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠ² Π΅ΡΡΡ CSS ΠΊΠ»Π°ΡΡ .box, ΠΊ Π½ΠΈΠΌ Π²ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΠΏΡΠΎΠΏΠΈΡΠ°Π½Π½ΡΠ΅ Π² div.box. ΠΠΎ ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ <div> ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΊΠ»Π°ΡΡ (red, green, ΠΈΠ»ΠΈ blue). ΠΠΎΠ½Π΅ΡΠ½ΡΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ:
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: Π½Π΅ΡΠΌΠΎΡΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ div.box ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ background-color:#cccccc; Β«ΡΠ²Π΅ΡΠΎΠ²ΡΠ΅Β» ΠΊΠ»Π°ΡΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΡΡ ΠΏΠΎΡΠ»Π΅ Π½Π΅Π³ΠΎ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π² box red ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background-color, ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΌ Π² div.red, ΠΏΠ΅ΡΠ΅Π·Π°ΠΏΠΈΡΡΠ²Π°Π΅Ρ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π² div.box. ΠΡΠΎ ΡΠΎ, ΡΡΠΎ ΠΏΠΎΠ΄ΡΠ°Π·ΡΠΌΠ΅Π²Π°Π΅ΡΡΡ ΠΏΠΎΠ΄ ΠΊΠ°ΡΠΊΠ°Π΄ΠΎΠΌ: Π² CSS Π»ΠΎΠ³ΠΈΠΊΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠ²Π΅ΡΡ Ρ Π²Π½ΠΈΠ·. Π ΠΏΡΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠΈ ΠΊΠ»Π°ΡΡΠΎΠ² HTML β ΡΠ»Π΅Π²Π° Π½Π°ΠΏΡΠ°Π²ΠΎ.
ΠΠΎΠ΄ΡΠΌΠ°ΠΉΡΠ΅, Π΄Π»Ρ ΠΊΠ°ΠΊΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½ΡΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ CSS ΠΊΠ»Π°ΡΡΡ ΠΏΡΠΈ Π²Π΅ΡΡΡΠΊΠ΅ ΠΌΠ°ΠΊΠ΅ΡΠ° ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠΎΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡΡΠ»ΠΈ Π΄Π»Ρ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ:
- ΠΡΠ±ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π°ΠΌ Π·Π°Ρ ΠΎΡΠ΅ΡΡΡ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΎΠ²Π°ΡΠ°, ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΡΠ΄Π΅Π»Π°ΡΡ Π² ΡΠΎΡΠΌΠ΅ ΠΊΠ²Π°Π΄ΡΠ°ΡΠ°: Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ img.thumbnail{ width:200px;height:200px; };
- Π‘ΡΠΈΠ»ΠΈ ΡΡΡΠ»ΠΎΠΊ Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ ΠΎΡ ΡΡΠΈΠ»Π΅ΠΉ ΠΎΠ±ΡΡΠ½ΡΡ ΡΡΡΠ»ΠΎΠΊ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, a.button {};
- ΠΡΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ Π΄ΡΡΠ³ΠΎΠΉ ΡΠ²Π΅Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΡΡΡΠ»ΠΊΠΈ Π² Π²Π°ΡΠ΅ΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, a.nav:hover{ } a.nav: Hover {}.
ΠΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠ»Π°ΡΡΠΎΠ² ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π΄Π°ΡΡ ΠΈΠΌΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ CSS. ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΡΠΈ Β«ΠΈΠΌΠ΅Π½Π°Β» ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΎΠ΄ΠΈΠ½ ΡΡΠ΄ ΠΏΡΠ°Π²ΠΈΠ» Π΄Π»Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΠΊΠ·Π΅ΠΌΠΏΠ»ΡΡΠΎΠ² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π±Π΅Π· ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎΠ³ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΊΠΎΠ΄Π° CSS.
Π ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ΠΈ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΠΊΠ°ΡΠΊΠ°Π΄ΠΎΠΌ, ΠΏΠΎΡΡΠ΄ΠΎΠΊ Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π²Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΠ΅ ΡΠ²ΠΎΠΈ ΠΊΠ»Π°ΡΡΡ Π² HTML, Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΈΠΌΠ΅Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΡΠ°ΠΊ ΡΡΠΎ ΡΠ»Π΅Π΄ΠΈΡΠ΅ Π·Π° ΡΡΠΈΠΌ.
ΠΡΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ Π²ΠΎΠΏΡΠΎΡΡ, Π½Π΅ ΡΡΠ΅ΡΠ½ΡΠΉΡΠ΅ΡΡ Π·Π°Π΄Π°ΡΡ ΠΈΡ Π² ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΡ !
ΠΠ°Π½Π½Π°Ρ ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ΠΎΠΌ ΡΡΠ°ΡΡΠΈ Β«Using CSS Classes β A Handy GuideΒ» , ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²Π»Π΅Π½Π½Π°Ρ ΡΠ΅Π΄Π°ΠΊΡΠΈΠ΅ΠΉ ΠΏΡΠΎΠ΅ΠΊΡΠ°.
ΠΠ»Π°ΡΡΡ Π² CSS β ΡΠ΄ΠΎΠ±Π½ΡΠΉ ΠΏΡΡΠ΅Π²ΠΎΠ΄ΠΈΡΠ΅Π»Ρ Π΄Π»Ρ Π½ΠΎΠ²ΠΈΡΠΊΠΎΠ²
Π ΡΠ΅Π³ΠΎΠ΄Π½ΡΡΠ½Π΅ΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌΒ ΠΊΠ»Π°ΡΡΡ Π² CSS ΠΈ ΠΈΡ Π²Π·Π°ΠΈΠΌΠΎΡΠ²ΡΠ·Ρ Ρ ΡΠ·ΡΠΊΠΎΠΌ Π³ΠΈΠΏΠ΅ΡΡΠ΅ΠΊΡΡΠ°. HTML β ΡΠ΅Π³ΠΈ ΠΈ CSS ΡΠ²ΡΠ·Π°Π½Ρ Π½Π°ΠΏΡΡΠΌΡΡ. ΠΡΠ° Π²Π·Π°ΠΈΠΌΠΎΡΠ²ΡΠ·Ρ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ, ΠΊΠ°ΠΊ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ΅Π³ ΠΈΠ»ΠΈ ΠΊΠ°ΠΊ ΠΎΠ½ Π²Π΅Π΄Π΅Ρ ΡΠ΅Π±Ρ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Π΅Π³ΠΎ ΠΈΠΌΠ΅Π½ΠΈ Π² ΡΠ°Π±Π»ΠΈΡΠ΅ ΡΡΠΈΠ»Π΅ΠΉ:
tag { /* ΠΠ½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΠΈ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ. */ name:value; }
ΠΠΎ Π·Π°ΡΠ°ΡΡΡΡ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ, ΡΠ΅ΠΌ ΠΏΡΠΎΡΡΠΎ Π΄Π΅Π»Π°ΡΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠΊΠ·Π΅ΠΌΠΏΠ»ΡΡ ΡΠ΅Π³Π° ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΌ. ΠΡΠ»ΠΈ Π±Ρ Π²ΡΠ΅ ΡΡΠ΅ΠΉΠΊΠΈ HTML-ΡΠ°Π±Π»ΠΈΡΡ Π±ΡΠ»ΠΈ Π²ΡΠΏΠΎΠ»Π½Π΅Π½Ρ Π² ΠΎΠ΄Π½ΠΎΠΌ ΡΡΠΈΠ»Π΅, ΡΡΠΎ Π²ΡΠ³Π»ΡΠ΄Π΅Π»ΠΎ Π±Ρ Π½Π΅ΠΏΡΠ°ΠΊΡΠΈΡΠ½ΠΎ. Π ΠΏΡΠΈΠΌΠ΅ΡΡ, Π΅ΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π²ΡΠ΄Π΅Π»ΠΈΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ Π΄Π°Π½Π½ΡΠ΅.
ΠΠΎΡΡΠΎΠΌΡ CSS ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π½Π°ΠΌ Π΄Π²Π° ΡΠ°Π·Π½ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ β CSS ΠΊΠ»Π°ΡΡΡ ΠΈ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΡ.
ΠΠΎΠ³Π΄Π° Ρ Π²Π°Ρ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π΅ΡΡΡ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΠΈΠ΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΠΌΠ΅ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅, Π½ΡΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ CSS ΠΊΠ»Π°ΡΡΡ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ Π΄Π²Π° ΡΠ°Π³Π°:
Π§ΡΠΎΠ±Ρ ΠΏΠΎΠ²Π»ΠΈΡΡΡ Π½Π° Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ HTML-ΡΡΡΠ°Π½ΠΈΡΡ, Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ½Π°ΡΠ°Π»Π° ΡΠ°Π·ΠΌΠ΅ΡΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ class=Β»class-nameΒ». ΠΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ:
<div> ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ 1 </div> <div> ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ 2 </div> <div> ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ 3 </div>
Π Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Ρ Ρ ΠΎΡΡ ΡΠΎΠ·Π΄Π°ΡΡ ΡΡΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°. ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Ρ Π·Π°Ρ ΠΎΡΡ Π·Π°ΠΏΡΡΡΠΈΡΡ Π³Π°Π»Π΅ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΈΠ»ΠΈ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ Π² Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ HTML β ΡΡΡΠ»ΠΊΠΈ Π΄Π»Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° Π½Π° Π΄ΡΡΠ³ΠΈΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡΠΈ ΡΡΠΎΠΌ Π²ΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΌΠΈ.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π² Π½Π°ΡΠ΅ΠΌ CSS:
div.box{ height:200px; width:200px; text-align:center; font-size:14px; color:#090; background-color:#ddd; margin-right:10px; }
Π§ΡΠΎΠ±Ρ Π·Π°Π΄Π°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠ΅Π³Π° Ρ CSS ΠΊΠ»Π°ΡΡΠΎΠΌ, Π° Π½Π΅ ΠΏΡΠΎΡΡΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ tagname{ }, ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ tagname.classname{ }. Π’ΠΎΡΠΊΠ° ΠΌΠ΅ΠΆΠ΄Ρ tagname ΠΈ classname ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ΅ΠΌ, ΡΡΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ ΠΊΠ°ΠΊ CSS ΠΊΠ»Π°ΡΡ. Π’Π°ΠΊΠΆΠ΅ ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΡΠ°ΠΌ Π½Π΅Ρ ΠΏΡΠΎΠ±Π΅Π»ΠΎΠ². ΠΡΠ»ΠΈ ΠΏΠΎΡΡΠ°Π²ΠΈΡΡ ΠΏΡΠΎΠ±Π΅Π» Π² ΠΏΡΠ°Π²ΠΈΠ»Π΅, ΡΠΎ ΠΎΠ½ΠΎ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π²Ρ ΠΏΠ»Π°Π½ΠΈΡΠΎΠ²Π°Π»ΠΈ.
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΎΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ margin-right:10px. ΠΡΠ° ΡΡΡΠΎΠΊΠ° Π³Π°ΡΠ°Π½ΡΠΈΡΡΠ΅Ρ, ΡΡΠΎ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΠ΅ΠΌΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°ΠΌΠΈ ΡΠΎΡ ΡΠ°Π½ΡΠ΅ΡΡΡ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ Π² 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ float ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ left ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ, ΡΡΠΎΠ±Ρ Π²ΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π»ΠΈΡΡ ΡΠ»Π΅Π²Π°.
Π’Π°ΠΊΠΎΠ΅ ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π΄Π°ΡΡ Π²Π°ΠΌ ΡΡΠΎ-ΡΠΎ Π²ΡΠΎΠ΄Π΅ ΡΡΠΎΠ³ΠΎ:
Π§ΡΠΎΠ±Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ Π²Π°ΠΌ, ΡΡΠΎ Π²Π°Ρ CSS ΠΊΠ»Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ box ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°ΠΌ, Π³Π΄Π΅ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅, ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <div> ΠΏΠΎΡΠ»Π΅ Β«ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ 3Β»:
<div> ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ 4 </div>
ΠΠ±Π½ΠΎΠ²ΠΈΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΠΎ Π½ΠΈ ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΠΏΡΠ°Π²ΠΈΠ», ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΡ Π² div.box {} Π½Π΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ. ΠΠΎΡΠΎΠΌΡ ΡΡΠΎ Π²Ρ Π½Π΅ ΡΠΊΠ°Π·Π°Π»ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΊΠ»Π°ΡΡΠ°.
ΠΠΎΡ ΠΏΠΎΡΠ΅ΠΌΡ ΡΡΠΎΡ Π²Π°ΡΠΈΠ°Π½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΊΠ»Π°ΡΡΠΎΠ² CSS Π±ΠΎΠ»Π΅Π΅ Π³ΠΈΠ±ΠΊΠΈΠΉ, ΡΠ΅ΠΌ ΠΏΡΠΎΡΡΠΎΠ΅ tagname{ }. ΠΠ° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² <div>, Π½ΠΎ ΡΡΠΈΠ»ΠΈ Π±ΡΠ΄ΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΊ ΡΠ΅ΠΌ, Π² ΠΊΠΎΡΠΎΡΡΡ Π·Π°Π΄Π°Π½ΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π°ΡΡΠΈΠ±ΡΡΠ° class!
Π ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΌ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈΠΌΠ΅ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΠΊΠ»Π°ΡΡ CSS β ΡΠ΅Π΄ΠΊΠΎΡΡΡ. ΠΠ°Π²Π°ΠΉΡΠ΅ Π²ΠΎΠ·ΡΠΌΠ΅ΠΌ Π½Π°ΡΠΈ ΡΡΠΈ ΠΊΠ²Π°Π΄ΡΠ°ΡΠ° ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΡΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ, Π΅ΡΠ»ΠΈ Π²Ρ Π·Π°Ρ ΠΎΡΠΈΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΊΡΠ°ΡΠΈΡΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· Π½ΠΈΡ .
Π§ΡΠΎΠ±Ρ ΡΠΊΠ°Π·Π°ΡΡ, ΡΡΠΎ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² CSS Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΊΠ»Π°ΡΡΠΎΠ², Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠ»Π°ΡΡ ΡΠ΅ΡΠ΅Π· ΠΏΡΠΎΠ±Π΅Π». ΠΠ°ΠΊ Π·Π΄Π΅ΡΡ:
<div> ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ 1 </div> <div> ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ 2 </div> <div> ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ 3 </div>
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠΈΠ»ΠΈ CSS ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΠΊΠ°ΡΠΊΠ°Π΄Π½ΡΠΉ ΠΏΠΎΡΡΠ΄ΠΎΠΊ, Π²Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΠ΅ ΡΠ²ΠΎΠΈ ΠΊΠ»Π°ΡΡΡ ΠΏΠΎ ΡΡΠΎΠ²Π½Ρ Π²Π°ΠΆΠ½ΠΎΡΡΠΈ. Π Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΌΡ Ρ ΠΎΡΠΈΠΌ, ΡΡΠΎΠ±Ρ ΠΊΠ»Π°ΡΡ class=Β»boxΒ» ΠΏΡΠΈΠΌΠ΅Π½ΡΠ»ΡΡ ΠΏΠ΅ΡΠ΅Π΄ class=Β»redΒ». ΠΠ½Π°ΡΠ΅ class=Β»redΒ» Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ Π΄ΠΎ class=Β»boxΒ». ΠΠ°Π΄Π΅ΡΡΡ, ΡΡΠΎ ΠΏΠΎΠ½ΡΡΠ½ΠΎ!
ΠΠ·ΠΌΠ΅Π½ΠΈΠΌ Π½Π°Ρ ΠΊΠΎΠ΄ CSS:
div.box{ height:200px; width:200px; text-align:center; font-size:14px; color:#090; background-color:#dddddd; margin-right:10px; } div.red{ background-color:#ffcccc; } div.green{ background-color:#ccffcc; } div.blue{ background-color:#ccccff; }
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· ΡΡΠ΅Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠ² Π΅ΡΡΡ CSS ΠΊΠ»Π°ΡΡ .box, ΠΊ Π½ΠΈΠΌ Π²ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΠΏΡΠΎΠΏΠΈΡΠ°Π½Π½ΡΠ΅ Π² div.box. ΠΠΎ ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ <div> ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΊΠ»Π°ΡΡ (red, green, ΠΈΠ»ΠΈ blue). ΠΠΎΠ½Π΅ΡΠ½ΡΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ:
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: Π½Π΅ΡΠΌΠΎΡΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ div.box ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ background-color:#cccccc; Β«ΡΠ²Π΅ΡΠΎΠ²ΡΠ΅Β» ΠΊΠ»Π°ΡΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΡΡ ΠΏΠΎΡΠ»Π΅ Π½Π΅Π³ΠΎ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π² box red ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background-color, ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΌ Π² div.red, ΠΏΠ΅ΡΠ΅Π·Π°ΠΏΠΈΡΡΠ²Π°Π΅Ρ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π² div.box. ΠΡΠΎ ΡΠΎ, ΡΡΠΎ ΠΏΠΎΠ΄ΡΠ°Π·ΡΠΌΠ΅Π²Π°Π΅ΡΡΡ ΠΏΠΎΠ΄ ΠΊΠ°ΡΠΊΠ°Π΄ΠΎΠΌ: Π² CSS Π»ΠΎΠ³ΠΈΠΊΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠ²Π΅ΡΡ Ρ Π²Π½ΠΈΠ·. Π ΠΏΡΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠΈ ΠΊΠ»Π°ΡΡΠΎΠ² HTML β ΡΠ»Π΅Π²Π° Π½Π°ΠΏΡΠ°Π²ΠΎ.
ΠΠΎΠ΄ΡΠΌΠ°ΠΉΡΠ΅, Π΄Π»Ρ ΠΊΠ°ΠΊΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½ΡΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ CSS ΠΊΠ»Π°ΡΡΡ ΠΏΡΠΈ Π²Π΅ΡΡΡΠΊΠ΅ ΠΌΠ°ΠΊΠ΅ΡΠ° ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠΎΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡΡΠ»ΠΈ Π΄Π»Ρ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ:
- ΠΡΠ±ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π°ΠΌ Π·Π°Ρ ΠΎΡΠ΅ΡΡΡ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΎΠ²Π°ΡΠ°, ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΡΠ΄Π΅Π»Π°ΡΡ Π² ΡΠΎΡΠΌΠ΅ ΠΊΠ²Π°Π΄ΡΠ°ΡΠ°: Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ img.thumbnail{ width:200px;height:200px; };
- Π‘ΡΠΈΠ»ΠΈ ΡΡΡΠ»ΠΎΠΊ Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ ΠΎΡ ΡΡΠΈΠ»Π΅ΠΉ ΠΎΠ±ΡΡΠ½ΡΡ ΡΡΡΠ»ΠΎΠΊ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, a.button {};
- ΠΡΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ Π΄ΡΡΠ³ΠΎΠΉ ΡΠ²Π΅Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΡΡΡΠ»ΠΊΠΈ Π² Π²Π°ΡΠ΅ΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, a.nav:hover{ } a.nav: Hover {}.
ΠΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠ»Π°ΡΡΠΎΠ² ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π΄Π°ΡΡ ΠΈΠΌΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ CSS. ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΡΠΈ Β«ΠΈΠΌΠ΅Π½Π°Β» ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΎΠ΄ΠΈΠ½ ΡΡΠ΄ ΠΏΡΠ°Π²ΠΈΠ» Π΄Π»Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΠΊΠ·Π΅ΠΌΠΏΠ»ΡΡΠΎΠ² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π±Π΅Π· ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎΠ³ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΊΠΎΠ΄Π° CSS.
Π ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ΠΈ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΠΊΠ°ΡΠΊΠ°Π΄ΠΎΠΌ, ΠΏΠΎΡΡΠ΄ΠΎΠΊ Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π²Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΠ΅ ΡΠ²ΠΎΠΈ ΠΊΠ»Π°ΡΡΡ Π² HTML, Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΈΠΌΠ΅Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΡΠ°ΠΊ ΡΡΠΎ ΡΠ»Π΅Π΄ΠΈΡΠ΅ Π·Π° ΡΡΠΈΠΌ.
ΠΡΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ Π²ΠΎΠΏΡΠΎΡΡ, Π½Π΅ ΡΡΠ΅ΡΠ½ΡΠΉΡΠ΅ΡΡ Π·Π°Π΄Π°ΡΡ ΠΈΡ Π² ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΡ !
ΠΠ°Π½Π½Π°Ρ ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ΠΎΠΌ ΡΡΠ°ΡΡΠΈ Β«Using CSS Classes β A Handy GuideΒ» , ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²Π»Π΅Π½Π½Π°Ρ ΡΠ΅Π΄Π°ΠΊΡΠΈΠ΅ΠΉ ΠΏΡΠΎΠ΅ΠΊΡΠ°.
ΠΠ»Π°ΡΡΡ | htmlbook.ru
ΠΠ»Π°ΡΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ, ΠΊΠΎΠ³Π΄Π° Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΡΡΠΈΠ»Ρ Π΄Π»Ρ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ ΠΈΠ»ΠΈ Π·Π°Π΄Π°ΡΡ ΡΠ°Π·Π½ΡΠ΅ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ΅Π³Π°. ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠΎΠ²ΠΌΠ΅ΡΡΠ½ΠΎ Ρ ΡΠ΅Π³Π°ΠΌΠΈ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ Π΄Π»Ρ ΠΊΠ»Π°ΡΡΠΎΠ² Π±ΡΠ΄Π΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ.
Π’Π΅Π³.ΠΠΌΡ ΠΊΠ»Π°ΡΡΠ° { ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ1: Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅; ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ2: Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅; … }
ΠΠ½ΡΡΡΠΈ ΡΡΠΈΠ»Ρ Π²Π½Π°ΡΠ°Π»Π΅ ΠΏΠΈΡΠ΅ΡΡΡ ΠΆΠ΅Π»Π°Π΅ΠΌΡΠΉ ΡΠ΅Π³, Π° Π·Π°ΡΠ΅ΠΌ, ΡΠ΅ΡΠ΅Π· ΡΠΎΡΠΊΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ΅ ΠΈΠΌΡ ΠΊΠ»Π°ΡΡΠ°. ΠΠΌΠ΅Π½Π° ΠΊΠ»Π°ΡΡΠΎΠ² Π΄ΠΎΠ»ΠΆΠ½Ρ Π½Π°ΡΠΈΠ½Π°ΡΡΡΡ Ρ Π»Π°ΡΠΈΠ½ΡΠΊΠΎΠ³ΠΎ ΡΠΈΠΌΠ²ΠΎΠ»Π° ΠΈ ΠΌΠΎΠ³ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ Π² ΡΠ΅Π±Π΅ ΡΠΈΠΌΠ²ΠΎΠ» Π΄Π΅ΡΠΈΡΠ° (-) ΠΈ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΡ (_). ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΡΡΡΠΊΠΈΡ Π±ΡΠΊΠ² Π² ΠΈΠΌΠ΅Π½Π°Ρ ΠΊΠ»Π°ΡΡΠΎΠ² Π½Π΅Π΄ΠΎΠΏΡΡΡΠΈΠΌΠΎ. Π§ΡΠΎΠ±Ρ ΡΠΊΠ°Π·Π°ΡΡ Π² ΠΊΠΎΠ΄Π΅ HTML, ΡΡΠΎ ΡΠ΅Π³ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΡΠΌ ΠΊΠ»Π°ΡΡΠΎΠΌ, ΠΊ ΡΠ΅Π³Ρ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΡΡ Π°ΡΡΠΈΠ±ΡΡ (ΠΏΡΠΈΠΌΠ΅ΡΒ 8.1).
ΠΡΠΈΠΌΠ΅Ρ 8.1. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠ»Π°ΡΡΠΎΠ²
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>ΠΠ»Π°ΡΡΡ</title>
<style>
P { /* ΠΠ±ΡΡΠ½ΡΠΉ Π°Π±Π·Π°Ρ */
text-align: justify; /* ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅ */
}
P.cite { /* ΠΠ±Π·Π°Ρ Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ cite */
color: navy; /* Π¦Π²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° */
margin-left: 20px; /* ΠΡΡΡΡΠΏ ΡΠ»Π΅Π²Π° */
border-left: 1px solid navy; /* ΠΡΠ°Π½ΠΈΡΠ° ΡΠ»Π΅Π²Π° ΠΎΡ ΡΠ΅ΠΊΡΡΠ° */
padding-left: 15px; /* Π Π°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΎΡ Π»ΠΈΠ½ΠΈΠΈ Π΄ΠΎ ΡΠ΅ΠΊΡΡΠ° */
}
</style>
</head>
<body>
<p>ΠΠ»Ρ ΠΈΡΠΊΡΡΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ ΠΎΡΠ²Π΅ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ Π»ΡΠΌΠΈΠ½Π΅ΡΡΠ΅Π½ΡΠ½ΡΠ΅ Π»Π°ΠΌΠΏΡ.
ΠΠ½ΠΈ ΠΎΡΠ»ΠΈΡΠ°ΡΡΡΡ Π²ΡΡΠΎΠΊΠΎΠΉ ΡΠ²Π΅ΡΠΎΠ²ΠΎΠΉ ΠΎΡΠ΄Π°ΡΠ΅ΠΉ, ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΡΡΠΎΠΊΠΎΠΌ ΡΠ»ΡΠΆΠ±Ρ,
ΠΌΠ°Π»ΠΎΠΉ ΡΡΠΊΠΎΡΡΡΡ ΡΠ²Π΅ΡΡΡΠ΅ΠΉΡΡ ΠΏΠΎΠ²Π΅ΡΡ
Π½ΠΎΡΡΠΈ, Π±Π»ΠΈΠ·ΠΊΠΈΠΌ ΠΊ Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠΌΡ ΡΠΏΠ΅ΠΊΡΡΠ°Π»ΡΠ½ΡΠΌ
ΡΠΎΡΡΠ°Π²ΠΎΠΌ ΠΈΠ·Π»ΡΡΠ°Π΅ΠΌΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ°, ΡΡΠΎ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ Ρ
ΠΎΡΠΎΡΡΡ ΡΠ²Π΅ΡΠΎΠΏΠ΅ΡΠ΅Π΄Π°ΡΡ.</p>
<p>ΠΠ»Ρ ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΡ Π·Π°ΡΠ²Π΅ΡΠΊΠΈ ΡΠΊΡΠ°Π½Π° Π΄ΠΈΡΠΏΠ»Π΅Ρ ΡΠ²Π΅ΡΠΎΠ²ΡΠΌΠΈ ΠΏΠΎΡΠΎΠΊΠ°ΠΌΠΈ
ΠΎΠΊΠΎΠ½Π½ΡΠ΅ ΠΏΡΠΎΠ΅ΠΌΡ ΡΠ½Π°Π±ΠΆΠ΅Π½Ρ ΡΠ²Π΅ΡΠΎΡΠ°ΡΡΠ΅ΠΈΠ²Π°ΡΡΠΈΠΌΠΈ ΡΡΠΎΡΠ°ΠΌΠΈ.</p>
</body>
</html>
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° ΡΠΈΡ.Β 8.1.
Π ΠΈΡ. 8.1. ΠΠΈΠ΄ ΡΠ΅ΠΊΡΡΠ°, ΠΎΡΠΎΡΠΌΠ»Π΅Π½Π½ΠΎΠ³ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΈΠ»Π΅Π²ΡΡ ΠΊΠ»Π°ΡΡΠΎΠ²
ΠΠ΅ΡΠ²ΡΠΉ Π°Π±Π·Π°Ρ Π²ΡΡΠΎΠ²Π½Π΅Π½ ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅ Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ ΡΡΡΠ½ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ° (ΡΡΠΎΡ ΡΠ²Π΅Ρ Π·Π°Π΄Π°ΡΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ), Π° ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ, ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ ΠΊΠ»Π°ΡΡ Ρ ΠΈΠΌΠ΅Π½Π΅ΠΌ citeΒ β ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΡΠΈΠ½ΠΈΠΌ ΡΠ²Π΅ΡΠΎΠΌ ΠΈ Ρ Π»ΠΈΠ½ΠΈΠ΅ΠΉ ΡΠ»Π΅Π²Π°.
ΠΠΎΠΆΠ½ΠΎ, ΡΠ°ΠΊΠΆΠ΅, ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ»Π°ΡΡΡ ΠΈ Π±Π΅Π· ΡΠΊΠ°Π·Π°Π½ΠΈΡ ΡΠ΅Π³Π°. Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π±ΡΠ΄Π΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ.
.ΠΠΌΡ ΠΊΠ»Π°ΡΡΠ° { ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ1: Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅; ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ2: Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅; … }
ΠΡΠΈ ΡΠ°ΠΊΠΎΠΉ Π·Π°ΠΏΠΈΡΠΈ ΠΊΠ»Π°ΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΠΊ Π»ΡΠ±ΠΎΠΌΡ ΡΠ΅Π³Ρ (ΠΏΡΠΈΠΌΠ΅ΡΒ 8.2).
ΠΡΠΈΠΌΠ΅Ρ 8.2. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠ»Π°ΡΡΠΎΠ²
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>ΠΠ»Π°ΡΡΡ</title>
<style>
.gost {
color: green; /* Π¦Π²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° */
font-weight: bold; /* ΠΠΈΡΠ½ΠΎΠ΅ Π½Π°ΡΠ΅ΡΡΠ°Π½ΠΈΠ΅ */
}
.term {
border-bottom: 1px dashed red; /* ΠΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎΠ΄ ΡΠ΅ΠΊΡΡΠΎΠΌ */
}
</style>
</head>
<body>
<p>Π‘ΠΎΠ³Π»Π°ΡΠ½ΠΎ <span>ΠΠΠ‘Π’ 12.1.003-83 Π‘Π‘ΠΠ’ "Π¨ΡΠΌ. ΠΠ±ΡΠΈΠ΅
ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΡΡΠΈ"</span>, ΡΡΠΌΠΎΠ²ΠΎΠΉ Ρ
Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΡΡΠΈΠΊΠΎΠΉ ΡΠ°Π±ΠΎΡΠΈΡ
ΠΌΠ΅ΡΡ ΠΏΡΠΈ ΠΏΠΎΡΡΠΎΡΠ½Π½ΠΎΠΌ ΡΡΠΌΠ΅ ΡΠ²Π»ΡΡΡΡΡ ΡΡΠΎΠ²Π½ΠΈ Π·Π²ΡΠΊΠΎΠ²ΡΡ
Π΄Π°Π²Π»Π΅Π½ΠΈΠΉ Π² Π΄Π΅ΡΠΈΠ±Π΅Π»Π°Ρ
Π² ΠΎΠΊΡΠ°Π²Π½ΡΡ
ΠΏΠΎΠ»ΠΎΡΠ°Ρ
. Π‘ΠΎΠ²ΠΎΠΊΡΠΏΠ½ΠΎΡΡΡ ΡΠ°ΠΊΠΈΡ
ΡΡΠΎΠ²Π½Π΅ΠΉ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ
<b>ΠΏΡΠ΅Π΄Π΅Π»ΡΠ½ΡΠΌ ΡΠΏΠ΅ΠΊΡΡΠΎΠΌ</b>, Π½ΠΎΠΌΠ΅Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΠΈΡΠ»Π΅Π½Π½ΠΎ ΡΠ°Π²Π΅Π½
ΡΡΠΎΠ²Π½Ρ Π·Π²ΡΠΊΠΎΠ²ΠΎΠ³ΠΎ Π΄Π°Π²Π»Π΅Π½ΠΈΡ Π² ΠΎΠΊΡΠ°Π²Π½ΠΎΠΉ ΠΏΠΎΠ»ΠΎΡΠ΅ ΡΠΎ ΡΡΠ΅Π΄Π½Π΅Π³Π΅ΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ΡΠΊΠΎΠΉ
ΡΠ°ΡΡΠΎΡΠΎΠΉ 1000 ΠΡ.
</p>
</body>
</html>
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΊΠ»Π°ΡΡΠΎΠ² ΠΊ ΡΠ΅Π³Π°ΠΌ <span> ΠΈ <b> ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° ΡΠΈΡ.Β 8.2.
Π ΠΈΡ. 8.2. ΠΠΈΠ΄ ΡΠ΅Π³ΠΎΠ², ΠΎΡΠΎΡΠΌΠ»Π΅Π½Π½ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»Π°ΡΡΠΎΠ²
ΠΠ»Π°ΡΡΡ ΡΠ΄ΠΎΠ±Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ, ΠΊΠΎΠ³Π΄Π° Π½ΡΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΡΡΠΈΠ»Ρ ΠΊ ΡΠ°Π·Π½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ: ΡΡΠ΅ΠΉΠΊΠ°ΠΌ ΡΠ°Π±Π»ΠΈΡΡ, ΡΡΡΠ»ΠΊΠ°ΠΌ, Π°Π±Π·Π°ΡΠ°ΠΌ ΠΈ Π΄Ρ. Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅Β 8.3 ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠ° ΡΠΎΠ½Π° ΡΡΡΠΎΠΊ ΡΠ°Π±Π»ΠΈΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Β«Π·Π΅Π±ΡΡΒ».
ΠΡΠΈΠΌΠ΅Ρ 8.3. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠ»Π°ΡΡΠΎΠ²
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>ΠΠ°ΠΌΠ½ΠΈ</title>
<style>
table.jewel {
width: 100%; /* Π¨ΠΈΡΠΈΠ½Π° ΡΠ°Π±Π»ΠΈΡΡ */
border: 1px solid #666; /* Π Π°ΠΌΠΊΠ° Π²ΠΎΠΊΡΡΠ³ ΡΠ°Π±Π»ΠΈΡΡ */
}
th {
background: #009383; /* Π¦Π²Π΅Ρ ΡΠΎΠ½Π° */
color: #fff; /* Π¦Π²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° */
text-align: left; /* ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ */
}
tr.odd {
background: #ebd3d7; /* Π¦Π²Π΅Ρ ΡΠΎΠ½Π° */
}
</style>
</head>
<body>
<table>
<tr>
<th>ΠΠ°Π·Π²Π°Π½ΠΈΠ΅</th><th>Π¦Π²Π΅Ρ</th><th>Π’Π²Π΅ΡΠ΄ΠΎΡΡΡ ΠΏΠΎ ΠΠΎΠΎΡΡ</th>
</tr>
<tr>
<td>ΠΠ»ΠΌΠ°Π·</td><td>ΠΠ΅Π»ΡΠΉ</td><td>10</td>
</tr>
<tr>
<td>Π ΡΠ±ΠΈΠ½</td><td>ΠΡΠ°ΡΠ½ΡΠΉ</td><td>9</td>
</tr>
<tr>
<td>ΠΠΌΠ΅ΡΠΈΡΡ</td><td>ΠΠΎΠ»ΡΠ±ΠΎΠΉ</td><td>7</td>
</tr>
<tr>
<td>ΠΠ·ΡΠΌΡΡΠ΄</td><td>ΠΠ΅Π»Π΅Π½ΡΠΉ</td><td>8</td>
</tr>
<tr>
<td>Π‘Π°ΠΏΡΠΈΡ</td><td>ΠΠΎΠ»ΡΠ±ΠΎΠΉ</td><td>9</td>
</tr>
</table>
</body>
</html>
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° ΡΠΈΡ.Β 8.3. Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΊΠ»Π°ΡΡ Ρ ΠΈΠΌΠ΅Π½Π΅ΠΌ odd ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ²Π΅ΡΠ° ΡΠΎΠ½Π° ΡΡΡΠΎΠΊΠΈ ΡΠ°Π±Π»ΠΈΡΡ. ΠΠ° ΡΡΡΡ ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΡΡΠΎΡ ΠΊΠ»Π°ΡΡ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΡΡ Π½Π΅ ΠΊΠΎ Π²ΡΠ΅ΠΌ ΡΠ΅Π³Π°ΠΌ <tr> ΠΈ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΡΡ ΡΠ΅ΡΠ΅Π΄ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ°Π·Π½ΡΡ ΡΠ²Π΅ΡΠΎΠ².
Π ΠΈΡ. 8.3. Π Π΅Π·ΡΠ»ΡΡΠ°Ρ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΊΠ»Π°ΡΡΠΎΠ²
ΠΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ°Π·Π½ΡΡ ΠΊΠ»Π°ΡΡΠΎΠ²
Π Π»ΡΠ±ΠΎΠΌΡ ΡΠ΅Π³Ρ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΊΠ»Π°ΡΡΠΎΠ², ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»ΡΡ ΠΈΡ Π² Π°ΡΡΠΈΠ±ΡΡΠ΅ class ΡΠ΅ΡΠ΅Π· ΠΏΡΠΎΠ±Π΅Π». Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΡΠΈΠ»Ρ, ΠΎΠΏΠΈΡΠ°Π½Π½ΡΠΉ Π² ΠΏΡΠ°Π²ΠΈΠ»Π°Ρ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΊΠ»Π°ΡΡΠ°. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΏΡΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΠΊΠ»Π°ΡΡΠΎΠ² ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠ΅ ΡΡΠΈΠ»Π΅Π²ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°, Π½ΠΎ Ρ ΡΠ°Π·Π½ΡΠΌΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ, ΡΠΎ Π±Π΅ΡΡΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Ρ ΠΊΠ»Π°ΡΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠΏΠΈΡΠ°Π½ Π² ΠΊΠΎΠ΄Π΅ Π½ΠΈΠΆΠ΅.
Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅Β 8.4 ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ°Π·Π½ΡΡ ΠΊΠ»Π°ΡΡΠΎΠ² Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΎΠ±Π»Π°ΠΊΠ° ΡΠ΅Π³ΠΎΠ².
ΠΡΠΈΠΌΠ΅Ρ 8.4. Π‘ΠΎΡΠ΅ΡΠ°Π½ΠΈΠ΅ ΡΠ°Π·Π½ΡΡ ΠΊΠ»Π°ΡΡΠΎΠ²
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>ΠΠ±Π»Π°ΠΊΠΎ ΡΠ΅Π³ΠΎΠ²</title>
<style type="text/css">
.level1 { font-size: 1em; }
.level2 { font-size: 1.2em; }
.level3 { font-size: 1.4em; }
.level4 { font-size: 1.6em; }
.level5 { font-size: 1.8em; }
.level6 { font-size: 2em; }
A.tag {
color: #468be1; /* Π¦Π²Π΅Ρ ΡΡΡΠ»ΠΎΠΊ */
}
</style>
</head>
<body>
<div>
<a href="/term/2">Paint.NET</a>
<a href="/term/69">Photoshop</a>
<a href="/term/3">ΡΠ²Π΅Ρ</a>
<a href="/term/95">ΡΠΎΠ½</a>
<a href="/term/11">ΠΏΠ°Π»ΠΈΡΡΠ°</a>
<a href="/term/43">ΡΠ»ΠΎΠΈ</a>
<a href="/term/97">ΡΠ²Π΅Ρ</a>
<a href="/term/44">ΠΏΠ°Π½Π΅Π»ΠΈ</a>
<a href="/term/16">Π»ΠΈΠ½ΠΈΡ</a>
<a href="/term/33">ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ</a>
<a href="/term/14">ΠΏΠΈΠΊΡΠ΅Π»</a>
<a href="/term/27">Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ</a>
</div>
</body>
</html>
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° ΡΠΈΡ.Β 8.4.
Π ΠΈΡ. 8.4. ΠΠ±Π»Π°ΠΊΠΎ ΡΠ΅Π³ΠΎΠ²
Π ΡΡΠΈΠ»ΡΡ ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠΏΡΡΠΊΠ°Π΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π·Π°ΠΏΠΈΡΡ Π²ΠΈΠ΄Π° .layer1.layer2, Π³Π΄Π΅ layer1 ΠΈ layer2 ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ ΡΠΎΠ±ΠΎΠΉ ΠΈΠΌΠ΅Π½Π° ΠΊΠ»Π°ΡΡΠΎΠ². Π‘ΡΠΈΠ»Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Ρ ΠΊΠΎΡΠΎΡΡΡ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ Π·Π°Π΄Π°Π½Ρ ΠΊΠ»Π°ΡΡΡ layer1 ΠΈ layer2.
ΠΠΎΠΏΡΠΎΡΡ Π΄Π»Ρ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ
1. ΠΠ°ΠΊΠΎΠ΅ ΠΈΠΌΡ ΠΊΠ»Π°ΡΡΠ° Π½Π°ΠΏΠΈΡΠ°Π½ΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ?
- 2layer1
- 1layer
- Π―ndex
- pink-floyd
- 28_days_later
2. ΠΠ°ΠΊΠΎΠΉ ΡΠ²Π΅Ρ Π±ΡΠ΄Π΅Ρ Ρ ΡΠ»ΠΎΠ²Π° Β«ΠΏΠΎΡΠΎΠΊΠ°Β» Π² ΠΊΠΎΠ΄Π΅?
<p>ΠΠΎΡΡΡΠΈΡΠΈΠ΅Π½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ·Π»ΡΡΠ°Π΅ΠΌΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠΈΠ»ΡΠ½ΠΈΠΊΠ°ΠΌΠΈ <span>ΠΏΠΎΡΠΎΠΊΠ°</span>, Π½Π° ΡΠ°ΡΡΠ΅ΡΠ½ΠΎΠΉ ΠΏΠ»ΠΎΡΠΊΠΎΡΡΠΈ.</p>
ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π³ΠΎ ΡΡΠΈΠ»Ρ?
BODY { color: red; }
P { color: green; }
.c1 {color: blue; }
.c2 { color: yellow; }
.c3 { color: orange; }
.c2.c3 { color: black; }
- ΠΠ΅Π»ΡΠ½ΡΠΉ.
- Π‘ΠΈΠ½ΠΈΠΉ.
- ΠΡΠ»ΡΡΠΉ.
- ΠΡΠ°Π½ΠΆΠ΅Π²ΡΠΉ.
- Π§ΡΡΠ½ΡΠΉ.
3. ΠΠ°ΠΊ Π·Π°Π΄Π°ΡΡ ΡΡΠΈΠ»Ρ Ρ ΡΠ΅Π³Π° <div>DOOM</div>?
- div[iddqd] { color: red; }
- div.iddqd { color: red; }
- iddqd.div { color: red; }
- div#iddqd { color: red; }
- div=iddqd { color: red; }
4. ΠΠ°ΠΊΠΎΠ΅ ΠΈΠΌΡ ΠΊΠ»Π°ΡΡΠ° ΡΠ»Π΅Π΄ΡΠ΅Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊ ΡΠ΅Π³Ρ <P>, ΡΡΠΎΠ±Ρ ΡΠ΅ΠΊΡΡ Π±ΡΠ» ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ ΠΆΠΈΡΠ½ΡΠΌ ΠΈ ΠΊΡΠ°ΡΠ½ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ°, Π΅ΡΠ»ΠΈ ΠΈΠΌΠ΅Π΅ΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΡΡΠΈΠ»Ρ?
Β s1 { color: red; font-weight: bold; }
.s2 { color: red; }
.s3 { background-color: red; font-weight: bold; }
.s4 { font-weight: bold; }
.s5 { font: red bold; }
- s1
- s2
- s3
- s2 s4
- s5
ΠΡΠ²Π΅ΡΡ
1. pink-floyd
2. Π§ΡΡΠ½ΡΠΉ.
3. div.iddqd { color: red; }
4. s2 s4
ΠΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠ»Π°ΡΡ css Π½Π° wordpress?
Π― ΠΏΡΡΠ°ΡΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠ»Π°ΡΡ Π½Π° wordpress ΠΊ ΠΊΡΡΠ³Π»ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ, Π½ΠΎ Π½Π΅ Π·Π½Π°Ρ, ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ. Π― ΡΠΆΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΠ» style.css
, Π½ΠΎ ΠΎΠ½ Π²ΡΠ΅ Π΅ΡΠ΅ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ. Π― ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Hueman Theme
ΠΈ ΠΏΡΡΠ°ΡΡΡ ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ ΡΡΠΎΠΌΡ ΠΎΠ±ΡΠ°Π·ΡΡ .
ΠΠ°ΠΊ Ρ ΠΌΠΎΠ³ ΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ?
style.css Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ > ΡΠ΅Π΄Π°ΠΊΡΠΎΡ>style.css
.circular-image img {
width: 300px;
height: 300px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
-ms-border-radius: 150px;
-o-border-radius: 150px;
border-radius: 150px;
}
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ
<div><img src="http://ideiadinamica.com/wp-content/uploads/2018/09/10372571_10200376805178580_8449416293546333562_n-150x150.jpg" alt="" /></div>
css
wordpress ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ ΠΡΡΠΎΡΠ½ΠΈΠΊ FernandoPaiva Β Β 14 ΡΠ΅Π½ΡΡΠ±ΡΡ 2018 Π² 15:29
4 ΠΎΡΠ²Π΅ΡΠ°
- ΠΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ CSS ΠΊ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌΡ ΠΊΠ»Π°ΡΡΡ div — WordPress
Π― ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ΅ΠΌΡ WordPress Ρ ΠΈΠΌΠ΅Π½Π΅ΠΌ KALLYAS, ΠΈ Ρ ΠΌΠ΅Π½Ρ Π²ΠΎΠ·Π½ΠΈΠΊΠ»ΠΈ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ CSS Π² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΉ ΠΊΠ»Π°ΡΡ. ΠΡΠ° ΡΠ΅ΠΌΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΎΡΡΠΊΠΎΠ΄ΠΎΠ². ΠΡΠ°ΠΊ, Π΄ΠΎΠΏΡΡΡΠΈΠΌ, Ρ Ρ ΠΎΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΎΠ½ Ρ CSS ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠ΅ΡΡΡ ΠΎΠ±Π»Π°ΡΡΡ Π½Π° Π³Π»Π°Π²Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅, Π½Π΅ Π²Π»ΠΈΡΡ Π½Π° ΡΠ΅ΡΡΡ ΠΎΠ±Π»Π°ΡΡΡ Π½Π° Π»ΡΠ±ΠΎΠΉ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ . ΠΊΡΠΎΠΌΠ΅…
- ΠΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΊΠ»Π°ΡΡ Π² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ wordpress post
Π― Ρ ΠΎΡΡ ΡΠ΄Π΅Π»Π°ΡΡ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΡ ΡΠ΅ΠΌΡ Ρ Bootstrap 3. ΠΠ΄Π½Π°ΠΊΠΎ ΠΌΠ½Π΅ Π½ΡΠΆΠ½ΠΎ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΊΠ»Π°ΡΡ CSS .img-responsive ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ ΠΏΠΎΡΡΠΎΠ²ΠΎΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΌΠ½Π΅ Π½ΡΠΆΠ½ΠΎ, ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π±ΡΠ»ΠΈ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΌΠΈ. ΠΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠΈΡΠ΅ ΠΌΠ½Π΅, ΡΡΠΎ ΠΌΠ½Π΅ Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π² ΡΠ°ΠΉΠ» WordPress functions.php ΠΈΠ»ΠΈ Π»ΡΠ±ΠΎΠΉ…
5
Wp-admin > Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ > Π½Π°ΡΡΡΠΎΠΉΠΊΠ° Π·Π°ΡΠ΅ΠΌ Π² ΡΠ°Π·Π΄Π΅Π»Π΅ «additional css» Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ²ΠΎΠΉ ΠΊΠΎΠ΄
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ trainmania100 Β Β 14 ΡΠ΅Π½ΡΡΠ±ΡΡ 2018 Π² 15:32
2
Π― Π±Ρ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠΈΠ» ΡΠΎΠ·Π΄Π°ΡΡ Π΄ΠΎΡΠ΅ΡΠ½ΡΡ ΡΠ΅ΠΌΡ , ΡΡΠΎΠ±Ρ Π²Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ ΡΠ°ΠΉΠ»Ρ Π²Π°ΡΠ΅ΠΉ ΡΠ΅ΠΌΡ(ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ΄ΡΡ ΠΏΠ΅ΡΠ΅Π·Π°ΠΏΠΈΡΠ°Π½Ρ, Π΅ΡΠ»ΠΈ Π°Π²ΡΠΎΡ ΠΊΠΎΠ³Π΄Π°-Π»ΠΈΠ±ΠΎ ΠΎΠ±Π½ΠΎΠ²ΠΈΡ ΡΠ΅ΠΌΡ).
ΠΠΎ ΡΡΡΠΈ, Π²Π°ΠΌ ΠΏΡΠΎΡΡΠΎ Π½ΡΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ Π½ΠΎΠ²ΡΡ ΠΏΠ°ΠΏΠΊΡ Ρ ΡΠ΅ΠΌ ΠΆΠ΅ ΠΈΠΌΠ΅Π½Π΅ΠΌ, ΡΡΠΎ ΠΈ ΠΏΠ°ΠΏΠΊΠ° Π²Π°ΡΠ΅ΠΉ ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΡΠ΅ΠΌΡ, Ρ -child
Π² ΠΊΠΎΠ½ΡΠ΅ ΠΈΠΌΠ΅Π½ΠΈ ΠΏΠ°ΠΏΠΊΠΈ(ΠΈΠ»ΠΈ ΡΡΠΎ-ΡΠΎ Π΅ΡΠ΅, Π½ΠΎ ΡΡΠΎ ΠΏΡΠΎΡΡΠΎ ΡΠΎΡ
ΡΠ°Π½ΡΠ΅Ρ ΡΠΈΡΡΠΎΡΡ).
ΠΡΡΡΠ΄Π° Π²Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΠ΅ style.css
Π² Π΄ΠΎΡΠ΅ΡΠ½ΡΡ ΠΏΠ°ΠΏΠΊΡ ΡΠΎ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΊΠΎΠ΄ΠΎΠΌ, Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½ΡΠΌ Π²Π²Π΅ΡΡ
Ρ, ΡΡΠΎΠ±Ρ WordPress Π·Π½Π°Π», ΡΡΠΎ ΡΡΠΎ Π΄ΠΎΡΠ΅ΡΠ½ΡΡ ΡΠ΅ΠΌΠ°:
/*
Theme Name: Hueman Child
Description: Hueman Child Theme
Template: hueman
Version: 1.0.0
*/
Π£Π±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ ΡΡΡΠΎΠΊΠ° Template:
ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΠΈΠΌΠ΅Π½ΠΈ ΡΠ°Π±Π»ΠΎΠ½Π° ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΉ ΡΠ΅ΠΌΡ(Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ ΡΡΠΎ, ΠΎΡΠΊΡΡΠ² style.css
). ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΉ ΡΠ΅ΠΌΡ, Π° Π·Π°ΡΠ΅ΠΌ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π»ΡΠ±ΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΠΈΠ΅ ΡΡΠΈΠ»ΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅, Π² ΡΡΠΎΡ ΡΠ°ΠΉΠ» style.css
. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ style.css
Π΄ΠΎΡΠ΅ΡΠ½Π΅ΠΉ ΡΠ΅ΠΌΡ Π±ΡΠ΄Π΅Ρ Π·Π°Π³ΡΡΠΆΠ΅Π½ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΌ, ΠΎΠ½ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡ ΡΡΠΈΠ»Ρ ΡΠ΅ΠΌΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ(ΠΏΡΠΈ ΡΡΠ»ΠΎΠ²ΠΈΠΈ, ΡΡΠΎ ΠΎΠ½ΠΈ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ !important
, ΠΈ Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π²Π°ΠΌ ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ !important
).
ΠΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ Π²Π°ΡΠ° Π΄ΠΎΡΠ΅ΡΠ½ΡΡ ΡΠ΅ΠΌΠ° Π±ΡΠ΄Π΅Ρ Π½Π°ΡΡΡΠΎΠ΅Π½Π°, ΠΏΡΠΎΡΡΠΎ Π°ΠΊΡΠΈΠ²ΠΈΡΡΠΉΡΠ΅ Π΅Π΅ Π² ΡΠ°Π·Π΄Π΅Π»Π΅ ΠΠ½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΠΏΠ°Π½Π΅Π»ΠΈ Π°Π΄ΠΌΠΈΠ½ΠΈΡΡΡΠ°ΡΠΎΡΠ°.
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ APAD1 Β Β 14 ΡΠ΅Π½ΡΡΠ±ΡΡ 2018 Π² 16:34
-3
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ Π½ΠΈΠΆΠ΅, ΡΡΠΎ Ρ ΠΈ ΡΠ΄Π΅Π»Π°Π» Π΄Π°Π²Π½ΡΠΌ-Π΄Π°Π²Π½ΠΎ. ΠΠ°Π΄Π΅ΡΡΡ, ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΡΡΠ°Π±ΠΎΡΠ°ΡΡ Π΄Π»Ρ Π²Π°Ρ:
Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½ WP Image Borders. ΠΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π² Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ >> ΠΡΠ°Π½ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ WP, Π° Π·Π°ΡΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΉ ΠΊΠ»Π°ΡΡ CSS (Π΅ΡΠ»ΠΈ ΠΎΠ½ Ρ Π²Π°Ρ Π΅ΡΡΡ) ΠΈΠ»ΠΈ
ΠΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π½Π° ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ, Π³Π΄Π΅ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π½Π°ΠΆΠΌΠΈΡΠ΅ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π² ΡΠ°Π·Π΄Π΅Π»Π΅ «Π Π΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅» ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π² ΡΠ°Π·Π΄Π΅Π» «ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ» ΠΈ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ²ΠΎΠΉ ΠΊΠ»Π°ΡΡ css Π² ΠΊΠ»Π°ΡΡ Image CSS
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ parth patel Β Β 14 ΡΠ΅Π½ΡΡΠ±ΡΡ 2018 Π² 15:46
- WordPress ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ CSS ΠΊΠ»Π°ΡΡ Π΄Π»Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΡΡΡΠ°Π½ΠΈΡΡ
Π― Π½ΠΎΠ²ΠΈΡΠΎΠΊ Π² WordPress, ΠΈ ΡΠ΅ΠΏΠ΅ΡΡ Ρ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Ρ ΠΌΠΎΠ΅ΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠΉ ΡΠ΅ΠΌΠΎΠΉ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Twitter Bootstrap Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ° Π΄Π»Ρ ΡΠ²ΠΎΠ΅ΠΉ ΡΠ΅ΠΌΡ, ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΊΠ»Π°ΡΡ CSS text-right , ΠΈ ΡΡΠΎΡ ΠΊΠ»Π°ΡΡ Ρ Ρ ΠΎΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΡΠ²ΠΎΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΡ Π² WordPress. ΠΠΎ Ρ…
- ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΊΠ»Π°ΡΡ css Π² Π³Π°Π»Π΅ΡΠ΅Ρ WordPress
Π― Ρ ΠΎΡΠ΅Π» Π±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΊΠ»Π°ΡΡ css Π² ΡΠΎΠ΄Π½ΡΡ Π³Π°Π»Π΅ΡΠ΅Ρ WordPress. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΠΎΡ Π²ΡΠ²ΠΎΠ΄ΠΈΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ HTML: <div id=gallery-2 class=gallery galleryid-1715 gallery-columns-4 gallery-size-thumbnail> Π― Π±Ρ Ρ ΠΎΡΠ΅Π» ΠΏΡΠΎΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΊΠ»Π°ΡΡ iwmp . ΠΠ°ΠΊ Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ? Π―…
-3
WordPress ΡΠ΅ΠΌΡ ΠΎΠ±ΡΡΠ½ΠΎ Π±Π»ΠΎΠΊΠΈΡΡΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΡΠΈΠ»ΠΈ. Π§ΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ, Π±Π»ΠΎΠΊΠΈΡΡΠ΅ΡΡΡ Π»ΠΈ Π²Π°Ρ ΡΡΠΈΠ»Ρ, ΡΠ΅Π»ΠΊΠ½ΠΈΡΠ΅ ΠΏΡΠ°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡΡΠΈ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅, ΡΡΠΎΠ±Ρ ΠΎΡΠΊΡΡΡΡ ΠΈΠ½ΡΠΏΠ΅ΠΊΡΠΎΡ ΠΈ Π½Π°ΠΉΡΠΈ ΡΡΠΈΠ»ΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Ρ Π²Π°ΡΠΈΠΌ ΠΊΠ»Π°ΡΡΠΎΠΌ. ΠΠΎΠ³Π΄Π° Π²Ρ ΠΈΡ Π½Π°ΠΉΠ΄Π΅ΡΠ΅, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ «!Π²Π°ΠΆΠ½ΠΎ» ΠΊ ΡΠ²ΠΎΠΈΠΌ ΡΡΠΈΠ»ΡΠΌ, ΡΡΠΎΠ±Ρ Π·Π°ΡΡΠ°Π²ΠΈΡΡ ΠΈΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ.
ΡΡΠΈΠ»ΠΈ ΠΊΠ»Π°ΡΡΠΎΠ² Π±Π»ΠΎΠΊΠΈΡΡΡΡΡΡ ΡΡΠΈΠ»ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²
ΠΠΎΡ ΠΊΠ°ΠΊ Π²Ρ Π·Π°ΡΡΠ°Π²Π»ΡΠ΅ΡΠ΅ ΡΡΠΈΠ»ΠΈ:
.circular-image img {
width: 300px !important;
height: 300px; !important }
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ Brenda Alicia Β Β 14 ΡΠ΅Π½ΡΡΠ±ΡΡ 2018 Π² 16:25
ΠΠΎΡ ΠΎΠΆΠΈΠ΅ Π²ΠΎΠΏΡΠΎΡΡ:
ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΌΠΎΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΡΡ ΡΡΡΠ°Π½ΠΈΡΡ html (js ΠΈ css) Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ wordpress
Π£ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠ° html(js ΠΈ css), ΡΠ°Π±ΠΎΡΠ°ΡΡΠ°Ρ Π΄ΠΎΠ»ΠΆΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ Π² ΠΌΠΎΠ΅ΠΌ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠ΅. ΠΠΎ Ρ Ρ ΠΎΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΠΎΡ ΡΠ°ΠΉΠ» html Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ wordpress. Π― ΠΏΠΎΠΏΡΡΠ°Π»ΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π²Π΅ΡΡ…
ΠΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠ»Π°ΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ ΡΠΏΠΈΡΠΊΠ° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΡ ΡΠΈΠΏΠΎΠ² Π·Π°ΠΏΠΈΡΠ΅ΠΉ Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ ΠΌΠΎΠ½ΠΈΡΠΎΡΠΈΠ½Π³Π° WordPress
Π― ΠΏΡΡΠ°ΡΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠ»Π°ΡΡ ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΡΠΏΠΈΡΠΊΠ° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΡ ΡΠΈΠΏΠΎΠ² Π·Π°ΠΏΠΈΡΠ΅ΠΉ WordPress, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠ»Π°ΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΌΠ΅ΡΠ°-ΠΏΠΎΠ»Ρ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Π·Π°ΠΏΠΈΡΠΈ Π½Π° Π±ΡΠΊΡΠ½Π΄Π΅: ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ: Ρ…
ΠΠΎΠ±Π°Π²ΡΡΠ΅ Javascript, ΡΡΠΎΠ±Ρ ΡΠ΄Π°Π»ΠΈΡΡ ΠΊΠ»Π°ΡΡ css Π² WordPress
Π― Ρ ΠΎΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½ΠΈΠΆΠ΅ javascript Π½Π° Π΄ΠΎΠΌΠ°ΡΠ½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ wordpress, ΡΡΠΎΠ±Ρ ΡΠ΄Π°Π»ΠΈΡΡ ΠΊΠ»Π°ΡΡ css. Π― Ρ ΠΎΡΡ ΡΠ΄Π°Π»ΠΈΡΡ Π²ΡΠ±ΡΠ°Π½Π½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ ΡΠ΄Π°Π»ΠΈΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΌΡΡΠΈ Π½Π° Π΄ΡΡΠ³ΡΡ Π²ΠΊΠ»Π°Π΄ΠΊΡ Π² ΡΠ»Π°ΠΉΠ΄Π΅ΡΠ΅. Π― Π΄ΠΎΠ±Π°Π²ΠΈΠ»…
ΠΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ CSS ΠΊ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌΡ ΠΊΠ»Π°ΡΡΡ div — WordPress
Π― ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ΅ΠΌΡ WordPress Ρ ΠΈΠΌΠ΅Π½Π΅ΠΌ KALLYAS, ΠΈ Ρ ΠΌΠ΅Π½Ρ Π²ΠΎΠ·Π½ΠΈΠΊΠ»ΠΈ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ CSS Π² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΉ ΠΊΠ»Π°ΡΡ. ΠΡΠ° ΡΠ΅ΠΌΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΎΡΡΠΊΠΎΠ΄ΠΎΠ². ΠΡΠ°ΠΊ, Π΄ΠΎΠΏΡΡΡΠΈΠΌ, Ρ Ρ ΠΎΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΎΠ½ Ρ CSS…
ΠΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΊΠ»Π°ΡΡ Π² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ wordpress post
Π― Ρ ΠΎΡΡ ΡΠ΄Π΅Π»Π°ΡΡ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΡ ΡΠ΅ΠΌΡ Ρ Bootstrap 3. ΠΠ΄Π½Π°ΠΊΠΎ ΠΌΠ½Π΅ Π½ΡΠΆΠ½ΠΎ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΊΠ»Π°ΡΡ CSS .img-responsive ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ ΠΏΠΎΡΡΠΎΠ²ΠΎΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΌΠ½Π΅ Π½ΡΠΆΠ½ΠΎ, ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π±ΡΠ»ΠΈ…
WordPress ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ CSS ΠΊΠ»Π°ΡΡ Π΄Π»Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΡΡΡΠ°Π½ΠΈΡΡ
Π― Π½ΠΎΠ²ΠΈΡΠΎΠΊ Π² WordPress, ΠΈ ΡΠ΅ΠΏΠ΅ΡΡ Ρ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Ρ ΠΌΠΎΠ΅ΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠΉ ΡΠ΅ΠΌΠΎΠΉ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Twitter Bootstrap Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ° Π΄Π»Ρ ΡΠ²ΠΎΠ΅ΠΉ ΡΠ΅ΠΌΡ, ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ…
ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΊΠ»Π°ΡΡ css Π² Π³Π°Π»Π΅ΡΠ΅Ρ WordPress
Π― Ρ ΠΎΡΠ΅Π» Π±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΊΠ»Π°ΡΡ css Π² ΡΠΎΠ΄Π½ΡΡ Π³Π°Π»Π΅ΡΠ΅Ρ WordPress. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΠΎΡ Π²ΡΠ²ΠΎΠ΄ΠΈΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ HTML: <div id=gallery-2 class=gallery galleryid-1715 gallery-columns-4…
WordPress: ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠ»Π°ΡΡ CSS Π² ΡΡΡΠ»ΠΊΠΈ ΠΌΠ΅Π½Ρ, ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΊΠΎΠ΄ΠΎΠΌ
<?php wp_nav_menu(array(‘menu’ => ‘mainnav’, ‘menu_class’ => ‘nav-bar-content current’, ‘menu_id’ => ‘navigation’, ‘container’ => false, ‘ theme_location’ => ‘primary-menu’,…
ΠΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ JS & CSS Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ wordpress
Π£ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΊΠΎΠ΄, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ ΡΠ°ΠΉΠ»Ρ js ΠΈ CSS. ΠΠΎΠΉ ΡΠ°ΠΉΡ-ΡΡΠΎ ΡΠ°ΠΉΡ wordpress, ΠΈ Ρ Ρ ΠΎΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠΎΠ΄ Π½Π° ΠΎΠ΄Π½Ρ ΠΈΠ· ΡΠ²ΠΎΠΈΡ ΡΡΡΠ°Π½ΠΈΡ. Π― Ρ ΠΎΡΡ Π·Π½Π°ΡΡ, Π³Π΄Π΅ Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΠΊΠΎΠ΄ JS, Π° ΠΊΠΎΠ΄…
ΠΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΊΠ»Π°ΡΡ ΠΊ ΡΡΠ½ΠΊΡΠΈΡΠΌ Π² wordpress
Π£ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ ΡΠ°ΠΉΡ wordpress Π½Π° localhost, ΠΈ Ρ Ρ ΠΎΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΠΎΠ±Π°Π²ΠΈΡΡ Π² ΠΊΠΎΡΠ·ΠΈΠ½Ρ. Π― ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» ΡΡΠ½ΠΊΡΠΈΡ wordpress Π΄Π»Ρ ΡΠΎΠ³ΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ³ΠΎ, Π½ΠΎ ΠΌΠ½Π΅ Π½ΡΠΆΠ΅Π½ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠΎΠ³ΠΎ, ΡΡΠΎ Ρ ΡΠ΄Π΅Π»Π°Π». Π€ΡΠ½ΠΊΡΠΈΡ, ΠΊΠΎΡΠΎΡΡΡ Ρ…
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠ°ΠΉΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΡΡΠΈΠ»Π΅ΠΉ Π² WordPress
ΠΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠ°ΡΡΠΎ Π½Π° ΡΠΎΡΡΠΌΠ°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ WordPress Ρ Π²ΡΡΡΠ΅ΡΠ°Ρ Π²ΠΎΠΏΡΠΎΡΡ ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΎΠΉ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ Π²ΠΈΠ΄Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠ°ΠΉΡΠ°: ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΠΏΡΠ½ΠΊΡΠΎΠ² ΠΌΠ΅Π½Ρ, ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΡΡΠΏΠ½Π΅Π΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ, Π²ΡΠ΄Π΅Π»ΠΈΡΡ ΡΡΡΠ»ΠΊΠΈ Π² ΡΠ΅ΠΊΡΡΠ΅ Π±ΠΎΠ»Π΅Π΅ ΡΡΠΊΠΈΠΌ ΡΠ²Π΅ΡΠΎΠΌ ΠΈ Ρ.Π΄.
Π Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠ΅ΠΌΠ°Ρ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ, ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Π² ΠΏΠ»Π°ΡΠ½ΡΡ Π²Π°ΡΠΈΠ°Π½ΡΠ°Ρ , Π΅ΡΡΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΠΎΠΏΡΠΈΠΉ ΠΈ Π½Π°ΡΡΡΠΎΠ΅ΠΊ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠΈΡ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠ°ΠΉΡΠ°.
ΠΡΡΡ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠ΅ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΠΈ Π² ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΡ ΡΠ΅ΠΌΠ°Ρ , ΠΏΠΎΡΡΠ°Π²Π»ΡΠ΅ΠΌΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ WordPress.
ΠΠΎ, Π² ΡΠ»ΡΡΠ°ΡΡ , ΠΊΠΎΠ³Π΄Π° Π½ΡΠΆΠ½ΠΎΠΉ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ Π½Π΅Ρ β ΡΠΏΡΠ°Π²ΠΈΡΡΡΡ Ρ Π²ΠΎΠΏΡΠΎΡΠΎΠΌ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ CSS.
CSS-ΡΡΠΈΠ»ΠΈ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ ΠΈΠ· ΡΠ΅Π±Ρ Π½Π°Π±ΠΎΡΡ ΠΏΡΠ°Π²ΠΈΠ», Π·Π°Π΄Π°Π²Π°Π΅ΠΌΡΡ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈΠ»ΠΈ Π½Π°Π±ΠΎΡΠΎΠ² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠ°ΠΉΡΠ°. ΠΠ½ΠΈ ΡΠ΅Π³ΡΠ»ΠΈΡΡΡΡ ΡΠΎ, ΠΊΠ°ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π½Π° ΡΠ°ΠΉΡΠ΅: ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° ΠΈ ΠΌΠ΅ΠΆΡΡΡΠΎΡΠ½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π», Π½Π°Π»ΠΈΡΠΈΠ΅ ΠΈ ΡΠ²Π΅Ρ Π³ΡΠ°Π½ΠΈΡΡ Π²ΠΎΠΊΡΡΠ³ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΠ²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° Π²Π½ΡΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΠ²Π΅Ρ Π΅Π³ΠΎ ΡΠΎΠ½Π° ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅.
ΠΠΎΠ»ΡΡΠΈΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΎΠ± ΡΡΡΡΠΎΠΉΡΡΠ²Π΅ CSS, ΠΏΡΠΈΠ΅ΠΌΠ°Ρ ΡΠ°Π±ΠΎΡΡ ΠΈ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΡΡΡ ΡΠΎ ΡΠΏΠΈΡΠΊΠΎΠΌ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΡ ΠΏΡΠ°Π²ΠΈΠ» ΠΌΠΎΠΆΠ½ΠΎ Π² ΠΈΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π° ΡΠ°ΠΉΡΠ°Ρ htmlbook.ru,Β webref.ru ΠΈ Ρ.Π΄.
ΠΠ»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΡΠ²ΠΎΠ΅Π³ΠΎ CSS-ΠΊΠΎΠ΄Π° WordPress ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠΉ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ β ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΡΠΈΠ»ΠΈ. ΠΡΠ»ΠΈ ΠΡ Π½Π°Ρ ΠΎΠ΄ΠΈΡΠ΅ΡΡ Π½Π° ΠΏΡΠ±Π»ΠΈΡΠ½ΠΎΠΉ ΡΠ°ΡΡΠΈ ΡΠ°ΠΉΡΠ°, Π² Π½Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΏΠ°ΡΡΡ Π½Π°ΠΆΠ°Π² ΠΊΠ½ΠΎΠΏΠΊΡ Β«ΠΠ°ΡΡΡΠΎΠΈΡΡΒ» Π² Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΠΊΡΠ°Π½Π°, Π° Π·Π°ΡΠ΅ΠΌ ΠΏΠΎ ΠΏΡΠ½ΠΊΡΡ Β«ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΡΠΈΠ»ΠΈΒ». ΠΠ· Π°Π΄ΠΌΠΈΠ½ ΠΏΠ°Π½Π΅Π»ΠΈ: ΠΠ½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ -> ΠΠ°ΡΡΡΠΎΠΈΡΡ -> ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΡΠΈΠ»ΠΈ.
ΠΠ°Π½Π½ΡΠΉ ΡΠ°Π·Π΄Π΅Π» ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΈΠ· ΡΠ΅Π±Ρ ΠΏΠΎΠ»Π΅, Π² ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΡΠ²ΠΎΠΈ CSS-ΡΡΠΈΠ»ΠΈ.
Π§ΡΠΎΠ±Ρ ΠΏΡΠΈΠ²ΡΠ·Π°ΡΡ CSS-ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΊ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ·Π½Π°ΡΡ Π΅Π³ΠΎ ΡΠ΅Π³ ΠΈ Π°ΡΡΠΈΠ±ΡΡΡ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ ΠΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΠ° Google Chrome.
Π©Π΅Π»ΠΊΠ½Π΅ΠΌ ΠΏΡΠ°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡΡΠΈ ΠΏΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΡΡΡΠ΅ΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈ Π² ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠΌ ΠΌΠ΅Π½Ρ Π²ΡΠ±Π΅ΡΠ΅ΠΌ ΠΏΡΠ½ΠΊΡ Β«ΠΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠΎΠ΄Β». ΠΠΎΡΠ»Π΅ ΡΠ΅Π³ΠΎ ΠΎΡΠΊΡΠΎΠ΅ΡΡΡ ΠΎΠΊΠ½ΠΎ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² Ρ Π°ΠΊΡΠΈΠ²Π½ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠΎΠΉ Β«ElementsΒ».
ΠΠ»Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΈΠ·ΠΌΠ΅Π½ΠΈΠΌ ΡΠ²Π΅Ρ Π½Π°Π΄ΠΏΠΈΡΠΈ WP TEST Π½Π° ΡΠΈΠ½ΠΈΠΉ. ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΈΠ· ΡΠ΅Π±Ρ ΡΡΡΠ»ΠΊΡ (ΡΠ΅Π³ a), Π½ΠΎ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ Π°ΡΡΠΈΠ±ΡΡΠΎΠ² class ΠΈΠ»ΠΈ id, ΠΊ ΠΊΠΎΡΠΎΡΡΠΌ ΠΌΡ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ ΠΏΡΠΈΠ²ΡΠ·Π°ΡΡ CSS-ΠΏΡΠ°Π²ΠΈΠ»Π°. Π£ΡΠΎΠ²Π½Π΅ΠΌ Π²ΡΡΠ΅ Π΅ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΡΠ΅Π³ΠΎΠΌ h2 (Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ) ΠΈ ΠΊΠ»Π°ΡΡΠΎΠΌ Β«site-titleΒ», ΠΎΠ½ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΌ Π΄Π»Ρ ΡΡΡΠ»ΠΊΠΈ WP TEST. ΠΠΎΠ±Π°Π²ΠΈΠΌ CSS-ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Π΄Π»Ρ ΡΠ΅Π³Π° a Ρ ΡΡΠ΅ΡΠΎΠΌ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΊΠ»Π°ΡΡΠ° Β«site-titleΒ» Π² ΠΏΠΎΠ»Π΅ ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΡΠΈΠ»ΠΈ.
.site-title a { color: #00f; }
.site-title a { Β Β Β Β color: #00f; } |
#00f β ΡΡΠΎ ΠΊΠΎΠ΄ ΡΠΈΠ½Π΅Π³ΠΎ ΡΠ²Π΅ΡΠ°. Π‘Β ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠ²Π΅ΡΠΎΠ² Π² CSS ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΡΡΡ Π½Π° Π²ΡΡΠ΅ΡΠΊΠ°Π·Π°Π½Π½ΡΡ ΡΠ°ΠΉΡΠ°Ρ .
CSS-ΠΊΠΎΠ΄ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½ΡΠΉ Π² ΠΏΠΎΠ»Π΅Β ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΡΠΈΠ»ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎ, Π½ΠΎ ΠΊΠ°ΠΊ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π·Π°ΠΌΠ΅ΡΠΈΡΡ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Β«StylesΒ» Π½Π°ΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΠ»ΠΎΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΈΠΎΡΠΈΡΠ΅ΡΠ½ΡΠΌ (ΠΈΠ»ΠΈ ΠΏΠΎ-Π΄ΡΡΠ³ΠΎΠΌΡ β ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ½ΡΠΌ) CSS-ΠΏΡΠ°Π²ΠΈΠ»ΠΎΠΌ ΡΠ΅ΠΌΡ (ΠΎΠ½ΠΎ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΎ Π±ΠΎΠ»Π΅Π΅ ΡΡΠΊΠΈΠΌ ΡΠ²Π΅ΡΠΎΠΌ).
body.has-header-image .site-title a { color: #fff; }
body.has-header-image .site-title a { Β Β Β Β color: #fff; } |
Π£ΡΠΈΠ»ΠΈΠΌ Π½Π°ΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΡΠΊΠ°Π·Π°Π² Π±ΠΎΠ»Π΅Π΅ ΡΠΎΡΠ½ΡΠΉ Π½Π°Π±ΠΎΡ ΡΠ΅Π³ΠΎΠ² ΠΈ ΠΊΠ»Π°ΡΡΠΎΠ².
body.has-header-image .site-title a { color: #00f; }
body.has-header-image .site-title a { Β Β Β Β color: #00f; } |
Π§ΡΠΎΠ±Ρ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π½Π°ΠΆΠ°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Β«Π‘ΠΎΡ ΡΠ°Π½ΠΈΡΡ ΠΈ ΠΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°ΡΡΒ» Π² Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΠΊΡΠ°Π½Π°.
ΠΡΠ»ΠΈ ΡΠΈΠ½ΠΈΠΉ ΡΠ²Π΅Ρ Π½Π΅ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ, ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ΄ΠΎΠ±ΡΠ°ΡΡ Π΄ΡΡΠ³ΠΎΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠ°Π»ΠΈΡΡΡ, ΡΠ΅Π»ΠΊΠ½ΡΠ² Π½Π° ΡΠΈΠ½ΠΈΠΉ ΠΊΠ²Π°Π΄ΡΠ°ΡΠΈΠΊ Π² CSS-ΠΏΡΠ°Π²ΠΈΠ»Π΅ Π² ΠΏΡΠ°Π²ΠΎΠΌ Π½ΠΈΠΆΠ½Π΅ΠΌ ΡΠ³Π»Ρ ΡΠΊΡΠ°Π½Π°, Π° Π·Π°ΡΠ΅ΠΌ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠΎΠ΄ Π²ΡΠ±ΡΠ°Π½Π½ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ° Π² ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Π² ΠΏΠΎΠ»Π΅ ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΡΠΈΠ»ΠΈ.
ΠΠ½Π°Π»ΠΎΠ³ΠΈΡΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΡΡΡΠ°Π½ΠΈΡ. ΠΠ°Ρ ΠΎΠ΄ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΡΠ²ΠΎΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠ΅Π³ΠΎ Π² ΡΠ΅ΠΌΠ΅.
body.page:not(.twentyseventeen-front-page) .entry-title { font-size: 24px; }
body.page:not(.twentyseventeen-front-page) .entry-title { Β Β Β Β font-size: 24px; } |
Π‘ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΡΠ΅ΠΌΡ WordPress Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°Π½Ρ ΠΏΠΎΠ΄ ΡΠ°Π·Π½ΡΠ΅ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ ΡΠΊΡΠ°Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ². ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΊΠΎΡΡΠ΅ΠΊΡΠΈΡΠΎΠ²Π°ΡΡΒ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° ΡΠ°Π·Π½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ². ΠΠΎΠ±Π°Π²ΠΈΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ².
/* ΠΠ»Ρ Π²ΡΠ΅Ρ ΡΡΡΡΠΎΠΉΡΡΠ² */ body.page:not(.twentyseventeen-front-page) .entry-title { font-size: 12px; } /* ΠΠ»Ρ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΠ»Π°Π½ΡΠ΅ΡΠ° Π² ΠΏΠΎΡΡΡΠ΅ΡΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΈ Π²ΡΡΠ΅ */ @media (min-width: 768px) { body.page:not(.twentyseventeen-front-page) .entry-title { font-size: 20px; } } /* ΠΠ»Ρ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΠ»Π°Π½ΡΠ΅ΡΠ° Π² Π°Π»ΡΠ±ΠΎΠΌΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΈ Π²ΡΡΠ΅ */ @media (min-width: 1024px) { body.page:not(.twentyseventeen-front-page) .entry-title { font-size: 30px; } }
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/* ΠΠ»Ρ Π²ΡΠ΅Ρ ΡΡΡΡΠΎΠΉΡΡΠ² */ body.page:not(.twentyseventeen-front-page) .entry-title { Β Β Β Β font-size: 12px; } Β /* ΠΠ»Ρ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΠ»Π°Π½ΡΠ΅ΡΠ° Π² ΠΏΠΎΡΡΡΠ΅ΡΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΈ Π²ΡΡΠ΅ */ @media (min-width: 768px) { Β Β Β Β body.page:not(.twentyseventeen-front-page) .entry-title { Β Β Β Β Β Β Β Β font-size: 20px; Β Β Β Β } } Β /* ΠΠ»Ρ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΠ»Π°Π½ΡΠ΅ΡΠ° Π² Π°Π»ΡΠ±ΠΎΠΌΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΈ Π²ΡΡΠ΅ */ @media (min-width: 1024px) { Β Β Β Β body.page:not(.twentyseventeen-front-page) .entry-title { Β Β Β Β Β Β Β Β font-size: 30px; Β Β Β Β } } |
ΠΡΠΎΠ²Π΅ΡΠΈΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ ΠΌΠΎΠΆΠ½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅ΠΆΠΈΠΌΠ° ΡΠΌΡΠ»ΡΡΠΈΠΈ Π² ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ°Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° (ΠΊΠ½ΠΎΠΏΠΊΠ° Toggle device toolbar). Π‘ ΠΏΠΎΠΌΠΎΡΡΡ Π½Π΅Π³ΠΎ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΊΠ°ΠΊ ΡΠ°ΠΉΡ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π½Π° ΡΠ°Π·Π½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ , Π²ΡΠ±ΠΈΡΠ°Ρ Π½ΡΠΆΠ½ΠΎΠ΅ ΠΈΠ· Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΡΠΏΠΈΡΠΊΠ° Π² Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΠΊΡΠ°Π½Π°.
Π£Π΄ΠΎΠ±Π½Π°Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠ° Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΈΠΌΠ΅Π½ ΠΊΠ»Π°ΡΡΠΎΠ² CSS
ΠΡ Π°Π²ΡΠΎΡΠ°: ΠΈΠ½ΠΎΠ³Π΄Π° Ρ ΡΡΠ°Π»ΠΊΠΈΠ²Π°ΡΡΡ Ρ ΡΠΈΡΡΠ°ΡΠΈΡΠΌΠΈ, ΠΊΠΎΠ³Π΄Π° ΠΌΠ½Π΅ Π½ΡΠΆΠ½Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΈΠΌΠ΅Π½Π° ΠΊΠ»Π°ΡΡΠΎΠ² CSS Π΄Π»Ρ ΠΌΠ°Π½ΠΈΠΏΡΠ»ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΡΠΈΠ»ΡΠΌΠΈ. ΠΠΎΠ³Π΄Π° ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ, Ρ Π΄Π΅Π»Ρ ΡΡΠΈ ΡΠΈΡΡΠ°ΡΠΈΠΈ Π½Π° ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ ΡΠΈΠΏΡ ΠΈ ΠΏΡΠΈΡΠ²Π°ΠΈΠ²Π°Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ ΡΠΈΠΏΡ ΠΏΡΠ΅ΡΠΈΠΊΡ ΠΈΠΌΠ΅Π½ΠΈ ΠΊΠ»Π°ΡΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΡΠΎΡ ΡΠΈΠΏ.
ΠΠ»Π°ΡΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ
ΠΡΠ±ΠΎΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠ½ΠΎΠ³Π΄Π° Π½ΡΠΆΠ΄Π°ΡΡΡΡ Π² ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ β ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌ ΡΡΠ»ΠΎΠ²ΠΈΠΈ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΊ Π½Π΅ΠΌΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΉ ΡΡΠΈΠ»Ρ.
ΠΡΠ»ΠΈ ΠΌΡ Π²ΠΎΠ·ΡΠΌΠ΅ΠΌ, ΠΊ ΠΏΡΠΈΠΌΠ΅ΡΡ, main-nav, ΠΈΠ½ΠΎΠ³Π΄Π° Π½Π°ΠΌ ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ, ΠΎΡΠΊΡΡΡ ΠΎΠ½ ΠΈΠ»ΠΈ Π½Π΅Ρ. ΠΠ΄Π΅ΡΡ Π½Π° ΠΏΠΎΠΌΠΎΡΡ ΠΏΡΠΈΡ ΠΎΠ΄ΡΡ ΠΊΠ»Π°ΡΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ CSS.
<nav> </nav>
<nav> </nav> |
ΠΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΊΡΡΡ ΠΏΠΎ Π²Π΅ΡΡΡΠΊΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ° Ρ Π½ΡΠ»Ρ!
ΠΠ·ΡΡΠΈΡΠ΅ ΠΊΡΡΡ ΠΈ ΡΠ·Π½Π°ΠΉΡΠ΅, ΠΊΠ°ΠΊ Π²Π΅ΡΡΡΠ°ΡΡ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΡΠ°ΠΉΡΡ Π½Π° HTML5 ΠΈ CSS3
Π£Π·Π½Π°ΡΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΈ ΠΊΠ»Π°ΡΡΡ Π΄Π»Ρ ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ ΡΠΈΠΏΠΎΠ² ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΉ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ:
<div> <!— Gray Message —></div> <div><!— Green Message —></div> <div> <!— Red Message —></div> <div> <!—Yellow Message —></div>
<div> <!— GrayΒ Β Message —></div> <div><!— Green Message —></div> <div> <!— RedΒ Β Message —></div> <div> <!—Yellow Message —></div> |
ΠΠ»ΠΈ Π»ΡΠ±ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ: is-wide, is-top, is-small, is-double-size, is-scrolled, is-full-width ΠΈ Ρ.Π΄. Π ΡΡΠΈΡ ΡΠ»ΡΡΠ°ΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΎΠ»ΡΠΊΠΎ ΠΊΠ»Π°ΡΡΠΎΠ², ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ.
ΠΠ°ΠΊ ΡΡΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π² ΡΠ°ΠΉΠ»Π΅ CSS / Sass:
.common-message{ /*component styles*/ &.is-approved { color:green; } &.is-error { color:red; } &.is-alert { color:yellow; } }
.common-message{ Β Β Β Β /*component styles*/ Β Β Β Β &.is-approved { color:green; }Β Β Β Β Β Β Β Β &.is-errorΒ Β Β Β { color:red; }Β Β Β Β Β Β Β Β &.is-alertΒ Β Β Β { color:yellow; }Β Β Β Β } |
Π‘Π»ΡΠΆΠ΅Π±Π½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ
Π Π΄ΡΡΠ³ΠΈΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ»ΠΎΠ³ΠΈΡΡ CSS ΡΠ»ΡΠΆΠ΅Π±Π½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ ΡΠ²Π»ΡΡΡΡΡ ΠΏΠΎΠ²ΡΠ΅Π΄Π½Π΅Π²Π½ΡΠΌΠΈ Π²Π΅ΡΠ°ΠΌΠΈ. ΠΠ΄Π½Π°ΠΊΠΎ Π² ΠΌΠΎΠ΅ΠΌ ΠΌΠ΅ΡΠΎΠ΄Π΅ ΡΡΠΈ ΡΠΈΠΏΡ ΠΊΠ»Π°ΡΡΠΎΠ² ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ HTML, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΎΠ½ΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ, ΠΈ ΠΈΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΎ Π²Π½ΠΎΡΠΈΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ CSS!
ΠΡΠ΅ ΠΎΠ΄Π½Π° ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΡ ΠΌΠΎΠΈΡ ΡΠ»ΡΠΆΠ΅Π±Π½ΡΡ ΠΊΠ»Π°ΡΡΠΎΠ² Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΌΡ Π²ΡΠ΅Π³Π΄Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΠΈΡ Ρ ΠΏΡΠ°Π²ΠΈΠ»ΠΎΠΌ Β«!importantΒ». Π‘Π»ΡΠΆΠ΅Π±Π½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ β Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΡΠΉ Ρ ΠΎΡΠΎΡΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ !important. ΠΠ°ΡΠ΅ΠΌ Π½Π°ΠΌ ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ?! ΠΡΠ΅ ΠΏΡΠΎΡΡΠΎ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΡΡΠΈ ΠΊΠ»Π°ΡΡΡ, ΠΌΡ Π²ΡΠ΅Π³Π΄Π° Ρ ΠΎΡΠΈΠΌ, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΈ Π½Π΅ ΠΈΠ·ΠΌΠ΅Π½ΡΠ»ΠΈΡΡ Π΄Π»Ρ Π²ΡΠ΅Π³ΠΎ ΠΊΠ°ΡΠΊΠ°Π΄Π° CSS. ΠΡΠ»ΠΈ ΠΌΡ Π½Π΅ Ρ ΠΎΡΠΈΠΌ, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΈ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ»ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΡΠΈΠ»ΠΈ, Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π°Π»ΠΈΡΡ ΠΊΠ»Π°ΡΡ ΠΈΠ· ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° HTML.
ΠΡΠΈΠΌΠ΅Ρ ΡΠ»ΡΠΆΠ΅Π±Π½ΡΡ ΠΊΠ»Π°ΡΡΠΎΠ² CSS:
.u-hide{ display:none!important;}
.u-hide{ display:none!important;} |
ΠΡΠΈΠΌΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ»ΡΠΆΠ΅Π±Π½ΡΡ ΠΊΠ»Π°ΡΡΠΎΠ² Π² HTML:
<div class»common-message u-hide»></div>
<div class»common-message u-hide»></div> |
Π― Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΈΡ ΡΠ°ΡΡΠΎ, ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠΈΡΡΠ°ΡΠΈΡΡ , ΠΊΠΎΡΠΎΡΡΠ΅ Ρ ΠΎΠΏΠΈΡΠ°Π». Π‘Π»ΡΠΆΠ΅Π±Π½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ, ΡΠ°ΠΊ ΠΆΠ΅ ΠΊΠ°ΠΊ ΠΈ ΠΊΠ»Π°ΡΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΎΠ»ΡΠΊΠΎ, ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ.
ΠΠ»Π°ΡΡΡ ΡΡΡΠ½ΠΎΡΡΠ΅ΠΉ ΠΈ ΠΊΠ»Π°ΡΡΡ ΡΡΡΠ°Π½ΠΈΡ
ΠΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°Ρ Π΅ΡΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ ΠΈΠ»ΠΈ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ ΠΏΡΠΎΠ΅ΠΊΡΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π΄Π»Ρ Π½Π΅ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π ΡΡΠΈΡ ΡΠ»ΡΡΠ°ΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π΄Π²ΡΡ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΎΠ²:
Π‘ΡΡΠ½ΠΎΡΡΠΈ β ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°, ΡΡΠΈΠ»ΠΈ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ»Π΅Π³ΠΊΠ° ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡΡ, Ρ Π΄ΠΎΠ±Π°Π²Π»ΡΡ ΠΊ Π½Π΅ΠΌΡ Π΄ΡΡΠ³ΠΎΠ΅ ΠΈΠΌΡ ΠΊΠ»Π°ΡΡΠ°, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ Ρ ΠΏΡΠ΅ΡΠΈΠΊΡΠ° βe-β , ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡΠ΅Π³ΠΎ ΡΡΡΠ½ΠΎΡΡΡ, Π² Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ ΠΈΠΌΠ΅Π½ΠΈ ΠΊΠ»Π°ΡΡΠ° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°.
ΠΡΠΎΡ ΠΊΠ»Π°ΡΡ ΠΌΠΎΠΆΠ΅Ρ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΈΠ»ΠΈ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΡΠΈΠ»ΠΈ. ΠΠΎΠ΅ ΡΠΌΠΏΠΈΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½Ρ ΡΡΡΠ½ΠΎΡΡΡ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°. ΠΡΠ»ΠΈ Π΅ΡΡΡ Π΄ΡΡΠ³ΠΎΠΉ ΡΠ»ΡΡΠ°ΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°, ΡΡΠΈΠ»ΠΈ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π½Π΅ Π½Π° 100% ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ, Π»ΡΡΡΠ΅ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ Π΄ΡΡΠ³ΡΡ ΡΡΡΠ½ΠΎΡΡΡ! ΠΡΠΈΠΌΠ΅Ρ:
ΠΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΊΡΡΡ ΠΏΠΎ Π²Π΅ΡΡΡΠΊΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ° Ρ Π½ΡΠ»Ρ!
ΠΠ·ΡΡΠΈΡΠ΅ ΠΊΡΡΡ ΠΈ ΡΠ·Π½Π°ΠΉΡΠ΅, ΠΊΠ°ΠΊ Π²Π΅ΡΡΡΠ°ΡΡ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΡΠ°ΠΉΡΡ Π½Π° HTML5 ΠΈ CSS3
Π£Π·Π½Π°ΡΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅<section> </section>
<section> </section> |
ΠΡΠΎΠΌΠ΅ ΡΡΠΎΠ³ΠΎ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΠΎΠ»ΡΠΊΠΎ ΠΊΠ»Π°ΡΡΠΎΠ² CSS ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ / ΡΠ»ΡΠΆΠ΅Π±Π½ΡΡ ΠΊΠ»Π°ΡΡΠΎΠ², ΡΠΊΠΎΠ»ΡΠΊΠΎ Π·Π°Ρ ΠΎΡΠΈΡΠ΅.
<section> </section>
<section> </section> |
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ CSS:
.e-datepicker-popup{ /*add or override styles*/ }
.e-datepicker-popup{ Β Β Β Β /*add or override styles*/ } |
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. Π§ΡΠΎΠ±Ρ ΠΊΠ»Π°ΡΡ ΡΡΡΠ½ΠΎΡΡΠ΅ΠΉ ΠΏΡΠ΅ΠΎΠ±Π»Π°Π΄Π°Π» Π² Π±ΠΎΡΡΠ±Π΅ ΠΊΠ°ΡΠΊΠ°Π΄Π½ΡΡ ΡΡΠΈΠ»Π΅ΠΉ, Π΅Π³ΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π²ΡΠ΅Π³Π΄Π° Π·Π°ΠΏΠΈΡΡΠ²Π°ΡΡ ΠΏΠΎΡΠ»Π΅ ΠΈΠΌΠ΅Π½ ΠΊΠ»Π°ΡΡΠΎΠ² ΠΎΠ±ΡΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ². ΠΡΠΈΠΌΠ΅Ρ:
.common-popup{ /*common popup styles*/ } .e-datepicker-popup{ /*add or override style of common-popup */ }
.common-popup{Β Β Β Β Β Β /*common popup styles*/ } .e-datepicker-popup{ /*add or override style of common-popup */ } |
Π‘ΡΡΠ°Π½ΠΈΡΡ β ΠΊΠ°ΠΆΠ΄ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π½Π° Π²Π°ΡΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠΈΡΠ°ΡΡ Π±ΠΎΠ»ΡΡΠΎΠΉ ΡΡΡΠ½ΠΎΡΡΡΡ. ΠΠ»Π°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ body ΠΈΠ»ΠΈ Π² Π³Π»Π°Π²Π½ΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΡ Π²Π°ΡΡΠ²Π°Π΅Ρ Π²ΡΠ΅, ΠΈΠΌΠ΅Π½Π° ΡΡΠΎΠ³ΠΎ ΠΊΠ»Π°ΡΡΠ° Π½Π°ΡΠΈΠ½Π°ΡΡΡΡ Ρ Β«p-Β». ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ: Β«p-homepageΒ» ΠΈΠ»ΠΈ Β«p-newsΒ» ΠΈ Ρ. Π΄.
<body></body>
<body></body> |
ΠΡΡΡΠ΅ ΠΈΠ·Π±Π΅Π³Π°ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ ΠΌΠ΅ΡΠΎΠ΄Π°, Π΅ΡΠ»ΠΈ ΡΡΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π½ΠΎ ΠΈΠ½ΠΎΠ³Π΄Π° Π² ΡΠ΅Π°Π»ΡΠ½ΠΎΠΉ ΠΆΠΈΠ·Π½ΠΈ Π±ΡΠ²Π°ΡΡ ΡΠ»ΡΡΠ°ΠΈ, ΠΊΠΎΠ³Π΄Π° Π΄ΡΡΠ³ΠΎΠ³ΠΎ Π²ΡΠ±ΠΎΡΠ° Π½Π΅Ρ. ΠΡΠΈΠΌΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ:
.p-homepage .common-popup{ /*do some styles manipulations*/ }
.p-homepage .common-popup{ /*do some styles manipulations*/ } |
ΠΡΠΎΡ ΠΊΠ»Π°ΡΡ ΠΌΠΎΠΆΠ΅Ρ Π²Π»ΠΈΡΡΡ Π½Π° ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΏΠ°ΡΡΠΈΠ°Π» Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΠ»Π°ΡΡΡ JavaScript
Π‘ΡΡΠ΅ΡΡΠ²ΡΡΡ ΡΠΈΡΡΠ°ΡΠΈΠΈ, Π² ΠΊΠΎΡΠΎΡΡΡ Π½Π°ΠΌ Π½ΡΠΆΠ½Ρ ΠΈΠΌΠ΅Π½Π° ΠΊΠ»Π°ΡΡΠΎΠ² CSS Π΄Π»Ρ Π²ΡΠ±ΠΎΡΠ° Π²Π΅ΡΠ΅ΠΉ Π² JS. ΠΠΎ ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ΄Π½ΠΈ ΠΈ ΡΠ΅ ΠΆΠ΅ ΠΊΠ»Π°ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°ΡΠΈΡΠ½ΠΎ Π΄Π»Ρ ΠΏΡΠΎΠ΅ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈ Π²ΡΠ±ΠΎΡΠ° Π΄Π°Π½Π½ΡΡ Π² JS, ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΠΈΠΌΠ΅Π½Π° ΠΊΠ»Π°ΡΡΠΎΠ² JS. ΠΡΠΈ ΠΈΠΌΠ΅Π½Π° ΠΊΠ»Π°ΡΡΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΠΌΠ°Π½ΠΈΠΏΡΠ»ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π΄Π°Π½Π½ΡΠΌΠΈ, Π° Π½Π΅ Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΡΡΠΈΠ»Π΅ΠΉ!
ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠ»Π°ΡΡΡ Π΄Π»Ρ ΡΡΠΈΠ»Π΅ΠΉ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΠΌΠ΅ΡΠΎΠ΄ΠΈΠΊΠΎΠΉ, ΠΎΠΏΠΈΡΠ°Π½Π½ΠΎΠΉ Π²ΡΡΠ΅, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ»ΡΠΆΠ΅Π±Π½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ. ΠΡΠΈΠΌΠ΅Ρ:
<section> </section>
<section> </section> |
ΠΠ°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
ΠΠΎΡ ΠΈ Π²ΡΠ΅, Π½Π°Π΄Π΅ΡΡΡ, Π²Π°ΠΌ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΠ»Π°ΡΡ ΡΡΠ° ΡΡΠ°ΡΡΡ, ΠΈ Π²Ρ ΡΠ·Π½Π°Π»ΠΈ ΠΌΠ½ΠΎΠ³ΠΎ Π½ΠΎΠ²ΠΎΠ³ΠΎ.
ΠΠ²ΡΠΎΡ: Elad Shechter
ΠΡΡΠΎΡΠ½ΠΈΠΊ: //medium.com
Π Π΅Π΄Π°ΠΊΡΠΈΡ: ΠΠΎΠΌΠ°Π½Π΄Π° webformyself.
ΠΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΊΡΡΡ ΠΏΠΎ Π²Π΅ΡΡΡΠΊΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ° Ρ Π½ΡΠ»Ρ!
ΠΠ·ΡΡΠΈΡΠ΅ ΠΊΡΡΡ ΠΈ ΡΠ·Π½Π°ΠΉΡΠ΅, ΠΊΠ°ΠΊ Π²Π΅ΡΡΡΠ°ΡΡ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΡΠ°ΠΉΡΡ Π½Π° HTML5 ΠΈ CSS3
Π£Π·Π½Π°ΡΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅PSD to HTML
ΠΡΠ°ΠΊΡΠΈΠΊΠ° Π²Π΅ΡΡΡΠΊΠΈ ΡΠ°ΠΉΡΠ° Π½Π° CSS Grid Ρ Π½ΡΠ»Ρ
Π‘ΠΌΠΎΡΡΠ΅ΡΡΠΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ CSS Π² WPForms
Π₯ΠΎΡΠΈΡΠ΅ Π½Π°ΡΡΡΠΎΠΈΡΡ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ Π²Π°ΡΠΈΡ ΡΠΎΡΠΌ WordPress? Π WPForms Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ ΠΈ ΡΡΠΈΠ»ΠΈ CSS, ΡΡΠΎΠ±Ρ Π²Π°ΡΠΈ ΡΠΎΡΠΌΡ Π²ΡΠ³Π»ΡΠ΄Π΅Π»ΠΈ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π²Π°ΠΌ Ρ ΠΎΡΠ΅ΡΡΡ.
Π ΡΡΠΎΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π΅ ΠΌΡ ΠΏΠΎΠΊΠ°ΠΆΠ΅ΠΌ Π²Π°ΠΌ, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ CSS Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠΎΡΠΌΡ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π»ΡΠ±ΠΎΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ CSS Π½Π° Π²Π°Ρ ΡΠ°ΠΉΡ WordPress.
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΠΊΠ»Π°ΡΡ CSS?
CSS-ΠΊΠ»Π°ΡΡΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΡΠΊΠ°Π·Π°ΡΡ, ΠΊΠ°ΠΊΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅.
Π WPForms ΠΏΠΎΠ»ΡΠΌ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Π½Π°Π·Π½Π°ΡΠ°Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΊΠ»Π°ΡΡΠΎΠ² CSS. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ Π΄Π»Ρ ΠΏΠΎΠ»Ρ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Field Size ΠΈΠ· Large , Π΅ΠΌΡ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈΡΠ²ΠΎΠ΅Π½ ΠΊΠ»Π°ΡΡ CSS wpforms-field-large
. ΠΠ΄Π½Π°ΠΊΠΎ ΡΡΠΎΡ ΠΊΠ»Π°ΡΡ ΠΏΠΎΠ»Π΅Π·Π΅Π½ Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ CSS, ΡΠΎΠ»ΡΠΊΠΎ Π΅ΡΠ»ΠΈ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ Π±ΠΎΠ»ΡΡΠΎΠ΅ ΠΏΠΎΠ»Π΅ ΡΠΎΡΠΌΡ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅.
ΠΠΎΠ±Π°Π²ΠΈΠ² ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΊΠ»Π°ΡΡ CSS, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ ΡΠ°ΡΠ³Π΅ΡΠΈΠ½Π³ Π½Π° ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»Π΅ ΡΠΎΡΠΌΡ ΠΈΠ»ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΎΠ΄Π½ΠΈ ΠΈ ΡΠ΅ ΠΆΠ΅ ΡΡΠΈΠ»ΠΈ ΠΊ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌ ΠΏΠΎΠ»ΡΠΌ.
ΠΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ CSS Π² WPForms
Π WPForms Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ²ΠΎΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ CSS Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ ΠΏΠΎΠ»Ρ ΡΠΎΡΠΌΡ, ΠΊΠ½ΠΎΠΏΠΊΡ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ ΠΈΠ»ΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Π²ΠΎΠΊΡΡΠ³ Π²Π°ΡΠ΅ΠΉ ΡΠΎΡΠΌΡ.
ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΊΠ»Π°ΡΡΠΎΠ² CSS Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ ΠΏΠΎΠ»Ρ ΡΠΎΡΠΌΡ
Π§ΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΊΠ»Π°ΡΡ CSS Π² ΠΏΠΎΠ»Π΅ ΡΠΎΡΠΌΡ, ΡΠ½Π°ΡΠ°Π»Π° ΡΠΎΠ·Π΄Π°ΠΉΡΠ΅ Π½ΠΎΠ²ΡΡ ΡΠΎΡΠΌΡ ΠΈΠ»ΠΈ ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΡΠΉΡΠ΅ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΡΡ ΡΠΎΡΠΌΡ.
ΠΠ° ΠΏΠ°Π½Π΅Π»ΠΈ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΎΡΠ° ΡΠΎΡΠΌ ΡΠ΅Π»ΠΊΠ½ΠΈΡΠ΅ ΠΏΠΎΠ»Π΅, ΡΡΠΎΠ±Ρ ΠΎΡΠΊΡΡΡΡ Π΅Π³ΠΎ ΠΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΠΏΠΎΠ»Ρ. ΠΠ°ΡΠ΅ΠΌ ΠΎΡΠΊΡΠΎΠΉΡΠ΅ ΡΠ°Π·Π΄Π΅Π» Advanced Options ΠΈ Π½Π°ΠΉΠ΄ΠΈΡΠ΅ ΠΏΠΎΠ»Π΅ Ρ Π½Π°Π΄ΠΏΠΈΡΡΡ CSS Classes .
ΠΡΠΈ Π½Π°Π·Π²Π°Π½ΠΈΠΈ ΠΊΠ»Π°ΡΡΠ° CSS Π²ΡΠ΅ Π±ΡΠΊΠ²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΡΡΡΠΎΡΠ½ΡΠΌΠΈ, ΠΏΡΠΎΠ±Π΅Π»Ρ Π½Π΅ Π΄ΠΎΠΏΡΡΠΊΠ°ΡΡΡΡ.ΠΡΠ»ΠΈ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΠΈΠΌΡ ΠΊΠ»Π°ΡΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠ°Π»ΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ»ΠΎΠ²Π°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π΄Π΅ΡΠΈΡ (-) Π²ΠΌΠ΅ΡΡΠΎ ΠΏΡΠΎΠ±Π΅Π»Π°. Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ Π½Π°Π·ΠΎΠ²Π΅ΠΌ Π½Π°Ρ ΠΊΠ»Π°ΡΡ CSS wpf-blue-background
.
ΠΠΎΠ±Π°Π²Π»ΡΡ wpf-
Π² Π½Π°ΡΠ°Π»ΠΎ Π½Π°ΡΠΈΡ
ΠΊΠ»Π°ΡΡΠΎΠ², ΠΌΡ Ρ ΠΌΠ΅Π½ΡΡΠ΅ΠΉ Π²Π΅ΡΠΎΡΡΠ½ΠΎΡΡΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΈΠΌΡ ΠΊΠ»Π°ΡΡΠ°, ΡΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠΎΠ΅ ΡΠ΅ΠΌΠΎΠΉ Π½Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°. ΠΡΠΎ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΠΊΠΎΠ½ΡΠ»ΠΈΠΊΡΠΎΠ² ΡΡΠΈΠ»Π΅ΠΉ ΠΈ ΠΏΠΎΠ²ΡΡΠΈΡ Π²Π΅ΡΠΎΡΡΠ½ΠΎΡΡΡ ΡΡΠΏΠ΅ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ Π½Π°ΡΠΈΡ
ΡΡΠΈΠ»Π΅ΠΉ.
ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ Π² ΡΡΠΎ ΠΏΠΎΠ»Π΅, Π΅ΡΠ»ΠΈ Ρ ΠΎΡΠΈΡΠ΅.ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΏΡΠΎΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΠΏΡΠΎΠ±Π΅Π» ΠΌΠ΅ΠΆΠ΄Ρ ΠΈΠΌΠ΅Π½Π°ΠΌΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΊΠ»Π°ΡΡΠ°. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ:
wpf-blue-background wpf-bold-font wpf-xl-margin
ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΊΠ»Π°ΡΡΠΎΠ² CSS Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΡΠΎΡΠΌΡ ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ
ΠΠ»Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΡΠΈΠ»Π΅ΠΉ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ ΡΠ°ΡΠ³Π΅ΡΠΈΠ½Π³ Π½Π° ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΡΠΎΡΠΌΡ ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°Ρ ΠΎΡΠ΅ΡΡ, ΡΡΠΎΠ±Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΠΎΡΠΌ ΠΏΠΎΠ΄ΠΏΠΈΡΠΊΠΈ Π½Π° Π²Π°ΡΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅ Π±ΡΠ»ΠΈ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Ρ Π² ΠΎΠ΄Π½ΠΎΠΌ ΡΡΠΈΠ»Π΅, Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ Π² Π»ΡΠ±ΡΡ ΠΎΠ±ΡΠΈΡ ΠΊΠΎΠ½ΡΠ°ΠΊΡΠ½ΡΡ ΡΠΎΡΠΌΠ°Ρ — ΠΏΠΎ-Π΄ΡΡΠ³ΠΎΠΌΡ.ΠΠ΅Π³ΠΊΠΈΠΉ ΡΠΏΠΎΡΠΎΠ± Π΄ΠΎΠ±ΠΈΡΡΡΡ ΡΡΠΎΠ³ΠΎ — Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΎΡ ΠΆΠ΅ ΠΊΠ»Π°ΡΡ CSS ΠΊ Π»ΡΠ±ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠ΅ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ, ΡΡΠΈΠ»Ρ ΠΊΠΎΡΠΎΡΠΎΠΉ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΌ.
Π§ΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΠΈΠΌΡ ΠΊΠ»Π°ΡΡΠ° CSS Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠ°, ΠΎΡΠΊΡΠΎΠΉΡΠ΅ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΎΡ ΡΠΎΡΠΌ ΠΈ ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π² Β«ΠΠ°ΡΡΡΠΎΠΉΠΊΠΈ Β» Β»ΠΠ±ΡΠΈΠ΅ . ΠΠ° ΡΡΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΏΠΎΠ»Ρ Π΄Π»Ρ Form CSS Class ΠΈ Submit Button CSS Class .
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠΌΠ΅Π½ΠΈ ΠΊΠ»Π°ΡΡΠ°, ΠΏΡΠΎΡΡΠΎ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΠ΅ ΠΈΡ ΠΏΡΠΎΠ±Π΅Π»ΠΎΠΌ. Π’Π°ΠΊΠΆΠ΅ ΠΏΠΎΠΌΠ½ΠΈΡΠ΅, ΡΡΠΎ ΠΈΠΌΠ΅Π½Π° ΠΊΠ»Π°ΡΡΠΎΠ² ΠΌΠΎΠ³ΡΡ Π²ΠΊΠ»ΡΡΠ°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΡΠΎΡΠ½ΡΠ΅ Π±ΡΠΊΠ²Ρ ΠΈ Π΄Π΅ΡΠΈΡΡ (-).
ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΡΡΠΈΠ»ΠΈ CSS Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°
Π’Π΅ΠΏΠ΅ΡΡ, ΠΊΠΎΠ³Π΄Π° Π²Ρ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΊΠ»Π°ΡΡ CSS Π² ΠΏΠΎΠ»Π΅ ΡΠΎΡΠΌΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΡΠΈΠ»ΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Ρ ΠΎΡΠΈΡΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ.
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΡΠΈΠ»Π΅ΠΉ CSS
CSS — ΠΌΠΎΡΠ½ΡΠΉ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Ρ Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ Π΄ΠΎΡΡΡΠΏΠ½ΡΡ ΡΡΠΈΠ»Π΅ΠΉ. ΠΠ½ΡΡΡΡΠΊΡΠΈΠΈ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ Π½Π°ΡΠ°ΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ CSS, ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ Π² Π½Π°ΡΠ΅ΠΌ Π ΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π΅ ΠΏΠΎ CSS Π΄Π»Ρ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ .
Π Π½Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΠΏΡΠΎΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΡΠΈΠ½ΠΈΠΉ ΡΠΎΠ½ ΠΊ Π»ΡΠ±ΠΎΠΌΡ ΠΏΠΎΠ»Ρ Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ wpf-blue-text
.ΠΡΠΈ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΠΈ ΠΈΠΌΠ΅Π½ΠΈ ΠΊΠ»Π°ΡΡΠ° Π² CSS ΠΎΠ½ΠΎ Π²ΡΠ΅Π³Π΄Π° Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π½Π°ΡΠΈΠ½Π°ΡΡΡΡ Ρ ΡΠΎΡΠΊΠΈ (.), ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ .wpf-blue-background
.
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΡΡΠΈΠ»ΠΈ ΡΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΊ Π²Π°ΡΠ΅ΠΉ ΡΠΎΡΠΌΠ΅, ΡΠ°ΠΊΠΆΠ΅ Π½Π΅ΠΏΠ»ΠΎΡ
ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π²Π°Ρ CSS Π±ΠΎΠ»Π΅Π΅ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠΌ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΏΡΠΎΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ div.wpforms-container-full .wpforms-form
ΠΏΠ΅ΡΠ΅Π΄ ΠΈΠΌΠ΅Π½Π΅ΠΌ ΡΠ²ΠΎΠ΅Π³ΠΎ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΠΎΠ³ΠΎ ΠΊΠ»Π°ΡΡΠ°.
ΠΠΎΡ Π½Π°Ρ ΠΏΡΠΈΠΌΠ΅Ρ CSS:
div.wpforms-container-full .wpforms-form .wpf-blue-background { ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: # d1effd; }
ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ CSS Π½Π° Π²Π°Ρ ΡΠ°ΠΉΡ WordPress
ΠΠ΄ΠΈΠ½ ΠΈΠ· Π±ΡΡΡΡΡΡ ΠΈ ΠΏΡΠΎΡΡΡΡ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ CSS Π½Π° Π²Π°Ρ ΡΠ°ΠΉΡ — ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π°ΡΡΡΠΎΠΉΡΠΈΠΊ ΡΠ΅ΠΌ WordPress.ΠΡΠΎ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ Π΄ΠΎΡΡΡΠΏΠ΅Π½ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π²ΠΎ Π²ΡΠ΅Ρ ΡΠ΅ΠΌΠ°Ρ ΠΈ ΠΈΠΌΠ΅Π΅Ρ ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ, ΡΠΌ. Π ΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ WPBeginner ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ CSS Π² WordPress.
Π§ΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π΄ΠΎΡΡΡΠΏ ΠΊ ΠΎΠ±Π»Π°ΡΡΠΈ CSS Π² Π½Π°ΡΡΡΠΎΠΉΡΠΈΠΊΠ΅ ΡΠ΅ΠΌΡ, ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π² ΠΠ½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ Β»ΠΠ°ΡΡΡΠΎΠΈΡΡ , Π° Π·Π°ΡΠ΅ΠΌ Π²ΡΠ±Π΅ΡΠΈΡΠ΅ Π²ΠΊΠ»Π°Π΄ΠΊΡ Ρ Π½Π°Π΄ΠΏΠΈΡΡΡ Additional CSS .
ΠΠ°ΡΠ΅ΠΌ, ΠΏΠΎΠ΄ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠ΅ΠΌ ΠΊ ΠΈΠ½ΡΡΡΡΠΊΡΠΈΡΠΌ, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ²ΠΎΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΡΡΠ°Π³ΠΌΠ΅Π½Ρ CSS.ΠΡΠΈ ΠΆΠ΅Π»Π°Π½ΠΈΠΈ Π²Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΡΡΠΎΠ±Ρ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ ΡΠ²ΠΎΠΉ ΡΡΠΈΠ»Ρ (ΡΡΠΈΠ»ΠΈ) ΠΏΠ΅ΡΠ΅Π΄ ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠ΅ΠΌ. ΠΠΎΠ³Π΄Π° Π±ΡΠ΄Π΅ΡΠ΅ Π³ΠΎΡΠΎΠ²Ρ, Π½Π°ΠΆΠΌΠΈΡΠ΅ ΠΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°ΡΡ .
ΠΠΎΡ ΠΈ Π²ΡΠ΅! Π’Π΅ΠΏΠ΅ΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ CSS Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ ΠΎΠ±Π»Π°ΡΡΠ΅ΠΉ Π²Π°ΡΠΈΡ ΡΠΎΡΠΌ.
Π₯ΠΎΡΠΈΡΠ΅ ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π½Π°ΡΠΈ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ ΡΡΠΈΠ»ΠΈ ΡΠΎΡΠΌ? ΠΠ·Π½Π°ΠΊΠΎΠΌΡΡΠ΅ΡΡ Ρ Π½Π°ΡΠΈΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎΠΌ ΠΏΠΎ Π½Π°ΡΡΡΠΎΠΉΠΊΠ΅ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ ΠΏΠΎΠ»Π΅ΠΉ ΡΠΎΡΠΌΡ Π΄Π»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ Π²ΡΠ΅Ρ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠ΅ΠΉ.
ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ ΠΊΠ»Π°ΡΡΠ° CSS Π² Π±Π»ΠΎΠΊ WordPress
ΠΠ½Π°Π΅ΡΠ΅ Π»ΠΈ Π²Ρ, ΡΡΠΎ Π΅ΡΠ»ΠΈ Π²Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΠ΅ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΊΠ»Π°ΡΡ CSS Π² Π±Π»ΠΎΠΊ WordPress, Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ Π½Π°Π΄ ΡΡΠΈΠ»Π΅ΠΌ ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°?
ΠΡΠΎΡΠ΅ΡΡ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΠΊΠ»Π°ΡΡΠ° CSS Π² Π±Π»ΠΎΠΊ WordPress ΠΏΡΠΎΡΡ, ΠΈ ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π² ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅ Π±Π΅Π· ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΠΎΡΠΎΠ½Π½ΠΈΡ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ².
ΠΠ΄Π½Π°ΠΊΠΎ Ρ Ρ ΠΎΡΠ΅Π» Π±Ρ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΡΠΈΠ»Π΅ΠΉ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄Π»Ρ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° ΡΠΎΡΡΠΎΠΈΡ ΠΈΠ· Π΄Π²ΡΡ ΡΠ°Π³ΠΎΠ²:
- ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΊΠ»Π°ΡΡΠ° CSS Π² Π±Π»ΠΎΠΊ.
- ΠΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΡΠΈΠ»Π΅ΠΉ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠ³ΠΎ ΠΊΠ»Π°ΡΡΠ° CSS.
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ Ρ ΠΏΡΠΎΠ²Π΅Π΄Ρ Π²Π°Ρ ΡΠ΅ΡΠ΅Π· ΠΎΠ±Π° ΡΠ°Π³Π°, ΡΡΠΎΠ±Ρ Π²Ρ ΠΌΠΎΠ³Π»ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΡΠΈΠ»ΠΈ Π²ΡΠ±ΡΠ°Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°.
ΠΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΊΠ»Π°ΡΡ CSS
Π₯ΠΎΡΡ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΡΡΠΈΠ»Ρ Π΄Π»Ρ Π±Π»ΠΎΠΊΠΎΠ², Π±ΡΠ²Π°ΡΡ ΡΠ»ΡΡΠ°ΠΈ, ΠΊΠΎΠ³Π΄Π° Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ Π²ΡΠΉΡΠΈ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ Π΄ΠΎΡΡΡΠΏΠ½ΡΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ².
ΠΠΎΠΏΡΡΡΠΈΠΌ, Ρ Π²Π°Ρ Π΅ΡΡΡ Π±Π»ΠΎΠΊ ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π½Π° Π²Π°ΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ Π²ΡΠ΄Π΅Π»ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΡ ΡΡΠΈΠ»Π΅ΠΉ. ΠΠ΅ΡΠ²ΡΠΌ ΡΠ°Π³ΠΎΠΌ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΊΠ»Π°ΡΡΠ° CSS Π² Π²Π°Ρ Π±Π»ΠΎΠΊ:
- ΠΡΠΊΡΠΎΠΉΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈΠ»ΠΈ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Ρ ΠΎΡΠΈΡΠ΅ Π½Π°ΡΡΡΠΎΠΈΡΡ.
- ΠΡΠ±Π΅ΡΠΈΡΠ΅ Π±Π»ΠΎΠΊ Π² ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅, Π² ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ²ΠΎΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΊΠ»Π°ΡΡ CSS.
- ΠΠ° ΠΏΡΠ°Π²ΠΎΠΉ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΏΠΎΠ΄ Π²ΠΊΠ»Π°Π΄ΠΊΠΎΠΉ Block Π½Π°ΠΉΠ΄ΠΈΡΠ΅ ΡΠ°Π·Π΄Π΅Π» Advanced ΠΈ ΡΠ΅Π»ΠΊΠ½ΠΈΡΠ΅ Π΅Π³ΠΎ.
- Π ΡΠ°Π·Π΄Π΅Π»Π΅ Π½Π°ΠΉΠ΄ΠΈΡΠ΅ ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ CSS ΠΏΠΎΠ»Π΅.
- ΠΠ²Π΅Π΄ΠΈΡΠ΅ ΠΈΠΌΡ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΊΠ»Π°ΡΡΠ° CSS. Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ
ΡΠΎ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠΌ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ
Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΠΎΠ³ΠΎ ΠΊΠ»Π°ΡΡΠ° CSS. - ΠΠ±Π½ΠΎΠ²ΠΈΡΠ΅ ΡΠ²ΠΎΡ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈΠ»ΠΈ ΠΎΠΏΡΠ±Π»ΠΈΠΊΡΠΉΡΠ΅, ΠΊΠΎΠ³Π΄Π° Π±ΡΠ΄Π΅ΡΠ΅ Π³ΠΎΡΠΎΠ²Ρ.
ΠΠΎΡΠ»Π΅ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ ΠΊΠ»Π°ΡΡΠ° CSS ΠΊ Π±Π»ΠΎΠΊΡ Π²Ρ Π½Π΅ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ Π½ΠΈΠΊΠ°ΠΊΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π² ΡΠ²ΠΎΠ΅ΠΌ Π±Π»ΠΎΠΊΠ΅ ΠΏΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΠ΅Π»ΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠΎΠΎΠ±ΡΠΈΡΡ WordPress, ΠΊΠ°ΠΊΠΈΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΡΠΈΠ»Ρ ΠΌΡ Ρ ΠΎΡΠΈΠΌ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΊ Π²ΡΠ±ΡΠ°Π½Π½ΠΎΠΌΡ Π±Π»ΠΎΠΊΡ.
ΠΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΡΡΠΈΠ»ΠΈ CSS
Π’Π΅ΠΏΠ΅ΡΡ ΠΌΡ Π³ΠΎΡΠΎΠ²Ρ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ Π½Π΅Π΄Π°Π²Π½ΠΎ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½ΡΠΉ ΠΊΠ»Π°ΡΡ CSS. ΠΠΎΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ CSS, ΠΊΠΎΡΠΎΡΡΠΉ Ρ Π±ΡΠ΄Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΊΠ»Π°ΡΡΠ° Ρ ΠΎΡΠΎΠ±ΡΠΌ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ
:
.special-title {
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: # 09c;
ΠΎΡΡΡΡΠΏ: 1em;
ΡΠ²Π΅Ρ: #ffffff;
ΡΠ΅Π½Ρ ΡΠ΅ΠΊΡΡΠ°: 0 1px 10px # 0a3d4e;
Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°: ΡΠ΅Π½ΡΡ;
ΡΠ°Π΄ΠΈΡΡ Π³ΡΠ°Π½ΠΈΡΡ: 80 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π³ΡΠ°Π½ΠΈΡΠ°: 2px solid # 0a3d4e;
}
ΠΠ°ΠΆΠ½ΠΎ: ΠΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π΄ΠΎΠ±Π°Π²Π»ΡΠΉΡΠ΅ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΡΡΠΈΠ»ΠΈ Π² ΡΡΠΈΠ»Ρ .css
Π² ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΉ ΡΠ΅ΠΌΠ΅. ΠΡ ΡΠΈΡΠΊΡΠ΅ΡΠ΅ ΠΏΠΎΡΠ΅ΡΡΡΡ Π²ΡΠ΅ ΡΠ²ΠΎΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΏΠΎΡΠ»Π΅ Π²ΡΠΏΡΡΠΊΠ° Π½ΠΎΠ²ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ ΡΠ΅ΠΌΡ.
ΠΡΠ»ΠΈ Π²Ρ ΡΠ°Π½ΡΡΠ΅ Π½Π΅ Π΄ΠΎΠ±Π°Π²Π»ΡΠ»ΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ CSS Π½Π° ΡΠ²ΠΎΠΉ ΡΠ°ΠΉΡ, ΠΎΠ·Π½Π°ΠΊΠΎΠΌΡΡΠ΅ΡΡ Ρ Π½Π°ΡΠΈΠΌ ΠΊΡΠ°ΡΠΊΠΈΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎΠΌ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ CSS Π² WordPress.
ΠΠΎΡ ΡΡΠΎ Ρ ΠΏΠΎΠ»ΡΡΠΈΠ» ΠΏΠΎΡΠ»Π΅ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ CSS Π½Π° ΠΌΠΎΠΉ ΡΠ°ΠΉΡ WordPress:
ΠΡΠΎ ΠΏΡΠΈΠΌΠ΅Ρ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ΅ΠΌΡ Prosperity .ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ CSS Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ
ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΡΡΠΎ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°ΡΡΠΈ Π½Π΅Π΄Π°Π²Π½ΠΎ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½ΠΎΠ³ΠΎ Π²Π°ΠΌΠΈ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΠΎΠ³ΠΎ CSS ΠΌΠΎΠ³ΡΡ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°ΡΡ.Π Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½Π° Π²Π°ΡΠ° ΡΠ΅ΠΌΠ°, Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°ΡΡΠΈ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ CSS ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΏΠ΅ΡΠ΅Π·Π°ΠΏΠΈΡΠ°Π½Ρ ΡΠ΅ΠΌΠΎΠΉ.
ΠΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, ΠΏΠΎΠΉΠΌΠΈΡΠ΅, ΠΌΡ Π½Π΅ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅ΠΌ Π½ΠΈΠΊΠ°ΠΊΠΎΠΉ ΠΏΠΎΠΌΠΎΡΠΈ Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°ΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡΡΡ Ρ Π²Π°ΡΠ΅ΠΉ ΡΠ΅ΠΌΠΎΠΉ, Π² ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΡ Π½ΠΈΠΆΠ΅.
ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΠΎΠ΄Π½Ρ ΠΈΠ· Π½Π°ΡΠΈΡ ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΡ ΡΠ΅ΠΌ WordPress, Π½Π΅ ΡΡΠ΅ΡΠ½ΡΠΉΡΠ΅ΡΡ ΠΎΠ±ΡΠ°ΡΠ°ΡΡΡΡ ΠΊ Π½Π°ΠΌ, ΠΈ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΡΠ°Π΄Ρ Π²Π°ΠΌ ΠΏΠΎΠΌΠΎΡΡ.
Π Π΄ΡΡΠ³ΠΈΡ ΡΠ»ΡΡΠ°ΡΡ , ΠΏΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, ΡΠ²ΡΠΆΠΈΡΠ΅ΡΡ Ρ Π°Π²ΡΠΎΡΠΎΠΌ Π²Π°ΡΠ΅ΠΉ ΡΠ΅ΠΌΡ Π΄Π»Ρ ΡΠ΅ΡΠ΅Π½ΠΈΡ.
ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠ΅ ΡΡΠΈΠ»ΠΈ Π½Π΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π² ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅
ΠΡΠΎ ΠΎΠ±ΡΠ°ΡΠ½Π°Ρ ΡΡΠΎΡΠΎΠ½Π° ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄Π°.ΠΠ΅Π»ΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ CSS, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ Π½Π΅Π΄Π°Π²Π½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ, Π½Π΅ Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΡΡ Π² Π Π΅Π΄Π°ΠΊΡΠΎΡΠ΅. ΠΡΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΠΊ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ ( ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ ) Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°.
ΠΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠ»Π°ΡΡΡ CSS Π² Π±Π»ΠΎΠΊ ΠΡΡΠ΅Π½Π±Π΅ΡΠ³Π° β’ WPShout
Π ΡΡΠΎΠΌ ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠΌ ΠΈ Π²ΠΈΠ΄Π΅ΠΎ ΠΊΡΠ°ΡΠΊΠΎΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π΅ ΠΌΡ ΠΏΠΎΠΊΠ°ΠΆΠ΅ΠΌ Π²Π°ΠΌ, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ CSS Π² Π±Π»ΠΎΠΊ ΠΡΡΠ΅Π½Π±Π΅ΡΠ³Π°, ΡΠΎ Π΅ΡΡΡ Π±Π»ΠΎΠΊ Π² Π½ΠΎΠ²ΠΎΠΌ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅ WordPress.
ΠΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠ»Π°ΡΡ CSS Π² Π±Π»ΠΎΠΊ ΠΡΡΠ΅Π½Π±Π΅ΡΠ³Π° ΠΏΡΠΎΡΡΠΎ, Π½ΠΎ Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ Π·Π½Π°ΡΡ, Π³Π΄Π΅ ΠΈΡΠΊΠ°ΡΡ ΡΡΡ ΡΡΠ½ΠΊΡΠΈΡ, Π² Β«ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡΒ» ΡΠΏΡΠ°Π²Π°.Π Π²ΠΈΠ΄Π΅ΠΎ Π½ΠΈΠΆΠ΅ ΠΎΠ±ΡΡΡΠ½ΡΠ΅ΡΡΡ, Π³Π΄Π΅ Π½Π°ΠΉΡΠΈ ΡΡΡ ΠΎΠΏΡΠΈΡ ΠΈ ΠΊΠ°ΠΊ Π΅Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΠΊΠ»Π°ΡΡΠΎΠ² CSS Π² Π»ΡΠ±ΠΎΠΉ Π±Π»ΠΎΠΊ WordPress.
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΠΊΠ»Π°ΡΡ CSS: ΠΠ»Π°ΡΡΡ CSS — ΡΡΠΎ Π½Π΅Π±ΠΎΠ»ΡΡΠ°Ρ ΡΠ°ΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ HTML, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠΏΡΠΎΡΠ°Π΅Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΊΠ°ΡΠΊΠ°Π΄Π½ΡΡ
ΡΠ°Π±Π»ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ (CSS). Π ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΌ ΠΈΡΠΎΠ³Π΅ ΠΎΠ½ΠΈ Π²ΡΠ³Π»ΡΠ΄ΡΡ ΠΊΠ°ΠΊ class = "my-css-class"
Π² ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΠΌΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ HTML. ΠΠ°ΡΠ΅ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΡ ΠΌΠΎΠ³ΡΡ Π½Π°ΠΏΠΈΡΠ°ΡΡ Β«ΠΏΡΠ°Π²ΠΈΠ»Π° CSSΒ», ΠΊΠΎΡΠΎΡΡΠ΅ Π·Π°ΡΡΠ°Π²ΡΡ ΠΈΡ
Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ. ΠΠ±ΡΠ°Ρ ΠΏΠΎΡΡΠ΅Π±Π½ΠΎΡΡΡ Π² Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅, ΠΊΠ°ΠΊ Π²Π½ΡΡΡΠΈ WordPress, ΡΠ°ΠΊ ΠΈ Π²Π½Π΅ Π΅Π³ΠΎ, — ΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΊΠ»Π°ΡΡ CSS ΠΊ ΡΠ΅ΠΌΡ-Π»ΠΈΠ±ΠΎ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΠΈΠ΄Π΅ΠΎ ΠΎ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ ΠΊΠ»Π°ΡΡΠ° CSS Π² Π±Π»ΠΎΠΊ Gutenblock
ΠΠΎΡ Π²ΠΈΠ΄Π΅ΠΎ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠ»Π°ΡΡ CSS Π² Π±Π»ΠΎΠΊ WordPress Π² Π½ΠΎΠ²ΠΎΠΌ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅ Β«GutenbergΒ»:
ΠΠ°ΠΏΠΈΡΠ°Π½Π½ΡΠ΅ ΡΠ°Π³ΠΈ Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΠΊΠ»Π°ΡΡΠ° CSS Π² Π±Π»ΠΎΠΊ Π² WordPress Π Π΅Π΄Π°ΠΊΡΠΎΡ Π±Π»ΠΎΠΊΠΎΠ²
ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· Π²Π°Ρ ΠΏΡΠ΅Π΄ΠΏΠΎΡΠΈΡΠ°ΡΡ ΡΠΈΡΠ°ΡΡ. ΠΠΎΠ½ΡΠ» ΡΠ΅Π±Ρ. ΠΠΎΡ ΠΊΠ°ΠΊ Ρ Π΄ΠΎΠ±Π°Π²Π»ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ HTML ΠΊΠ»Π°ΡΡΠ° Π² Π±Π»ΠΎΠΊ ΠΡΡΠ΅Π½Π±Π΅ΡΠ³Π° WordPress:
- ΠΡΠ±Π΅ΡΠΈΡΠ΅ Π±Π»ΠΎΠΊ Π² ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅ Π±Π»ΠΎΠΊΠΎΠ² ΠΡΡΠ΅Π½Π±ΡΡΠ³Π° , ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΌΡ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠ»Π°ΡΡ CSS.
- ΠΠ° ΠΏΡΠ°Π²ΠΎΠΉ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ ΡΠ΅ΠΏΠ΅ΡΡ Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ Π² ΡΠ΅ΠΆΠΈΠΌΠ΅ Β«ΠΠ»ΠΎΠΊΒ» (ΠΏΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ Β«ΠΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠΌΒ»). Π ΡΠ΅ΠΆΠΈΠΌΠ΅ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Β«ΠΠ»ΠΎΠΊΒ» Π½Π° ΠΏΡΠ°Π²ΠΎΠΉ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ° * ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ * ΡΠ»Π΅ΠΌΠ΅Π½Ρ (Π²Π½ΠΈΠ·Ρ) Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Β«ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΒ». ΠΡΠ»ΠΈ Π²Ρ ΡΠ΅Π»ΠΊΠ½Π΅ΡΠ΅, ΡΡΠΎΠ±Ρ ΡΠ°Π·Π²Π΅ΡΠ½ΡΡΡ ΡΠ°ΡΡΡ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Β«Π Π°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅Β», Π½Π° Π½Π΅ΠΉ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΠΎΡΠ²ΠΈΡΡΡΡ ΠΌΠ΅ΡΠΊΠ° ΠΈ ΠΏΠΎΠ»Π΅ Β«ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ CSSΒ». Π ΡΡΠΎ ΠΏΠΎΠ»Π΅ Π²Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΠ΅ ΡΠ²ΠΎΠΈ Π½ΠΎΠ²ΡΠ΅ ΠΊΠ»Π°ΡΡΡ CSS, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ:
class1 my-css-class-2 lastCSSClassToAdd
. - ΠΠ΅ Π·Π°Π±ΡΠ΄ΡΡΠ΅ Β«Π‘ΠΎΡ ΡΠ°Π½ΠΈΡΡΒ» ΠΈΠ»ΠΈ Β«ΠΠ±Π½ΠΎΠ²ΠΈΡΡΒ» ΡΠ²ΠΎΠ΅ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅ (ΠΈΠ»ΠΈ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ Ρ. Π.). Π’ΠΎΠ³Π΄Π° ΡΠ°-Π΄Π°. ΠΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ Π³ΠΎΡΠΎΠ²Ρ ΠΊ ΡΠ°Π±ΠΎΡΠ΅. π
Π ΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ Π΄Π»Ρ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ ΠΏΠΎ ΠΊΠ»Π°ΡΡΠ°ΠΌ CSS
ΠΡΠ΅Π΄ΡΡΠ°Π²ΡΡΠ΅, ΡΡΠΎ Π²Ρ ΡΠΎΠ·Π΄Π°Π΅ΡΠ΅ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ.ΠΡ Ρ ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ Π³ΡΡΠΏΠΏΠ° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΠΈΠΌΠ΅Π»Π° Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΊΡΠ°ΡΠ½ΡΠΉ ΡΠ΅ΠΊΡΡ, Π³ΡΡΠΏΠΏΠ° ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈΠΌΠ΅Π»Π° ΡΡΠ΅Π΄Π½ΠΈΠΉ Π±Π΅Π»ΡΠΉ ΡΠ΅ΠΊΡΡ, Π° Π³ΡΡΠΏΠΏΠ° Π°Π±Π·Π°ΡΠ΅Π² ΠΈΠΌΠ΅Π»Π° Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΡΠΈΠ½ΠΈΠΉ ΡΠ΅ΠΊΡΡ.
Π‘ΠΌΠ΅Π»ΡΠΉ Π²ΡΠ±ΠΎΡ. ΠΠΎ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ ΠΊΠ»Π°ΡΡΠ°ΠΌ CSS Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄Π΅Π»Π°ΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΡΠΎ. ΠΠ»Π°ΡΡΡ CSS ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΡΠΈΠ»Ρ ΠΊ Π³ΡΡΠΏΠΏΠ°ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² HTML Π΄Π»Ρ Π΄ΠΎΡΡΠΈΠΆΠ΅Π½ΠΈΡ ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠ³ΠΎ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ Π²ΠΈΠ΄Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ.
Π ΡΡΠΎΠΌ ΠΏΠΎΡΡΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΠ΅ΡΠΌΠΈΠ½Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π·Π½Π°ΡΡ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΠΊΠ»Π°ΡΡ CSS, ΡΠ΅Π»Π΅ΠΊΡΠΎΡ ΠΊΠ»Π°ΡΡΠΎΠ² ΠΈ ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ½ΠΎΡΡΡ CSS. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΠ»Π°ΡΡ Π² CSS ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ Π²Π°ΡΠΈΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡ.
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΠΊΠ»Π°ΡΡ CSS?
ΠΠ»Π°ΡΡ CSS — ΡΡΠΎ Π°ΡΡΠΈΠ±ΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΉ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ Π³ΡΡΠΏΠΏΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² HTML Ρ ΡΠ΅Π»ΡΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΡΠΈΠ»Ρ ΠΈ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΊ ΡΡΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ Π½Π° ΠΏΡΠΈΠΌΠ΅Ρ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΊΠ»Π°ΡΡΡ CSS. ΠΠΈΠΆΠ΅ Ρ Π½Π°Ρ Π΅ΡΡΡ ΠΏΡΠΎΡΡΠ°Ρ HTML-ΡΡΡΠ°Π½ΠΈΡΠ° Ρ ΡΡΠ΅ΠΌΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΌΠΈ ( h3 ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²) ΠΈ ΡΡΠ΅ΠΌΡ Π°Π±Π·Π°ΡΠ°ΠΌΠΈ ( p ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²).
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΡΠΎ, ΡΡΠΎ Π²ΡΠΎΡΠΎΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, ΡΡΠ΅ΡΠΈΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ Π°Π±Π·Π°Ρ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Ρ ΠΈΠ½Π°ΡΠ΅, ΡΠ΅ΠΌ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ — ΡΡΠΎ ΠΏΠΎΡΠΎΠΌΡ, ΡΡΠΎ ΡΡΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΠΏΡΠΈΡΠ²ΠΎΠ΅Π½ ΠΊΠ»Π°ΡΡ bright .ΠΠ»ΡΠ΄Ρ Π½Π° CSS, ΠΌΡ Π²ΠΈΠ΄ΠΈΠΌ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ .bright , ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ²ΠΎΠΈ ΠΏΡΠ°Π²ΠΈΠ»Π° ΡΡΠΈΠ»Ρ ΠΊΠΎ Π²ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ Ρ Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ class = «bright» .
Π‘ΠΌ. Pen css class: ΠΏΡΠΈΠΌΠ΅Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΡΠΈΡΡΠΈΠ½Ρ ΠΠ΅ΡΡΠΈΠΊΠΎΠ½Π΅ (@hubspot) Π½Π° CodePen.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ»Π°ΡΡΡ CSS Π΄Π»Ρ Π³ΡΡΠΏΠΏΠΈΡΠΎΠ²ΠΊΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² HTML, Π° Π·Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΠΊ Π½ΠΈΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠ΅ ΡΡΠΈΠ»ΠΈ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΊΠ»Π°ΡΡΡ ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΠΈΡ ΠΊ ΡΠ΅ΠΊΡΡΡ, ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ, ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΊΠ°ΠΌ ΠΈ ΡΠ°Π·Π΄Π΅Π»Π°ΠΌ, ΡΠ°Π±Π»ΠΈΡΠ°ΠΌ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ ΠΈΠ»ΠΈ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π»ΡΠ±ΠΎΠΌΡ Π΄ΡΡΠ³ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΎ ΠΊΠΎΡΠΎΡΠΎΠΌ Π²Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ΄ΡΠΌΠ°ΡΡ. ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ΅ΠΏΠ΅ΡΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ»Π°ΡΡΡ CSS Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΠ»Π°ΡΡ Π² CSS
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠΏΡΠΎΠ±ΡΠ΅ΠΌ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΠ»Π°ΡΡ CSS Ρ Π½ΡΠ»Ρ. ΠΠΎΠΏΡΡΡΠΈΠΌ, Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ Π°Π±Π·Π°Ρ ΡΠ΅ΠΊΡΡΠ° ΠΈ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΡΠ»ΠΎΠ²Π° Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠ΅ΠΉ Π²ΡΡΠ°Π·ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ, ΡΠΎΠ·Π΄Π°Π² ΠΊΠ»Π°ΡΡ CSS Π΄Π»Ρ ΡΡΠΈΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΡ ΡΠ»ΠΎΠ², Π° Π·Π°ΡΠ΅ΠΌ Π½Π°Π·Π½Π°ΡΠΈΠ² ΡΡΠΎΡ ΠΊΠ»Π°ΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΌ ΡΠ»ΠΎΠ²Π°ΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅Π³ΠΎΠ² span .
ΠΠ°ΡΠ½ΠΈΡΠ΅ Ρ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² HTML, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ. Π Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΡΠΎ Π°Π±Π·Π°Ρ ΡΠ΅ΠΊΡΡΠ°:
.
ΠΠ°ΡΠ΅ ΠΌΠ°ΡΠΊΠ΅ΡΠΈΠ½Π³ΠΎΠ²ΠΎΠ΅ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠ΅ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΈ ΡΠ΅ΡΠ²ΠΈΡΠ½Π°Ρ ΠΏΠ»Π°ΡΡΠΎΡΠΌΠ° ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡΡ Π²Π°ΠΌ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ, Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΡΠ΅ Π΄Π»Ρ ΠΏΡΠΈΠ²Π»Π΅ΡΠ΅Π½ΠΈΡ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Π΅ΠΉ, ΠΊΠΎΠ½Π²Π΅ΡΡΠΈΠΈ ΠΏΡΠΈΠ²Π»Π΅ΡΡ ΠΈΡ
ΠΊΠ°ΠΊ ΠΊΠ»ΠΈΠ΅Π½ΡΠΎΠ².
Π― ΡΠ°ΠΊΠΆΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΠ» ΡΠ΅Π³ΠΎΠ² Π²ΠΎΠΊΡΡΠ³ ΡΠ»ΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ ΡΠΊΠΎΡΠΎ Π±ΡΠ΄Π΅ΠΌ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»Π°ΡΡΠ° CSS.
ΠΠ°ΡΠ΅ΠΌ Π΄Π°Π²Π°ΠΉΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π°ΡΡΠΈΠ±ΡΡΡ ΠΊΠ»Π°ΡΡΠ° ΠΊ ΡΡΠΈΠΌ ΡΠ΅Π³Π°ΠΌ . ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ Π°ΡΡΠΈΠ±ΡΡ class = «name» ΠΊ ΠΎΡΠΊΡΡΠ²Π°ΡΡΠ΅ΠΌΡ ΡΠ΅Π³Ρ ΡΠ΅Π»Π΅Π²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ Π·Π°ΠΌΠ΅Π½ΠΈΡΠ΅ name ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΌ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠΎΠΌ ΠΊΠ»Π°ΡΡΠ°.
ΠΡΡΠΎΡΠ½ΠΈΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
Π Π½Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ HTML Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ°ΠΊ:
ΠΠ°ΡΠ΅ ΠΌΠ°ΡΠΊΠ΅ΡΠΈΠ½Π³ΠΎΠ²ΠΎΠ΅ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠ΅ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΈ ΡΠ΅ΡΠ²ΠΈΡΠ½Π°Ρ ΠΏΠ»Π°ΡΡΠΎΡΠΌΠ° ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡΡ Π²Π°ΠΌ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ, Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΡΠ΅ Π΄Π»Ρ ΠΏΡΠΈΠ²Π»Π΅ΡΠ΅Π½ΠΈΡ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Π΅ΠΉ, ΠΊΠΎΠ½Π²Π΅ΡΡΠΈΠΈ ΠΏΡΠΈΠ²Π»Π΅ΡΡ ΠΈΡ
ΠΊΠ°ΠΊ ΠΊΠ»ΠΈΠ΅Π½ΡΠΎΠ².
ΠΠ΄Π΅ΡΡ ΠΌΡ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ Π΄Π²Π° ΠΊΠ»Π°ΡΡΠ° CSS ΠΊ Π½Π°ΡΠΈΠΌ ΡΠ΅Π³Π°ΠΌ span : orange-text ΠΈ blue-text .
ΠΠ°ΠΊΠΎΠ½Π΅Ρ, Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ Π½Π°Π±ΠΎΡΡ ΠΏΡΠ°Π²ΠΈΠ» Π΄Π»Ρ ΡΡΠΈΡ ΠΊΠ»Π°ΡΡΠΎΠ² Π² CSS. ΠΡ Π΄Π΅Π»Π°Π΅ΠΌ ΡΡΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ² ΠΊΠ»Π°ΡΡΠΎΠ² CSS ΠΈ Π±Π»ΠΎΠΊΠΎΠ² ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠΉ.
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ ΠΊΠ»Π°ΡΡΠΎΠ² Π² CSS?
Π CSS ΡΠ΅Π»Π΅ΠΊΡΠΎΡ ΠΊΠ»Π°ΡΡΠ° ΡΠΎΡΠΌΠ°ΡΠΈΡΡΠ΅ΡΡΡ ΠΊΠ°ΠΊ ΡΠΈΠΌΠ²ΠΎΠ» ΡΠΎΡΠΊΠΈ (.), ΠΠ° ΠΊΠΎΡΠΎΡΡΠΌ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΠΌΡ ΠΊΠ»Π°ΡΡΠ°. ΠΠ½ Π²ΡΠ±ΠΈΡΠ°Π΅Ρ Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ ΡΡΠΈΠΌ Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ ΠΊΠ»Π°ΡΡΠ°, ΡΠ°ΠΊ ΡΡΠΎ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠ΅ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΡ CSS ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½Ρ ΠΊ ΡΡΠΈΠΌ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ, Π½Π΅ Π·Π°ΡΡΠ°Π³ΠΈΠ²Π°Ρ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅.
Π Π½Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ Π±Π»ΠΎΠΊΠΈ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠΉ Π΄Π»Ρ ΠΎΠ±ΠΎΠΈΡ Π½Π°ΡΠΈΡ ΠΊΠ»Π°ΡΡΠΎΠ² CSS Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ² .orange-text ΠΈ .blue-text :
.
/ * ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠ΅ Π΄Π»Ρ Π½Π°ΡΠ΅Π³ΠΎ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΠΊΠ»Π°ΡΡΠ° CSS * /
.orange-text {
color: orange;
font-weight: ΠΆΠΈΡΠ½ΡΠΉ;
} / * ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠ΅ Π΄Π»Ρ Π½Π°ΡΠ΅Π³ΠΎ Π²ΡΠΎΡΠΎΠ³ΠΎ ΠΊΠ»Π°ΡΡΠ° CSS * /
.blue-text {
color: blue;
font-weight: ΠΆΠΈΡΠ½ΡΠΉ;
}
ΠΠΎΠ³Π΄Π° ΠΌΡ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΠ΅ΠΌ Π½Π°ΡΠΈ HTML ΠΈ CSS Π²ΠΌΠ΅ΡΡΠ΅, ΠΌΡ Π²ΠΈΠ΄ΠΈΠΌ, ΠΊΠ°ΠΊ Π½Π°ΡΠΈ ΠΊΠ»Π°ΡΡΡ CSS Π½Π°ΡΠ΅Π»Π΅Π½Ρ Π½Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ Π½Π°ΡΠΈΠΌ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΡΠΌ ΡΡΠΈΠ»Π΅ΠΌ:
Π‘ΠΌ. ΠΡΠΈΠΌΠ΅Ρ Pen css class: span ΠΡΠΈΡΡΠΈΠ½Ρ ΠΠ΅ΡΡΠΈΠΊΠΎΠ½Π΅ (@hubspot) Π½Π° CodePen.
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π°ΡΡΠΈΠ±ΡΡ class ΡΠ°ΠΌ ΠΏΠΎ ΡΠ΅Π±Π΅ Π½Π΅ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΈΠ»ΠΈ ΡΡΠΈΠ»Ρ HTML-Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΏΡΠΎΡΡΠΎΠ΅ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π°ΡΡΠΈΠ±ΡΡΠ° ΠΊΠ»Π°ΡΡΠ° ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π±Π΅Π· ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ CSS Π½Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΠΈΠ»ΠΈ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π²ΠΎ Π²Π½Π΅ΡΠ½Π΅ΠΌ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ΅. ΠΠ°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π½Π°Π·Π½Π°ΡΠΈΡΡ ΠΊΠ»Π°ΡΡΡ ΠΏΡΠ°Π²ΠΈΠ»Π° CSS, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ.
ΠΡΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΈΠΌΠ΅Π½Π° ΠΊΠ»Π°ΡΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠΏΠΈΡΡΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΠΊΠ»Π°ΡΡΠ΅. Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π²ΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ ΠΈΠΌΠ΅Π½Π° .orange-text ΠΈ .blue-text , ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΌΡ ΡΠΎΠ·Π΄Π°Π²Π°Π»ΠΈ ΡΠ²Π΅ΡΠ½ΠΎΠΉ ΡΠ΅ΠΊΡΡ.ΠΡΠΈ ΠΈΠΌΠ΅Π½Π° Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠ²Π½Ρ, ΡΡΠΎΠ±Ρ Π»ΡΠ±ΠΎΠΉ, ΠΊΡΠΎ ΠΏΡΠΎΡΡΠΎ ΡΠΈΡΠ°Π» CSS, ΠΏΠΎΠ½ΡΠ» Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΊΠ»Π°ΡΡΠ°.
ΠΠΌΠ΅Π½Π° ΠΊΠ»Π°ΡΡΠΎΠ² ΠΌΠΎΠ³ΡΡ ΡΠΎΡΡΠΎΡΡΡ ΠΈΠ· ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΠ»ΠΎΠ². ΠΡΠ»ΠΈ ΠΈΠΌΡ Π²Π°ΡΠ΅Π³ΠΎ ΠΊΠ»Π°ΡΡΠ° ΡΠΎΡΡΠΎΠΈΡ ΠΈΠ· Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΠ»ΠΎΠ², ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π΄Π΅ΡΠΈΡΡ Π²ΠΌΠ΅ΡΡΠΎ ΠΏΡΠΎΠ±Π΅Π»ΠΎΠ². ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΏΡΠΈΠ½ΡΡΠΎ ΠΏΠΈΡΠ°ΡΡ ΠΈΠΌΠ΅Π½Π° ΠΊΠ»Π°ΡΡΠΎΠ² Π² Π½ΠΈΠΆΠ½Π΅ΠΌ ΡΠ΅Π³ΠΈΡΡΡΠ΅. ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΈΠΌΠ΅Π½ ΠΊΠ»Π°ΡΡΠΎΠ² Π²ΠΊΠ»ΡΡΠ°ΡΡ .bright-blue ΠΈ .fancy-text .
ΠΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ»Π°ΡΡΡ CSS
Π’Π΅ΠΏΠ΅ΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅ΠΌ, ΡΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΠΊΠ»Π°ΡΡ CSS ΠΈ ΠΊΠ°ΠΊ ΠΎΠ½ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΠ°ΡΡΠΈ ΡΠ°ΠΉΠ»Π° HTML, Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠΈΠΏΠΈΡΠ½ΡΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
Bootstrap CSS-ΠΊΠ»Π°ΡΡΡ
ΠΠ½ΠΎΠ³ΠΈΠ΅ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΈ CSS ΠΈΠ½ΡΠ΅Π½ΡΠΈΠ²Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΠΊΠ»Π°ΡΡΡ CSS. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Bootstrap CSS ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΊΠ»Π°ΡΡΡ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ Bootstrap ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΊΠ»Π°ΡΡΡ CSS. Π Bootstrap CSS ΠΊΠ»Π°ΡΡ CSS .btn ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Ρ HTML-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ (Π° ΡΠ°ΠΊΠΆΠ΅ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΠΈ ). Bootstrap ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ CSS, ΠΊΠΎΡΠΎΡΡΠΉ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠΎΡΠΌΠ°ΡΠΈΡΡΠ΅Ρ Π»ΡΠ±ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ .btn class ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ. Π‘Π»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, ΠΏΡΠΎΡΡΠΎΠ΅ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π°ΡΡΠΈΠ±ΡΡΠ° class = Β«btnΒ» ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ Π΅Π³ΠΎ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄.
Π’ΠΎΡΠ½Π΅Π΅, Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΊΠ»Π°ΡΡΠ° .btn ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΡΠΈΡΡ ΠΈ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°, ΠΈ Π΅ΡΠ»ΠΈ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Ρ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ Π½Π° ΡΠ΅ΠΊΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΊΠΎΠ½ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠΌΠΈ ΠΊΡΠ°ΡΠΌΠΈ.
Bootstrap ΡΠ°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΠΊΠ»Π°ΡΡΡ Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ, ΡΠ°ΠΊΠΈΠΌΠΈ ΠΊΠ°ΠΊ ΡΠ²Π΅Ρ ΡΠΎΠ½Π°. ΠΡΠ»ΠΈ ΠΌΡ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΊΠ»Π°ΡΡ .btn-success ΠΈΠ»ΠΈ .btn-dangerous , ΠΊΠ½ΠΎΠΏΠΊΠ° Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΊΠ°ΠΊ Π·Π΅Π»Π΅Π½Π°Ρ ΠΈΠ»ΠΈ ΠΊΡΠ°ΡΠ½Π°Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ.
Π‘ΠΌ. Pen css class: ΠΏΡΠΈΠΌΠ΅Ρ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΡΠΈΡΡΠΈΠ½Ρ ΠΠ΅ΡΡΠΈΠΊΠΎΠ½Π΅ (@hubspot) Π½Π° CodePen.
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»Π°ΡΡΠΎΠ² CSS Bootstrap ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΠΌ Π±ΡΡΡΡΠΎ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΏΡΠΎΡΡΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡ ΠΎΠ΄Π½ΠΎ ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΠΌΠ΅Π½ ΠΊΠ»Π°ΡΡΠΎΠ². ΠΠ»Π°ΡΡΡ CSS ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠΈΠΏΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΡΠΈ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΠΈ ΠΌΠ΅Π½ΡΡΠ΅Π³ΠΎ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° ΠΊΠΎΠ΄Π°.
Π‘Π΅Π»Π΅ΠΊΡΠΎΡΡ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ²
Π¦Π΅Π»ΡΡ ΠΊΠ»Π°ΡΡΠΎΠ² CSS ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΊ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ. Π‘ ΡΡΠΎΠΉ ΡΠ΅Π»ΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ² ΡΠ²Π»ΡΡΡΡΡ ΠΎΡΠ»ΠΈΡΠ½ΡΠΌ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌ ΠΊ Π²Π°ΡΠ΅ΠΌΡ Π½Π°Π±ΠΎΡΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ².
Π‘Π΅Π»Π΅ΠΊΡΠΎΡΡ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ² ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π²ΡΠ±ΠΈΡΠ°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²Π½ΡΡΡΠΈ Π΄ΡΡΠ³ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π²Ρ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΡΠΆΠ΅ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΠΊΠ»Π°ΡΡ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΎΠ±ΡΠ΅Π³ΠΎ ΡΡΠΈΠ»Ρ Π°Π±Π·Π°ΡΠ° ΠΈΠ»ΠΈ ΡΠ΅ΠΊΡΡΠ° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, Π½ΠΎ Ρ ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΡΠ»ΠΎΠ²Π° Π² Π°Π±Π·Π°ΡΠ΅ Π±ΡΠ»ΠΈ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Ρ ΠΏΠΎ-ΡΠ²ΠΎΠ΅ΠΌΡ.
Π‘Π΅Π»Π΅ΠΊΡΠΎΡΡ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ² ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΡΡΠΈ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠ΅ ΡΡΠΈΠ»ΠΈ ΠΊ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΌ ΡΠ»ΠΎΠ²Π°ΠΌ, Π½Π΅ Π·Π°ΡΡΠ°Π³ΠΈΠ²Π°Ρ ΠΎΠΊΡΡΠΆΠ°ΡΡΠΈΠΉ ΡΠ΅ΠΊΡΡ ΠΈΠ»ΠΈ Π½Π΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡ HTML-Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ.
ΠΠΎΠΏΡΡΡΠΈΠΌ, Π²Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΠ΅ ΠΊΠ»Π°ΡΡ .blue-text ΠΊ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΡ, Π½ΠΎ Ρ ΠΎΡΠΈΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΡΠ»ΠΎΠ²Π° Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅. ΠΠ±Π΅ΡΠ½ΠΈΡΠ΅ ΡΠ»ΠΎΠ²ΠΎ Π² ΡΠ»Π΅ΠΌΠ΅Π½Ρ span , Π·Π°ΡΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ Π½Π°Π±ΠΎΡ ΠΏΡΠ°Π²ΠΈΠ» Ρ ΠΏΠΎΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠΌ: ΠΏΠΎΡΠ»Π΅ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ° ΠΊΠ»Π°ΡΡΠΎΠ² CSS .ΡΠΈΠ½ΠΈΠΉ ΡΠ΅ΠΊΡΡ , Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΠΏΡΠΎΠ±Π΅Π», Π° Π·Π°ΡΠ΅ΠΌ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ ΡΠΈΠΏΠ° ΠΎΡ Π²Π°ΡΠΈΡ .
Π‘ΠΌ. ΠΡΠΈΠΌΠ΅Ρ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ° Pen css class: ΠΠΎΡΠΎΠΌΠΊΠΈ ΠΡΠΈΡΡΠΈΠ½Ρ ΠΠ΅ΡΡΠΈΠΊΠΎΠ½Π΅ (@hubspot) Π½Π° CodePen.
ΠΠΎ Π±ΡΠ΄ΡΡΠ΅ ΠΎΡΡΠΎΡΠΎΠΆΠ½Ρ, Π½Π΅ ΠΏΠ΅ΡΠ΅ΡΡΠ΅ΡΠ΄ΡΡΠ²ΡΠΉΡΠ΅. Π§ΡΠ΅Π·ΠΌΠ΅ΡΠ½ΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ² ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ² ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ²Π΅ΡΡΠΈ ΠΊ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ΅ Π·Π°ΠΏΡΡΠ°Π½Π½ΡΡ ΠΏΡΠ°Π²ΠΈΠ», ΠΊΠΎΡΠΎΡΡΠ΅ Π·Π°ΡΡΡΠ΄Π½ΡΡ Π²Π½Π΅ΡΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π² Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅ΠΌ.
ΠΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ
ΠΠ° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ HTML. ΠΠΎ Π²ΡΠ΅ΠΌΡ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ ΡΠΎ ΡΡΡΠ°Π½ΠΈΡΠ΅ΠΉ ΠΏΠ΅ΡΠ΅Π΄Π°Π΅ΡΡΡ Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΎΠ±ΡΠ΅ΠΌ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΎΠ± Π°ΠΊΡΠΈΠ²Π½ΠΎΡΡΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ.Π§Π°ΡΡΡ ΡΡΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΎΡΡΠ°ΠΆΠ°Π΅Ρ ΡΠΎ, ΡΡΠΎ ΠΎΠ½ΠΈ Π΄Π΅Π»Π°ΡΡ.
Π‘ΡΠΈΡΠ°ΠΉΡΠ΅ ΡΡΡΠ»ΠΊΡ Π² Π²Π°ΡΠ΅ΠΌ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ΅. ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠ»ΠΈ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ Ρ Π½ΠΈΠΌ. ΠΡΠ»ΠΈ ΡΡΠΎ ΡΠ°ΠΊ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ Π΄Π»Ρ ΡΠ±ΠΎΡΠ° Π²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡ , Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ Π½Π°Π²ΠΎΠ΄ΡΡ ΠΊΡΡΡΠΎΡ, ΡΠ΅Π»ΠΊΠ°ΡΡ ΠΈ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΡΡ ΠΏΠΎ ΡΡΡΠ»ΠΊΠ΅.
ΠΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°ΡΡΡΡ Π΄Π²ΠΎΠ΅ΡΠΎΡΠΈΠ΅ΠΌ, Π·Π° ΠΊΠΎΡΠΎΡΡΠΌ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΊΠ»Π°ΡΡ. ΠΠ½ΠΈ ΠΏΠΎΡΠ²ΡΡΡΡ ΠΏΠΎΡΠ»Π΅ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ° CSS Π±Π΅Π· ΠΏΡΠΎΠ±Π΅Π»ΠΎΠ² ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠΌΠΈ.
ΠΠ±ΡΠΈΠ΅ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΡΡΡΠ»ΠΎΠΊ:
- : ΡΡΡΠ»ΠΊΠ° ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π° Π΄Π»Ρ ΡΡΡΠ»ΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π΅ ΠΏΠΎΡΠ΅ΡΠ°Π».
- : ΠΏΠΎΡΠ΅ΡΠ΅Π½ΠΎ Π½Π°ΡΠ΅Π»Π΅Π½ΠΎ Π½Π° ΡΡΡΠ»ΠΊΡ, ΠΊΠΎΡΠΎΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΠ°Π½Π΅Π΅ ΠΏΠΎΡΠ΅ΡΠ°Π».
- : hover Π½Π°ΡΠ΅Π»Π΅Π½ Π½Π° ΡΡΡΠ»ΠΊΡ, Π½Π° ΠΊΠΎΡΠΎΡΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ ΠΊΡΡΡΠΎΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ.
- : Π°ΠΊΡΠΈΠ²Π½ΡΠΉ Π½Π°ΡΠ΅Π»Π΅Π½ Π½Π° Π½Π°ΠΆΠ°ΡΡΡ ΡΡΡΠ»ΠΊΡ.
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΏΡΠΈΠΌΠ΅Ρ. ΠΠΎΠΏΡΡΡΠΈΠΌ, Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠ΄Π°Π»ΠΈΡΡ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ ΡΡΡΠ»ΠΎΠΊ Π²ΠΎ Π²ΡΠ΅Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΡΡ . ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, ΠΏΠΎΡΠ΅ΡΠΈΠ» Π»ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΡΡΠ»ΠΊΡ, Π½Π°Π²ΠΎΠ΄ΠΈΠ» Π½Π° Π½Π΅Π΅ ΠΊΡΡΡΠΎΡ ΠΈΠ»ΠΈ Π°ΠΊΡΠΈΠ²Π½ΠΎ Π½Π°ΠΆΠΈΠΌΠ°Π» Π½Π° Π½Π΅Π΅, ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΏΠΎΠ΄ ΡΡΠΈΠΌΠΈ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠΌΠΈ ΡΡΡΠ»ΠΊΠ°ΠΌΠΈ.
Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π°ΡΡΠΈΠ±ΡΡ ΠΊΠ»Π°ΡΡΠ° ΡΠΎΠ»ΡΠΊΠΎ ΠΊ ΡΡΡΠ»ΠΊΠ°ΠΌ, Ρ ΠΊΠΎΡΠΎΡΡΡ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠ΄Π°Π»ΠΈΡΡ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅. ΠΠ°ΡΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ΅ΡΡΡΠ΅ Π½Π°Π±ΠΎΡΠ° ΠΏΡΠ°Π²ΠΈΠ» Ρ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠΌ ΠΊΠ»Π°ΡΡΠΎΠ² ΠΈ ΡΠ΅ΡΡΡΡΠΌΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌΠΈ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΠ°ΠΌΠΈ. Π ΠΊΠ°ΠΆΠ΄ΠΎΠΌ Π±Π»ΠΎΠΊΠ΅ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠΉ Π²Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° text-decoration Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ none .
Π‘ΠΌ. Pen css class: ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ ΠΡΠΈΡΡΠΈΠ½Ρ ΠΠ΅ΡΡΠΈΠΊΠΎΠ½Π΅ (@hubspot) Π½Π° CodePen.
ΠΠ»Π°ΡΡ CSS ΠΈ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠ°
Π CSS ΠΊΠ»Π°ΡΡΡ Π³ΡΡΠΏΠΏΠΈΡΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π° ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π΄Π»Ρ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ ΠΊΠ»Π°ΡΡΠΎΠ² Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ HTML-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΊΠ»Π°ΡΡΠ° ΠΈ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ ID Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ HTML-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π₯ΠΎΡΡ Ρ Π²Π°Ρ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΊΠ·Π΅ΠΌΠΏΠ»ΡΡΠΎΠ² ΠΊΠ»Π°ΡΡΠ° Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ HTML, Ρ Π²Π°Ρ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΡΠΊΠ·Π΅ΠΌΠΏΠ»ΡΡ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠ° CSS Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. Π§ΡΠΎΠ±Ρ ΠΏΡΠΈΡΠ²ΠΎΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡ, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ Π°ΡΡΠΈΠ±ΡΡ id = Β«nameΒ» ΠΊ Π΅Π³ΠΎ ΠΎΡΠΊΡΡΠ²Π°ΡΡΠ΅ΠΌΡ ΡΠ΅Π³Ρ ΠΈ Π·Π°ΠΌΠ΅Π½ΠΈΡΠ΅ name ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΌ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΡΠΈΡΡΡΡΠΈΠΌ ΠΈΠΌΠ΅Π½Π΅ΠΌ. Π CSS ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΉ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠ° Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ ΡΠΎ Π·Π½Π°ΠΊΠ° ΡΠ΅ΡΠ΅ΡΠΊΠΈ (#) Π²ΠΌΠ΅ΡΡΠΎ ΡΠΎΡΠΊΠΈ.
ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π°ΡΡΠΈΠ±ΡΡΡ ID ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°ΡΡ ΡΠ΅Π»Ρ Π΄Π»Ρ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠΎΠ² URL (ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡ), ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΌΠΈ. Π€ΡΠ°Π³ΠΌΠ΅Π½ΡΡ ΠΏΠΎΠΌΠΎΠ³Π°ΡΡ Π²Π°ΠΌ Π½Π°ΠΏΡΠ°Π²ΠΈΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΊ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΡΠ°ΡΡΠΈ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ — ΡΡΠ°Π³ΠΌΠ΅Π½Ρ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΊΠ°ΠΊ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠ°, ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½Π½ΡΠΉ Π² ΠΊΠΎΠ½ΡΠ΅ URL-Π°Π΄ΡΠ΅ΡΠ°.
ΠΡΡΠΎΡΠ½ΠΈΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ° CSSΠΠ½ΠΎΠ³Π΄Π° ΠΊΠΎΠ½ΡΠ»ΠΈΠΊΡΡ ΠΏΡΠ°Π²ΠΈΠ» CSS. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ² Π½Π°ΡΠ΅Π»Π΅Π½Ρ Π½Π° ΠΎΠ΄ΠΈΠ½ ΠΈ ΡΠΎΡ ΠΆΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅, ΠΊΠ°ΠΊΠΈΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ? ΠΡΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠΎΠΉ CSS.Π CSS ΡΠ°Π·Π½ΡΠ΅ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ ΠΈΠΌΠ΅ΡΡ ΡΠ°Π·Π½ΡΠΉ Π²Π΅Ρ. ΠΠΎΠ³Π΄Π° Π΄Π²Π° ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΏΡΠΎΡΠΈΠ²ΠΎΡΠ΅ΡΠ°Ρ ΠΎΠ΄Π½ΠΎΠΌΡ ΠΈ ΡΠΎΠΌΡ ΠΆΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠ΅.
ΠΠΎΡ ΠΊΠ°ΠΊ ΡΠ°Π·Π½ΡΠ΅ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ ΡΠ°Π½ΠΆΠΈΡΡΡΡΡΡ Π² ΠΈΠ΅ΡΠ°ΡΡ ΠΈΠΈ ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ½ΠΎΡΡΠΈ:
- ΠΡΡΡΠΎΠ΅Π½Π½ΡΠΉ CSS: ΠΡΡΡΠΎΠ΅Π½Π½ΡΠΉ CSS ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΠΊΠ°ΠΊ Π°ΡΡΠΈΠ±ΡΡΡ ΡΡΠΈΠ»Ρ Π² ΠΎΡΠΊΡΡΠ²Π°ΡΡΠ΅ΠΌ ΡΠ΅Π³Π΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² HTML. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠΎΡ CSS Π±Π»ΠΈΠΆΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΊ HTML, ΠΎΠ½ ΠΈΠΌΠ΅Π΅Ρ Π²ΡΡΠΎΡΠ°ΠΉΡΠΈΠΉ ΡΡΠΎΠ²Π΅Π½Ρ ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ½ΠΎΡΡΠΈ.
- Π‘Π΅Π»Π΅ΠΊΡΠΎΡΡ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠ°: ΠΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡ ΡΠ½ΠΈΠΊΠ°Π»Π΅Π½ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ, ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, ΠΎΡΠ΅Π½Ρ ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ΅Π½.
- Π‘Π΅Π»Π΅ΠΊΡΠΎΡΡ ΠΊΠ»Π°ΡΡΠΎΠ², ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ Π°ΡΡΠΈΠ±ΡΡΠΎΠ² ΠΈ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΠΎΠ²: ΠΡΠΈ ΡΡΠΈ ΡΠΈΠΏΠ° ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ² ΠΈΠΌΠ΅ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΡ ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ½ΠΎΡΡΡ. ΠΡΠ»ΠΈ Π²ΡΠ΅ ΡΡΠΈ ΡΠΈΠΏΠ° ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΊ ΠΎΠ΄Π½ΠΎΠΌΡ ΠΈ ΡΠΎΠΌΡ ΠΆΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ HTML, Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΡΠΎΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ Π² ΡΠ°Π±Π»ΠΈΡΠ΅ ΡΡΠΈΠ»Π΅ΠΉ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΌ, ΠΈ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅.
- Π‘Π΅Π»Π΅ΠΊΡΠΎΡΡ ΡΠΈΠΏΠ° : ΠΎΠ½ΠΈ Π²ΡΠ±ΠΈΡΠ°ΡΡ Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ HTML, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠΌΠ΅ΡΡ Π·Π°Π΄Π°Π½Π½ΠΎΠ΅ ΠΈΠΌΡ ΡΠ·Π»Π° ΠΈ ΠΈΠΌΠ΅ΡΡ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ . ΠΡΠΎ ΠΈΠΌΠ΅Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΡ.
ΠΠΎΡ Π³Π΄Π΅ ΡΠΈΡΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ ID.ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ΠΈ Π½Π°ΡΡΠΎΠ»ΡΠΊΠΎ ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ½Ρ, ΠΏΠΎΡΡΠΈ Π»ΡΠ±ΠΎΠΉ Π΄ΡΡΠ³ΠΎΠΉ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ, ΠΏΡΠΎΡΠΈΠ²ΠΎΡΡΠΎΡΡΠΈΠΉ ΠΈΠΌ, ΠΏΡΠΎΠΈΠ³ΡΡΠ²Π°Π΅Ρ. Π‘ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ, ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΡΠΉ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ (*) ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ°Π· Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠΈΠ³ΡΡΠ²Π°ΡΡ ΠΈΠ·-Π·Π° ΡΠ²ΠΎΠ΅ΠΉ Π½ΠΈΠ·ΠΊΠΎΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ½ΠΎΡΡΠΈ.
ΠΠ°ΡΠ°ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ»Π°ΡΡΡ CSSCSS-ΠΊΠ»Π°ΡΡΡ ΠΏΠΎΠΌΠΎΠ³Π°ΡΡ Π±ΡΡΡΡΠ΅Π΅ ΠΈ ΠΏΡΠΎΡΠ΅ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ² ΠΊΠ»Π°ΡΡΠΎΠ² CSS ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»Π° Π΄Π»Ρ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ΅Π»ΡΡ ΠΊΠ»Π°ΡΡΠΎΠ² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² HTML, ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² ΠΊΠ»Π°ΡΡΠ΅ ΠΈΠ»ΠΈ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ ΠΊΠ»Π°ΡΡΠ°Ρ .ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΠ²ΠΈΡΡ ΡΠ²ΠΎΡΡΠ΅ΡΠΊΠΈΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ ΠΏΡΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°, Π½ΠΎ ΠΏΠΎΠΌΠ½ΠΈΡΠ΅, ΡΡΠΎ ΡΠ΅Π»Ρ ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ ΡΠ»ΡΡΡΠΈΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ°: ΡΡΠΎΡ ΠΏΠΎΡΡ Π±ΡΠ» ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎ ΠΎΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½ Π² ΡΠ΅Π²ΡΠ°Π»Π΅ 2020 Π³ΠΎΠ΄Π° ΠΈ Π±ΡΠ» ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ Π΄Π»Ρ ΠΏΠΎΠ»Π½ΠΎΡΡ.
ΠΠΎΠ±Π°Π²ΠΈΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΠΉ ΠΊΠ»Π°ΡΡ CSS Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠ΅Π½Ρ WordPress
ΠΠΎΠ±Π°Π²ΠΈΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΠΉ ΠΊΠ»Π°ΡΡ CSS Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠ΅Π½Ρ WordPressΠΠ½ΠΎΠ³Π΄Π° ΡΠ΅ΠΌΠ° ΠΈΠ»ΠΈ ΡΠ°Π±Π»ΠΎΠ½ Π΄Π»Ρ WordPress Π½Π΅ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ ΠΏΠΎΠ»Π½ΡΡ Π½Π°ΡΡΡΠΎΠΉΠΊΡ Π΄Π»Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠΎΠ² Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠΌ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΡΡΠ΅Π±ΠΎΠ²Π°ΡΡΡΡ Π²Π½Π΅ΡΡΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΊ ΡΠ²Π΅ΡΠ°ΠΌ, ΡΡΠΈΠ»ΡΠΌ ΠΈ ΡΡΡΠ΅ΠΊΡΠ°ΠΌ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΡΠ΅ΠΌΡ ΠΈ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΡΠ°ΠΉΡΠ°, ΡΠ°Π±ΠΎΡΠ°ΡΡΠ΅Π³ΠΎ Π½Π° WordPress.
ΠΠ΄Π½ΠΎΠΉ ΠΈΠ· ΡΠ°ΠΊΠΈΡ Π½Π°ΡΡΡΠΎΠ΅ΠΊ, ΡΠΊΠΎΡΠ΅Π΅ Π²ΡΠ΅Π³ΠΎ, Π±ΡΠ΄Π΅Ρ ΠΌΠ΅Π½Ρ ΠΈΠ»ΠΈ ΠΌΠ΅Π³Π°ΠΌΠ΅Π½Ρ, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΎ Π²ΠΊΠ»ΡΡΠ΅Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠ½ΠΊΡΠΈΠΈ ΡΠ΅ΠΌΡ ΠΈΠ»ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½Π°. Π§ΡΠΎΠ±Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΠΌΠ΅Π½Ρ, Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ² Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΠΉ ΠΊΠ»Π°ΡΡ ΠΊ ΡΠ΅Π³Π°ΠΌ
- .
- ΠΠΎΠΉΠ΄ΠΈΡΠ΅ Π² Π°Π΄ΠΌΠΈΠ½ ΠΏΠ°Π½Π΅Π»Ρ WordPress.
- ΠΠ΅ΡΠ΅ΠΉΡΠΈ ΠΊ ΠΠ½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ -> ΠΠ΅Π½Ρ .
- Π©Π΅Π»ΠΊΠ½ΠΈΡΠ΅ ΠΈΠ»ΠΈ ΠΊΠΎΡΠ½ΠΈΡΠ΅ΡΡ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ ΠΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΡΠΊΡΠ°Π½Π° Π² ΠΏΡΠ°Π²ΠΎΠΌ Π²Π΅ΡΡ Π½Π΅ΠΌ ΡΠ³Π»Ρ, ΡΡΠΎΠ±Ρ ΠΎΡΠΊΡΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ².
- Π ΡΠ°Π·Π΄Π΅Π»Π΅ ΠΠΎΠΊΠ°Π·Π°ΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΌΠ΅Π½Ρ ΡΠ°Π·Π΄Π΅Π», ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΡΠ»Π°ΠΆΠΎΠΊ CSS-ΠΊΠ»Π°ΡΡΡ .
- Π’Π΅ΠΏΠ΅ΡΡ ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΡΠΉΡΠ΅ ΠΌΠ΅Π½Ρ, Π² ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠ»Π°ΡΡΡ CSS. Π©Π΅Π»ΠΊΠ½ΠΈΡΠ΅ ΡΡΡΠ΅Π»ΠΊΡ ΡΠΏΡΠ°Π²Π° ΠΎΡ ΠΏΡΠ½ΠΊΡΠ° ΠΌΠ΅Π½Ρ, ΡΡΠΎΠ±Ρ ΡΠ°Π·Π²Π΅ΡΠ½ΡΡΡ ΠΈ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ.
- ΠΠΎΡΡΡΠΏΠ½ΠΎ Π½ΠΎΠ²ΠΎΠ΅ ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠ΅ ΠΏΠΎΠ»Π΅ ΠΠ»Π°ΡΡΡ CSS (Π½Π΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ) . ΠΠ²Π΅Π΄ΠΈΡΠ΅ ΠΈΠΌΡ ΠΊΠ»Π°ΡΡΠΎΠ² CSS Π² ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠ΅ ΠΏΠΎΠ»Π΅, ΡΡΠΎΠ±Ρ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΊΠ»Π°ΡΡΡ CSS ΠΊ ΠΏΡΠ½ΠΊΡΡ ΠΌΠ΅Π½Ρ.
Π ΠΏΡΠ½ΠΊΡΡ ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΊΠ»Π°ΡΡΠΎΠ² CSS, ΡΠ°Π·Π΄Π΅Π»Π΅Π½Π½ΡΡ ΠΏΡΠΎΠ±Π΅Π»ΠΎΠΌ.
ΠΠ°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π²ΡΡΡΠ½ΡΡ Π²Π²Π΅ΡΡΠΈ ΠΊΠ»Π°ΡΡΡ CSS Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΏΡΠ½ΠΊΡΠ° ΠΌΠ΅Π½Ρ, ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΌΡ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΈΡ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ.
- ΠΠ΅ Π·Π°Π±ΡΠ΄ΡΡΠ΅ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΠΌΠ΅Π½Ρ.
- (ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΏΠΈΡΠΊΠ°), ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ°ΠΊΠΆΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ΅ΠΌ ΠΆΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ, ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»Π΅Π½ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΌΠ΅Π½Ρ. ΠΠΎΡΠ»Π΅ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΡ
ΠΊΠ»Π°ΡΡΠΎΠ² CSS Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠ΅ ΡΡΠΈΠ»ΠΈ ΠΊ ΠΌΠ΅Π½Ρ WordPress.ΠΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΡΠ΅ΠΌ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΠΉ CSS ΠΊ Π²Π΅Π±-ΡΠ°ΠΉΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ² ΡΠ΅ΠΌΡ, ΠΈΠ·Π±Π°Π²Π»ΡΡ ΠΎΡ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ Π²Π·Π»Π°ΠΌΡΠ²Π°ΡΡ ΠΊΠΎΠ΄ ΠΈΠ»ΠΈ ΡΠ°ΠΉΠ»Ρ ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ². LK — ΡΠ΅Ρ
Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΏΠΈΡΠ°ΡΠ΅Π»Ρ Π΄Π»Ρ Tech Journey Ρ ΠΎΠΏΡΡΠΎΠΌ ΡΠ°Π±ΠΎΡΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΈΡΡΠ΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΈ ΡΠ΅ΡΠ΅Π²ΠΎΠ³ΠΎ Π°Π΄ΠΌΠΈΠ½ΠΈΡΡΡΠ°ΡΠΎΡΠ°. ΠΠ½ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΈΡΡΠ΅Ρ ΡΠ²ΠΎΠΉ ΠΎΠΏΡΡ Π² ΠΌΠΈΡΠ΅ ΡΠΈΡΡΠΎΠ²ΡΡ
ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ ΠΈ ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ Π±ΠΎΠ»Π΅Π΅ 15 Π»Π΅Ρ. ΠΠ±ΡΠ°ΠΉΡΠ΅ΡΡ Ρ LK ΡΠ΅ΡΠ΅Π· Tech Journey Π² Facebook, Twitter ΠΈΠ»ΠΈ Google+.
ΠΊΠ»Π°ΡΡΠΎΠ² CSS ΠΈ ΡΠΏΠΎΡΠΎΠ±Ρ ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ
Π Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ ΡΠ΅Π³ΠΈ HTML ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π΄Π»Ρ ΡΡΡΡΠΊΡΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°, Π² ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ CSS (ΠΊΠ°ΡΠΊΠ°Π΄Π½ΡΠ΅ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ) ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΡΡΡΠΊΡΡΡΠ°.ΠΠΌΠ΅ΡΡΠ΅ ΠΎΠ½ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΡΠ°Π·ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΏΡΠΎΡΡΡΠ΅ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ. Π Zoomforth Π²Π°ΠΌ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π±Π΅ΡΠΏΠΎΠΊΠΎΠΈΡΡΡΡ ΠΎΠ± ΡΡΠΈΡ ΠΌΠ΅Π»ΠΊΠΈΡ Π΄Π΅ΡΠ°Π»ΡΡ , Π΅ΡΠ»ΠΈ Π²Ρ Π½Π΅ Π·Π°ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠΎΠ²Π°Π½Ρ Π² ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ ΡΠ΅ΠΌΡ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΌΡ Π΄Π΅Π»Π°Π΅ΠΌ ΡΠ»ΠΎΠΆΠ½ΡΠ΅ ΡΠ°ΡΡΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π·Π° Π²Π°Ρ.
ΠΠ΄Π½Π°ΠΊΠΎ, ΠΊΠΎΠ³Π΄Π° Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½, ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π²Π°ΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΈ ΡΠ΄Π°Π»ΡΡΡ ΠΊΠ»Π°ΡΡΡ CSS Π² ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠ°ΡΡΡΡ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°. Zoomforth ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΠΊΠ»Π°ΡΡΠΎΠ² CSS ΠΊ ΠΏΠΎΠ΄ΡΡΡΠ°Π½ΠΈΡΠ°ΠΌ, ΡΠ°Π·Π΄Π΅Π»Π°ΠΌ ΠΈ ΠΏΠ»ΠΈΡΠΊΠ°ΠΌ. ΠΡΠΈ ΠΊΠ»Π°ΡΡΡ Π·Π°ΡΠ΅ΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ ΡΠ΅ΠΌΡ Π΄Π»Ρ ΠΏΡΠΈΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ.
ΠΠ ΠΠΠΠ§ΠΠΠΠ: ΠΡ Ρ ΠΎΡΠ΅Π»ΠΈ Π±Ρ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΡΠΈΡ ΠΊΠ»Π°ΡΡΠΎΠ² ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠ΅ΡΠ΅Π΄ΠΎΠ²ΠΎΠΉ ΡΠ΅Ρ Π½ΠΈΠΊΠΎΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°. ΠΠ°ΠΌ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΡΡΠ΅Π±ΠΎΠ²Π°ΡΡΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½Π°Ρ ΠΏΠΎΠΌΠΎΡΡ Π² ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠΈ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΡΠΈΡ ΠΊΠ»Π°ΡΡΠΎΠ² Π² Π²Π°ΡΠΈΡ ΡΠ΅ΠΌΠ°Ρ .
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π»ΡΠ±ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΈΠΌΠ΅Π½ ΠΊΠ»Π°ΡΡΠΎΠ², ΠΈ ΠΎΠ½ΠΈ Π±ΡΠ΄ΡΡ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Ρ Π½Π° ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΡΡ ΠΏΠΎΠ΄ΡΡΡΠ°Π½ΠΈΡΡ, ΡΠ°Π·Π΄Π΅Π» ΠΈΠ»ΠΈ ΠΏΠ»ΠΈΡΠΊΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, ΡΡΠΎ ΠΌΡ Ρ ΠΎΡΠΈΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΡΠ°Π·Π΄Π΅Π» Π½Π° Π½Π°ΡΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅. ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ ΠΏΠΎ:
ΠΠ°ΠΉΠ΄ΠΈΡΠ΅ ΡΠ°Π·Π΄Π΅Π» Π½Π° ΡΠ²ΠΎΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅ ΠΈ Π½Π°ΠΆΠΌΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ.
ΠΠ° Π»Π΅Π²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π½Π°ΠΉΠ΄ΠΈΡΠ΅ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΉ Π²Π²ΠΎΠ΄ ΠΊΠ»Π°ΡΡΠΎΠ² CSS.
ΠΠ²Π΅Π΄ΠΈΡΠ΅ ΡΠ»ΠΎΠ²ΠΎ
section-hover-effect
ΠΈ Π½Π°ΠΆΠΌΠΈΡΠ΅ ENTER.ΠΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΈΠΌΡ Π²Π°ΡΠ΅Π³ΠΎ ΠΊΠ»Π°ΡΡΠ° Π² ΠΏΠΎΠ»Π΅ Π²Π²ΠΎΠ΄Π°.
Π‘ΠΎΡ ΡΠ°Π½ΠΈΡΠ΅ ΡΠ²ΠΎΠΉ ΡΠ°ΠΉΡ ΠΈ Π½Π°ΠΆΠΌΠΈΡΠ΅ ΠΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°ΡΡ.
ΠΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π½Π° ΠΏΠ°Π½Π΅Π»Ρ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² ΡΠ΅ΠΌ ΠΈ Π½Π°ΠΉΠ΄ΠΈΡΠ΅ ΡΠ΅ΠΌΡ, ΠΊΠΎΡΠΎΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π²Π°Ρ ΡΠ°ΠΉΡ.
ΠΡΠΊΡΠΎΠΉΡΠ΅ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ ΡΠ΅ΠΌ ΠΈ Π½Π°ΠΆΠΌΠΈΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ Custom CSS , ΡΡΠΎΠ±Ρ ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ CSS Π΄Π»Ρ ΡΠ°ΠΉΡΠ°.Π Π½ΠΎΠ²ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ CSS:
.section-hover-effect: hover {
background-color: red;
}Π‘ΠΎΡ ΡΠ°Π½ΠΈΡΠ΅ ΡΠ²ΠΎΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ CSS ΠΈ Π½Π°ΠΆΠΌΠΈΡΠ΅ ΠΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°ΡΡ .
ΠΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π½Π° ΡΠ²ΠΎΠΉ Π΄Π΅ΠΉΡΡΠ²ΡΡΡΠΈΠΉ ΡΠ°ΠΉΡ ΠΈ ΠΏΡΠΎΠΊΡΡΡΠΈΡΠ΅ Π²Π½ΠΈΠ· Π΄ΠΎ Π½ΡΠΆΠ½ΠΎΠ³ΠΎ ΡΠ°Π·Π΄Π΅Π»Π°. ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΡΠ°Π·Π΄Π΅Π» ΡΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΡΠ°ΡΡ ΠΊΡΠ°ΡΠ½ΡΠΌ.
CSS-ΠΊΠ»Π°ΡΡΡ ΠΎΡΠ΅Π½Ρ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½Ρ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΏΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Ρ Π² Π²Π°ΡΠ΅ΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠΌ CSS, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΈΡ ΠΊ Π΄ΡΡΠ³ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ Π½Π° ΡΠ°ΠΉΡΠ΅, ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±ΠΈΡΡΡΡ ΡΠΎΠ³ΠΎ ΠΆΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ.ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ Π΄ΡΡΠ³ΠΎΠΉ ΡΠ°Π·Π΄Π΅Π» ΡΡΠ°Π» ΠΊΡΠ°ΡΠ½ΡΠΌ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Π³ΠΎ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ CSS-ΠΊΠ»Π°ΡΡ
section-hover-effect
Π² Π½ΠΎΠ²ΡΠΉ ΡΠ°Π·Π΄Π΅Π» Π² ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅ ΡΠ°ΠΉΡΠ° ΠΈ ΠΎΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉ ΡΠ°ΠΉΡ, ΠΈ Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΠΎ ΡΡΠΎΡ ΡΠ°Π·Π΄Π΅Π» Π²ΡΠΏΠΎΠ»Π½ΡΠ΅Ρ ΡΠ°ΠΊΠΎΠΉ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ ΠΏΠ΅ΡΠ²ΡΠΉ.ΠΡΡΠΈΠ½Π½Π°Ρ ΡΠΈΠ»Π° ΠΊΠ»Π°ΡΡΠΎΠ² CSS Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΎΠ½ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π²Π°ΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΈΠ»ΠΈ ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΠΈΡ ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΊ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ, Π΄Π°Π²Π°Ρ ΠΈΠΌ Π΅Π΄ΠΈΠ½ΠΎΠΎΠ±ΡΠ°Π·Π½ΡΠ΅ ΡΡΠΈΠ»ΠΈ.
ΠΡΠ΅Π΄ΡΡΠ°Π²ΡΡΠ΅ ΡΠ΅Π±Π΅ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΊΠΎ Π²ΡΠ΅ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ ΠΏΠ»ΠΈΡΠΊΠΈ. ΠΡΠ΅, ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ, ΡΡΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΠΊΠ»Π°ΡΡ Π² Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΠΎΠΌ CSS Π²Π°ΡΠ΅ΠΉ ΡΠ΅ΠΌΡ ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΈΠΌΡ ΠΊΠ»Π°ΡΡΠ° ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΏΠ»ΠΈΡΠΊΠ΅, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΉ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΡΡΠΎΡ ΡΡΡΠ΅ΠΊΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π»ΡΡ, ΠΈ ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅ Π±Π΅Π· Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°.
ΠΠ»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΈΠ»ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΠΉ ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ΡΡ Π² ΡΠ»ΡΠΆΠ±Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ.
ΠΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΊΠ»Π°ΡΡ CSS Π² ΡΡΡΠ»ΠΊΡ ΠΌΠ΅Π½Ρ
WordPress ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ Π²Π°ΠΌ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ Π΄Π»Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π²Π°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠ³Π°. ΠΠΊΠ»ΡΡΠ°Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΡ ΡΡΠΈΠ»Π΅ΠΉ Π΄Π»Ρ Π²Π°ΡΠΈΡ ΠΌΠ΅Π½Ρ.
Π ΡΡΠΎΠΌ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΈ Π² Π±Π»ΠΎΠ³Π΅ Π²Ρ ΡΠ·Π½Π°Π΅ΡΠ΅, ΠΊΠ°ΠΊ Π½Π°ΡΡΡΠΎΠΈΡΡ ΠΌΠ΅Π½Ρ WordPress Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ ΡΡΠΈΠ»Ρ CSS, Π½Π΅ ΠΊΠ°ΡΠ°ΡΡΡ ΡΠ°ΠΉΠ»Π° CSS Π²Π°ΡΠ΅ΠΉ ΡΠ΅ΠΌΡ.
ΠΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ Π½Π°ΡΠ°ΡΡ
ΠΡΠ»ΠΈ Π²Ρ Π½ΠΎΠ²ΠΈΡΠΎΠΊ Π² WordPress, Ρ Π²Π°Ρ ΠΌΠΎΠΆΠ΅Ρ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡΡΡ ΡΠΎΠ±Π»Π°Π·Π½ ΠΎΠ±ΡΠ°ΡΠΈΡΡΡΡ ΠΊ ΡΡΠΈΠ»Ρ Π²Π°ΡΠ΅ΠΉ ΡΠ΅ΠΌΡ.css Π΄Π»Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ Π²Π°ΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ.
Π ΠΊΠΎΠ½ΡΠ΅ ΠΊΠΎΠ½ΡΠΎΠ², Π²Π°ΡΠ° ΡΠ΅ΠΌΠ° WordPress Ρ ΡΠ°Π½ΠΈΡ ΡΡΠΈΠ»ΠΈ CSS Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²Π°ΡΠ΅Π³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° Π² style.css, Π²ΠΊΠ»ΡΡΠ°Ρ Π΄ΠΈΠ·Π°ΠΉΠ½ Π²Π°ΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ.
ΠΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, Π½Π΅ Π½Π°Π΄ΠΎ. ΠΡΠ»ΠΈ Π²Ρ Π²Π²Π΅Π΄Π΅ΡΠ΅ ΡΠ²ΠΎΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΡΡΠΈΠ»ΠΈ CSS Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ Π² ΡΠ°ΠΉΠ» style.css, Π²Ρ ΠΏΠΎΡΠ΅ΡΡΠ΅ΡΠ΅ ΡΠ²ΠΎΡ ΡΠ°Π±ΠΎΡΡ Π² ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΡΠ°Π·, ΠΊΠΎΠ³Π΄Π° Π·Π°ΠΏΡΡΡΠΈΡΠ΅ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ ΡΠ΅ΠΌΡ.
WordPress ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ Π²Π°ΠΌ ΠΎΠ΄Π½Ρ ΡΠ΄ΠΎΠ±Π½ΡΡ ΡΡΠ½ΠΊΡΠΈΡ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΡΡ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌ.
ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ²ΠΎΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΊΠ»Π°ΡΡ CSS
ΠΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ ΠΏΠ°ΡΡ Π²Π΅ΡΠ΅ΠΉ Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² WordPress, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ Β«ΠΠ»Π°ΡΡΡ CSS (Π½Π΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ)Β», Π΅ΡΠ»ΠΈ ΠΎΠ½ Π΅ΡΠ΅ Π½Π΅ Π²ΠΊΠ»ΡΡΠ΅Π½.
- Π©Π΅Π»ΠΊΠ½ΠΈΡΠ΅ ΠΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΡΠΊΡΠ°Π½Π° Π² ΠΏΡΠ°Π²ΠΎΠΌ Π²Π΅ΡΡ Π½Π΅ΠΌ ΡΠ³Π»Ρ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ².
- ΠΡ ΠΏΠΎΠ»ΡΡΠΈΡΠ΅ ΠΏΠ°Π½Π΅Π»Ρ Boxes . Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΡΠ»Π°ΠΆΠΎΠΊ CSS Classes .
Π’Π΅ΠΏΠ΅ΡΡ Π²Ρ Π³ΠΎΡΠΎΠ²Ρ Π½Π°ΠΉΡΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΡ CSS Classes (Π½Π΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ) Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈΠ»ΠΈ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ Π² Π²Π°ΡΠ΅ΠΌ ΠΌΠ΅Π½Ρ.
ΠΠ°Π»Π΅Π΅ Π²Ρ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΠ΅ Π±ΡΡΡΡΠΎΠ΅ ΡΠΏΡΠ°ΠΆΠ½Π΅Π½ΠΈΠ΅, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ ΡΡΠ° Π½Π°ΡΡΡΠΎΠΉΠΊΠ° ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π½Π° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅. ΠΠ°ΠΌ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠΎ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠΉ ΡΠ°ΠΉΡ WordPress.
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠ° ΡΠΎΠ½Π° ΡΡΡΠ»ΠΊΠΈ ΠΌΠ΅Π½Ρ
- ΠΠ° ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² WordPress ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π² ΠΠ½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ -> ΠΠ΅Π½Ρ .
- ΠΡ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ ΡΠΊΡΠ°Π½ ΠΌΠ΅Π½Ρ. ΠΡΠ±Π΅ΡΠΈΡΠ΅ Π³Π»Π°Π²Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ (ΠΠ΅ΡΡ Π½Π΅Π΅ ΠΌΠ΅Π½Ρ ) Π² ΠΡΠ±Π΅ΡΠΈΡΠ΅ ΠΌΠ΅Π½Ρ Π΄Π»Ρ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΏΠΎΠ»Ρ .
- Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΡΠ»Π°ΠΆΠΎΠΊ Sample Page .
- Π©Π΅Π»ΠΊΠ½ΠΈΡΠ΅ ΠΠΎΠ±Π°Π²ΠΈΡΡ Π² ΠΌΠ΅Π½Ρ.
Π’Π΅ΠΏΠ΅ΡΡ Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ ΠΌΠ΅Π½Ρ Sample Page , ΠΏΠΎΡΠ²ΠΈΠ²ΡΠ΅Π΅ΡΡ Π² ΠΏΠΎΠ»Π΅ Π‘ΡΡΡΠΊΡΡΡΠ° ΠΌΠ΅Π½Ρ .
- Π©Π΅Π»ΠΊΠ½ΠΈΡΠ΅ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΉ ΡΡΠ΅ΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ ΡΡΠ΄ΠΎΠΌ Ρ Page Π² ΠΌΠ΅Π½Ρ Sample Page .
- ΠΡ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ ΠΏΠΎΠ»Π΅ CSS Classes (Π½Π΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ) . ΠΠ²Π΅Π΄ΠΈΡΠ΅ my-menu .
- ΠΠ°ΠΆΠΌΠΈΡΠ΅ Π‘ΠΎΡ ΡΠ°Π½ΠΈΡΡ ΠΠ΅Π½Ρ .
ΠΡΠ»ΠΈΡΠ½ΠΎ! ΠΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΠΈΠΌΡ ΠΊΠ»Π°ΡΡΠ° CSS Π² ΡΠ²ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π΄Π»Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ.
Π’Π΅ΠΏΠ΅ΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ ΡΡΠΈΠ»Ρ CSS ΠΊ ΡΡΠΎΠΌΡ ΠΊΠ»Π°ΡΡΡ CSS, ΡΡΠΎΠ±Ρ Π½Π°ΡΡΡΠΎΠΈΡΡ ΡΠΎΠ½ ΠΌΠ΅Π½Ρ ΠΏΠΎ ΡΠ²ΠΎΠ΅ΠΌΡ Π²ΠΊΡΡΡ.
- ΠΠ° ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π² ΠΠ½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ -> ΠΠ°ΡΡΡΠΎΠΈΡΡ .
- Π Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΠ°ΡΡΠΈ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ ΡΠ΅Π»ΠΊΠ½ΠΈΡΠ΅ Additional CSS .
- ΠΡ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ ΠΏΠ°Π½Π΅Π»Ρ Additional CSS . ΠΠ²Π΅Π΄ΠΈΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ CSS.
.my-menu {
background-color: #ccc;
}- ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π²Π½ΠΈΠ·Ρ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΠΎ ΡΠ²Π΅Ρ ΡΠΎΠ½Π° ΠΌΠ΅Π½Ρ Β«ΠΠ±ΡΠ°Π·Π΅Ρ ΡΡΡΠ°Π½ΠΈΡΡΒ» ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»ΡΡ Ρ Π±Π΅Π»ΠΎΠ³ΠΎ Π½Π° ΡΠ΅ΡΡΠΉ.
ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΠΎΠ³ΠΎ ΠΊΠ»Π°ΡΡΠ° ΠΊ ΠΏΡΠ½ΠΊΡΠ°ΠΌ ΠΌΠ΅Π½Ρ, Π²ΡΡΡΠΎΠ΅Π½Π½Π°Ρ Π² ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ WordPress. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π½Π΅Ρ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ CSS ΠΈΠ»ΠΈ ΡΠ°Π±Π»ΠΎΠ½ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π² Π΄ΠΎΡΠ΅ΡΠ½Π΅ΠΉ ΡΠ΅ΠΌΠ΅.ΠΡΠ° ΡΡΠ½ΠΊΡΠΈΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π°ΠΌ ΡΠ²ΠΎΠ±ΠΎΠ΄Π½ΠΎ Π²ΡΠ±ΠΈΡΠ°ΡΡ ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠ½ΠΊΡΠΎΠ² ΠΌΠ΅Π½Ρ.
ΠΠ΄Π½Π°ΠΊΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΠΊΠ»Π°ΡΡΠΎΠ² CSS ΠΊ ΠΏΡΠ½ΠΊΡΠ°ΠΌ ΠΌΠ΅Π½Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠΊΡΡΡΠ° Π² ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠΌ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ΅ WordPress. Π‘Π»Π΅Π΄ΡΠΉΡΠ΅ ΠΈΠ½ΡΡΡΡΠΊΡΠΈΡΠΌ Π½ΠΈΠΆΠ΅, ΡΡΠΎΠ±Ρ ΡΠ°ΡΠΊΡΡΡΡ ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΠΈΠ»Ρ CSS ΠΊ ΠΏΡΠ½ΠΊΡΠ°ΠΌ ΠΌΠ΅Π½Ρ Π² WordPress.
ΠΠ½ΠΎΠ²Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ CSS Π±ΡΠ΄ΡΡ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Ρ Π² ΡΠ΅Π³