ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ HTML, ΠΊΠ°ΠΊ Π²ΡΡΠ°Π²ΠΈΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΌΠΎΠ³ΡΡ ΡΠ»ΡΡΡΠΈΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΡΠΈΠΌΠ΅Ρ
<img src=Β»pulpitrock.jpgΒ»
alt=Β»ΠΠΈΠ΄ Π½Π° Π³ΠΎΡΡΒ»>
ΠΡΠΈΠΌΠ΅Ρ
<img src=Β»img_girl.jpgΒ» alt=Β»ΠΠ΅Π²ΡΡΠΊΠ° Π² ΠΊΡΡΡΠΊΠ΅Β»>
ΠΡΠΈΠΌΠ΅Ρ
<img src=Β»img_chania.jpgΒ»
alt=Β»Π¦Π²Π΅ΡΡ Π² Π₯Π°Π½ΡΠ΅Β»>
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ HTML
Π HTML ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΡΡ ΡΠ΅Π³ΠΎΠΌ <img>
.
Π’Π΅Π³ <img>
ΠΏΡΡΡ, ΠΎΠ½ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΠΎΠ»ΡΠΊΠΎ Π°ΡΡΠΈΠ±ΡΡΡ ΠΈ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ Π·Π°ΠΊΡΡΠ²Π°ΡΡΠ΅Π³ΠΎ ΡΠ΅Π³Π°.
ΠΡΡΠΈΠ±ΡΡ src
Π·Π°Π΄Π°Π΅Ρ URL-Π°Π΄ΡΠ΅Ρ (Π²Π΅Π±-Π°Π΄ΡΠ΅Ρ) ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ:
ΠΡΡΠΈΠ±ΡΡ ALT
ΠΡΡΠΈΠ±ΡΡ alt
ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π΅ΡΠ»ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΠΎ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ ΠΏΡΠΈΡΠΈΠ½Π΅ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π΅Π³ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ (ΠΈΠ·-Π·Π° ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΡ, ΠΎΡΠΈΠ±ΠΊΠΈ Π² Π°ΡΡΠΈΠ±ΡΡΠ΅ src ΠΈΠ»ΠΈ Π΅ΡΠ»ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΡΠ΅Π΄ΡΡΠ²ΠΎ ΡΡΠ΅Π½ΠΈΡ Ρ ΡΠΊΡΠ°Π½Π°).
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ Π°ΡΡΠΈΠ±ΡΡΠ° alt
Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΎΠΏΠΈΡΡΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅:
ΠΡΠΈΠΌΠ΅Ρ
<img src=Β»img_chania.
ΠΡΠ»ΠΈ ΠΎΠ±ΠΎΠ·ΡΠ΅Π²Π°ΡΠ΅Π»Ρ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π½Π°ΠΉΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π°ΡΡΠΈΠ±ΡΡΠ° alt
:
ΠΡΠΈΠΌΠ΅Ρ
<img src=Β»wrongname.gifΒ» alt=Β»Flowers in ChaniaΒ»>
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΠΡΡΠΈΠ±ΡΡ alt
ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΠΌ. ΠΠ΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ° Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎ ΠΏΡΠΎΠ²Π΅ΡΡΡΡΡΡ Π±Π΅Π· Π½Π΅Π΅.
Π Π°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ-ΡΠΈΡΠΈΠ½Π° ΠΈ Π²ΡΡΠΎΡΠ°
ΠΠ»Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π°ΡΡΠΈΠ±ΡΡ style
.
ΠΡΠΈΠΌΠ΅Ρ
<img src=Β»img_girl.jpgΒ» alt=Β»Girl in a jacketΒ»>
ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π°ΡΡΠΈΠ±ΡΡΡ width
ΠΈ height
:
ΠΡΠΈΠΌΠ΅Ρ
<img src=Β»img_girl.jpgΒ» alt=Β»Girl in a jacketΒ»>
ΠΡΡΠΈΠ±ΡΡΡ width
ΠΈ height
Π²ΡΠ΅Π³Π΄Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ
.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΠΡΠ΅Π³Π΄Π° ΡΠΊΠ°Π·ΡΠ²Π°ΠΉΡΠ΅ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡΠ»ΠΈ ΡΠΈΡΠΈΠ½Π° ΠΈ Π²ΡΡΠΎΡΠ° Π½Π΅ ΡΠΊΠ°Π·Π°Π½Ρ, ΡΡΡΠ°Π½ΠΈΡΠ° ΠΌΠΎΠΆΠ΅Ρ ΠΌΠ΅ΡΡΠ°ΡΡ Π²ΠΎ Π²ΡΠ΅ΠΌΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
Π¨ΠΈΡΠΈΠ½Π° ΠΈ Π²ΡΡΠΎΡΠ°, ΠΈΠ»ΠΈ ΡΡΠΈΠ»Ρ?
ΠΡΡΠΈΠ±ΡΡΡ width
, height
ΠΈ style
Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½Ρ Π² HTML5.
ΠΠ΄Π½Π°ΠΊΠΎ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π°ΡΡΠΈΠ±ΡΡ style
. ΠΡΠΎ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ°Π΅Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² ΡΠ°Π±Π»ΠΈΡΠ°Ρ
ΡΡΠΈΠ»Π΅ΠΉ:
ΠΡΠΈΠΌΠ΅Ρ
img {
width:100%;
}
<img src=Β»html5.gifΒ» alt=Β»HTML5 IconΒ»>
<img src=Β»html5.gifΒ» alt=Β»HTML5 IconΒ»>
</body>
</html>
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² Π΄ΡΡΠ³ΠΎΠΉ ΠΏΠ°ΠΏΠΊΠ΅
ΠΡΠ»ΠΈ Π½Π΅ ΡΠΊΠ°Π·Π°Π½ΠΎ, ΠΎΠ±ΠΎΠ·ΡΠ΅Π²Π°ΡΠ΅Π»Ρ ΠΎΠΆΠΈΠ΄Π°Π΅Ρ Π½Π°ΠΉΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΡΠΎΠΉ ΠΆΠ΅ ΠΏΠ°ΠΏΠΊΠ΅, ΡΡΠΎ ΠΈ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ°.
Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, ΠΎΠ½ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠ±ΡΠΈΠΌ Π΄Π»Ρ Ρ
ΡΠ°Π½Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ ΠΏΠ°ΠΏΠΊΠ΅. ΠΠ°ΡΠ΅ΠΌ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ Π²ΠΊΠ»ΡΡΠΈΡΡ ΠΈΠΌΡ ΠΏΠ°ΠΏΠΊΠΈ Π² Π°ΡΡΠΈΠ±ΡΡ src
:
ΠΡΠΈΠΌΠ΅Ρ
<img src=Β»/images/html5.gifΒ» alt=Β»HTML5 IconΒ»>
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° Π΄ΡΡΠ³ΠΎΠΌ ΡΠ΅ΡΠ²Π΅ΡΠ΅
ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π΅Π±-ΡΠ·Π»Ρ Ρ ΡΠ°Π½ΡΡ ΡΠ²ΠΎΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° ΡΠ΅ΡΠ²Π΅ΡΠ°Ρ ΠΎΠ±ΡΠ°Π·ΠΎΠ².
ΠΠ° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π΄ΠΎΡΡΡΠΏ ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ Ρ Π»ΡΠ±ΠΎΠ³ΠΎ Π²Π΅Π±-Π°Π΄ΡΠ΅ΡΠ° Π² ΠΌΠΈΡΠ΅:
ΠΡΠΈΠΌΠ΅Ρ
<img src=Β»https://html5css. ru/images/html5cs_green.jpgΒ» alt=Β»html5css.ruΒ»>
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ²Π΅Π΄Π΅Π½ΠΈΡ ΠΎ ΠΏΡΡΡΡ ΠΊ ΡΠ°ΠΉΠ»Π°ΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ Π² ΡΠ°Π·Π΄Π΅Π»Π΅ ΠΏΡΡΠΈ ΠΊ ΡΠ°ΠΉΠ»Π°ΠΌ HTML.
ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
HTML ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ GIF:
ΠΡΠΈΠΌΠ΅Ρ
<img src=Β»programming.gifΒ» alt=Β»Computer ManΒ»>
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΠΊ ΡΡΡΠ»ΠΊΠ°
Π§ΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΡΡΠ»ΠΊΠΈ, ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ ΡΠ΅Π³ <img>
Π²Π½ΡΡΡΡ ΡΠ΅Π³Π° <a>
:
ΠΡΠΈΠΌΠ΅Ρ
<img src=Β»smiley.gifΒ» alt=Β»HTML tutorialΒ» style=Β»width:42px;height:42px;border:0;Β»>
</a>
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: border:0;
Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ΅Π½ΠΈΡ IE9 (ΠΈ Π±ΠΎΠ»Π΅Π΅ ΡΠ°Π½Π½ΠΈΡ
) ΠΎΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π³ΡΠ°Π½ΠΈΡΡ Π²ΠΎΠΊΡΡΠ³ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ (ΠΊΠΎΠ³Π΄Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΡΡΠ»ΠΊΠΎΠΉ).
ΠΠ»Π°Π²Π°ΡΡΠ΅Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ CSS float
, ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠΏΠ»ΡΠ»ΠΎ Π²ΠΏΡΠ°Π²ΠΎ ΠΈΠ»ΠΈ Π²Π»Π΅Π²ΠΎ ΠΎΡ ΡΠ΅ΠΊΡΡΠ°:
ΠΡΠΈΠΌΠ΅Ρ
The image will float to the right of the text.

<p><img src=Β»smiley.gifΒ» alt=Β»Smiley faceΒ»
style=Β»float:left;width:42px;height:42px;Β»>
ΠΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΊΠ°ΡΡΡ
Π’Π΅Π³ <map>
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅-ΠΊΠ°ΡΡΡ. ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅-ΠΊΠ°ΡΡΠ° ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Ρ ΡΠ΅Π»ΡΠΊΠΎΠΌ ΠΎΠ±Π»Π°ΡΡΠΈ.
ΠΠ° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ΅ Π½ΠΈΠΆΠ΅, Π½Π°ΠΆΠΌΠΈΡΠ΅ Π½Π° ΠΊΠΎΠΌΠΏΡΡΡΠ΅Ρ, Π’Π΅Π»Π΅ΡΠΎΠ½, ΠΈΠ»ΠΈ ΡΠ°ΡΠΊΡ ΠΊΠΎΡΠ΅:
ΠΡΠΈΠΌΠ΅Ρ
<map name=Β»workmapΒ»>
<area shape=Β»rectΒ» coords=Β»34,44,270,350β³
alt=Β»ComputerΒ» href=Β»computer.htmΒ»>
<area shape=Β»rectΒ» coords=Β»290,172,333,250β³
alt=Β»PhoneΒ» href=Β»phone.htmΒ»>
<area shape=Β»circleΒ» coords=Β»337,300,44β³
alt=Β»CoffeeΒ» href=Β»coffee.htmΒ»>
</map>
ΠΡΡΠΈΠ±ΡΡ name
ΡΠ΅Π³Π° <map>
ΡΠ²ΡΠ·Π°Π½ Ρ Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ usemap
<img>
ΠΈ ΡΠΎΠ·Π΄Π°Π΅Ρ ΡΠ²ΡΠ·Ρ ΠΌΠ΅ΠΆΠ΄Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ ΠΊΠ°ΡΡΠΎΠΉ.ΠΠ»Π΅ΠΌΠ΅Π½Ρ <map>
ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ΅Π³ΠΎΠ² <area>
, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΠΈΡ
ΠΎΠ±Π»Π°ΡΡΠΈ, Π½Π° ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΡΠ΅Π»ΠΊΠ½ΡΠ»ΠΈ Π½Π° ΠΊΠ°ΡΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
Π§ΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΡΠ»Π΅ΠΌΠ΅Π½Ρ HTML, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ CSS background-image
:
ΠΡΠΈΠΌΠ΅Ρ
Π§ΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ, ΡΠΊΠ°ΠΆΠΈΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Background-Image ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Body:
<h3>Background Image</h3>
</body>
ΠΡΠΈΠΌΠ΅ΡΠ΅
Π§ΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ Π°Π±Π·Π°ΡΠ°, ΡΠΊΠ°ΠΆΠΈΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Background-Image Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ P:
<p>
β¦
</p>
</body>
Π§ΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΎ ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΡ , ΠΈΠ·ΡΡΠΈΡΠ΅ Π½Π°ΡΠΈ CSS Background Π‘ΠΏΡΠ°Π²ΠΎΡΠ½ΠΈΠΊ.
ΠΠ»Π΅ΠΌΠ΅Π½Ρ <picture>
HTML5 Π²Π²Π΅Π» ΡΠ»Π΅ΠΌΠ΅Π½Ρ <picture>
, ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π±ΠΎΠ»ΡΡΠ΅ Π³ΠΈΠ±ΠΊΠΎΡΡΠΈ ΠΏΡΠΈ ΡΠΊΠ°Π·Π°Π½ΠΈΠΈ ΡΠ΅ΡΡΡΡΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΠ»Π΅ΠΌΠ΅Π½Ρ <picture>
ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΡΠ΄ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² <source>, ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ
ΡΡΡΠ»Π°Π΅ΡΡΡ Π½Π° ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΎΠ±ΠΎΠ·ΡΠ΅Π²Π°ΡΠ΅Π»Ρ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ±ΡΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π½Π°ΠΈΠ»ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΡΠ΅ΠΊΡΡΠ΅ΠΌΡ Π²ΠΈΠ΄Ρ ΠΈ/ΠΈΠ»ΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Ρ.
ΠΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <source>
ΠΈΠΌΠ΅Π΅Ρ Π°ΡΡΠΈΠ±ΡΡΡ, ΠΎΠΏΠΈΡΡΠ²Π°ΡΡΠΈΠ΅, ΠΊΠΎΠ³Π΄Π° ΠΈΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΡΡΠΈΠΌ.
ΠΠ±ΠΎΠ·ΡΠ΅Π²Π°ΡΠ΅Π»Ρ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠ΅ΡΠ²ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <source>
Ρ ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡΡΠΈΠΌΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ Π°ΡΡΠΈΠ±ΡΡΠΎΠ² ΠΈ ΠΈΠ³Π½ΠΎΡΠΈΡΠΎΠ²Π°ΡΡ Π»ΡΠ±ΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ <source>
.
ΠΡΠΈΠΌΠ΅Ρ
ΠΠΎΠΊΠ°Π·Π°ΡΡ ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π΅ΡΠ»ΠΈ ΠΎΠΊΠ½ΠΎ ΠΎΠ±ΠΎΠ·ΡΠ΅Π²Π°ΡΠ΅Π»Ρ (Π²ΠΈΠ΄ΠΎΠ²ΠΎΠΉ ΡΠΊΡΠ°Π½) Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ 650 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π° Π΄ΡΡΠ³ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π΅ΡΠ»ΠΈ Π½Π΅Ρ, Π½ΠΎ Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ 465 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
<picture>
<source media=Β»(min-width: 650px)Β» srcset=Β»img_pink_flowers.jpgΒ»>
<source media=Β»(min-width: 465px)Β» srcset=Β»img_white_flower.jpgΒ»>
</picture>
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΠΡΠ΅Π³Π΄Π° ΡΠΊΠ°Π·ΡΠ²Π°ΠΉΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <img>
Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π³ΠΎ Π΄ΠΎΡΠ΅ΡΠ½Π΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <picture>
. ΠΠ»Π΅ΠΌΠ΅Π½Ρ <img>
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΎΠ±ΠΎΠ·ΡΠ΅Π²Π°ΡΠ΅Π»ΡΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <picture>
, ΠΈΠ»ΠΈ Π΅ΡΠ»ΠΈ Π½ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ΅Π³ΠΎΠ² <source>
Π½Π΅ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ.
Π§ΠΈΡΠ°ΡΠ΅Π»ΠΈ ΡΠΊΡΠ°Π½Π° HTML
ΠΡΠΎΠ³ΡΠ°ΠΌΠΌΠ° ΡΡΠ΅Π½ΠΈΡ Ρ ΡΠΊΡΠ°Π½Π° β ΡΡΠΎ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠ΅ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠΈΡΠ°Π΅Ρ HTML-ΠΊΠΎΠ΄, ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΡΠ΅Ρ ΡΠ΅ΠΊΡΡ ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠΎΡΠ»ΡΡΠΈΠ²Π°ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅. Π§ΠΈΡΠ°ΡΠ΅Π»ΠΈ ΡΠΊΡΠ°Π½Π° ΠΏΠΎΠ»Π΅Π·Π½Ρ Π΄Π»Ρ Π»ΡΠ΄Π΅ΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ»Π΅ΠΏΡ, ΡΠ»Π°Π±ΠΎΠ²ΠΈΠ΄ΡΡΠΈΡ ΠΈΠ»ΠΈ ΠΎΠ±ΡΡΠ΅Π½ΠΈΡ ΠΈΠ½Π²Π°Π»ΠΈΠ΄ΠΎΠ².
Π‘ΠΏΡΠ°Π²ΠΊΠ°
- ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ HTML
<img>
Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ - ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π°ΡΡΠΈΠ±ΡΡ HTML
src
Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ URL-Π°Π΄ΡΠ΅ΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ - ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π°ΡΡΠΈΠ±ΡΡ HTML
alt
Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ° Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π΅ΡΠ»ΠΈ ΠΎΠ½ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ - ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π°ΡΡΠΈΠ±ΡΡΡ HTML
width
ΠΈheight
Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ - ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° CSS
width
ΠΈheight
Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ (Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Ρ) - ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ CSS
float
, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠΎΠΏΠ»Π°Π²ΠΎΠΊ - ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ HTML
<map>
Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ-ΠΊΠ°ΡΡΡ - ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ HTML
<area>
Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΎΠ±Π»Π°ΡΡΠ΅ΠΉ ΡΠ΅Π»ΡΠΊΠ° Π½Π° ΠΊΠ°ΡΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ - ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π°ΡΡΠΈΠ±ΡΡ
usemap
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° HTML<img>
, ΡΡΠΎΠ±Ρ ΡΠΊΠ°Π·Π°ΡΡ Π½Π° ΠΊΠ°ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ - ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ HTML
<picture>
Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π΄Π»Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΠΠ°Π³ΡΡΠ·ΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ Π²ΡΠ΅ΠΌΡ.
Π’Π΅Π³ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ HTML
Π’Π΅Π³ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
---|---|
<img> | ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ |
<map> | ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅-ΠΊΠ°ΡΡΡ |
<area> | ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π°ΠΊΡΠΈΠ²Π½ΡΡ ΠΎΠ±Π»Π°ΡΡΡ Π²Π½ΡΡΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ-ΠΊΠ°ΡΡΡ |
<picture> | ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Π΄Π»Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΠ΅ΡΡΡΡΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ |
html ΠΊΠ°ΠΊ Π²ΡΡΠ°Π²ΠΈΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π½Π° Π·Π°Π΄Π½ΠΈΠΉ ΡΠΎΠ½
ΠΠ° ΡΡΠ΅Π½ΠΈΠ΅ 7 ΠΌΠΈΠ½. ΠΡΠΎΡΠΌΠΎΡΡΠΎΠ² 21 ΠΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½ΠΎ
ΠΡΠ±Π°Ρ ΠΊΠΎΠΌΠ½Π°ΡΠ° Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Π»ΡΡΡΠ΅, Π΅ΡΠ»ΠΈ Π΅Π΅ ΠΏΠΎΠ» ΡΡΡΠΈΠ»Π°Π΅Ρ Π΄ΠΎΡΠΎΠ³ΠΎΠΉ ΠΏΠ΅ΡΡΠΈΠ΄ΡΠΊΠΈΠΉ ΠΊΠΎΠ²Π΅Ρ. Π’Π°ΠΊ ΡΠ΅ΠΌ Ρ ΡΠΆΠ΅ Π²Π°Ρ ΡΠ°ΠΉΡ? ΠΠΎΠΆΠ΅Ρ, ΠΏΡΠΈΡΠ»Π° ΠΏΠΎΡΠ° ΠΈ Π΅Π³ΠΎ ΠΏΠΎΠ» Β« Π·Π°ΡΡΠ΅Π»ΠΈΡΡ Β» Π΄ΠΎΡΠΎΠ³ΠΈΠΌ ΠΈΠ·ΡΡΠ½ΡΠΌ ΠΏΠ°Π»Π°ΡΠΎΠΌ ΡΡΡΠ½ΠΎΠΉ ΡΠ°Π±ΠΎΡΡ. Π Π°Π·Π±Π΅ΡΠ΅ΠΌΡΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΎΠ½ Π΄Π»Ρ ΡΠ°ΠΉΡΠ°:
Π€ΠΎΠ½ Π΄Π»Ρ ΡΠ°ΠΉΡΠ°
ΠΡΠ²Π°Π΅Ρ ΡΠ°ΠΊ, ΡΡΠΎ ΡΡΠ°ΡΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ°ΠΉΡΠ° ΡΠΆΠ΅ ΠΏΡΠΈΠ΅Π»ΡΡ. Π Ρ
ΠΎΡΠ΅ΡΡΡ ΡΠ΅Π³ΠΎ-Π½ΠΈΠ±ΡΠ΄Ρ Π½ΠΎΠ²Π΅Π½ΡΠΊΠΎΠ³ΠΎ ΠΈ Π²ΠΊΡΡΠ½Π΅Π½ΡΠΊΠΎΠ³ΠΎ. Π Π½ΠΎΠ²ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π±ΡΠ΄Π΅Ρ ΡΠ°ΠΊΠΎΠ²ΡΠΌ, Π΅ΡΠ»ΠΈ Π΅Π³ΠΎ ΠΏΡΠΈΠ³ΠΎΡΠΎΠ²ΠΈΡΡ ΡΠ²ΠΎΠΈΠΌΠΈ ΡΡΠΊΠ°ΠΌΠΈ.
ΠΠΎ ΠΌΠ΅Π½ΡΡΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π²Π΅ΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ΅ΡΡΡΡΠ° ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ β Π²Π΅ΡΡ Π½Π΅Π±Π»Π°Π³ΠΎΠ΄Π°ΡΠ½Π°Ρ. ΠΠ° ΠΈ Π½Π΅ Ρ Π²ΡΠ΅Ρ ΠΏΠΎΠ΄ ΡΡΠΎ Π΄Π΅Π»ΠΎ ΠΊΠ°ΠΊ Π½Π°Π΄ΠΎ Β« Π·Π°ΡΠΎΡΠ΅Π½Ρ Β» ΡΡΠΊΠΈ. ΠΠΎΡΡΠΎΠΌΡ Π»Π΅Π³ΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΎΡΠ²Π΅ΠΆΠΈΡΡ ΡΡΠ°ΡΡΠΉ ΡΠ°Π±Π»ΠΎΠ½, ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ² ΡΠ²Π΅Ρ ΡΠΎΠ½Π° ΡΠ΅ΡΡΡΡΠ° ΠΈΠ»ΠΈ Π΅Π³ΠΎ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΠΎΠΌΠ΅Π½ΡΡΡ ΡΠΎΠ½ Π½Π° ΡΠ°ΠΉΡΠ΅. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ CSS ΠΈΠ»ΠΈ html . ΠΠΎ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΈΠ· ΡΠ²ΠΎΠΉΡΡΠ² Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Ρ ΡΠΎΠ½ΠΎΠΌ ΠΈΠΌΠ΅ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ΅ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΈ ΠΌΠ΅ΡΠΎΠ΄ΠΈΠΊΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² ΡΡΠΈΡ Π²Π΅Π±-ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡΡ .
ΠΡΠ½ΠΎΠ²Ρ ΡΠ°Π±ΠΎΡΡ Ρ ΡΠΎΠ½ΠΎΠΌ Π² html
Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΠ½Π° ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²:
- Π¦Π²Π΅Ρ;
- Π€ΠΎΠ½ΠΎΠ²ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ;
- Π’Π΅ΠΊΡΡΡΡΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.
Π Π°Π·Π±Π΅ΡΠ΅ΠΌΡΡ Ρ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· Π½ΠΈΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅.
ΠΠ»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠ²Π΅Ρ Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π° Π΄Π»Ρ ΡΠ°ΠΉΡΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background-color ΡΡΠΈΠ»Π΅Π²ΠΎΠ³ΠΎ Π°ΡΡΠΈΠ±ΡΡΠ° style . Π’ΠΎ Π΅ΡΡΡ, ΡΡΠΎΠ±Ρ Π·Π°Π΄Π°ΡΡ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΠ²Π΅Ρ Π΄Π»Ρ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ, Π½ΡΠΆΠ½ΠΎ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ Π΅Π³ΠΎ Π²Π½ΡΡΡΠΈ ΡΠ΅Π³Π° . ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ:
ΠΡΠΎΠΌΠ΅ ΡΠ΅ΡΡΠ½Π°Π΄ΡΠ°ΡΠ΅ΡΠΈΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° ΡΠ²Π΅ΡΠ° ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ³ΠΎ ΡΠ»ΠΎΠ²Π° ΠΈΠ»ΠΈ RGB . ΠΡΠΈΠΌΠ΅ΡΡ:
Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΡΠ²Π΅ΡΠ° ΡΠΎΠ½Π° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»ΡΡΠ΅Π²ΡΡ
ΡΠ»ΠΎΠ² ΠΈΠΌΠ΅Π΅Ρ ΡΡΠ΄ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠΉ ΠΏΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ ΠΎΡΡΠ°Π»ΡΠ½ΡΠΌΠΈ Π΄Π²ΡΠΌΡ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ.
Π html ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π²ΡΠ΅Π³ΠΎ 16 ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΡΠ»ΠΎΠ² Π΄Π»Ρ Π·Π°Π΄Π°Π½ΠΈΡ ΡΠ²Π΅ΡΠ°. ΠΠΎΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΠ· Π½ΠΈΡ : white, red, blue, black, yellow ΠΈ Π΄ΡΡΠ³ΠΈΠ΅.
ΠΠΎΡΡΠΎΠΌΡ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠΎΠ½ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° html , Π»ΡΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ΅ΡΡΠ½Π°Π΄ΡΠ°ΡΠ΅ΡΠΈΡΠ½ΡΠΉ ΡΠΎΡΠΌΠ°Ρ ΠΈΠ»ΠΈ RGB .
ΠΡΠΎΠΌΠ΅ Π²ΡΠ±ΠΎΡΠ° ΡΠ²Π΅ΡΠ° Π΄ΠΎΡΡΡΠΏΠ½Ρ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ. ΠΡΠ»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Ρ background-color Π·Π°Π΄Π°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ transparent , ΡΠΎ ΡΠΎΠ½ ΡΡΡΠ°Π½ΠΈΡΡ ΡΡΠ°Π½Π΅Ρ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠΌ. ΠΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π°Π½Π½ΠΎΠΌΡ ΡΠ²ΠΎΠΉΡΡΠ²Ρ ΠΏΡΠΈΡΠ²ΠΎΠ΅Π½ΠΎ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.
Π’Π΅ΠΏΠ΅ΡΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΡΠ·ΡΠΊΠ° Π³ΠΈΠΏΠ΅ΡΡΠ΅ΠΊΡΡΠ° Π΄Π»Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΡΠΈΡΡΠ½ΠΊΠ° Π΄Π»Ρ ΡΠ°ΠΉΡΠ°. ΠΡΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° background-image .
ΠΠ°ΠΊ Π²ΠΈΠ΄Π½ΠΎ ΠΈΠ· ΠΊΠΎΠ΄Π°, ΠΏΡΠΈΠ²ΡΠ·ΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ ΡΠ΅ΡΠ΅Π· ΠΏΡΡΡ url , Π·Π°Π΄Π°Π½Π½ΡΠΉ Π² ΡΠΊΠΎΠ±ΠΊΠ°Ρ
. ΠΠΎ Π½Π΅ Π²ΡΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡΡΡ ΡΠ°ΠΊΠΈΠΌΠΈ Π±ΠΎΠ»ΡΡΠΈΠΌΠΈ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΎΠΈΠΌΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΡ Π²ΡΡ ΠΏΠ»ΠΎΡΠ°Π΄Ρ ΡΠΊΡΠ°Π½Π°. ΠΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΌΠ΅Π½ΡΡΠΈΠΉ ΠΏΠΎ Π²Π΅Π»ΠΈΡΠΈΠ½Π΅ ΡΠΈΡΡΠ½ΠΎΠΊ.
ΠΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, ΡΡΠΎ ΠΌΡ ΡΠ°Π·ΡΠ°Π±Π°ΡΡΠ²Π°Π΅ΠΌ ΡΠ°ΠΉΡ ΠΎ ΠΏΠΎΡΠ·ΠΈΠΈ, ΠΈ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΠΎΠ΄Π»ΠΎΠΆΠΊΠΈ Π½ΡΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΠ΅Π³Π°ΡΠ°. ΠΡΡΠ»Π°ΡΡΠΉ ΠΊΠΎΠ½Ρ Π±ΡΠ΄Π΅Ρ ΠΎΠ»ΠΈΡΠ΅ΡΠ²ΠΎΡΡΡΡ ΡΠ²ΠΎΠ±ΠΎΠ΄Ρ ΡΠ²ΠΎΡΡΠ΅ΡΠΊΠΎΠΉ ΠΌΡΡΠ»ΠΈ ΠΏΠΎΡΡΠ°!
ΠΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ, ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π»ΠΎΡΡ ΠΏΠΎΡΡΠ΅Π΄ΠΈΠ½Π΅ ΡΠΊΡΠ°Π½Π° ΠΎΠ΄ΠΈΠ½ ΡΠ°Π·. ΠΠΎ, ΠΊ ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, Π±ΡΠ°ΡΠ·Π΅Ρ Π½Π΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ Π½Π°ΡΠΈΡ
Π²ΠΎΠ·Π²ΡΡΠ΅Π½Π½ΡΡ
ΠΆΠ΅Π»Π°Π½ΠΈΠΉ. Π Π²ΡΠ²ΠΎΠ΄ΠΈΡ ΠΌΠ΅Π½ΡΡΡΡ ΠΏΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π΄Π»Ρ ΡΠΎΠ½Π° ΡΠ°ΠΉΡΠ° ΡΡΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·, ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΌΠΎΠΆΠ΅Ρ Π²ΠΌΠ΅ΡΡΠΈΡΡ Π² ΡΠ΅Π±Ρ ΠΏΠ»ΠΎΡΠ°Π΄Ρ ΡΠΊΡΠ°Π½Π°:
ΠΠ°Π²Π΅ΡΠ½ΠΎΠ΅, ΡΠ΅ΡΡΡΠ΅Ρ ΡΠ»ΡΠ±Π°ΡΡΠΈΡ ΡΡ Π»ΠΎΡΠ°Π΄Π΅ΠΉ Ρ ΠΊΡΡΠ»ΡΡΠΌΠΈ ΠΏΠΎΡΡΠ°ΠΌ Π±ΡΠ΄Π΅Ρ ΡΠ΅ΡΠ΅ΡΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ Π΄Π»Ρ Π²Π΄ΠΎΡ Π½ΠΎΠ²Π΅Π½ΠΈΡ. ΠΠΎΡΡΠΎΠΌΡ Π·Π°ΠΏΡΠ΅ΡΠ°Π΅ΠΌ ΠΊΠ»ΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π°ΡΠ΅Π³ΠΎ ΠΠ΅Π³Π°ΡΠ°. ΠΠ΅Π»Π°Π΅ΠΌ ΡΡΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° background-repeat . ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ:
- repeat-x β ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ;
- repeat-y β ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ;
- repeat β ΠΏΠΎ ΠΎΠ±Π΅ΠΈΠΌ ΠΎΡΡΠΌ;
- no-repeat β ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΠ΅ Π·Π°ΠΏΡΠ΅ΡΠ΅Π½ΠΎ.
Π‘ΡΠ΅Π΄ΠΈ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Π½ΡΡ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² Π½Π°Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΡΠ΅Ρ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ. ΠΠ΅ΡΠ΅Π΄ ΡΠ΅ΠΌ, ΠΊΠ°ΠΊ ΠΏΠΎΠΌΠ΅Π½ΡΡΡ ΡΠΎΠ½ ΡΠ°ΠΉΡΠ°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Π΅Π³ΠΎ Π² ΡΠ²ΠΎΠ΅ΠΌ ΠΊΠΎΠ΄Π΅:
ΠΠΎ, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ, Π»ΡΡΡΠ΅, Π΅ΡΠ»ΠΈ Π±Ρ Π½Π°Ρ Π»Π΅ΡΡΠ½ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΠ»ΡΡ ΠΏΠΎΡΡΠ΅Π΄ΠΈΠ½Π΅ ΡΠΊΡΠ°Π½Π°. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ background-position ΠΊΠ°ΠΊ ΡΠ°Π· ΠΈ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΎ Π΄Π»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΡΠΈΡΡΠ½ΠΊΠ° Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠ°Π΄Π°Π²Π°ΡΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ:
- ΠΠ»ΡΡΠ΅Π²ΡΠΌ ΡΠ»ΠΎΠ²ΠΎΠΌ ( top , bottom , center, left, right) ;
- ΠΡΠΎΡΠ΅Π½ΡΠ°ΠΌΠΈ β ΠΎΡΡΡΠ΅Ρ Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ ΠΎΡ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΡΠ³Π»Π°;
- Π Π΅Π΄ΠΈΠ½ΠΈΡΠ°Ρ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ( ΠΏΠΈΠΊΡΠ΅Π»ΡΡ ).
ΠΠΎΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ ΡΠ°ΠΌΡΠΌ ΠΏΡΠΎΡΡΡΠΌ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠΌ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ:
ΠΡΠ²Π°Π΅Ρ, ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ Π·Π°ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΈΡΡΠ½ΠΊΠ° ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅. ΠΠΎΡΡΠΎΠΌΡ ΠΏΡΠ΅ΠΆΠ΄Π΅, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΡΠΎΠ½ΠΎΠΌ ΡΠ°ΠΉΡΠ°, Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ΡΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠΌ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ background-attachment . ΠΡΠΈΠ½ΠΈΠΌΠ°Π΅ΠΌΡΠ΅ ΠΈΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΡ:
ΠΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅. Π’Π΅ΠΏΠ΅ΡΡ ΠΊΠΎΠ΄ Π½Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ Π²ΠΎΡ ΡΠ°ΠΊ:[/HTML]
Π’Π΅ΠΊΡΡΡΡΠ½ΡΠΉ ΡΠΎΠ½ ΡΠ°ΠΉΡΠ°
Π ΠΏΠ΅ΡΠ²ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π΄Π»Ρ ΡΠΎΠ½Π° ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΈ ΠΊΡΠ°ΡΠΈΠ²ΡΠΉ ΠΏΠ΅ΠΉΠ·Π°ΠΆ ΠΏΡΡΡΡΠ½ΠΈ. ΠΠΎ Π·Π° ΡΠ°ΠΊΡΡ ΠΊΡΠ°ΡΠΎΡΡ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡΡΡ ΠΏΠ»Π°ΡΠΈΡΡ ΡΠΏΠΎΠ»Π½Π°. ΠΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π²ΡΠΏΠΎΠ»Π½Π΅Π½Π½ΠΎΠ³ΠΎ Π² Π²ΡΡΠΎΠΊΠΎΠΌ ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅, ΠΌΠΎΠΆΠ΅Ρ Π΄ΠΎΡΡΠΈΠ³Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΠΌΠ΅Π³Π°Π±Π°ΠΉΡ.
Π’Π°ΠΊΠΎΠΉ ΠΎΠ±ΡΠ΅ΠΌ Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ Π²Π»ΠΈΡΠ΅Ρ Π½Π° ΡΠΊΠΎΡΠΎΡΡΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ ΠΏΡΠΈ Π²ΡΡΠΎΠΊΠΎΡΠΊΠΎΡΠΎΡΡΠ½ΠΎΠΌ ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΠΈ Ρ ΠΈΠ½ΡΠ΅ΡΠ½Π΅ΡΠΎΠΌ. ΠΠΎ ΠΊΠ°ΠΊ Π±ΡΡΡ Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠΌ ΠΈΠ½ΡΠ΅ΡΠ½Π΅ΡΠΎΠΌ, ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π·Π°Π³ΡΡΠ·ΠΊΠ° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ
Β« ΠΌΠ΅ΡΡΠΎΠ² Β» Π·Π°ΠΉΠΌΠ΅Ρ ΠΌΠ½ΠΎΠ³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ?
ΠΡΠ΅ ΡΡΠΈ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΡΠ΅ΡΠ°ΡΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅ΠΊΡΡΡΡΠ½ΠΎΠ³ΠΎ ΡΠΎΠ½Π°. Π Π½Π΅ΠΌ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΈΡΡΠ½ΠΊΠ° ΡΠ΅ΠΊΡΡΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΠ°ΠΆΠ΅ ΠΏΡΠΈ ΡΡΠ»ΠΎΠ²ΠΈΠΈ Π΅Π³ΠΎ ΠΌΠ½ΠΎΠ³ΠΎΠΊΡΠ°ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΡ ΡΠΈΡΡΠ½ΠΎΠΊ Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΡΡ Π»ΠΈΡΡ ΠΎΠ΄ΠΈΠ½ ΡΠ°Π·.
ΠΠ»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠΎΠ½Π° Π΄Π»Ρ ΡΠ°ΠΉΡΠ° Π·Π°Ρ ΠΎΠ΄ΠΈΠΌ Π² Photoshop , ΡΠΎΠ·Π΄Π°Π΅ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² Π²ΠΈΠ΄Π΅ ΠΏΠΎΠ»ΠΎΡΠΊΠΈ Π΄Π»ΠΈΠ½Π½ΠΎΠΉ 1200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΠΈ ΡΠΈΡΠΈΠ½ΠΎΠΉ 15 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΠ°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠ΅ΡΠ½ΠΎ-Π±Π΅Π»ΡΠΉ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌ ΠΏΠΎΠ»ΡΡΠΈΠ²ΡΡΡΡΡ ΡΠ΅ΠΊΡΡΡΡΡ ΠΊ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΡΠ°ΠΉΡΠ°:
ΠΠ»Ρ Π½Π°Π³Π»ΡΠ΄Π½ΠΎΡΡΠΈ ΠΌΡ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ ΡΠ΅ΠΊΡΡ ΠΈ Π·Π°Π΄Π°Π»ΠΈ Π΅Π³ΠΎ ΡΠ²Π΅Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° color . ΠΠΎΡ ΡΡΠΎ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΎΡΡ:
Π‘ΡΠ΅Π΄ΡΡΠ²Π° CSS
ΠΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΠΎΠΏΠΈΡΠ°Π½Π½ΡΠ΅ Π²ΡΡΠ΅, ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌΡ ΠΈ Π΄Π»Ρ ΠΊΠ°ΡΠΊΠ°Π΄Π½ΡΡ ΡΠ°Π±Π»ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ. Π‘ΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΡΠΎΠ½ ΡΠ°ΠΉΡΠ° css , ΠΏΠ΅ΡΠ΅ΠΏΠΈΡΠ°Π² ΠΊΠΎΠ΄ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· Π½Π°ΡΠΈΡ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ²:
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π±ΡΠ΄Π΅Ρ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΡΠΌ.
ΠΡ, Π²ΠΎΡ ΠΌΡ ΠΈ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π»ΠΈ Π²ΡΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ, ΠΊΠ°ΠΊ ΠΏΠΎΠΌΠ΅Π½ΡΡΡ ΡΠΎΠ½ Π½Π° ΡΠ°ΠΉΡΠ΅. Π’Π΅ΠΏΠ΅ΡΡ ΠΎΡΡΠ°Π»ΠΎΡΡ Π»ΠΈΡΡ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠΈΡΡΠ½ΠΎΠΊ Π±ΡΠ΄ΡΡΠ΅Π³ΠΎ ΠΊΠΎΠ²ΡΠ° ΠΈ ΡΠ°ΡΡΡΠ΅Π»ΠΈΡΡ Π΅Π³ΠΎ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ°Ρ
ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠ΅ΡΡΡΡΠ°. ΠΠΎ ΡΡΠΎ ΡΠΆΠ΅ Π²Π°ΡΠΈΡ
ΡΡΠΊ Π΄Π΅Π»ΠΎ.
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΡΠΎΠ½ΠΎΠΌ Π² html, ΠΊΠΎΠ΄, ΠΏΡΠΈΠΌΠ΅ΡΡ, background, image.
ΠΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΡΡΠ°Π²ΠΈΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π½Π° Π·Π°Π΄Π½ΠΈΠΉ ΡΠΎΠ½, ΡΠΎ Π½ΡΠΆΠ½ΠΎ ΡΡΠΈΡΡΠ²Π°ΡΡ, ΡΡΠΎ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, Π·Π°Π΄Π½ΠΈΠΉ ΡΠΎΠ½ Π±ΡΠ΄Π΅Ρ Π½Π° Π²Π΅ΡΡ ΡΠΊΡΠ°Π½, Π»ΠΈΠ±ΠΎ Π±ΡΠ΄Π΅Ρ Π·Π°Π½ΠΈΠΌΠ°ΡΡ Π²ΡΠ΅Π³ΠΎ Π»ΠΈΡΡ ΡΠ°ΡΡΡ!
ΠΠ°ΡΡΠΈΠ½ΠΊΡ Π½Π° Π·Π°Π΄Π½ΠΈΠΉ ΡΠΎΠ½ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΡΠ°Π²ΠΈΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ:
1.ΠΡΡΠ°Π²ΠΈΡΡ ΠΊΠΎΠ΄ Π² ΡΠ°ΠΌΡ ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΠ»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΡΡΠΎ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ ΡΡΠΎ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ, Π±ΡΠ΄Π΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π½ΠΎΠ²ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠ°.
ΠΠ°ΠΊ ΠΏΠΎΡΡΠ°Π²ΠΈΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π½Π° Π·Π°Π΄Π½ΠΈΠΉ ΡΠΎΠ½ ΡΡΡΠ°Π½ΠΈΡΡ?
ΠΡΠΎΠΏΠΈΡΠ΅ΠΌ Π² ΡΠ°ΠΌΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΊΠΎΠ΄ Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π°.
ΠΠΏΡΡΡ ΠΆΠ΅, Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² ΡΠ΅ΡΠ΅Π½ΠΈΡ:
ΠΡΠΈΠ²Π΅ΡΡΡΠ²ΡΡ. Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ Ρ Ρ ΠΎΡΡ ΡΠ°ΡΡΠΊΠ°Π·Π°ΡΡ ΠΎ ΡΡΠ΅Ρ ΡΠΏΠΎΡΠΎΠ±Π°Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΠ½Π° Π²ΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΡΠΎΠ»ΡΠΊΠΎ HTML + CSS (Π±Π΅Π· ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ JS).
ΠΡΠ°ΠΊ, ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ ΠΊ ΡΠΎΠ½ΠΎΠ²ΠΎΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ Π½Π°Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅:
- ΠΠΎΠΊΡΡΠ²Π°Π΅ΡΡΡ 100% ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΡΡΡΠ°Π½ΠΈΡΡ
- Π€ΠΎΠ½ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΡΡΡ ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ (background ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π΅ΡΡΡ ΠΈΠ»ΠΈ ΡΠΆΠΈΠΌΠ°Π΅ΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠΊΡΠ°Π½Π°)
- Π‘ΠΎΡ ΡΠ°Π½ΡΡΡΡΡ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ (aspect ratio)
- ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΎ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅
- Π€ΠΎΠ½ Π½Π΅ Π²ΡΠ·ΡΠ²Π°Π΅Ρ ΡΠΊΡΠΎΠ»Π»ΠΎΠ²
- Π Π΅ΡΠ΅Π½ΠΈΠ΅ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ ΠΊΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎΠ΅
- ΠΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π½ΠΈΠΊΠ°ΠΊΠΈΠ΅ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ ΠΊΡΠΎΠΌΠ΅ CSS
Π‘ΠΏΠΎΡΠΎΠ± 1
ΠΠ° ΠΌΠΎΠΉ Π²Π·Π³Π»ΡΠ΄, ΡΡΠΎ Π»ΡΡΡΠΈΠΉ ΡΠΏΠΎΡΠΎΠ±, Π²Π΅Π΄Ρ ΠΎΠ½ ΡΠ°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ, Π»Π°ΠΊΠΎΠ½ΠΈΡΠ½ΡΠΉ ΠΈ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΉ. ΠΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ CSS3 background-size , ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌ ΠΊ ΡΠ΅Π³Ρ html . ΠΠΌΠ΅Π½Π½ΠΎ html , Π° Π½Π΅ body , Ρ.ΠΊ. Π΅Π³ΠΎ Π²ΡΡΠΎΡΠ° Π±ΠΎΠ»ΡΡΠ΅ ΠΈΠ»ΠΈ ΡΠ°Π²Π½Π° Π²ΡΡΠΎΡΠ΅ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΈ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠΎΠ½, Π·Π°ΡΠ΅ΠΌ ΠΊΠΎΡΡΠ΅ΠΊΡΠΈΡΡΠ΅ΠΌ Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ background-size: cover .
ΠΡΠΎΡ ΡΠΏΠΎΡΠΎΠ± ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π²
Chrome (Π»ΡΠ±Π°Ρ Π²Π΅ΡΡΠΈΡ) Opera 10+ Firefox 3.6+ Safari 3+ IE 9+
Π‘ΠΏΠΎΡΠΎΠ± 2
Π ΡΠ»ΡΡΠ°Π΅ Π΅ΡΠ»ΠΈ ΡΠΈΡΠΈΠ½Π° ΠΎΠΊΠ½Π° Π±ΡΠ΄Π΅Ρ ΠΌΠ΅Π½ΡΡΠ΅ ΡΠΈΡΠΈΠ½Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ media query Π΄Π»Ρ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ Π±ΡΠΊΠ³ΡΠ°ΡΠ½Π΄Π° ΠΏΠΎ ΡΠ΅Π½ΡΡΡ.
ΠΡΠΎΡ ΡΠΏΠΎΡΠΎΠ± ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π²:
- ΠΡΠ±ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ Ρ ΠΎΡΠΎΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² (Chrome, Opera, Firefox, Safari)
- IE 9+
Π‘ΠΏΠΎΡΠΎΠ± 3
ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΡΠΏΠΎΡΠΎΠ± Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ: ΡΠΈΠΊΡΠΈΡΡΠ΅ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊ Π»Π΅Π²ΠΎΠΌΡ Π²Π΅ΡΡ Π½Π΅ΠΌΡ ΡΠ³Π»Ρ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π΅ΠΌ Π΅Π³ΠΎ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ² min-width ΠΈ min-height 100%, ΡΠΎΡ ΡΠ°Π½ΡΡ ΠΏΡΠΈ ΡΡΠΎΠΌ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½.
ΠΡΠ°Π²Π΄Π° ΠΏΡΠΈ ΡΠ°ΠΊΠΎΠΌ ΠΏΠΎΠ΄Ρ ΠΎΠ΄Π΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Π½Π΅ ΡΠ΅Π½ΡΡΠΈΡΡΠ΅ΡΡΡ. ΠΠΎ ΡΡΠ° ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° ΡΠ΅ΡΠ°Π΅ΡΡΡ Π·Π°Π²ΠΎΡΠ°ΡΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π²
ΠΡΠΎΡ ΡΠΏΠΎΡΠΎΠ± ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π² Ρ
ΠΎΡΠΎΡΠΈΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
ΠΈ IE 8+.
ΠΠ°Π΄Π΅ΡΡΡ, ΡΡΠ° ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ Π±ΡΠ΄Π΅Ρ Π΄Π»Ρ ΠΠ°Ρ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ. ΠΠΈΡΠ½ΠΎ Ρ ΡΠ°ΡΡΠ΅Π½ΡΠΊΠΎ ΠΏΠΎΠ»ΡΠ·ΡΡΡΡ ΡΡΠΈΠΌΠΈ ΠΌΠ΅ΡΠΎΠ΄Π°ΠΌΠΈ, ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ ΠΏΠ΅ΡΠ²ΡΠΌ. ΠΠ°Π²Π΅ΡΠ½ΡΠΊΠ° Π΅ΡΡΡ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠΏΠΎΡΠΎΠ±Ρ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π·Π°Π΄Π½ΠΈΠΉ ΡΠΎΠ½ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ CSS. ΠΡΠ»ΠΈ ΠΡ ΠΎ Π½ΠΈΡ Π·Π½Π°Π΅ΡΠ΅, ΠΏΠΎΠ΄Π΅Π»ΠΈΡΠ΅ΡΡ, ΠΏΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΡ .
ΠΠ°ΠΊ Π²ΡΡΠ°Π²ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅? ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½ΠΎΠΌ?
ΠΠ°ΠΊ Π·Π°ΠΏΡΡΡΠΈΡΡ Π²ΠΈΠ΄Π΅ΠΎΡΡΠΎΠΊ:- Π Π°Π·Π°ΡΡ ΠΈΠ²ΠΈΡΠΎΠ²Π°ΡΡ ΡΠΊΠ°ΡΠ°Π½Π½ΡΠΉ ΡΠ°ΠΉΠ».
- ΠΡΠΊΡΡΡΡ ΠΏΠ°ΠΏΠΊΡ index.
- ΠΠ°ΠΏΡΡΡΠΈΡΡ ΡΠ°ΠΉΠ» index.html Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅.
ΠΠ°ΠΊ Π²ΡΡΠ°Π²ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² HTML?
ΠΠ΅ΡΠ΅ΠΉΠ΄Π΅ΠΌ Π² ΠΏΠ°ΠΏΠΊΡ Π½Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°. Π― Π΄Π»Ρ Π²Π°Ρ ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²ΠΈΠ» ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ info-line.png. Π‘Π½Π°ΡΠ°Π»Π° ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΠΏΠ°ΠΏΠΊΡ Ρ ΠΈΠΌΠ΅Π½Π΅ΠΌ img. ΠΡΠΊΡΡΠ²Π°Π΅ΠΌ Π΅Π΅, ΠΈ ΠΏΠ΅ΡΠ΅Π½ΠΎΡΠΈΠΌ ΡΡΠ΄Π° Π½Π°ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΠ°ΡΡΠΈΠ½ΠΊΠ° ΠΈΠΌΠ΅Π΅Ρ ΡΠΎΡΠΌΠ°Ρ png. ΠΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π»ΠΈΠ±ΠΎ Π²Π½ΠΈΠ·Ρ, Π»ΠΈΠ±ΠΎ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°, Π»ΠΈΠ±ΠΎ Π² ΡΠ²ΠΎΠΉΡΡΠ²Π°Ρ
.
ΠΠ΅ΡΠ΅ΠΉΠ΄Π΅ΠΌ Π² ΠΊΠΎΠ΄. ΠΠ°Π²Π°ΠΉΡΠ΅ Π²ΡΡΠ°Π²ΠΈΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΡΠ΅ΠΊΡΡ. ΠΠ΅Π»Π°Π΅ΡΡΡ ΡΡΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅Π³Π° <img>. Π ΠΊΠ°Π²ΡΡΠΊΠ°Ρ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ ΠΏΡΡΡ Π΄ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. Π Π½Π°ΡΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅: img/info-line.png. Π₯ΠΎΡΡ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ Π²Π²ΠΎΠ΄ΠΈΡΡ ΠΏΡΡΡ Π½ΡΠΆΠ½ΠΎ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΡΠ΅Π³ΠΈΡΡΡΠΎΠΌ, ΡΠΎ Π΅ΡΡΡ, Π΅ΡΠ»ΠΈ Ρ Π²Π°Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΏΠΈΡΠ°Π½ΠΎ Ρ Π±ΠΎΠ»ΡΡΠΎΠΉ Π±ΡΠΊΠ²Ρ Β«IΒ», ΡΠΎ ΡΠ°ΠΊ Π΅Π³ΠΎ Π½ΡΠΆΠ½ΠΎ ΠΈ Π²Π²ΠΎΠ΄ΠΈΡΡ, ΠΈΠ½Π°ΡΠ΅ ΠΌΠΎΠ³ΡΡ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡΡΡ Π½Π΅ΠΏΠΎΠ»Π°Π΄ΠΊΠΈ.
<img src="img/info-line.png">
ΠΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π½Π° ΠΊΠ°ΠΊΠΎΠΌ-Π»ΠΈΠ±ΠΎ Π΄ΡΡΠ³ΠΎΠΌ ΡΠ΅ΡΠ²Π΅ΡΠ΅, ΡΠΎ Π²Π²ΠΎΠ΄ΠΈΡΡΡ ΠΎΠ½ΠΎ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ: http://Π΄ΠΎΠΌΠ΅Π½Π½ΠΎΠ΅_ΠΈΠΌΡ_ΡΠ°ΠΉΡΠ°/ ΠΏΠ°ΠΏΠΊΠ°_Ρ_ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ/ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ:
<img src="http://info-line.net/img/info-line.png">
ΠΠ΅ΡΠ½Π΅ΠΌ Π²ΡΠ΅, ΠΊΠ°ΠΊ Π±ΡΠ»ΠΎ. ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠΎΡ ΡΠ°Π½ΠΈΠΌ ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ Π½Π°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅. ΠΠ±Π½ΠΎΠ²Π»ΡΠ΅ΠΌ. ΠΠ°ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΡΡΠ°Π²Π»Π΅Π½ΠΎ.
ΠΡΡΠΈΠ±ΡΡΡ ΡΠ΅Π³Π° <img>
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ΅ΠΏΠ΅ΡΡ ΡΠ°Π·Π±Π΅ΡΠ΅ΠΌ Π°ΡΡΠΈΠ±ΡΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΡΠ½ΠΎΡΡΡΡΡ ΠΊ ΡΠ΅Π³Ρ <img>. ΠΠ°ΡΠ½Π΅ΠΌ Ρ Π°ΡΡΠΈΠ±ΡΡΠ° align. ΠΠ½Π°ΠΊΠΎΠΌΡΠΉ Π½Π°ΠΌ Π°ΡΡΠΈΠ±ΡΡ. ΠΠΎΡΡΠ°Π²ΠΈΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ left. ΠΠ΄Π΅ΡΡ align ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ ΡΠ°ΠΊΠΆΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ top (Π²Π²Π΅ΡΡ
Ρ), bottom (Π²Π½ΠΈΠ·Ρ) ΠΈ middle (ΠΏΠΎ ΡΠ΅Π½ΡΡΡ). ΠΠΎ ΠΌΡ ΠΎΡΡΠ°Π²ΠΈΠΌ left. ΠΡΡΠΈΠ±ΡΡ align ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ Π·Π΄Π΅ΡΡ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΎ, ΡΡΠΎ Π½Π°ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈΠ±ΠΈΡΠΎ Π³Π²ΠΎΠ·Π΄ΡΠΌΠΈ ΠΊ Π»Π΅Π²ΠΎΠΉ ΡΠ°ΡΡΠΈ ΡΠΊΡΠ°Π½Π°, Π½ΠΎ ΠΈ ΡΠΎ, ΡΡΠΎ ΡΠ΅ΠΊΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅Ρ Π΄Π°Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π±ΡΠ΄Π΅Ρ ΠΎΠ±ΡΠ΅ΠΊΠ°ΡΡ Π΅Π³ΠΎ Ρ ΠΏΡΠ°Π²ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ.
<img src="img/info-line.png" align="left">
ΠΠ°Π»Π΅Π΅ ΠΈΠ΄Π΅Ρ Π°ΡΡΠΈΠ±ΡΡ alt, ΠΊΠΎΡΠΎΡΡΠΉ Π·Π°Π΄Π°Π΅Ρ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. Π’ΠΎ Π΅ΡΡΡ, Π΅ΡΠ»ΠΈ Π½Π°ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ Π±ΡΠ΄Π΅Ρ Π·Π°Π³ΡΡΠΆΠ΅Π½ΠΎ, ΠΈΠ»ΠΈ Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΊΠ»ΡΡΠ΅Π½ ΠΏΠΎΠΊΠ°Π· ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΡΠΎ Π²ΠΌΠ΅ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ ΡΠΊΠ°Π·Π°Π½Π½ΡΠΉ Π² ΡΡΠΎΠΌ Π°ΡΡΠΈΠ±ΡΡΠ΅ ΡΠ΅ΠΊΡΡ. ΠΠ²Π΅Π΄Π΅ΠΌ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ βinfo-lineβ.
<img src="img/info-line.png" align="left" alt="Info-line">
ΠΠ°ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ»ΠΎ ΡΠ»ΠΈΡΠΊΠΎΠΌ Π±ΠΎΠ»ΡΡΠΎΠ΅. ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ΄Π΅Π»Π°Π΅ΠΌ Π΅Π³ΠΎ ΠΌΠ΅Π½ΡΡΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π°ΡΡΠΈΠ±ΡΡΠΎΠ² width ΠΈ height (ΡΠΈΡΠΈΠ½Π° ΠΈ Π²ΡΡΠΎΡΠ°). ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠΎ 150 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
<img src="img/info-line.png" align="left" alt="Info-line" >
ΠΠ°Π΄Π°Π΄ΠΈΠΌ ΡΠ°ΠΌΠΊΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π°ΡΡΠΈΠ±ΡΡΠ° border, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ 2 ΠΏΠΈΠΊΡΠ΅Π»Ρ.
<img src="img/info-line.png" align="left" alt="Info-line" border="2" >
Π‘ΠΎΡ ΡΠ°Π½ΡΠ΅ΠΌ ΡΡΡΠ°Π½ΠΈΡΠΊΡ ΠΈ ΠΏΡΠΎΠ²Π΅ΡΡΠ΅ΠΌ. ΠΠ° Π½Π°ΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ Ρ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΠΏΠΎΡΠ²ΠΈΠ»Π°ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ 150Γ150 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Ρ ΡΠ°ΠΌΠΊΠΎΠΉ Π² 2 ΠΏΠΈΠΊΡΠ΅Π»Ρ. ΠΠ΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎΠ΅, ΡΡΠΎ Π½Π°ΠΌ Π·Π΄Π΅ΡΡ Π½Π΅ Π½ΡΠ°Π²ΠΈΡΡΡ (Π²ΠΎ Π²ΡΡΠΊΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, ΠΌΠ½Π΅) β ΡΡΠΎ ΡΠΎ, ΡΡΠΎ Π½Π°ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°ΠΊ ΠΏΠ»ΠΎΡ ΠΎ ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅Ρ ΡΠ΅ΠΊΡΡ, ΡΡΠΎ Π½Π°ΠΌ ΡΡΠΎ Π·Π°ΠΌΠ΅ΡΠ½ΠΎ.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ΄Π΅Π»Π°Π΅ΠΌ ΠΎΡΡΡΡΠΏ ΠΎΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ. ΠΠ΅ΡΠ΅ΠΉΠ΄Π΅ΠΌ Π² ΠΊΠΎΠ΄ ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π΅ΡΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π°ΡΡΠΈΠ±ΡΡΠΎΠ²: hspase (Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ ΠΎΡΡΡΡΠΏ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΎΡ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°) ΠΈ vspace (Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ ΠΎΡΡΡΡΠΏ). Π£ΠΊΠ°ΠΆΠ΅ΠΌ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, hspace β 2 ΠΏΠΈΠΊΡΠ΅Π»Ρ, Π° vspace β 5 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
<img src="img/info-line.png" align="left" alt="Info-line" border="2" hspace="2" vspace="5">
Π‘ΠΎΡ
ΡΠ°Π½ΠΈΠΌ, ΠΏΡΠΎΠ²Π΅ΡΠΈΠΌ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅. ΠΠ±Π½ΠΎΠ²Π»ΡΠ΅ΠΌ ΡΡΡΠ°Π½ΠΈΡΡ β ΠΎΡΡΡΡΠΏ ΡΠ΄Π°Π»ΡΡ.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ΅ΠΏΠ΅ΡΡ ΡΠ΄Π΅Π»Π°Π΅ΠΌ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΠΏΠΎΡΠ»Π΅ ΡΠ»ΠΎΠ²Π° Β«Π½ΡΠΆΠ½ΠΎΒ» ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠΎΠΌ Π½Π°ΡΠ΅Π³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π·Π°Π²Π΅ΡΡΠ°Π»ΠΎΡΡ. ΠΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΠΌ Π² ΠΊΠΎΠ΄, Π½Π°Ρ ΠΎΠ΄ΠΈΠΌ ΡΠ»ΠΎΠ²ΠΎ Β«Π½ΡΠΆΠ½ΠΎΒ» Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΠΈ ΠΊΠ»Π°Π²ΠΈΡ Β«Ctrl+FΒ». ΠΠΈΠ΄ΠΈΠΌ ΡΠ΅Π³ ΠΏΠ΅ΡΠ΅Π½ΠΎΡΠ°. ΠΡΠΎΡ ΡΠ΅Π³ ΠΈΠΌΠ΅Π΅Ρ Π°ΡΡΠΈΠ±ΡΡ clear, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΡΡ ΠΊ ΡΠ΅ΠΊΡΡΡ. ΠΡΡΠΈΠ±ΡΡ ΠΈΠΌΠ΅Π΅Ρ ΡΡΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ: all, left ΠΈ right. Π§ΡΠΎ ΠΎΠ½ΠΈ ΠΎΠ·Π½Π°ΡΠ°ΡΡ? ΠΠ½ΠΈ Π·Π°Π²Π΅ΡΡΠ°ΡΡ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°. ΠΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ left ΠΈ right ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΡΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° Π² Π°ΡΡΠΈΠ±ΡΡΠ΅ align Π·Π°Π΄Π°Π½Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ left ΠΈΠ»ΠΈ right. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Ρ Π½Π°Ρ Π·Π°Π΄Π°Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π°ΡΡΠΈΠ±ΡΡΠ° align β left, ΠΈ ΠΌΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌ left ΠΊ Π°ΡΡΠΈΠ±ΡΡΡ clear. ΠΠ°Ρ ΡΠ΅ΠΊΡΡ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ ΡΠ»Π΅Π²Π°.
<br clear="left">ΠΡΠΎ Π±ΡΠ» ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠΎΡ ΠΌΠΎΠΌΠ΅Π½Ρ Π² ΠΆΠΈΠ·Π½ΠΈ, ΠΊΠΎΠ³Π΄Π° ΡΡΠΎ-ΡΠΎ Π²Π½ΡΡΡΠΈ ΠΏΠ΅ΡΠ΅ΡΠ΅Π»ΠΊΠ½ΡΠ»ΠΎ ΠΈ Ρ ΡΡΠ°Π» ΠΈΠ΄ΡΠΈ ΠΏΠΎ ΠΏΡΡΠΈ ΡΡΠΏΠ΅Ρ Π°.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠΎΡ ΡΠ°Π½ΠΈΠΌ ΠΈ ΠΎΠ±Π½ΠΎΠ²ΠΈΠΌ Π½Π°ΡΡ ΡΡΡΠ°Π½ΠΈΡΠΊΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅. ΠΡ Π²ΠΈΠ΄ΠΈΠΌ, ΡΡΠΎ Π½Π°Ρ ΡΠ΅ΠΊΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ°Π½Π΅Π΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π»ΡΡ ΡΠΏΡΠ°Π²Π° ΠΎΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΠ΅ΠΏΠ΅ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΡΠ½ΠΈΠ·Ρ. ΠΡΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΊΡΠ°ΡΠΈΠ²Π΅Π΅.
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½ΠΎΠΌ?
ΠΠ΅ΡΠ΅ΠΉΠ΄Π΅ΠΌ Π² ΠΊΠΎΠ΄ ΠΈ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ Π·Π°Π΄Π°ΡΡ ΡΠΎΠ½ ΡΡΡΠ°Π½ΠΈΡΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ (Π²Π΅Π΄Ρ Π²Ρ ΡΠΆΠ΅ Π·Π½Π°Π΅ΡΠ΅, ΠΊΠ°ΠΊ Π·Π°Π΄Π°ΡΡ ΡΠΎΠ½ ΠΎΠ±ΡΡΠ½ΡΠΌΠΈ ΡΠ²Π΅ΡΠ°ΠΌΠΈ?).
ΠΡΠ΅ΠΌ ΡΠ΅Π³. ΠΡΠΎΠΏΠΈΡΡΠ²Π°Π΅ΠΌ Π°ΡΡΠΈΠ±ΡΡ background. Π ΠΊΠ°Π²ΡΡΠΊΠ°Ρ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ ΠΏΡΡΡ Π΄ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΉΠ΄Π΅ΠΌ Π½Π° ΡΠ°Π±ΠΎΡΠΈΠΉ ΡΡΠΎΠ». Π― ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²ΠΈΠ» Π΅ΡΠ΅ ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ Π²ΠΈΠ΄Π΅ΠΎΡΡΠΎΠΊΠ°. ΠΠ°Π·ΡΠ²Π°Π΅ΡΡΡ ΠΎΠ½ΠΎ bg.png. ΠΠ³ΠΎ ΡΠ°ΠΊΠΆΠ΅ Π½ΡΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅Π½Π΅ΡΡΠΈ Π² ΠΏΠ°ΠΏΠΊΡ img. ΠΠ½ΠΎ ΠΈΠΌΠ΅Π΅Ρ ΡΠ°ΠΊΠΎΠ΅ ΠΆΠ΅ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ β png.
<body text="#660000" bgcolor="#FFFCC" background="img/bg.png">
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠΎΡ ΡΠ°Π½ΠΈΠΌ ΠΈ ΠΏΡΠΎΠ²Π΅ΡΠΈΠΌ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅. ΠΠ±Π½ΠΎΠ²Π»ΡΠ΅ΠΌ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ°ΠΊ Π²ΠΈΠ΄ΠΈΠΌ, ΡΠΎΠ½ Ρ Π½Π°Ρ Π·Π°Π΄Π°Π½.
Π§ΡΠΎ ΠΆ, Π½Π° ΡΡΠΎΠΌ ΠΌΡ Π·Π°ΠΊΠ°Π½ΡΠΈΠ²Π°Π΅ΠΌ ΡΡΠΎΡ Π²ΠΈΠ΄Π΅ΠΎΡΡΠΎΠΊ. ΠΠΎΠΏΡΠ°ΠΊΡΠΈΠΊΡΠΉΡΠ΅ΡΡ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ. ΠΠΎ Π²ΡΡΡΠ΅ΡΠΈ Π² ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ Π²ΠΈΠ΄Π΅ΠΎΡΡΠΎΠΊΠ΅, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π²Ρ ΡΠ·Π½Π°Π΅ΡΠ΅, ΡΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΡΡΡΠ»ΠΊΠΈ Π² HTML.
ΠΠ°ΠΊ Π²ΡΡΠ°Π²ΠΈΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΠΈ ΡΠ΅ΠΊΡΡ Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ Π±Π»ΠΎΠΊ
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ Π±Π»ΠΎΠΊ Π²ΡΡΠ°Π²ΠΈΡΡ ΡΠ΅ΠΊΡΡ ΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΠΈΡ , ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ CSS
ΠΠ»Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Π½Π½ΡΡ Π² ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΡ ΡΡΠ°ΡΡΡΡ Π·Π°Π³ΠΎΡΠΎΠ²ΠΊΡ ΠΊΠ°ΡΠΊΠ°ΡΠ° Ρ ΡΠ°ΠΏΠΊΠΎΠΉ ΡΠ°ΠΉΡΠ°.
ΠΠΎΠ·ΡΠΌΡΠΌ html ΠΊΠΎΠ΄ Π±Π»ΠΎΠΊΠ° content.
<div></div>
ΠΡΡΠ°Π²ΠΈΠΌ Π² Π±Π»ΠΎΠΊ content Π΄Π²Π° Π°Π±Π·Π°ΡΠ° ΡΠ΅ΠΊΡΡΠ°.
<div
<p>ΠΠ΄ΡΠ°Π²ΡΡΠ²ΡΠΉΡΠ΅ ΡΠ²Π°ΠΆΠ°Π΅ΠΌΡΠ΅ Π±ΡΠ΄ΡΡΠΈΠ΅ Π²Π΅Π±-ΠΌΠ°ΡΡΠ΅ΡΠ°!
ΠΠ½Π΅ 55 Π»Π΅Ρ ΠΈ Ρ ΡΠ°Π΄ ΠΏΡΠΈΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ ΠΠ°Ρ Π½Π° ΡΠ²ΠΎΡΠΌ ΡΠ°ΠΉΡΠ΅. ΠΡΠΎΡ ΡΠ°ΠΉΡ
ΠΏΠ΅ΡΠ²ΡΠΉ, ΠΊΠΎΡΠΎΡΡΠΉ Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π» ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ, Π° Π΄ΠΎ ΡΡΠΎΠ³ΠΎ ΡΠΌΠ΅Π» ΡΠΎΠ»ΡΠΊΠΎ
Π²Ρ
ΠΎΠ΄ΠΈΡΡ Π² ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ.
ΠΠΎΡΠ΅ΠΌΡ Ρ ΡΠ΅ΡΠΈΠ» Π΅Π³ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ? ΠΠ° ΡΠ΅ 3 ΠΌΠ΅ΡΡΡΠ°, ΠΏΠΎΠΊΠ° ΡΠ°Π·Π±ΠΈΡΠ°Π»ΡΡ Π² ΡΠ°ΠΉΡΠΎΡΡΡΠΎΠ΅Π½ΠΈΠΈ
ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°Π» ΡΡΠΎΡ ΡΠ΅ΡΡΡΡ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΠ»ΠΎΡΡ, ΡΡΠΎ Π°Π²ΡΠΎΡΡ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ² ΠΏΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ
ΡΠ°ΠΉΡΠΎΠ² ΡΡΠΈΡΠ°ΡΡ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π½ΡΠ°Π½ΡΡ ΡΠ°ΠΌΠΎ ΡΠΎΠ±ΠΎΠΉ ΡΠ°Π·ΡΠΌΠ΅ΡΡΠΈΠΌΠΈΡΡ ΠΈ Π½Π΅ ΠΎΠ±ΡΠ°ΡΠ°ΡΡ Π½Π°
Π½ΠΈΡ
Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅. Π ΠΌΠ½Π΅, ΡΡΠΈΡΡΠ²Π°Ρ Π²ΠΎΠ·ΡΠ°ΡΡ ΠΈ Β«ΠΎΠΏΡΡΒ», Π±ΡΠ»ΠΎ Π½Π΅ ΠΏΡΠΎΡΡΠΎ ΠΏΠΎΠ½ΡΡΡ ΠΊΠ°ΠΊ
ΡΠ°Π· ΡΡΠΈ Π½ΡΠ°Π½ΡΡ, ΠΎΠ½ΠΈ ΠΎΡΠ½ΠΈΠΌΠ°Π»ΠΈ Π±ΠΎΠ»ΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ. Π Ρ ΡΠ΅ΡΠΈΠ» Π½Π°ΠΏΠΈΡΠ°ΡΡ ΡΠ²ΠΎΠΉ
ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π», ΡΠ°ΠΊ ΡΡΠΎ-Π±Ρ Π΄ΡΡΠ³ΠΈΠΌ Π±ΡΠ»ΠΎ Π»Π΅Π³ΡΠ΅ ΡΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡΡΡ Π² ΠΏΠΎΡΠΎΠΊΠ΅ Π½ΠΎΠ²ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ.</p> <p>ΠΡΠ»ΠΈ Π²Π°ΠΌ ΡΡΠΎ-ΡΠΎ Π±ΡΠ΄Π΅Ρ Π½Π΅ΠΏΠΎΠ½ΡΡΠ½ΠΎ,
ΡΠΏΡΠ°ΡΠΈΠ²Π°ΠΉΡΠ΅, Π΄Π»Ρ ΠΌΠ΅Π½Ρ Π½Π΅Ρ Β«Π³Π»ΡΠΏΡΡ
Β» Π²ΠΎΠΏΡΠΎΡΠΎΠ².
Π§ΠΈΡΠ°ΠΉΡΠ΅ ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΠ²ΠΎΠΉ ΡΠ°ΠΉΡ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ, ΠΊΠ°ΠΊΠΈΠΌ Π±Ρ Π½ΠΈ Π±ΡΠ» ΠΠ°Ρ Π²ΠΎΠ·ΡΠ°ΡΡ ΠΈ
ΡΡΠ°ΠΆ ΡΠ°Π±ΠΎΡΡ Π½Π° ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ΅.
Π£Π²Π΅ΡΠ΅Π½, Ρ ΠΠ°Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡΡ Π΅ΡΠ΅ Π»ΡΡΡΠ΅ ΠΈ ΡΠΆ ΡΠΎΡΠ½ΠΎ, Π²
Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π· Π±ΡΡΡΡΠ΅Π΅, ΡΠ΅ΠΌ Ρ ΠΌΠ΅Π½Ρ.Π Ρ ΡΠ΅ΡΠΈΠ» Π½Π°ΠΏΠΈΡΠ°ΡΡ ΡΠ²ΠΎΠΉ
ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π», ΡΠ°ΠΊ ΡΡΠΎ-Π±Ρ Π΄ΡΡΠ³ΠΈΠΌ Π±ΡΠ»ΠΎ Π»Π΅Π³ΡΠ΅ ΡΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡΡΡ Π² ΠΏΠΎΡΠΎΠΊΠ΅ Π½ΠΎΠ²ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ.
ΠΠ΄Π΅ΡΡ Β«ΡΠ°Π·ΠΆΠ΅Π²Π°Π½ΡΒ» Π²ΡΠ΅ ΠΌΠ΅Π»ΠΎΡΠΈ ΡΠΎΠΏΡΠΎΠ²ΠΎΠΆΠ΄Π°ΡΡΠΈΠ΅ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠ°ΠΉΡΠ°, ΠΌΠΈΠΌΠΎ ΠΊΠΎΡΠΎΡΡΡ
ΠΎΠ±ΡΡΠ½ΠΎ ΠΏΡΠΎΡΠΊΠ°ΠΊΠΈΠ²Π°ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ Π°Π²ΡΠΎΡΡ.</p>
</div>
ΠΡΡΡ Π΄Π²Π° Π°Π±Π·Π°ΡΠ°. Π’Π΅ΠΏΠ΅ΡΡ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ Π² Π±Π»ΠΎΠΊ content Π²ΡΡΠ°Π²ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΠΎ-ΠΏΠ΅ΡΠ²ΡΡ , Π½Π°Ρ ΠΎΠ΄ΠΈΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΠΈΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅, ΠΈ Π΅ΡΠ»ΠΈ ΡΠ°ΠΉΡ ΠΏΠΎΠΊΠ° Π½Π° ΠΠ°ΡΠ΅ΠΌ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ΅, ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΠΌ ΠΈΡ Π² ΠΏΠ°ΠΏΠΊΠ΅ images, Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΠΈ ΡΠ°ΠΉΡΠ°.
ΠΡΠ»ΠΈ ΡΠ°ΠΉΡ Π½Π° Π²ΠΈΡΡΡΠ°Π»ΡΠ½ΠΎΠΌ Ρ ΠΎΡΡΠΈΠ½Π³Π΅, ΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½ΡΠΆΠ½ΠΎ Π·Π°Π³ΡΡΠΆΠ°ΡΡ Π½Π° Π½Π΅Π³ΠΎ, Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΡΡ ΠΏΠ°ΠΏΠΊΡ images.
Π Π°Π·ΠΌΠ΅ΡΠ°ΡΡ Π±ΡΠ΄Π΅ΠΌ ΡΡΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ. ΠΠ΄Π½Ρ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ Π² Π½Π°ΡΠ°Π»Π΅ ΡΡΠ°ΡΡΠΈ, Π΄ΡΡΠ³ΡΡ Π² ΠΏΠ΅ΡΠ²ΠΎΠΌ Π°Π±Π·Π°ΡΠ΅ ΡΠ»Π΅Π²Π°, ΠΈ ΡΡΠ΅ΡΡΡ Π²ΠΎ Π²ΡΠΎΡΠΎΠΌ Π°Π±Π·Π°ΡΠ΅ ΡΠΏΡΠ°Π²Π°.
Π‘Π½Π°ΡΠ°Π»Π° Π² html ΠΊΠΎΠ΄ Π±Π»ΠΎΠΊΠ° content Π²ΡΡΠ°Π²ΠΈΠΌ Π°Π΄ΡΠ΅ΡΠ° ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ, ΠΈ Π·Π°Π΄Π°Π΄ΠΈΠΌ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΈΠ· Π½ΠΈΡ
ΡΠ²ΠΎΠΉ class. ΠΠ΅Π»Π°Π΅ΡΡΡ ΡΡΠΎ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ Π² Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅ΠΌ, ΡΠ΅ΡΠ΅Π· ΡΡΠΈ ΠΊΠ»Π°ΡΡΡ, ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π° CSS.
<div>
<img src="images/i10.png">
<p><img src="images/i11.jpg">ΠΠ΄ΡΠ°Π²ΡΡΠ²ΡΠΉΡΠ΅ ΡΠ²Π°ΠΆΠ°Π΅ΠΌΡΠ΅ Π±ΡΠ΄ΡΡΠΈΠ΅ Π²Π΅Π±-ΠΌΠ°ΡΡΠ΅ΡΠ°!
ΠΠ½Π΅ 55 Π»Π΅Ρ ΠΈ Ρ ΡΠ°Π΄ ΠΏΡΠΈΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ ΠΠ°Ρ Π½Π° ΡΠ²ΠΎΡΠΌ ΡΠ°ΠΉΡΠ΅. ΠΡΠΎΡ ΡΠ°ΠΉΡ
ΠΏΠ΅ΡΠ²ΡΠΉ, ΠΊΠΎΡΠΎΡΡΠΉ Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π» ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ, Π° Π΄ΠΎ ΡΡΠΎΠ³ΠΎ ΡΠΌΠ΅Π» ΡΠΎΠ»ΡΠΊΠΎ
Π²Ρ
ΠΎΠ΄ΠΈΡΡ Π² ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ.
ΠΠΎΡΠ΅ΠΌΡ Ρ ΡΠ΅ΡΠΈΠ» Π΅Π³ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ? ΠΠ° ΡΠ΅ 3 ΠΌΠ΅ΡΡΡΠ°, ΠΏΠΎΠΊΠ° ΡΠ°Π·Π±ΠΈΡΠ°Π»ΡΡ Π² ΡΠ°ΠΉΡΠΎΡΡΡΠΎΠ΅Π½ΠΈΠΈ
ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°Π» ΡΡΠΎΡ ΡΠ΅ΡΡΡΡ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΠ»ΠΎΡΡ, ΡΡΠΎ Π°Π²ΡΠΎΡΡ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ² ΠΏΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ
ΡΠ°ΠΉΡΠΎΠ² ΡΡΠΈΡΠ°ΡΡ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π½ΡΠ°Π½ΡΡ ΡΠ°ΠΌΠΎ ΡΠΎΠ±ΠΎΠΉ ΡΠ°Π·ΡΠΌΠ΅ΡΡΠΈΠΌΠΈΡΡ ΠΈ Π½Π΅ ΠΎΠ±ΡΠ°ΡΠ°ΡΡ Π½Π°
Π½ΠΈΡ
Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅. Π ΠΌΠ½Π΅, ΡΡΠΈΡΡΠ²Π°Ρ Π²ΠΎΠ·ΡΠ°ΡΡ ΠΈ Β«ΠΎΠΏΡΡΒ», Π±ΡΠ»ΠΎ Π½Π΅ ΠΏΡΠΎΡΡΠΎ ΠΏΠΎΠ½ΡΡΡ ΠΊΠ°ΠΊ
ΡΠ°Π· ΡΡΠΈ Π½ΡΠ°Π½ΡΡ, ΠΎΠ½ΠΈ ΠΎΡΠ½ΠΈΠΌΠ°Π»ΠΈ Π±ΠΎΠ»ΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ. Π Ρ ΡΠ΅ΡΠΈΠ» Π½Π°ΠΏΠΈΡΠ°ΡΡ ΡΠ²ΠΎΠΉ
ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π», ΡΠ°ΠΊ ΡΡΠΎ-Π±Ρ Π΄ΡΡΠ³ΠΈΠΌ Π±ΡΠ»ΠΎ Π»Π΅Π³ΡΠ΅ ΡΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡΡΡ Π² ΠΏΠΎΡΠΎΠΊΠ΅ Π½ΠΎΠ²ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ.
ΠΠ΄Π΅ΡΡ Β«ΡΠ°Π·ΠΆΠ΅Π²Π°Π½ΡΒ» Π²ΡΠ΅ ΠΌΠ΅Π»ΠΎΡΠΈ ΡΠΎΠΏΡΠΎΠ²ΠΎΠΆΠ΄Π°ΡΡΠΈΠ΅ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠ°ΠΉΡΠ°, ΠΌΠΈΠΌΠΎ ΠΊΠΎΡΠΎΡΡΡ
ΠΎΠ±ΡΡΠ½ΠΎ ΠΏΡΠΎΡΠΊΠ°ΠΊΠΈΠ²Π°ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ Π°Π²ΡΠΎΡΡ.</p>
<p><img src="images/11.jpg">ΠΡΠ»ΠΈ Π²Π°ΠΌ ΡΡΠΎ-ΡΠΎ Π±ΡΠ΄Π΅Ρ Π½Π΅ΠΏΠΎΠ½ΡΡΠ½ΠΎ, ΡΠΏΡΠ°ΡΠΈΠ²Π°ΠΉΡΠ΅, Π΄Π»Ρ ΠΌΠ΅Π½Ρ Π½Π΅Ρ Β«Π³Π»ΡΠΏΡΡ
Β» Π²ΠΎΠΏΡΠΎΡΠΎΠ².
Π§ΠΈΡΠ°ΠΉΡΠ΅ ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΠ²ΠΎΠΉ ΡΠ°ΠΉΡ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ, ΠΊΠ°ΠΊΠΈΠΌ Π±Ρ Π½ΠΈ Π±ΡΠ» ΠΠ°Ρ Π²ΠΎΠ·ΡΠ°ΡΡ ΠΈ
ΡΡΠ°ΠΆ ΡΠ°Π±ΠΎΡΡ Π½Π° ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ΅. Π£Π²Π΅ΡΠ΅Π½, Ρ ΠΠ°Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡΡ Π΅ΡΠ΅ Π»ΡΡΡΠ΅ ΠΈ ΡΠΆ ΡΠΎΡΠ½ΠΎ, Π²
Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π· Π±ΡΡΡΡΠ΅Π΅, ΡΠ΅ΠΌ Ρ ΠΌΠ΅Π½Ρ.
Π Ρ ΡΠ΅ΡΠΈΠ» Π½Π°ΠΏΠΈΡΠ°ΡΡ ΡΠ²ΠΎΠΉ
ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π», ΡΠ°ΠΊ ΡΡΠΎ-Π±Ρ Π΄ΡΡΠ³ΠΈΠΌ Π±ΡΠ»ΠΎ Π»Π΅Π³ΡΠ΅ ΡΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡΡΡ Π² ΠΏΠΎΡΠΎΠΊΠ΅ Π½ΠΎΠ²ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ.
ΠΠ΄Π΅ΡΡ Β«ΡΠ°Π·ΠΆΠ΅Π²Π°Π½ΡΒ» Π²ΡΠ΅ ΠΌΠ΅Π»ΠΎΡΠΈ ΡΠΎΠΏΡΠΎΠ²ΠΎΠΆΠ΄Π°ΡΡΠΈΠ΅ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠ°ΠΉΡΠ°, ΠΌΠΈΠΌΠΎ ΠΊΠΎΡΠΎΡΡΡ
ΠΎΠ±ΡΡΠ½ΠΎ ΠΏΡΠΎΡΠΊΠ°ΠΊΠΈΠ²Π°ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ Π°Π²ΡΠΎΡΡ.</p>
</div>
ΠΠΎΠ»ΡΡΠΈΠ»ΠΎΡΡ Π²ΠΎΡ ΡΠ°ΠΊ.
Π’Π΅ΠΏΠ΅ΡΡ, ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ CSS, ΡΠ°ΡΠΏΡΠ΅Π΄Π΅Π»ΠΈΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠΎ ΠΌΠ΅ΡΡΠ°ΠΌ.
.center{ /*ΠΠ²ΡΠ·Π΄ΠΎΡΠΊΠ°*/
margin: 0 0 10px 330px; /*ΠΠ½Π΅ΡΠ½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ*/
}
.left{ /*Π§ΡΡΡΠΈΠΊ ΡΠ»Π΅Π²Π°*/
float: left; /*ΠΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΡΠΏΡΠ°Π²Π°*/
margin: 10px 10px 10px 10px;
}
.right{ /*Π§ΡΡΡΠΈΠΊ ΡΠΏΡΠ°Π²Π°*/
float: right; /*ΠΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΡΠ»Π΅Π²Π°*/
margin: 10px 10px 10px 10px;
}
ΠΠ°ΠΊ Π²ΠΈΠ΄ΠΈΡΠ΅, Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π½Π°Ρ
ΠΎΠ΄ΡΡΠΈΡ
ΡΡ Π² ΠΌΠ°ΡΡΠ΅ ΡΠ΅ΠΊΡΡΠ°, Π·Π°Π΄Π°ΡΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ CSS β float, ΠΈ ΠΎΠ½ΠΎ ΠΏΡΠ΅Π΄ΠΏΠΈΡΡΠ²Π°Π΅Ρ ΡΠ΅ΠΊΡΡΡ ΠΎΠ±ΡΠ΅ΠΊΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΈ ΠΎΠ±ΡΠ΅ΠΊΠ°ΡΡ Π΅Π³ΠΎ Ρ Π·Π°Π΄Π°Π½Π½ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ. Π ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° margin, Π·Π°Π΄Π°ΡΡΡΡ ΠΎΡΡΡΡΠΏ ΡΠ΅ΠΊΡΡΠ° ΠΎΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
Π― Π±Ρ Π·Π΄Π΅ΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΠ» Π΅ΡΡ ΠΊΡΠ°ΡΠ½ΡΡ ΡΡΡΠΎΠΊΡ.
p{
text-indent: 30px;
}
ΠΠ° ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, ΠΈ Π±ΡΠ΄Π΅Ρ Π΅ΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½Π΅Π΅. Π ΡΠΎΠ²ΡΠ΅ΠΌ Π½Π΅ ΡΠ»ΠΎΠΆΠ½ΠΎ.
ΠΠ΅ΡΠ΅ΠΌΠ΅Π½Π°
Π£ΡΠΈΡΠ΅Π»Ρ ΠΌΡΠ·ΡΠΊΠΈ Π‘Π°ΡΠ΅Π½ΡΠΊΠ΅:
β ΠΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π°Ρ, Π΅ΡΠ»ΠΈ ΡΡ Π½Π΅ Π±ΡΠ΄Π΅ΡΡ Π²Π΅ΡΡΠΈ ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ ΡΠ»Π΅Π΄ΡΠ΅Ρ, Ρ ΡΠΊΠ°ΠΆΡ ΡΠ²ΠΎΠΈΠΌΠΈ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΠΌ, ΡΡΠΎ Ρ ΡΠ΅Π±Ρ Π΅ΡΡΡ ΡΠ°Π»Π°Π½Ρ.
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΏΠΊΡ ΡΠ°ΠΉΡΠ° < < < Π ΡΠ°Π·Π΄Π΅Π» > > > ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ (position:absolute)
ΠΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΈΡΡΠ½ΠΎΠΊ Π½Π° ΡΠ²ΠΎΠΉ ΡΠ°ΠΉΡ? ΠΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. Π£ΡΠ΅Π±Π½ΠΈΠΊ html
ΠΠ»Π°Π²Π° 3
Π ΡΡΠΎΠΉ Π³Π»Π°Π²Π΅ Ρ ΡΠ°ΡΡΠΊΠ°ΠΆΡ ΠΎ ΡΠΎΠΌ ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π° Π½Π°ΡΡ ΡΡΡΠ°Π½ΠΈΡΠΊΡ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΈΠ»ΠΈ ΡΠΈΡΡΠ½ΠΎΠΊ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ Ρ Π½ΠΈΠΌΠΈ Π²ΡΡΠ²ΠΎΡΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½Π½ΡΠΉ Π½Π°Π±ΠΎΡ ΡΠ΅Π³ΠΎΠ² html ΡΠ·ΡΠΊΠ°.
ΠΡΠ°ΠΊ, Π΄ΠΎΠΏΡΡΡΠΈΠΌ ΠΡ ΠΏΠΈΡΠ΅ΡΠ΅ ΡΠ°ΠΉΡ ΠΎ ΡΠ΅Π±Π΅ Π»ΡΠ±ΠΈΠΌΠΎΠΌ ΠΈ Ρ
ΠΎΡΠΈΡΠ΅ Π²ΡΡΠ°Π²ΠΈΡΡ Π² Π½Π΅Π³ΠΎ ΡΠ²ΠΎΡ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ, ΡΡΠΎΠ±Ρ Π»ΡΠ΄ΠΈ Π·Π°ΡΠ΅Π΄ΡΠΈΠ΅ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠΊΡ ΡΠΌΠΎΠ³Π»ΠΈ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΈΡΠ°ΡΡ ΠΠ°ΡΠΈ ΡΡΠΊΠΎΠΏΠΈΡΠΈ, Π½ΠΎ ΠΈ Π²Π΄ΠΎΠ²ΠΎΠ»Ρ ΠΏΠΎΠ»ΡΠ±ΠΎΠ²Π°ΡΡΡΡ ΠΠ°ΡΠΈΠΌ ΠΏΠΎΡΡΡΠ΅ΡΠΎΠΌ.
ΠΡΡΡ Ρ ΠΠ°Ρ Π·Π½Π°ΡΠΈΡ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π³Π΄Π΅-ΡΠΎ Π»Π΅ΠΆΠΈΡ Π½Π° ΠΠ°ΡΠ΅ΠΌ ΠΆΡΡΡΠΊΠΎΠΌ Π΄ΠΈΡΠΊΠ΅.. ΠΊΠΎΠΏΠΈΡΡΠ΅ΠΌ ΡΠ΅ ΠΈ Π²ΡΡΠ°Π²Π»ΡΠ΅ΠΌ Π² ΡΡ ΠΏΠ°ΠΏΠΊΡ (Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΡ) Π³Π΄Π΅ ΡΠΆΠ΅ Π»Π΅ΠΆΠΈΡ Π·Π°Π³ΠΎΡΠΎΠ²ΠΊΠ° Π±ΡΠ΄ΡΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΡ, Π½Ρ ΡΠΎ Π΅ΡΡΡ ΡΡΠ΄Π° ΠΆΠ΅, ΠΊΡΠ΄Π° ΡΠΎΡ ΡΠ°Π½ΡΠ΅ΡΠ΅ Π±Π»ΠΎΠΊΠ½ΠΎΡΠΎΠΌ html Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ. Π’Π°ΠΊ, Π²ΠΎΡ Π΄Π»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ ΡΠ΅ΠΏΠ΅ΡΡ Π²ΡΡΠ°Π²ΠΈΡΡ Π΅Ρ Π² Π½Π°ΡΡ ΡΡΡΠ°Π½ΠΈΡΠΊΡ ΠΊ Π½Π΅ΠΉ Π½ΡΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΠΏΡΡΡ.
Π΄Π΅Π»Π°Π΅ΡΡΡ ΡΡΠΎ ΡΠ°ΠΊ:
<img src=Β»foto.jpgΒ»>ΠΠ΄Π΅ foto.jpg ΡΡΠΎ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΠ°ΡΠ΅ΠΉ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΈ Π² Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΠΎΡΠΎ Π»Π΅ΠΆΠΈΡ ΡΡΠ΄ΠΎΠΌ Ρ html Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠΌ, ΠΏΡΡΡ ΠΊ Π½Π΅ΠΉ ΠΌΡ Π½Π΅ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ.
ΠΠ°, ΠΏΠΎΠΌΠ½ΠΈΡΠ΅, ΡΠ΅Π³ <img> Π½Π΅ ΡΡΠ΅Π±ΡΠ΅Ρ Π·Π°ΠΊΡΡΠ²Π°ΡΡΠ΅Π³ΠΎ ΡΠ΅Π³Π°!
Π’Π΅ΠΏΠ΅ΡΡ ΠΏΡΠΈΠ²Π΅Π΄Ρ ΡΡΠ΄ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² Π³Π΄Π΅ ΠΏΡΡΡ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ:
<img src=Β»myfoto/foto.jpgΒ»> β Π’Π°ΠΊΠ°Ρ Π·Π°ΠΏΠΈΡΡ ΠΏΠΎΠ΄ΡΠ°Π·ΡΠΌΠ΅Π²Π°Π΅Ρ, ΡΡΠΎ Π² Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΠΈ Π³Π΄Π΅ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ Π½Π°Ρ html Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ Π΅ΡΡΡ ΠΏΠ°ΠΏΠΊΠ° myfoto Π² ΠΊΠΎΡΠΎΡΠΎΠΉ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ ΡΠ°ΠΉΠ» foto.jpg<img src=Β»myfoto/graphics/foto.jpgΒ»> β ΠΠ½Π°ΡΠΈΡ ΡΡΠ΄ΠΎΠΌ Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠΌ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π° ΠΏΠ°ΠΏΠΊΠ° myfoto, Π² Π½Π΅ΠΉ Π΅ΡΠ΅ ΠΎΠ΄Π½Π° ΠΏΠ°ΠΏΠΊΠ° Ρ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ graphics, ΠΈ ΡΠΆΠ΅ Π² Π½Π΅ΠΉ Π½ΡΠΆΠ½Π°Ρ Π½Π°ΠΌ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ foto.

<img src=Β»../foto.jpgΒ»> β Π ΡΡΠΎ Π·Π½Π°ΡΠΈΡ, ΡΡΠΎ ΡΠΎΡΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΎ Π½Π° ΡΡΠΎΠ²Π΅Π½Ρ Π²ΡΡΠ΅ ΠΎΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°
<img src=Β»../../foto.jpgΒ»> β Π’Π°ΠΊ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ Π½Π° Π΄Π²Π° ΡΡΠΎΠ²Π½Ρ Π²ΡΡΠ΅, ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΡΠ°Π²ΠΈΡΠ΅../ Π½Π°ΡΡΠΎΠ»ΡΠΊΠΎ ΠΈ ΠΏΠΎΠ΄Π½ΠΈΠΌΠΈΡΠ΅ΡΡ.
Π’Π°ΠΊ ΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·ΡΠ²Π°Ρ ΠΌΠ΅ΡΡΠΎ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΈ, ΡΡΡΠ»Π°ΡΡΡΡ Π½Π° ΡΠΎΡ ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠΉ ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ ΡΠ΅ΡΡΡΡ
<img src=Β»http://www.site.ru/foto/foto.jpgΒ»>
ΠΡ ΡΡΠΎ, Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠΏΡΠΎΠ±ΡΠ΅ΠΌ Π²ΡΠ»ΠΎΠΆΠΈΡΡ ΡΠΎΡΠΎ.
ΠΠΎΡ ΠΌΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ:
<html><head>
<title>ΠΠΎΡ ΠΏΠ΅ΡΠ²Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠΊΠ° Ρ ΡΠΎΡΠΎ</title>
</head>
<body text=Β»#484800β³ bgcolor=Β»#e8e8e8β³>
<center>
<h3> <font color=Β»#008000β³> ΠΡΠΈΠ²Π΅Ρ ΠΌΠΈΡ!!!</font> </h3>
</center>
<p align=Β»justifyΒ»>
<font size=Β»+1β³>
<img src=Β»graphics/foto.

ΠΠ΅Π½Ρ Π·ΠΎΠ²ΡΡ ΠΠ°ΡΠ»ΡΠΎΠ½! Π― Π² ΠΌΠ΅ΡΡ ΡΠΏΠΈΡΠ°Π½Π½ΡΠΉ ΠΌΡΠΆΡΠΈΠ½Π° β ΡΡΠΎ ΠΌΠΎΡ ΠΏΠ΅ΡΠ²Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠΊΠ°! ΠΠ΄Π΅ΡΡ Ρ Ρ ΠΎΡΡ Π½Π°ΠΉΡΠΈ ΡΠ΅Π±Π΅ Π½ΠΎΠ²ΡΡ Π΄ΡΡΠ·Π΅ΠΉ, Π΄Π»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ Π²ΠΌΠ΅ΡΡΠ΅ Π³ΡΠ»ΡΡΡ ΠΏΠΎ ΠΊΡΡΡΠ°ΠΌ! Π― ΠΎΡΠ΅Π½Ρ ΠΎΡΠ΅Π½Ρ ΡΠΈΠ»ΡΠ½ΠΎ Π»ΡΠ±Π»Ρ <font size=Β»+2β³ color=Β»#ff0000β³>Π²Π°ΡΠ΅Π½ΡΡ!!!</font> Π‘ Π½Π΅ΡΠ΅ΡΠΏΠ΅Π½ΡΠ΅ΠΌ Π±ΡΠ΄Ρ ΠΆΠ΄Π°ΡΡ ΠΠ°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠ³Π»Π°ΡΠ΅Π½ΠΈΡ Π½Π° ΡΠ°ΠΉ. ΠΡΠΈΠ»Π΅ΡΡ!!
</font>
</p>
</body>
</html>
ΠΠ°ΠΊ Π²ΠΈΠ΄Π½ΠΎ ΠΈΠ· ΡΡΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ ΠΏΠΎΡΠ²ΠΈΠ»Π°ΡΡ, Π½ΠΎ Π²ΠΌΠ΅ΡΡΠ΅ ΡΠΎ ΡΠ²ΠΎΠΈΠΌ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ΠΌ ΡΠ΄Π²ΠΈΠ½ΡΠ»Π° ΡΠ΅ΠΊΡΡ, Π° Π½Π΅ Ρ ΠΎΡΠ΅Π»ΠΎΡΡ Π±Ρ..
ΠΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΅ΠΊΡΡΠ°.
ΠΠ°ΠΊ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ΅Π³ΠΈ <img> ΡΠΎΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠ²ΠΎΠΈ Π°ΡΡΠΈΠ±ΡΡΡ.. ΡΠΆΠ΅ Π·Π½Π°ΠΊΠΎΠΌΡΠΉ Π½Π°ΠΌ Π°ΡΡΠΈΠ±ΡΡ align Β«Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅Β» ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌ ΠΈ ΠΊ Π΄Π°Π½Π½ΠΎΠΌΡ ΡΠ΅Π³Ρ
<img src=Β»foto.jpgΒ» align=Β»leftΒ»> β ΡΠΎΡΠΎ ΡΠ»Π΅Π²Π° ΠΎΡ ΡΠ΅ΠΊΡΡΠ°<img src=Β»foto.jpgΒ» align=Β»rightΒ»> β ΡΠΎΡΠΎ ΡΠΏΡΠ°Π²Π° ΠΎΡ ΡΠ΅ΠΊΡΡΠ°
<img src=Β»foto.

<img src=Β»foto.jpgΒ» align=Β»bottomΒ»> β ΡΠ΅ΠΊΡΡ Π½ΠΈΠΆΠ΅ ΡΠΎΡΠΎ
<img src=Β»foto.jpgΒ» align=Β»middleΒ»> β Π½Ρ ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ ΡΠ΅ΠΊΡΡ ΠΏΠΎΡΠ΅ΡΠ΅Π΄ΠΈΠ½Π΅
ΠΠΎΠΌΠΈΠΌΠΎ align ΡΠ΅Π³ <img> ΠΈΠΌΠ΅Π΅Ρ Π΅ΡΠ΅ ΡΡΠ΄ Π°ΡΡΠΈΠ±ΡΡΠΎΠ², Π½ΠΎ ΡΠ½Π°ΡΠ°Π»Π° ΡΠ°ΡΡΠΊΠ°ΠΆΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΎ ΠΏΠΈΠΊΡΠ΅Π»ΡΡ
. ΠΠΈΠΊΡΠ΅Π»Ρ (ΡΠΎΡΠΊΠ°), Π½Π°Π²Π΅ΡΠ½ΠΎΠ΅ ΠΡ Π½Π΅ ΡΠ°Π· ΡΠ»ΡΡΠ°Π»ΠΈ ΡΡΠΎ ΡΠ»ΠΎΠ²ΠΎ ΠΈ Π΄ΡΠΌΠ°Ρ ΠΎΡΠ½ΠΎΠ²Π½Π°Ρ ΠΌΠ°ΡΡΠ° Π½Π°ΡΠΎΠ΄Π° ΠΊΠΎΡΠΎΡΠ°Ρ Π΄Π΅ΡΠΆΠ°Π»Π° ΠΌΡΡΠΊΡ Π² ΡΡΠΊΠ°Ρ
Π·Π½Π°Π΅Ρ ΡΡΠΎ ΡΡΠΎ ΡΠ°ΠΊΠΎΠ΅, Π½ΠΎ Π²ΡΡ ΠΆΠ΅.. ΠΠΈΠΊΡΠ΅Π»Ρ -ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΡΠ½Π°Ρ Π½Π΅Π΄Π΅Π»ΠΈΠΌΠ°Ρ Π΅Π΄ΠΈΠ½ΠΈΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ°ΠΆΠ΄ΡΠΉ ΠΏΠΈΠΊΡΠ΅Π»Ρ ΠΈΠΌΠ΅Π΅Ρ ΡΠ²ΠΎΠΈ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ°ΠΌΡΠΉ Π²Π΅ΡΡ
Π½ΠΈΠΉ Π»Π΅Π²ΡΠΉ ΠΏΠΈΠΊΡΠ΅Π»Ρ Π½Π° ΠΌΠΎΠ½ΠΈΡΠΎΡΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ x=1, y=1, Π° ΡΠ°ΠΌΡΠΉ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΏΡΠ°Π²ΡΠΉ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ ΠΌΠΎΠ½ΠΈΡΠΎΡΠ°.. x=800, y=600 β Π±ΡΠ΄Π΅Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ ΠΏΡΠΈ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠΈ 800 Π½Π° 600 ΡΠΎΡΠ΅ΠΊ. ΠΠΏΡΠΎΡΠ΅ΠΌ, ΡΡΠ° ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΏΡΠΈΠ³ΠΎΠ΄ΠΈΡΡΡ Π½Π°ΠΌ ΠΏΠΎΡΠΎΠΌ, Π° ΡΠ΅ΠΉΡΠ°Ρ Π½ΡΠΆΠ½ΠΎ ΡΡΠ²ΠΎΠΈΡΡ, ΡΡΠΎ Π²ΡΠ΅ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΡ Π² Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΡ
ΠΌΠ΅ΡΡΡΡΡΡ ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌΠΈ.. ΡΠ°ΠΊ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Π΄Π»ΠΈΠ½Π½ΠΎΠΉ 800 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ ΡΠΈΡΠΈΠ½ΠΎΠΉ Π² 600 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΏΡΠΈ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠΈ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ Π²Π΅ΡΡ ΡΠΊΡΠ°Π½.
Π’Π΅ΠΏΠ΅ΡΡ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΠΌ..
<img src=Β»foto.jpgΒ» vspace=Β»15β³> β ΠΡΡΠΈΠ±ΡΡ vspace Π·Π°Π΄Π°ΡΡ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ ΠΎΡ ΡΠΈΡΡΠ½ΠΊΠ° Π΄ΠΎ ΡΠ΅ΠΊΡΡΠ°, Π² Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΌΡ Π·Π°Π΄Π°Π»ΠΈ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ Π² 15 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ<img src=Β»foto.jpgΒ» hspace=Β»25β³> β Π Π°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ
<img src=Β»foto.jpgΒ»> β Π¨ΠΈΡΠΈΠ½Π° Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ ΡΠ°ΠΌΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
<img src=Β»foto.jpgΒ»> β ΠΡΡΠΎΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡΠ»ΠΈ Π°ΡΡΠΈΠ±ΡΡΡ width ΠΈ height Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ, ΡΠΎ ΡΠΈΡΠΈΠ½Π° ΠΈ Π²ΡΡΠΎΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π±ΡΠ΄Π΅Ρ ΡΠ°Π²Π½Π° ΡΠ΅Π°Π»ΡΠ½ΡΠΌ Π΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌ, Π±Π΅Π· ΠΊΠ°ΠΊΠΈΡ Π»ΠΈΠ±ΠΎ ΠΈΡΠΊΠ°ΠΆΠ΅Π½ΠΈΠΉ.
<img src=Β»foto.jpgΒ» border=Β»5β³>β ΠΠΎΡΠ΄ΡΡ, ΡΠ°ΠΌΠΊΠ° Π²ΠΎΠΊΡΡΠ³ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ Π΅Ρ ΡΠΎΠ»ΡΠΈΠ½Π° Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ .
<img src=Β»foto.jpgΒ» border=Β»5β³ bordercolor=Β»#008000 Β«> β bordercolor β ΡΡΠΎ ΡΠ²Π΅Ρ ΡΠ°ΠΌΠΊΠΈ.
<img src=Β»foto.jpgΒ» alt=Β»ΠΡΠΎ ΠΌΠΎΡ ΡΠΎΡΠΊΠ°!!!Β»> -ΠΡΡΠΈΠ±ΡΡ alt β ΡΡΠΎ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.

<img src=Β»foto.jpgΒ» title=Β»ΠΡΠΎ ΠΌΠΎΡ ΡΠΎΡΠΊΠ°!!!Β»> β Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π° alt Π² Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅.
Π Π΅ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΎΠ½ΠΎΠΌ ΡΡΡΠ°Π½ΠΈΡΡ.. Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Π°ΡΡΠΈΠ±ΡΡ background Β«ΡΠΎΠ½Β» ΠΎΡΠΊΡΡΠ²Π°ΡΡΠ΅Π³ΠΎ ΡΠ΅Π³Π° <body>
ΠΠΎΡ ΡΠ°ΠΊ:
<body background=Β»foto.jpgΒ»>Π’Π΅ΠΏΠ΅ΡΡ ΡΠ°ΡΡΠΊΠ°ΠΆΡ ΠΎ ΡΠΎΠΌ ΠΊΠ°ΠΊ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ Π½Π°ΡΡ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ Π² Π½ΡΠΆΠ½ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΠΎΠ± ΡΡΠΎΠΌ Ρ ΡΠΆΠ΅ ΡΠ°ΡΡΠΊΠ°Π·ΡΠ²Π°Π».. Π²ΡΠΏΠΎΠΌΠ½ΠΈΡΠ΅ Π²ΡΠΎΡΡΡ Π³Π»Π°Π²Ρ, Π³Π΄Π΅ Π³ΠΎΠ²ΠΎΡΠΈΠ»ΠΎΡΡ ΠΎ ΡΠΎΠΌ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡΠΎΠ²Π½ΡΡΡ ΡΠ΅ΠΊΡΡ.. ΡΡΠΈ ΠΆΠ΅ ΡΠ΅Π³ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌΡ ΠΈ ΠΊ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡβ¦ ΡΠ°ΠΊ ΡΡΠΎ, ΠΏΠΎΠΆΠ°Π»ΡΠΉ, ΠΏΠΎΠ²ΡΠΎΡΡΡΡΡ Π½Π΅ Π±ΡΠ΄Ρ, ΠΏΡΠΎΡΡΠΎ ΠΏΡΠΈΠ²Π΅Π΄Ρ ΠΏΡΠΈΠΌΠ΅Ρ, Π° ΠΡ ΡΠΆ ΡΠ°ΠΌΠΈΠΌΠΈ ΠΏΠΎΠ΄ΡΠΌΠ°ΠΉΡΠ΅ ΠΏΠΎΡΠ΅ΠΌΡ ΠΎΠ΄Π½ΠΎ ΠΈ ΡΠΎΠΆΠ΅ ΡΠΎΡΠΎ ΠΎΡΡΡΠΈΠ»ΠΎΡΡ Π² ΡΠΎΠΌ ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅..
ΠΡΠΈΠΌΠ΅Ρ:
<html><head>
<title>Π Π°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ</title>
</head>
<body>
<img src=Β»foto.

<center><img src=Β»foto.jpg Β«></center>
<div align=Β»leftΒ»><img src=Β»foto.jpgΒ»></div>
<br>
<div align=Β»rightΒ»><img src=Β»foto.jpgΒ»></div>
<br>
<div align=Β»centerΒ«><img src=Β»foto.jpgΒ»></div>
</body>
</html>
Π‘ΠΎΠ²Π΅ΡΡΡ ΠΠ°ΠΌ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΡΠΏΡΠ°ΠΆΠ½ΡΠ΅ΡΡΡ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΈ Π½Π° ΡΠ²ΠΎΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠ΅Π½ΡΠΉΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ, ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΡ Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ, ΠΎΡΡΡΡΠΏΡ, ΡΠ°ΠΌΠΊΠΈ.. Π’ΡΠ΅Π½ΠΈΡΡΠΉΡΠ΅ΡΡ!
ΠΡΠΎΠ³ Π³Π»Π°Π²Ρ:
<html><head>
<title>ΠΠΎΡ ΠΏΠ΅ΡΠ²Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠΊΠ° Ρ ΡΠΎΡΠΎ</title>
</head>
<body text=Β»#484800β³ bgcolor=Β»#ffffffΒ» background=Β»graphics/fon.jpgΒ»>
<center>
<img src=Β»graphics/privet.

</center>
<p align=Β»justifyΒ»>
<img src=Β»graphics/foto.jpgΒ» align=Β»leftΒ» hspace=Β»15β³height=Β»120β³ alt=Β»ΠΡΠΎ ΠΌΠΎΡ ΡΠΎΡΠΊΠ°!!!Β»>
<font size=Β»+1β³>
ΠΠ΅Π½Ρ Π·ΠΎΠ²ΡΡ ΠΠ°ΡΠ»ΡΠΎΠ½! Π― Π² ΠΌΠ΅ΡΡ ΡΠΏΠΈΡΠ°Π½Π½ΡΠΉ ΠΌΡΠΆΡΠΈΠ½Π° β ΡΡΠΎ ΠΌΠΎΡ ΠΏΠ΅ΡΠ²Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠΊΠ°! ΠΠ΄Π΅ΡΡ Ρ Ρ ΠΎΡΡ Π½Π°ΠΉΡΠΈ ΡΠ΅Π±Π΅ Π½ΠΎΠ²ΡΡ Π΄ΡΡΠ·Π΅ΠΉ, Π΄Π»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ Π²ΠΌΠ΅ΡΡΠ΅ Π³ΡΠ»ΡΡΡ ΠΏΠΎ ΠΊΡΡΡΠ°ΠΌ! Π― ΠΎΡΠ΅Π½Ρ ΠΎΡΠ΅Π½Ρ ΡΠΈΠ»ΡΠ½ΠΎ Π»ΡΠ±Π»Ρ <font size=Β»+2β³ color=Β»#ff0000β³>Π²Π°ΡΠ΅Π½ΡΡ!!!</font> Π‘ Π½Π΅ΡΠ΅ΡΠΏΠ΅Π½ΡΠ΅ΠΌ Π±ΡΠ΄Ρ ΠΆΠ΄Π°ΡΡ ΠΠ°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠ³Π»Π°ΡΠ΅Π½ΠΈΡ Π½Π° ΡΠ°ΠΉ. ΠΡΠΈΠ»Π΅ΡΡ!!
</font>
</p>
</body>
</html>
ΠΠ΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎΠ΅, ΡΡΠΎ ΠΠ°ΠΌ Π² ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π½Π΅ Π·Π½Π°ΠΊΠΎΠΌΠΎ ΡΠ°ΠΊ ΡΡΠΎ Π½Π°Π΄ΠΏΠΈΡΡ β β ΡΡΠΎ Π΅ΡΡΡ ΡΠ°ΠΊ Π½Π°Π·ΡΠ²Π°Π΅ΠΌΡΠΉ ΡΠΏΠ΅ΡΡΠΈΠΌΠ²ΠΎΠ» Π² Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ β ΠΏΡΠΎΠ±Π΅Π».. ΠΎ ΡΠΏΠ΅ΡΡΠΈΠΌΠ²ΠΎΠ»Π°Ρ ΠΈ ΠΈΡ Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΠΈ Ρ ΡΠ°ΡΡΠΊΠ°ΠΆΡ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠΉ Π³Π»Π°Π²Π΅.
Π§Π΅ΡΡΠ½ΠΎ Π³ΠΎΠ²ΠΎΡΡ, ΠΌΠ½Π΅ ΠΌΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ Π½Π΅ ΡΠΈΠ»ΡΠ½ΠΎ ΠΏΠΎ Π²ΠΊΡΡΡ, Π½Π΅ΡΡΡΠ»ΠΈΠ²ΠΎ ΠΊΠ°ΠΊ-ΡΠΎ. . ΠΠΎ ΡΠ΅Π»Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ, ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π΄Π΅Π»Π°ΡΡ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ Π΄ΡΠΌΠ°Ρ Π΄ΠΎΡΡΠΈΠ³Π½ΡΡΠ°..
ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ Π³ΡΠ°ΡΠΈΠΊΡ, Π±ΡΠ΄ΡΡΠ΅ ΠΎΡΡΠΎΡΠΎΠΆΠ½Ρ.. Π½Π΅ ΡΡΠΎΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡ Π½Π° ΡΠ²ΠΎΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ Π±ΠΎΠ»ΡΡΠΈΠ΅ Π²Π΅ΡΠΎΠΌ ΠΌΠ΅Π³Π°Π±Π°ΠΉΡΠ½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΏΠΎΠΆΠ°Π»Π΅ΠΉΡΠ΅ Π²ΡΠ΅ΠΌΡ ΠΈ Π΄Π΅Π½ΡΠ³ΠΈ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Π΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠΎΠ»ΡΡΠΎΠΉ ΠΎΠ±ΡΡΠΌ Π³ΡΠ°ΡΠΈΠΊΠΈ ΠΏΡΠΈ Π½ΠΈΠ·ΠΊΠΎΠΉ ΡΠΊΠΎΡΠΎΡΡΠΈ ΠΈΠ½ΡΠ΅ΡΠ½Π΅ΡΠ° ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ²Π΅ΡΡΠΈ ΠΊ ΡΠΎΠΌΡ, ΡΡΠΎ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Ρ Π·Π°ΠΊΡΠΎΠ΅Ρ ΠΠ°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π΅ΡΡ Π΄ΠΎ ΡΠΎΠ³ΠΎ ΠΌΠΎΠΌΠ΅Π½ΡΠ° ΠΊΠ°ΠΊ ΠΎΠ½Π° Π·Π°Π³ΡΡΠ·ΠΈΡΡΡ.
ΠΠΎΠΌΠ½ΠΈΡΠ΅, ΡΡΠΎ Π΅ΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΌΡΡΠ»Π΅Π½Π½ΠΎ Π² ΡΠ²ΠΎΡΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ ΠΎΡΠΊΠ»ΡΡΠ°ΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ ΡΠΈΡΡΠ½ΠΊΠΎΠ², Π΄Π°Π±Ρ ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡΡ Π½Π° ΡΡΠ°ΡΠΈΠΊΠ΅, Π° ΠΏΠΎ ΡΠ΅ΠΌΡ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡ ΡΠΎΠ±Π»ΡΠ΄Π°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠΎΠ²Π΅ΡΡ:
ΠΡΠ»ΠΈ ΡΠΈΡΡΠ½ΠΊΠΈ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ ΡΠΎΠ»Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ (ΡΠΌ. Π³Π»Π°Π²Π° ΡΡΡΠ»ΠΊΠΈ), ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄ΠΏΠΈΡΡΠ²Π°ΠΉΡΠ΅ ΠΈΡ (Π°ΡΡΠΈΠ±ΡΡ alt) ΠΊ ΠΏΡΠΈΠΌΠ΅ΡΡ: Β«ΠΠ΅ΡΠ΅ΠΉΡΠΈ Π½Π° Π³Π»Π°Π²Π½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡΒ» ΠΈΠ»ΠΈ Β«Π‘ΠΊΠ°ΡΠ°ΡΡΒ» Π΄Π°Π±Ρ ΡΠ΅Π»ΠΎΠ²Π΅ΠΊ Ρ ΠΎΡΠΊΠ»ΡΡΠ΅Π½Π½ΠΎΠΉ Π³ΡΠ°ΡΠΈΠΊΠΎΠΉ ΠΌΠΎΠ³ Ρ ΠΎΡΡ ΠΊΠ°ΠΊ-ΡΠΎ ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡΡΡ Π½Π° ΠΠ°ΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΠ½Π° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° Π΄ΡΠ±Π»ΠΈΡΡΠΉΡΠ΅ ΡΡ Π·Π°Π»ΠΈΠ²ΠΊΠΎΠΉ ΡΠΎΠ½Π° ΠΊΠ°ΠΊΠΈΠΌ Π»ΠΈΠ±ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠΈΠΌ Π΄Π»Ρ ΡΠΎΠ½Π° ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ²Π΅ΡΠΎΠΌ (Π°ΡΡΠΈΠ±ΡΡ bgcolor ΡΠ΅Π³Π° <body>)
Π²ΠΎΡ ΡΠ°ΠΊ Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ:
<body bgcolor=Β»#008000β³ background=Β»fon.jpgΒ»>
ΠΡΠΎ Π±ΡΠ΄Π΅Ρ Π·Π½Π°ΡΠΈΡΡ, ΡΡΠΎ Π΅ΡΠ»ΠΈ ΠΊ ΠΏΡΠΈΠΌΠ΅ΡΡ Π½Π΅ Π·Π°Π³ΡΡΠ·ΠΈΡΡΡ ΠΠ°ΡΠ° ΠΈΠ·ΡΡΠΊΠ°Π½Π½Π°Ρ Π·Π΅Π»ΡΠ½Π°Ρ ΡΠ΅ΠΊΡΡΡΡΠ°, ΡΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΡΡΠΎ Π·Π΅Π»ΡΠ½ΡΠΌ β ΡΡΠΎ Π»ΡΡΡΠ΅, Π½Π΅ΠΆΠ΅Π»ΠΈ ΡΠ΅ΠΌ Π±Π΅Π»ΡΠΉ ΡΠ²Π΅Ρ Π² ΠΎΠ±ΡΠ΅ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΡΠΊΠΎΠΌ ΡΠ΅ΡΠ΅Π½ΠΈΠΈ ΡΠ°ΠΉΡΠ°.
Html ΠΊΠΎΠ΄ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° Π±Π΅ΡΡΠΎΠ²Π½ΠΎΠ³ΠΎ ΡΠΎΠ½Π° Π² HTML
ΠΠ΄ΡΠ°Π²ΡΡΠ²ΡΠΉΡΠ΅ Π΄ΡΡΠ·ΡΡ! ΠΠ΅Π΄Π°Π²Π½ΠΎ Ρ Π΄Π΅Π»Π°Π» Π°Π½Π°Π»ΠΈΠ· ΡΠ²ΠΎΠ΅Π³ΠΎ Π±Π»ΠΎΠ³Π° Ρ ΡΠ΅Π»ΡΡ Π½Π°ΠΉΡΠΈ ΡΠ»Π°Π±ΡΠ΅ ΠΌΠ΅ΡΡΠ° Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ ΠΏΡΠΈΡΠ΅Π» ΠΊ Π²ΡΠ²ΠΎΠ΄Ρ, ΡΡΠΎ Π·Π°Π΄Π½ΠΈΠΉ ΡΠΎΠ½ ΡΠΌΠΎΡΡΠΈΡΡΡ ΠΎΡΠ΅Π½Ρ ΡΠ±ΠΎΠ³ΠΎ ΠΈ Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ ΡΠΎΡΠ΅ΡΠ°Π΅ΡΡΡ Ρ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΠ²Π΅ΡΠΎΠ²ΠΎΠΉ Π³Π°ΠΌΠΌΠΎΠΉ ΡΠ°ΠΉΡΠ° Π² ΡΠ΅Π»ΠΎΠΌ.
ΠΡΠ΅ ΠΈΠ·-Π·Π° ΡΠΎΠ³ΠΎ, ΡΡΠΎ Π·Π°Π΄Π½ΠΈΠΉ ΡΠΎΠ½ ΡΠΎΠ²ΠΏΠ°Π΄Π°Π΅Ρ Ρ ΠΎΡΠ½ΠΎΠ²Π½ΡΠΌΠΈ ΡΠ²Π΅ΡΠ°ΠΌΠΈ ΡΠ°Π±Π»ΠΎΠ½Π°, Π»ΠΈΡΠ½ΠΎ ΠΌΠ΅Π½Ρ ΡΡΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ°Π·Π΄ΡΠ°ΠΆΠ°Π΅Ρ, Π° Π³Π»Π°Π·Π° ΡΠΈΠ»ΡΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΡΡΠΎΠΌΠ»ΡΡΡΡΡ.
Π ΡΡΠΎΠΉ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ Ρ ΡΠ°ΡΡΠΊΠ°ΠΆΡ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈ ΠΏΠΎΠΌΠ΅Π½ΡΡΡ ΡΠΎΠ½ ΡΠ°ΠΉΡΠ°, ΡΠΈΡΠ°ΠΉΡΠ΅ Π²Π½ΠΈΠΌΠ°ΡΠ΅Π»ΡΠ½ΠΎ ΠΈ Π΄ΠΎ ΡΠ°ΠΌΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ° ΠΈ ΡΠ·Π½Π°Π΅ΡΠ΅, ΡΡΠΎ ΠΈΠ· ΡΡΠΎΠ³ΠΎ Π²ΡΡΠ»ΠΎ.
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΎΠ½ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° ΠΎΠ½Π»Π°ΠΉΠ½
ΠΠ΅ΡΠ΅Π΄ ΡΠ΅ΠΌ ΠΊΠ°ΠΊ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠΎΠ½, Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΠΎΠ½ΡΡΡ, ΡΡΠΎ Π½Π΅ ΡΡΠΎΠΈΡ Π²ΡΠ±ΠΈΡΠ°ΡΡ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ Π±ΠΎΠ»ΡΡΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ Π½Π°Π³ΡΡΠ·ΠΊΡ Π½Π° ΠΏΡΠΎΠ΅ΠΊΡ, Π² ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΡΠ΅Π³ΠΎ ΠΎΠ½ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΠ»Π³ΠΎ Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ.
Π ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΡΠ²Π΅Π»ΠΈΡΠΈΡΡ ΡΠΊΠΎΡΠΎΡΡΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ Π±Π»ΠΎΠ³Π° Ρ ΠΏΠΈΡΠ°Π» Π² ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΡ ΡΡΠ°ΡΡΡΡ : Β« Β» ΠΈ Β« Β».
ΠΠΎΡΡΠΎΠΌΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π΄Π»Ρ ΡΠΎΠ½Π° Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΠΠ’Π’ΠΠ Π.
ΠΠ°ΡΡΠ΅ΡΠ½ β ΡΡΠΎ Π½Π΅Π±ΠΎΠ»ΡΡΠ°Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°, Π½Π΅ ΠΈΠΌΠ΅ΡΡΠ°Ρ ΡΠ²ΠΎΠ², ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΡΠΈ ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΠΈ ΠΎΠ±ΡΠ°Π·ΡΠ΅Ρ Π±ΠΎΠ»ΡΡΠΎΠΉ ΡΠΎΠ½, Π·Π°ΠΏΠΎΠ»Π½ΡΡΡΠΈΠΉ Π²ΡΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΡΠ°ΠΉΡΠ°.
Π§ΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΎΠ½ (ΠΏΠ°ΡΡΠ΅ΡΠ½) ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΎΠ³ΡΠΎΠΌΠ½ΠΎΠ΅ ΡΠΈΡΠ»ΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ². ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΡΠΊΡΡΡΡ Π»ΡΠ±ΠΎΠΉ ΠΏΠΎΠΈΡΠΊΠΎΠ²ΠΈΠΊ ΠΈ Π²Π±ΠΈΡΡ Π² ΡΡΡΠΎΠΊΡ ΠΏΠΎΠΈΡΠΊΠ° Π·Π°ΠΏΡΠΎΡ Β«Π‘ΠΊΠ°ΡΠ°ΡΡ ΡΠΎΠ½ Π΄Π»Ρ ΡΠ°ΠΉΡΠ°Β» , Π° ΠΏΠΎΡΠΎΠΌ Π΄ΠΎΠ»Π³ΠΎ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠ°ΠΉΡΡ Π² Π½Π°Π΄Π΅ΠΆΠ΄Π΅ ΠΎΡΡΡΠΊΠ°ΡΡ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠΈΠΉ ΠΏΠ°ΡΡΠ΅ΡΠ½.
ΠΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΎΠ½ ΠΏΡΠΈΠ»ΠΎΠΆΠΈΠ² ΠΌΠΈΠ½ΠΈΠΌΡΠΌ ΡΡΠΈΠ»ΠΈΠΉ? ΠΡΠ΅Π΄Π»Π°Π³Π°Ρ ΠΎΠ±ΡΠ°ΡΠΈΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΠΏΠΎΠ΄Π±ΠΎΡΠΊΡ ΠΎΠ½Π»Π°ΠΉΠ½ ΡΠ΅ΡΠ²ΠΈΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π² ΡΠ²ΠΎΠ΅ΠΉ Π±Π°Π·Π΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠΎΡΠ½ΠΈ ΡΠΆΠ΅ Π³ΠΎΡΠΎΠ²ΡΡ ΡΠΎΠ½ΠΎΠ², ΠΈΡ ΠΎΡΡΠ°Π½Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈ Π½Π°ΡΡΡΠΎΠΈΡΡ ΠΏΠΎ ΡΠ²ΠΎΠ΅ΠΌΡ Π²ΠΊΡΡΡ.
1) PatternCooler
ΠΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ°ΠΌΡΡ
ΠΊΡΡΠΏΠ½ΡΡ
Ρ
ΡΠ°Π½ΠΈΠ»ΠΈΡ ΠΏΠΎΠ΄Π±ΠΎΡΠΊΠΈ ΡΠΎΠ½ΠΎΠ². ΠΠ΄Π΅ΡΡ Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΡΡΡΠΊΠ°ΡΡ ΠΏΠ°ΡΡΠ΅ΡΠ½ ΡΠ°Π·Π»ΠΈΡΠ½ΠΎΠΉ ΡΠ°ΠΊΡΡΡΡ, ΡΠ°ΠΌΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΡΠ²Π΅ΡΠ°, Π° ΡΠ°ΠΊΠΆΠ΅ Π²ΡΠ±ΡΠ°ΡΡ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠΉ ΠΈΠ· ΡΠΎΠΏ.
ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅, ΡΡΠΎ Ρ ΠΌΠ΅Π½Ρ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΎΡΡ Π²ΡΠ±ΡΠ°ΡΡ Π΄Π»Ρ ΡΠ΅Π±Ρ:
2) Stripegenerator
Π’ΠΎΠΆΠ΅ Π½Π΅ΠΏΠ»ΠΎΡ ΠΎΠΉ ΠΎΠ½Π»Π°ΠΉΠ½ Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡ ΡΠΎΠ½ΠΎΠ². ΠΡΡΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΡΡΠ΄ Π½Π°ΡΡΡΠΎΠ΅ΠΊ ΠΈ Π½Π΅ΠΌΠ°Π»Π΅Π½ΡΠΊΠ°Ρ Π±Π°Π·Π° Π·Π°Π³ΠΎΡΠΎΠ²ΠΎΠΊ.
ΠΠΎΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ ΡΠ°Π±ΠΎΡΡ:
3) BgPatterns
ΠΡΠ΅Π½Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ ΡΠ΅ΡΠ²ΠΈΡ ΠΏΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΎΠ½Π»Π°ΠΉΠ½ ΡΠΎΠ½Π°. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ±ΡΠ°ΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠΈΡΡΠ½ΠΊΠΈ (ΡΠ΅ΡΠ΄Π΅ΡΠΊΠΈ, Π·Π²Π΅Π·Π΄ΠΎΡΠΊΠΈ, ΠΊΡΡΠΆΠΎΡΠΊΠΈ) ΠΈ ΡΠ²Π΅ΡΠΎΠ²ΡΡ Π³Π°ΠΌΠΌΡ ΡΠΎΠ·Π΄Π°Π²Π°Π΅ΠΌΠΎΠ³ΠΎ ΡΠΎΠ½Π°.
ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅, ΡΡΠΎ Ρ ΠΏΠΎΠ΄ΠΎΠ±ΡΠ°Π» ΡΠ΅Π±Π΅:
4) Tartanmaker
ΠΠ»Ρ ΡΠ΅Ρ , ΠΊΡΠΎ Ρ ΠΎΡΠ΅Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ΅Π±Π΅ ΡΠΎΠ½ Π² ΠΊΠ»Π΅ΡΠΎΡΠΊΡ ΡΡΠΎΠΈΡ ΠΏΠΎΡΠ΅ΡΠΈΡΡ Π΄Π°Π½Π½ΡΠΉ ΠΎΠ½Π»Π°ΠΉΠ½ ΡΠ΅ΡΠ²ΠΈΡ ΡΠΎΠ½ΠΎΠ².
ΠΠ°ΠΊ ΠΏΠΎΠΌΠ΅Π½ΡΡΡ ΡΠΎΠ½ Π½Π° ΡΠ°ΠΉΡΠ°Ρ HTML ΠΈ PHP
ΠΡΠ»ΠΈ Π²Ρ ΡΠ°Π±ΠΎΡΠ°Π΅ΡΠ΅ Ρ ΡΠ°ΠΉΡΠΎΠΌ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½Π½ΡΠΌ ΠΈΡΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½Π° HTML, ΡΠΎΠ³Π΄Π° Π²Π°ΠΌ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡΡ Π²ΡΡΠ°Π²ΠΈΡΡ ΡΠΎΠ½ Π² ΠΎΡΠΊΡΡΠ²Π°ΡΡΠΈΠΉ ΡΠ΅Π³
β¦ ΠΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅:ΠΡΠ»ΠΈ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΠΏΠ°ΡΡΠ΅ΡΠ½ Π½Π΅ Π·Π°Π³ΡΡΠ·ΠΈΡΡΡ, Π²ΠΌΠ΅ΡΡΠΎ Π½Π΅Π³ΠΎ ΠΏΠΎΠ΄Π³ΡΡΠ·ΠΈΡΡΡ ΡΠ²Π΅Ρ, ΡΠΊΠ°Π·Π°Π½Π½ΡΠΉ Π² bgcolor (FFFFFF).
Π ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ
, Π΄Π° ΠΈ ΠΏΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡΡ
Π²Π΅Π±ΠΌΠ°ΡΡΠ΅ΡΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π΄Π²ΠΈΠΆΠΊΠ° Π±Π»ΠΎΠ³Π° CMS WordPress, ΠΏΠΎΡΡΠΎΠΌΡ ΡΡΠΎΠ±Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠΎΠ½ Π½Π° ΡΠ°ΠΉΡ, Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ Π·Π°ΠΊΠ°ΡΠ°ΡΡ ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ Π²ΡΡΠ΅ ΠΏΠ°ΡΡΠ΅ΡΠ½ ΠΊ ΡΠ΅Π±Π΅ Π½Π° Π² ΠΏΠ°ΠΏΠΊΡ Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°ΠΌΠΈ ΡΠ΅ΠΌΡ.
ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Ρ Π·Π°ΠΊΠ°ΡΠΈΠ²Π°Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ (ΠΏΠ°ΡΡΠ΅ΡΠ½) Π½Π° Ρ ΠΎΡΡΠΈΠ½Π³, ΠΏΠ°ΠΏΠΊΠ° Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΠΏΠΎ ΡΠ°ΠΊΠΎΠΌΡ Π°Π΄ΡΠ΅ΡΡ:
/ httpdocs/ wp- content/ themes/ Prosumer/ images |
/httpdocs/wp-content/themes/Prosumer/images
background: #FFFFFF url(images/fon-1.png) repeat; |
background: #FFFFFF url(images/fon-1.png) repeat;
ΠΡΠ½ΠΎΠ²Π½ΡΠ΅ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ:
- β repeat β ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΡΡ ΠΊΠ°ΠΊ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ, ΡΠ°ΠΊ ΠΈ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ;
- β repeat-x β ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΠ΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ;
- β repeat-y β ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΠ΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ;
- β no-repeat β Π·Π°ΠΏΡΠ΅Ρ Π½Π° ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΠ΅.
ΠΡΠΎΠ±ΡΠΉΡΠ΅, ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠΈΡΡΠΉΡΠ΅, Π²Π΅Π΄Ρ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°ΠΊ Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈΠ»ΠΈ ΠΏΠΎΠΌΠ΅Π½ΡΡΡ ΡΠΎΠ½, ΠΊΠΎΡΠΎΡΡΠΉ Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ Π±ΡΠ΄Π΅Ρ Π³Π°ΡΠΌΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ Ρ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ ΡΠ°ΠΉΡΠ°.
ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π²ΠΈΠ΄Π΅ΠΎ Β«ΠΠ°ΠΊ ΠΏΠΎΠΌΠ΅Π½ΡΡΡ ΡΠΎΠ½ Π½Π° ΡΠ°ΠΉΡΠ΅Β» ΠΈ Ρ Π²Π°Ρ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΎΡΡΠ°ΡΡΡΡ Π½ΠΈΠΊΠ°ΠΊΠΈΡ Π²ΠΎΠΏΡΠΎΡΠΎΠ².
ΠΠ»Π°Π΄ ΠΠ΅ΡΠΆΠ΅Π²ΠΈΡ
Π ΡΠ²ΡΠ·ΠΈ Ρ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΡΠΌΠΈ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡ, ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΡΠΈΡΡΠ½ΠΊΠΈ ΠΏΡΠΈΠΎΠ±ΡΠ΅ΡΠ°ΡΡ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΡΡ
ΡΠΎΠ»Ρ ΠΏΡΠΈ Π²Π΅ΡΡΡΠΊΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ² ΡΠ°ΠΉΡΠ°. ΠΡΠΈ ΡΡΠΎΠΌ ΠΎΠ½ΠΈ Π°ΠΊΡΠΈΠ²Π½ΠΎ ΡΡΠ°ΡΡΠ²ΡΡΡ Π² ΡΠ°ΠΌΡΡ
ΡΠ°Π·Π½ΡΡ
Π΄Π΅Π»Π°Ρ
, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π°Π²ΡΠΎΠΌΠ°ΡΠΈΠ·ΠΈΡΡΡΡ ΠΏΡΠΎΡΠ΅ΡΡ ΠΏΡΠΈΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΡ ΡΠΈΡΡΠ½ΠΊΠΎΠ² ΠΊ ΡΠ΅ΠΊΡΡΡ, ΡΠΎΠ·Π΄Π°ΡΡ
Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ½ΡΠ΅ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Ρ ΠΈ, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ, Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΡΠΎΠ½ ΠΏΠΎΠ΄ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ. ΠΠ°Π»Π΅Π΅ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½Ρ
Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π°ΡΠΏΠ΅ΠΊΡΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠΎΠ½ΠΎΠ²ΡΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
Π€ΠΎΠ½ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅
Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΡΠΈΡΡΠ½ΠΊΠ° Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ ΡΡΠ°Π΄ΠΈΡΠΈΠΎΠ½Π½ΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΡΠ΅ΡΠ΅Π· Π°ΡΡΠΈΠ±ΡΡ background ΡΠ΅Π³Π°
. Π’Π°ΠΊΠΎΠΉ ΡΠΈΡΡΠ½ΠΎΠΊ ΠΏΠΎΠ²ΡΠΎΡΡΠ΅ΡΡΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ, Π·Π°ΠΏΠΎΠ»Π½ΡΡ ΡΠ°ΠΊΠΈΠΌ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ Π²ΡΠ΅ ΠΎΠΊΠ½ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΠΎΠ½ΡΡΠ½ΠΎ, ΡΡΠΎ ΠΎΡΠΎΠ±ΡΡ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² Π΄Π»Ρ ΡΠ²ΠΎΡΡΠ΅ΡΡΠ²Π° Π·Π΄Π΅ΡΡ Π½Π΅Ρ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΠ±ΡΠ°ΡΠΈΠΌΡΡ ΠΊ ΡΡΠΈΠ»ΡΠΌ ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΡΡΠΎ ΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π΄Π΅Π»Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS.Π CSS ΠΈΠΌΠ΅Π΅ΡΡΡ ΠΏΡΡΡ Π°ΡΡΠΈΠ±ΡΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΏΡΠ°Π²Π»ΡΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠΉ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΎΠΉ: Π΅Π΅ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ, ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΠ΅ΠΌ. ΠΠ΄Π½Π°ΠΊΠΎ Π²ΡΠ΅ ΡΡΠΈ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ Π·Π°ΠΌΠ΅Π½ΡΠ΅Ρ ΠΎΠ΄Π½ΠΎ ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background , Π΅Π³ΠΎ ΠΈ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅ΠΌ.
ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΡΠΈΡΡΠ½ΠΊΠ°
ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠΈΡΡΠ½ΠΊΠ° ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ ΠΏΡΡΠ΅ΠΌ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ Π°Π΄ΡΠ΅ΡΠ° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΡΠ΅ΡΠ΅Π· ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ΅
ΡΠ»ΠΎΠ²ΠΎ url
. Π§ΡΠΎΠ±Ρ ΡΠΏΡΠ°Π²Π»ΡΡΡ ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ
ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ Π°ΡΠ³ΡΠΌΠ΅Π½ΡΡ no-repeat
(Π½Π΅Ρ ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΡ),
repeat-x
(ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ) ΠΈ repeat-y (ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ). ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΡΠΎΠΌΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ, ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΡ
Π½Π° ΡΠΈΡ. 1.
Π§ΡΠΎΠ±Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ, ΡΠ»Π΅Π΄ΡΠ΅Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΠΈΠ»Π΅Π²ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background ΠΊ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ BODY , ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅ 1.
ΠΡΠΈΠΌΠ΅Ρ 1. Π€ΠΎΠ½ΠΎΠ²ΡΠΉ ΡΠΈΡΡΠ½ΠΎΠΊ
Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅Π Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠΈΡΡΠ½ΠΎΠΊ target.gif ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΠΊΠ°ΠΊ ΡΠΎΠ½ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ Π±Π΅Π· ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. Π§ΡΠΎΠ±Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Π½Π΅ ΠΏΡΠΈΠ»Π΅Π³Π°Π»Π° ΠΏΠ»ΠΎΡΠ½ΠΎ ΠΊ ΠΊΡΠ°ΡΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΠΎΠ½Π° ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π½Π° 30 ΠΏΠΈΠΊΡΠ΅Π»ΠΎΠ² Π²ΠΏΡΠ°Π²ΠΎ ΠΈ Π½Π° 20 ΠΏΠΈΠΊΡΠ΅Π»ΠΎΠ² Π²Π½ΠΈΠ· ΠΎΡ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
ΠΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΠ΅ ΡΠΈΡΡΠ½ΠΊΠ°
ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΠΎΠΌΡ, ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Π²Π°ΡΡ ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΡΠΈΡΡΠ½ΠΊΠ° ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ ΠΈΠ»ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ, Π΄ΠΎΡΡΡΠΏΠ½ΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ (ΡΠΈΡ. 2) ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΏΠΎΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ Π½Π° ΡΠΈΡ. 3.
Π ΠΈΡΡΠ½ΠΎΠΊ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΡΠ°ΠΊΠΈΠΌ, ΡΡΠΎΠ±Ρ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ ΠΎΠ½ ΡΠΎΡΡΡΠΊΠΎΠ²ΡΠ²Π°Π»ΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠΎΠ±ΠΎΠΉ
Π±Π΅Π· Π·Π°ΠΌΠ΅ΡΠ½ΡΡ
ΡΠ²ΠΎΠ², Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠΎΡΡΠ°Π²Π»ΡΠ» Π΅Π΄ΠΈΠ½ΠΎΠ΅ ΡΠ΅Π»ΠΎΠ΅ Ρ Π·Π°Π΄Π°Π½Π½ΡΠΌ ΡΠ²Π΅ΡΠΎΠΌ ΡΠΎΠ½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ. Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ 2 ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡΡΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠ°ΠΊΠΎΠ³ΠΎ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΡΠΈΡΡΠ½ΠΊΠ°, ΠΎΠΏΡΡΡ ΠΆΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ
ΡΠ²ΠΎΠΉΡΡΠ²Π° background
ΠΈ Π΅Π³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ repeat-y
.
ΠΡΠΈΠΌΠ΅Ρ 2. ΠΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½Π° ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ
Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΠ½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π΄Π΅Π»Π°ΡΡ ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½Π° ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠΎΠ·Π΄Π°Π² Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ² Π΅Π³ΠΎ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠΉ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ (ΡΠΈΡ. 4).
Π§ΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ, ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΡ Π½Π° ΡΠΈΡ. 4, ΠΏΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π²Π½Π°ΡΠ°Π»Π΅ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Ρ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ½ΡΠΌ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΎΠΌ. Π¨ΠΈΡΠΈΠ½Ρ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ 20-40 ΠΏΠΈΠΊΡΠ΅Π»ΠΎΠ², Π° Π²ΡΡΠΎΡΠ° ΡΠΈΡΡΠ½ΠΊΠ° Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠ΅Π»ΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΈ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅ΠΌΠΎΠΉ Π²ΡΡΠΎΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ΅ ΡΡΠΎΠΈΡ ΡΠ°ΠΊΠΆΠ΅ Π·Π°Π±ΡΠ²Π°ΡΡ, ΡΡΠΎ ΡΠΈΡΡΠ½ΠΎΠΊ Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΏΡΠΈΠ²Π΅Π΄Π΅Ρ ΠΊ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ ΠΎΠ±ΡΠ΅ΠΌΠ° Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠ°ΠΉΠ»Π°. Π ΡΡΠΎ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎ ΡΠΊΠ°ΠΆΠ΅ΡΡΡ Π½Π° ΡΠΊΠΎΡΠΎΡΡΠΈ Π΅Π³ΠΎ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈ, Π² ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΌ ΠΈΡΠΎΠ³Π΅, ΠΏΡΠΈΠ²Π΅Π΄Π΅Ρ ΠΊ Π·Π°ΠΌΠ΅Π΄Π»Π΅Π½ΠΈΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ½Π°. ΠΠ»Ρ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»ΡΡΠ°Ρ Π²ΠΏΠΎΠ»Π½Π΅ ΠΏΠΎΠ΄ΠΎΡΠ»Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ 30Ρ 200 ΠΏΠΈΠΊΡΠ΅Π»ΠΎΠ² (ΡΠΈΡ. 5).
Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ 3 ΠΏΠΎΠΊΠ°Π·Π°Π½ ΠΊΠΎΠ΄ HTML Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΠ½Π°.
ΠΡΠΈΠΌΠ΅Ρ 3. ΠΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½Π° ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ
Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Lorem ipsum. ..
ΠΡΠ°Π΄ΠΈΠ΅Π½ΡΠ½ΡΠΉ ΡΠΈΡΡΠ½ΠΎΠΊ Ρ ΠΎΡΠΎΡΠΎ ΡΠΎΡΠ΅ΡΠ°Π΅ΡΡΡ Ρ ΠΎΠ΄Π½ΠΎΡΠ²Π΅ΡΠ½ΡΠΌ Π±Π»ΠΎΠΊΠΎΠΌ, ΠΏΠΎΡΡΠΎΠΌΡ Π² Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΡΡ ΡΠ»ΠΎΠΉ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠΈΡΡΠ½ΠΊΠ° ΠΊ ΡΠ΅ΠΊΡΡΡ
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ ΠΏΡΠΎΡΠ΅ΡΡ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΡΠΈΡΡΠ½ΠΊΠΎΠ² ΠΊ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌΡ ΡΠ΅ΠΊΡΡΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΊ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΌ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background , ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ Π½ΡΠΆΠ½ΠΎΠΌΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ. Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΏΡΡΡ ΠΊ ΡΠΈΡΡΠ½ΠΊΡ ΠΈ, ΡΡΠΎΠ±Ρ ΠΎΠ½ Π½Π΅ ΠΏΠΎΠ²ΡΠΎΡΡΠ»ΡΡ, Π°ΡΠ³ΡΠΌΠ΅Π½Ρ no-repeat (ΠΏΡΠΈΠΌΠ΅Ρ 4).
ΠΡΠΈΠΌΠ΅Ρ 4. ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠΈΡΡΠ½ΠΊΠ°
Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ
ΠΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΠ΅ΠΊΡΡ
ΠΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π² Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅, ΡΠΈΡΡΠ½ΠΎΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π²ΠΈΠ³Π°ΡΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ
ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΈΡΡ
ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΡΠΎ Π»Π΅Π²ΡΠΉ Π²Π΅ΡΡ
Π½ΠΈΠΉ ΡΠ³ΠΎΠ»
Π±Π»ΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Π‘Π΄Π²ΠΈΠ³ ΡΠΎΠ½Π° ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΠΊ ΡΠ΅ΠΊΡΡΡ
ΠΆΠ΅Π»Π°Π΅ΠΌΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ. Π§ΡΠΎΠ±Ρ ΡΠ΅ΠΊΡΡ Π½Π΅ Π½Π°ΠΊΠ»Π°Π΄ΡΠ²Π°Π»ΡΡ Π½Π° ΡΠΈΡΡΠ½ΠΎΠΊ, ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ ΡΠ»Π΅Π΄ΡΠ΅Ρ
Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ padding-left
, Π·Π° ΡΡΠ΅Ρ Π½Π΅Π³ΠΎ ΡΠ΅ΠΊΡΡ
ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π²ΠΏΡΠ°Π²ΠΎ Π½Π° ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅. ΠΠ½ΠΎ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΠΎ
ΠΈ ΠΎΠ±ΡΡΠ½ΠΎ ΡΠ°Π²Π½ΠΎ ΡΠΈΡΠΈΠ½Π΅ ΡΠΈΡΡΠ½ΠΊΠ° ΠΏΠ»ΡΡ ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠΌΡ ΠΎΡΡΡΡΠΏΡ ΠΌΠ΅ΠΆΠ΄Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ ΡΠ΅ΠΊΡΡΠΎΠΌ.
ΠΠ½ΠΎΠ³ΠΈΠ΅ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΠ΅ Π²Π΅ΡΡΡΠ°Π»ΡΡΠΈΠΊΠΈ, ΡΠΎΠ»ΡΠΊΠΎ Π²Π½ΠΈΠΊΠ°ΡΡΠΈΠ΅ Π² ΡΡΡΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°ΠΉΡΠΎΠ², ΡΠ°ΡΡΠΎ Π·Π°Π΄Π°ΡΡΡΡ Π²ΠΎΠΏΡΠΎΡΠΎΠΌ, ΠΊΠ°ΠΊ Π² html ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΎΠ½ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΎΠΉ. Π Π΅ΡΠ»ΠΈ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈ ΠΌΠΎΠ³ΡΡ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ Ρ ΡΡΠΎΠΉ Π·Π°Π΄Π°ΡΠ΅ΠΉ, ΡΠΎ Π²ΡΠ΅ ΡΠ°Π²Π½ΠΎ Π²ΠΎΠ·Π½ΠΈΠΊΠ°ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Π²ΠΎ Π²ΡΠ΅ΠΌΡ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΌΠΎΠ½ΠΈΡΠΎΡΠ°. ΠΡΠΈ ΡΡΠΎΠΌ Ρ ΠΎΡΠ΅Π»ΠΎΡΡ Π±Ρ, ΡΡΠΎΠ±Ρ ΡΠ°ΠΉΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π»ΡΡ Π½Π° Π²ΡΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ , ΠΏΠΎΡΡΠΎΠΌΡ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π²ΡΠΏΠΎΠ»Π½ΡΡΡΡΡ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎΡΡΠΈ. ΠΠΎΠΆΠ½ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠΎΠ½ Π΄Π²ΡΠΌΡ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ: Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΈ CSS ΡΡΠΈΠ»Ρ. ΠΠ°ΠΆΠ΄ΡΠΉ ΡΠ°ΠΌ Π΄Π»Ρ ΡΠ΅Π±Ρ Π²ΡΠ±ΠΈΡΠ°Π΅Ρ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΎΠΏΡΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ. ΠΠΎΠ½Π΅ΡΠ½ΠΎ, CSS ΡΡΠΈΠ»Ρ Π³ΠΎΡΠ°Π·Π΄ΠΎ ΡΠ΄ΠΎΠ±Π½Π΅Π΅, Π²Π΅Π΄Ρ Π΅Π³ΠΎ ΠΊΠΎΠ΄ Ρ ΡΠ°Π½ΠΈΡΡΡ Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠΌ ΡΠ°ΠΉΠ»Π΅ ΠΈ Π½Π΅ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ Π»ΠΈΡΠ½ΠΈΠ΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π² ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΡΠ΅Π³Π°Ρ ΡΠ°ΠΉΡΠ°, Π½ΠΎ ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΏΡΠΎΡΡΠΎΠΉ ΠΌΠ΅ΡΠΎΠ΄ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° ΡΠΎΠ½ ΡΠ°ΠΉΡΠ°.
ΠΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΠ΅Π³ΠΈ HTML Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠΎΠ½Π°
ΠΡΠ°ΠΊ, ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ΠΈΠΌ ΠΊ Π²ΠΎΠΏΡΠΎΡΡ, ΡΠΎΠ½ΠΎΠΌ Π² html Π½Π° Π²Π΅ΡΡ ΡΠΊΡΠ°Π½. ΠΠ»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ ΡΠ°ΠΉΡ ΠΊΡΠ°ΡΠΈΠ²ΠΎ Π²ΡΠ³Π»ΡΠ΄Π΅Π», Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ ΠΎΠ΄Π½Ρ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π²Π°ΠΆΠ½ΡΡ Π΄Π΅ΡΠ°Π»Ρ: Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ½ΡΠΉ ΡΠΎΠ½ ΠΈΠ»ΠΈ Π·Π°ΠΊΡΠ°ΡΠΈΡΡ Π΅Π³ΠΎ ΠΎΠ΄Π½ΠΎΡΠΎΠ½Π½ΡΠΌ ΡΠ²Π΅ΡΠΎΠΌ, Π½ΠΎ Π΅ΡΠ»ΠΈ Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ Π²ΡΡΠ°Π²ΠΈΡΡ Π½Π° Π·Π°Π΄Π½ΠΈΠΉ ΠΏΠ»Π°Π½ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ, ΠΎΠ½Π° Π½Π΅ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡΡΡ Π½Π° Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΌΠΎΠ½ΠΈΡΠΎΡΠ°. ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΎΠ±ΡΠ°ΡΡ ΠΈΠ»ΠΈ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½ Ρ ΡΠ°ΠΊΠΈΠΌ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ΠΌ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Ρ Π²Π°Ρ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΡΡΡΠ°Π½ΠΈΡΠ° ΡΠ°ΠΉΡΠ°. Π’ΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ ΠΊΠ°ΠΊ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π³ΠΎΡΠΎΠ²ΠΎ, ΠΏΠ΅ΡΠ΅Π½ΠΎΡΠΈΠΌ Π΅Π³ΠΎ Π² ΠΏΠ°ΠΏΠΊΡ Ρ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ Β«ImagesΒ». Π Π½Π΅ΠΉ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ Ρ
ΡΠ°Π½ΠΈΡΡ Π²ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΠ°ΠΉΠ»Ρ. ΠΡΠ° ΠΏΠ°ΠΏΠΊΠ° Π΄ΠΎΠ»ΠΆΠ½Π° Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡΡ Π² ΠΊΠΎΡΠ½Π΅Π²ΠΎΠΌ ΠΊΠ°ΡΠ°Π»ΠΎΠ³Π΅ ΡΠΎ Π²ΡΠ΅ΠΌΠΈ Π²Π°ΡΠΈΠΌΠΈ ΡΠ°ΠΉΠ»Π°ΠΌΠΈ html. Π’Π΅ΠΏΠ΅ΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ΠΈΡΡ ΠΈ ΠΊ ΠΊΠΎΠ΄Ρ. Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² Π·Π°ΠΏΠΈΡΠΈ ΠΊΠΎΠ΄Π°, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΠΌΠ΅Π½ΡΡΡΡΡ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ.
- ΠΠ°ΠΏΠΈΡΠ°ΡΡ Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ ΡΠ΅Π³Π°.
- Π§Π΅ΡΠ΅Π· CSS ΡΡΠΈΠ»Ρ Π² HTML ΠΊΠΎΠ΄Π΅.
- ΠΠ°ΠΏΠΈΡΠ°ΡΡ CSS ΡΡΠΈΠ»Ρ Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠΌ ΡΠ°ΠΉΠ»Π΅.
ΠΠ°ΠΊ Π² HTML ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΎΠ½ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΎΠΉ, ΡΠ΅ΡΠ°ΡΡ Π²Π°ΠΌ, Π½ΠΎ Ρ
ΠΎΡΠ΅Π»ΠΎΡΡ Π±Ρ ΡΠΊΠ°Π·Π°ΡΡ ΠΏΠ°ΡΡ ΡΠ»ΠΎΠ² ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ Π±ΡΠ»ΠΎ Π±Ρ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΎΠΏΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ. ΠΠ΅ΡΠ²ΡΠΉ ΠΌΠ΅ΡΠΎΠ΄ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ ΡΠ΅ΡΠ΅Π· Π°ΡΡΠΈΠ±ΡΡ ΡΠ΅Π³Π° ΡΠΆΠ΅ Π΄Π°Π²Π½ΠΎ ΡΡΡΠ°ΡΠ΅Π». ΠΡΠΎΡΠΎΠΉ Π²Π°ΡΠΈΠ°Π½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π² ΠΎΡΠ΅Π½Ρ ΡΠ΅Π΄ΠΊΠΈΡ
ΡΠ»ΡΡΠ°ΡΡ
, ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°. Π ΡΡΠ΅ΡΠΈΠΉ Π²Π°ΡΠΈΠ°Π½Ρ ΡΠ°ΠΌΡΠΉ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΠΉ ΠΈ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΡΠΉ. ΠΠΎΡ HTML ΠΏΡΠΈΠΌΠ΅ΡΡ ΡΠ΅Π³ΠΎΠ²:
- ΠΠ΅ΡΠ²ΡΠΉ ΡΠΏΠΎΡΠΎΠ± Π·Π°ΠΏΠΈΡΠΈ ΡΠ΅ΡΠ΅Π· Π°ΡΡΠΈΠ±ΡΡ ΡΠ΅Π³Π° (body) Π² ΡΠ°ΠΉΠ»Π΅ index.htm. ΠΠ½ Π·Π°ΠΏΠΈΡΡΠ²Π°Π΅ΡΡΡ Π² ΡΠ°ΠΊΠΎΠΌ Π²ΠΈΠ΄Π΅: (body background= Β«ΠΠ°Π·Π²Π°Π½ΠΈΠ΅_ΠΏΠ°ΠΏΠΊΠΈ/ΠΠ°Π·Π²Π°Π½ΠΈΠ΅_ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ.ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅Β»)(/body). Π’ΠΎ Π΅ΡΡΡ Π΅ΡΠ»ΠΈ Ρ Π½Π°Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Ρ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ Β«PictureΒ» ΠΈ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ΠΌ JPG, Π° ΠΏΠ°ΠΏΠΊΡ ΠΌΡ Π½Π°Π·Π²Π°Π»ΠΈ ΠΊΠ°ΠΊ Β«ImagesΒ», ΡΠΎΠ³Π΄Π° Π·Π°ΠΏΠΈΡΡ HTML-ΠΊΠΎΠ΄Π° Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ: (body background=Β»Images/Picture.jpgΒ»)β¦ (/body).
- ΠΡΠΎΡΠΎΠΉ ΠΌΠ΅ΡΠΎΠ΄ Π·Π°ΠΏΠΈΡΠΈ Π·Π°ΡΡΠ°Π³ΠΈΠ²Π°Π΅Ρ CSS ΡΡΠΈΠ»Ρ, Π½ΠΎ Π·Π°ΠΏΠΈΡΡΠ²Π°Π΅ΡΡΡ Π² ΡΠΎΠΌ ΠΆΠ΅ ΡΠ°ΠΉΠ»Π΅ Ρ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ index.htm. (body../Images/Picture.jpgΒ»)Β»).
- Π ΡΡΠ΅ΡΠΈΠΉ ΡΠΏΠΎΡΠΎΠ± Π·Π°ΠΏΠΈΡΠΈ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡ Π² Π΄Π²ΡΡ ΡΠ°ΠΉΠ»Π°Ρ . Π Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅ Ρ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ index.htm Π² Π·Π°ΠΏΠΈΡΡΠ²Π°Π΅ΡΡΡ ΡΠ°ΠΊΠ°Ρ ΡΡΡΠΎΡΠΊΠ°: (head)(link rel=Β»stylesheetΒ» type=Β»text/cssΒ» href=Β»ΠΡΡΡ_ΠΊ CSS_ΡΠ°ΠΉΠ»ΡΒ»)(/head). Π Π² ΡΠ°ΠΉΠ»Π΅ ΡΡΠΈΠ»Π΅ΠΉ Ρ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ style.css ΡΠΆΠ΅ Π·Π°ΠΏΠΈΡΡΠ²Π°Π΅ΠΌ: body {background: url(Images/Picture.jpgΒ»)}.
ΠΠ°ΠΊ Π² HTML ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΎΠ½ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΎΠΉ, ΠΌΡ ΡΠ°Π·ΠΎΠ±ΡΠ°Π»ΠΈ. Π’Π΅ΠΏΠ΅ΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ½ΡΡΡ, ΠΊΠ°ΠΊ ΡΠ°ΡΡΡΠ½ΡΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅ Π²ΡΠ΅Π³ΠΎ ΡΠΊΡΠ°Π½Π°.
Π‘ΠΏΠΎΡΠΎΠ±Ρ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π½ΠΈΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠΉ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π½Π° ΡΠΈΡΠΈΠ½Ρ ΠΎΠΊΠ½Π°
ΠΡΠ΅Π΄ΡΡΠ°Π²ΠΈΠΌ Π½Π°Ρ ΡΠΊΡΠ°Π½ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΠΎΠΌ Π²ΠΈΠ΄Π΅. ΠΠΎΠ»ΡΡΠ°Π΅ΡΡΡ, ΡΡΠΎ Π²ΡΡ ΡΠΈΡΠΈΠ½Π° ΠΈ Π΄Π»ΠΈΠ½Π° ΡΠΊΡΠ°Π½Π° Π±ΡΠ΄Π΅Ρ ΡΠΎΡΡΠ°Π²Π»ΡΡΡ 100% Ρ
100%. ΠΠ°ΠΌ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ°ΡΡΡΠ½ΡΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π½Π° ΡΡΡ ΡΠΈΡΠΈΠ½Ρ. ΠΠΎΠ±Π°Π²ΠΈΠΌ ΠΊ Π·Π°ΠΏΠΈΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΠ°ΠΉΠ» style.css ΡΡΡΠΎΠΊΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΈ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π΄Π»ΠΈΠ½Ρ ΠΌΠΎΠ½ΠΈΡΠΎΡΠ°. ΠΠ°ΠΊ ΡΡΠΎ Π·Π°ΠΏΠΈΡΡΠ²Π°Π΅ΡΡΡ Π² CSS ΡΡΠΈΠ»Π΅? ΠΡΠ΅ ΠΏΡΠΎΡΡΠΎ!
background: url(Images/Picture.jpgΒ»)
background-size: 100%; /* ΡΠ°ΠΊΠ°Ρ Π·Π°ΠΏΠΈΡΡ ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π° ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² */
ΠΠΎΡ ΠΌΡ ΠΈ ΡΠ°Π·ΠΎΠ±ΡΠ°Π»ΠΈ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΡΠΎΠ½ΠΎΠΌ Π² html Π½Π° Π²Π΅ΡΡ ΡΠΊΡΠ°Π½. ΠΡΡΡ Π΅ΡΠ΅ ΡΠΏΠΎΡΠΎΠ± Π·Π°ΠΏΠΈΡΠΈ Π² ΡΠ°ΠΉΠ»Π΅ index.htm. Π₯ΠΎΡΡ ΡΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ ΠΈ ΡΡΡΠ°ΡΠ΅Π²ΡΠΈΠΉ, Π½ΠΎ Π΄Π»Ρ Π½ΠΎΠ²ΠΈΡΠΊΠΎΠ² Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π΅Π³ΠΎ Π·Π½Π°ΡΡ ΠΈ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ. Π ΡΠ΅Π³Π΅ (head)(style) div { background-size: cover; } (/style) (/head) ΡΡΠ° Π·Π°ΠΏΠΈΡΡ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΌΡ Π²ΡΠ΄Π΅Π»ΡΠ΅ΠΌ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠΉ Π±Π»ΠΎΠΊ Π΄Π»Ρ ΡΠΎΠ½Π°, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡΡΡ ΠΏΠΎ Π²ΡΠ΅ΠΉ ΡΠΈΡΠΈΠ½Π΅ ΠΎΠΊΠ½Π°. ΠΡ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π»ΠΈ 2 ΡΠΏΠΎΡΠΎΠ±Π°, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΎΠ½ ΡΠ°ΠΉΡΠ° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΎΠΉ html, ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π»ΠΎΡΡ Π½Π° Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π° Π² Π»ΡΠ±ΠΎΠΌ ΠΈΠ· ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ².
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠΎΠ½
ΠΡΠ»ΠΈ Π²Ρ ΡΠ΅ΡΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΠ½Π° Π±ΡΠ΄ΡΡΠ΅Π³ΠΎ Π²Π΅Π±-ΡΠ΅ΡΡΡΡΠ°, ΡΠΎΠ³Π΄Π° Π²Π°ΠΌ ΠΏΡΠΎΡΡΠΎ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ·Π½Π°ΡΡ, ΠΊΠ°ΠΊ Π΅Π³ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π½Π΅ΠΏΠΎΠ΄Π²ΠΈΠΆΠ½ΡΠΌ, ΡΡΠΎΠ±Ρ ΠΎΠ½ Π½Π΅ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π»ΡΡ Π² Π΄Π»ΠΈΠ½Ρ ΠΈ Π½Π΅ ΠΏΠΎΡΡΠΈΠ» ΡΡΡΠ΅ΡΠΈΡΠ½ΡΠΉ Π²ΠΈΠ΄. ΠΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ ΡΡΠΎ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅. ΠΠ°ΠΌ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ Π² ΡΠ°ΠΉΠ»Π΅ style.css Π΄ΠΎΠΏΠΈΡΠ°ΡΡ ΠΎΠ΄Π½Ρ ΡΡΠ°Π·Ρ ΠΏΠΎΡΠ»Π΅ background: url(Images/Picture.jpgΒ») fixed; ΠΈΠ»ΠΈ Π²ΠΌΠ΅ΡΡΠΎ Π½Π΅Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΠΎΡΠ»Π΅ ΡΠΎΡΠΊΠΈ Ρ Π·Π°ΠΏΡΡΠΎΠΉ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ ΡΡΡΠΎΡΠΊΡ β position: fixed. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π²Π°Ρ ΡΠΎΠ½ΠΎΠ²ΡΠΉ ΡΠΈΡΡΠ½ΠΎΠΊ ΡΡΠ°Π½Π΅Ρ Π½Π΅ΠΏΠΎΠ΄Π²ΠΈΠΆΠ½ΡΠΌ. ΠΠΎ Π²ΡΠ΅ΠΌΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Π½Π° ΡΠ°ΠΉΡΠ΅, Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΠΎ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠ΅ ΡΡΡΠΎΠΊΠΈ Π΄Π²ΠΈΠ³Π°ΡΡΡΡ, Π° ΡΠΎΠ½ ΠΎΡΡΠ°Π΅ΡΡΡ Π½Π° ΠΌΠ΅ΡΡΠ΅. ΠΠΎΡ Π²Ρ ΠΈ Π½Π°ΡΡΠΈΠ»ΠΈΡΡ, ΠΊΠ°ΠΊ Π² html ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΎΠ½ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΎΠΉ, Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ.
Π Π°Π±ΠΎΡΠ° Ρ ΡΠ°Π±Π»ΠΈΡΠ΅ΠΉ Π² HTML
ΠΠ½ΠΎΠ³ΠΈΠ΅ Π½Π΅ΠΎΠΏΡΡΠ½ΡΠ΅ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ, ΡΡΠ°Π»ΠΊΠΈΠ²Π°ΡΡΡ Ρ ΡΠ°Π±Π»ΠΈΡΠ°ΠΌΠΈ ΠΈ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ, ΡΠ°ΡΡΠΎ Π½Π΅ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ, ΠΊΠ°ΠΊ Π² html ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΡΠΎΠ½ΠΎΠΌ ΡΠ°Π±Π»ΠΈΡΡ. ΠΠ°ΠΊ ΠΈ Π²ΡΠ΅ ΠΈ CSS ΡΡΠΈΠ»Ρ, ΡΡΠΎΡ ΡΠ·ΡΠΊ Π²Π΅Π± ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎΠΉ. Π ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠ°ΠΊΠΎΠΉ Π·Π°Π΄Π°ΡΠΈ Π±ΡΠ΄Π΅Ρ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΏΠ°ΡΡ ΡΡΡΠΎΠΊ ΠΊΠΎΠ΄Π°. ΠΡ ΡΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ Π·Π½Π°ΡΡ, ΡΡΠΎ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΡΠ°Π±Π»ΠΈΡΠ½ΡΡ
ΡΡΡΠΎΠΊ ΠΈ ΡΡΠΎΠ»Π±ΡΠΎΠ² ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°Π΅ΡΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ ΠΊΠ°ΠΊ ΡΠ΅Π³ΠΈ (tr) ΠΈ (td). Π§ΡΠΎΠ±Ρ ΡΠΎΠ½ ΡΠ°Π±Π»ΠΈΡΡ ΡΠ΄Π΅Π»Π°ΡΡ Π² Π²ΠΈΠ΄Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠΏΠΈΡΠ°ΡΡ ΠΊ ΡΠ΅Π³Ρ (table), (tr) ΠΈΠ»ΠΈ (td) ΠΏΡΠΎΡΡΡΡ ΡΡΠ°Π·Ρ Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΠ΅ΠΌ ΡΡΡΠ»ΠΊΠΈ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ: background = URL ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ. ΠΠ»Ρ Π½Π°Π³Π»ΡΠ΄Π½ΠΎΡΡΠΈ ΠΏΡΠΈΠ²Π΅Π΄Π΅ΠΌ ΠΏΠ°ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ².
Π’Π°Π±Π»ΠΈΡΡ Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΎΠΉ Π²ΠΌΠ΅ΡΡΠΎ ΡΠΎΠ½Π°: HTML ΠΏΡΠΈΠΌΠ΅ΡΡ
ΠΠ°ΡΠΈΡΡΠ΅ΠΌ ΡΠ°Π±Π»ΠΈΡΡ 2Ρ 3 ΠΈ ΡΠ΄Π΅Π»Π°Π΅ΠΌ Π΅Π΅ ΡΠΎΠ½ΠΎΠΌ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ, ΡΠΎΡ ΡΠ°Π½Π΅Π½Π½ΡΡ Π² ΠΏΠ°ΠΏΠΊΠ΅ βImagesβ: (table background = βImages/Picture.jpgβ) (tr) (td)1(/td) (td)2(/td) (td)3)(/td)(/tr) (tr)(td)4(/td) (td)5(/td) (td)6(/td)(/tr) (/table). Π’Π°ΠΊ Π½Π°ΡΠ° ΡΠ°Π±Π»ΠΈΡΠ° Π±ΡΠ΄Π΅Ρ Π·Π°ΠΊΡΠ°ΡΠ΅Π½Π° Π² ΡΠΎΠ½ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ.
Π’Π΅ΠΏΠ΅ΡΡ Π½Π°ΡΠΈΡΡΠ΅ΠΌ ΡΡΡ ΠΆΠ΅ ΡΠ°Π±Π»ΠΈΡΠΊΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ 2Ρ 3, Π½ΠΎ Π²ΡΡΠ°Π²ΠΈΠΌ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π² ΡΡΠΎΠ»Π±ΠΈΠΊΠΈ ΠΏΠΎΠ΄ Π½ΠΎΠΌΠ΅ΡΠΎΠΌ 1, 4, 5 ΠΈ 6. (table)(tr)(td background = βImages/Picture.jpgβ)1(/td) (td)2(/td) (td)3(/td)(/tr) (tr)(td background = βImages/Picture.jpgβ)4(/td) (td background = βImages/Picture.jpgβ)5(/td) (td background = βImages/Picture.jpgβ)6(/td) (/tr) (/table). ΠΠΎΡΠ»Π΅ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π²ΠΈΠ΄ΠΈΠΌ, ΡΡΠΎ ΡΠΎΠ½ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠ΅Ρ ΡΡΠ΅ΠΉΠΊΠ°Ρ , Π² ΠΊΠΎΡΠΎΡΡΡ ΠΌΡ ΠΏΡΠΎΠΏΠΈΡΠ°Π»ΠΈ, Π° Π½Π΅ Π²ΠΎ Π²ΡΠ΅ΠΉ ΡΠ°Π±Π»ΠΈΡΠ΅.
ΠΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎΡΡΡ ΡΠ°ΠΉΡΠ°
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π΅ΡΠ΅ ΡΠ°ΠΊΠΎΠ΅ ΠΏΠΎΠ½ΡΡΠΈΠ΅, ΠΊΠ°ΠΊ ΠΊΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎΡΡΡ Π²Π΅Π±-ΡΠ΅ΡΡΡΡΠ°. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ°ΠΉΡΠ° Π±ΡΠ΄ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π² ΡΠ°Π·Π½ΡΡ
ΡΠΈΠΏΠ°Ρ
ΠΈ Π²Π΅ΡΡΠΈΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ². ΠΡΠΈ ΡΡΠΎΠΌ Π½ΡΠΆΠ½ΠΎ HTML ΠΊΠΎΠ΄ ΠΈ CSS ΡΡΠΈΠ»Ρ ΠΏΠΎΠ΄Π³ΠΎΠ½ΡΡΡ ΠΏΠΎΠ΄ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π² ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠ΅ Π²ΡΠ΅ΠΌΡ ΡΠ°Π·Π²ΠΈΡΠΈΡ ΡΠΌΠ°ΡΡΡΠΎΠ½ΠΎΠ² ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΡΡΠ°ΡΠ°ΡΡΡΡ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ°ΠΉΡΡ, Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΈ ΠΏΠΎΠ΄ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ Π²Π΅ΡΡΠΈΠΈ ΠΈ ΠΏΠΎΠ΄ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ½ΡΠΉ Π²ΠΈΠ΄.
Π’Π΅Π³ img β ΠΏΡΡΡΠΎΠΉ, ΠΎΠ½ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π°ΡΡΠΈΠ±ΡΡΡ ΠΈ Ρ Π½Π΅Π³ΠΎ Π½Π΅Ρ Π·Π°ΠΊΡΡΠ²Π°ΡΡΠ΅Π³ΠΎ ΡΠ΅Π³Π°.
ΠΠ»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π°ΡΡΠΈΠ±ΡΡ src . Src ΠΏΠΎΡΠ²ΠΈΠ»ΠΎΡΡ ΠΎΡ source, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΠΡΡΠΎΡΠ½ΠΈΠΊ. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ Π°ΡΡΠΈΠ±ΡΡΠ° src ΡΠ²Π»ΡΠ΅ΡΡΡ url-Π°Π΄ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
Π‘ΡΡΠΎΠΊΠ° Π²ΡΡΠ΅ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π² ΡΠΎΠΉ ΠΆΠ΅ Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΠΈ (ΠΏΠ°ΠΏΠΊΠ΅), ΡΡΠΎ ΠΈ ΡΠ°ΠΌ html-ΡΠ°ΠΉΠ», ΡΡΡΠ»Π°ΡΡΠΈΠΉΡΡ Π½Π° Π΄Π°Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΠΎΠΏΡΡΡΠΈΠΌ, Ρ ΠΠ°Ρ Π΅ΡΡΡ ΠΏΠ°ΠΏΠΊΠ° html , Π² ΠΊΠΎΡΠΎΡΠΎΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡΡΡ index.html Ρ ΡΠΊΠ°Π·Π°Π½Π½ΡΠΌ Π²ΡΡΠ΅ ΠΊΠΎΠ΄ΠΎΠΌ ΠΈ ΡΠ°ΠΌΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Ρ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ image.jpg .
Π ΡΠ°ΠΊΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΏΡΠΈ ΠΎΡΠΊΡΡΡΠΈΠΈ index.html Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ ΠΡ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ Π΄Π°Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΡΠ»ΠΈ ΠΆΠ΅ ΠΎΠ½ΠΎ Ρ ΠΠ°Ρ Π³Π΄Π΅-Π»ΠΈΠ±ΠΎ Π² Π΄ΡΡΠ³ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ (Π½Π° ΠΏΠ°ΠΏΠΊΡ Π²ΡΡΠ΅ ΠΈΠ»ΠΈ Π½ΠΈΠΆΠ΅), ΡΠΎ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ Ρ ΠΠ°Ρ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡΡ Π»ΠΈΠ±ΠΎ Π±Π΅Π»ΠΎΠ΅ ΠΏΠΎΠ»Π΅, Π»ΠΈΠ±ΠΎ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ Ρ ΠΊΡΠ°ΡΠ½ΡΠΌ ΠΊΡΠ΅ΡΡΠΈΠΊΠΎΠΌ (Π½Π΅ ΡΠ΄Π°Π»ΠΎΡΡ Π·Π°Π³ΡΡΠ·ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅).
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π΅ Π²ΡΠ΅Π³Π΄Π° Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π² ΡΠΎΠΉ ΠΆΠ΅ Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΠΈ (ΠΏΠ°ΠΏΠΊΠ΅), ΡΡΠΎ ΠΈ ΡΠ°ΠΌ ΡΠ°ΠΉΠ», ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°Π½ΠΈΠ΅ ΠΏΡΡΠ΅ΠΉ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½Π΅Π΅ Π±ΡΠ΄Π΅Ρ ΠΎΠΏΠΈΡΠ°Π½ΠΎ ΡΡΡΡ ΠΏΠΎΠ·ΠΆΠ΅.
ΠΡΡΠΈΠ±ΡΡΡ ΡΠ΅Π³Π° img
ΠΠΎΠΌΠΈΠΌΠΎ src Ρ ΡΠ΅Π³Π° img Π΅ΡΡΡ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ Π°ΡΡΠΈΠ±ΡΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΡΠ²Π΅ΡΠ°ΡΡ Π·Π° ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΏΠΎΠ΄ΠΏΠΈΡΡ ΠΊ Π½Π΅ΠΌΡ ΠΈ ΠΏΡΠΎΡΠ΅Π΅.
src β Π°Π΄ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
width β ΡΠΈΡΠΈΠ½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
height β Π²ΡΡΠΎΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
title β ΠΏΠΎΠ΄ΠΏΠΈΡΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π²ΡΡΠ²Π΅ΡΠΈΠ²Π°Π΅ΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
alt β Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ. ΠΡΠΆΠ΅Π½ Π΄Π»Ρ ΠΏΠΎΠΈΡΠΊΠΎΠ²ΠΎΠ³ΠΎ ΡΠΎΠ±ΠΎΡΠ° ΠΈ ΠΈΠ½Π΄Π΅ΠΊΡΠ°ΡΠΈΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
border β ΡΠΎΠ»ΡΠΈΠ½Π° Π³ΡΠ°Π½ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. 0 β Π½Π΅Ρ Π³ΡΠ°Π½ΠΈΡΡ, 1 β ΡΠ°ΠΌΠ°Ρ ΡΠΎΠ½ΠΊΠ°Ρ Π³ΡΠ°Π½ΠΈΡΠ° ΠΈ ΡΠ΄
ΠΠ΄ΡΠ΅Ρ Π²ΡΡΠ°Π²Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ (ΠΏΡΠΈΠΌΠ΅ΡΡ)
ΠΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΡΠ°Π½ΡΡΡΡ Π½Π΅ Π² ΡΠΎΠΉ ΠΆΠ΅ ΠΏΠ°ΠΏΠΊΠ΅, ΡΡΠΎ ΠΈ ΡΠ°ΠΌ html-ΡΠ°ΠΉΠ» . ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π² ΡΠΎΠΉ ΠΆΠ΅ Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΠΈ ΡΠΎΠ·Π΄Π°ΡΡΡΡ ΠΏΠ°ΠΏΠΊΠ° images (ΠΈΠ»ΠΈ img, ΡΡΡ Π½Π° Π²ΠΊΡΡ ΠΈ ΡΠ²Π΅Ρ). Π Π² Π½Π΅Ρ ΡΠΆΠ΅ ΠΊΠ»Π°Π΄ΡΡΡΡ Π²ΡΠ΅ Π½ΡΠΆΠ½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. Π ΡΠ»ΡΡΠ°Π΅ Ρ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΌ Ρ ΡΠ°Π½Π΅Π½ΠΈΠ΅ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°ΡΡ Π΄Π»Ρ Π°ΡΡΠΈΠ±ΡΡΠ° src ΡΠΆΠ΅ Π΄ΡΡΠ³ΠΎΠΉ Π°Π΄ΡΠ΅Ρ
ΠΡΠ»ΠΈ ΡΠ°ΠΉΠ» Π»Π΅ΠΆΠΈΡ Π½Π° ΠΏΠ°ΠΏΠΊΡ Π²ΡΡΠ΅, ΡΠΎ ΡΠ°ΠΊ
ΠΠΎΠΆΠ½ΠΎ ΡΠ°ΠΊΠΆΠ΅ Π²ΡΡΠ°Π²ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΠΎΠΎΠ±ΡΠ΅ Ρ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ°, ΠΏΡΠΈ ΡΡΠΎΠΌ Π½Π΅ Π·Π°Π³ΡΡΠΆΠ°Ρ Π΅Π³ΠΎ ΠΊ ΡΠ΅Π±Π΅ Π² ΠΏΠ°ΠΏΠΊΡ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Ρ ΠΠ°Ρ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΡΡΠ°Π±ΠΈΠ»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΠΊ ΠΈΠ½ΡΠ΅ΡΠ½Π΅ΡΡ ΠΈ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π² Π°Π΄ΡΠ΅ΡΠ΅ ΠΡ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°Π΅ΡΠ΅ Π°Π΄ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΠΈΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅:
Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² HTML
Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΌΠΎΠ³ΡΡ Π²ΡΡΡΡΠΏΠ°ΡΡ ΡΠ°ΠΉΠ»Ρ Ρ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΡΠΌΠΈ gif , jpg , jpeg ΠΈ png . Π ΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, Π΅ΡΠ»ΠΈ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΌΠ΅Π½ΡΡΠ΅ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Π΄Π°Π»ΡΡΠ΅ Π·Π°ΠΏΠΎΠ»Π½ΡΡΡ ΠΎΡΡΠ°Π²ΡΠΈΠΉΡΡ ΡΠΎΠ½. Π body ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Π°ΡΡΠΈΠ±ΡΡ background , Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°Π΅ΠΌ ΠΏΡΡΡ ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΡΠ±Π°Ρ ΠΊΠΎΠΌΠ½Π°ΡΠ° Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Π»ΡΡΡΠ΅, Π΅ΡΠ»ΠΈ Π΅Π΅ ΠΏΠΎΠ» ΡΡΡΠΈΠ»Π°Π΅Ρ Π΄ΠΎΡΠΎΠ³ΠΎΠΉ ΠΏΠ΅ΡΡΠΈΠ΄ΡΠΊΠΈΠΉ ΠΊΠΎΠ²Π΅Ρ. Π’Π°ΠΊ ΡΠ΅ΠΌ Ρ ΡΠΆΠ΅ Π²Π°Ρ ΡΠ°ΠΉΡ? ΠΠΎΠΆΠ΅Ρ, ΠΏΡΠΈΡΠ»Π° ΠΏΠΎΡΠ° ΠΈ Π΅Π³ΠΎ ΠΏΠΎΠ» Β«Π·Π°ΡΡΠ΅Π»ΠΈΡΡ Β» Π΄ΠΎΡΠΎΠ³ΠΈΠΌ ΠΈΠ·ΡΡΠ½ΡΠΌ ΠΏΠ°Π»Π°ΡΠΎΠΌ ΡΡΡΠ½ΠΎΠΉ ΡΠ°Π±ΠΎΡΡ. Π Π°Π·Π±Π΅ΡΠ΅ΠΌΡΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΎΠ½ Π΄Π»Ρ ΡΠ°ΠΉΡΠ°:
Π€ΠΎΠ½ Π΄Π»Ρ ΡΠ°ΠΉΡΠ°
ΠΡΠ²Π°Π΅Ρ ΡΠ°ΠΊ, ΡΡΠΎ ΡΡΠ°ΡΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ°ΠΉΡΠ° ΡΠΆΠ΅ ΠΏΡΠΈΠ΅Π»ΡΡ. Π Ρ ΠΎΡΠ΅ΡΡΡ ΡΠ΅Π³ΠΎ-Π½ΠΈΠ±ΡΠ΄Ρ Π½ΠΎΠ²Π΅Π½ΡΠΊΠΎΠ³ΠΎ ΠΈ Π²ΠΊΡΡΠ½Π΅Π½ΡΠΊΠΎΠ³ΠΎ. Π Π½ΠΎΠ²ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π±ΡΠ΄Π΅Ρ ΡΠ°ΠΊΠΎΠ²ΡΠΌ, Π΅ΡΠ»ΠΈ Π΅Π³ΠΎ ΠΏΡΠΈΠ³ΠΎΡΠΎΠ²ΠΈΡΡ ΡΠ²ΠΎΠΈΠΌΠΈ ΡΡΠΊΠ°ΠΌΠΈ.
ΠΠΎ ΠΌΠ΅Π½ΡΡΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π²Π΅ΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ΅ΡΡΡΡΠ° ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ β Π²Π΅ΡΡ Π½Π΅Π±Π»Π°Π³ΠΎΠ΄Π°ΡΠ½Π°Ρ. ΠΠ° ΠΈ Π½Π΅ Ρ Π²ΡΠ΅Ρ
ΠΏΠΎΠ΄ ΡΡΠΎ Π΄Π΅Π»ΠΎ ΠΊΠ°ΠΊ Π½Π°Π΄ΠΎ Β«Π·Π°ΡΠΎΡΠ΅Π½Ρ
Β» ΡΡΠΊΠΈ. ΠΠΎΡΡΠΎΠΌΡ Π»Π΅Π³ΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΎΡΠ²Π΅ΠΆΠΈΡΡ ΡΡΠ°ΡΡΠΉ ΡΠ°Π±Π»ΠΎΠ½, ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ² ΡΠ²Π΅Ρ ΡΠΎΠ½Π° ΡΠ΅ΡΡΡΡΠ° ΠΈΠ»ΠΈ Π΅Π³ΠΎ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΠΎΠΌΠ΅Π½ΡΡΡ ΡΠΎΠ½ Π½Π° ΡΠ°ΠΉΡΠ΅. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ CSS ΠΈΠ»ΠΈ html . ΠΠΎ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΈΠ· ΡΠ²ΠΎΠΉΡΡΠ² Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Ρ ΡΠΎΠ½ΠΎΠΌ ΠΈΠΌΠ΅ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ΅ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΈ ΠΌΠ΅ΡΠΎΠ΄ΠΈΠΊΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² ΡΡΠΈΡ Π²Π΅Π±-ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡΡ .
ΠΡΠ½ΠΎΠ²Ρ ΡΠ°Π±ΠΎΡΡ Ρ ΡΠΎΠ½ΠΎΠΌ Π² html
Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΠ½Π° ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²:
- Π¦Π²Π΅Ρ;
- Π€ΠΎΠ½ΠΎΠ²ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ;
- Π’Π΅ΠΊΡΡΡΡΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.
Π Π°Π·Π±Π΅ΡΠ΅ΠΌΡΡ Ρ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· Π½ΠΈΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅.
ΠΠ»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠ²Π΅Ρ Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π° Π΄Π»Ρ ΡΠ°ΠΉΡΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background-color ΡΡΠΈΠ»Π΅Π²ΠΎΠ³ΠΎ Π°ΡΡΠΈΠ±ΡΡΠ° style . Π’ΠΎ Π΅ΡΡΡ, ΡΡΠΎΠ±Ρ Π·Π°Π΄Π°ΡΡ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΠ²Π΅Ρ Π΄Π»Ρ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ, Π½ΡΠΆΠ½ΠΎ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ Π΅Π³ΠΎ Π²Π½ΡΡΡΠΈ ΡΠ΅Π³Π°
. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ:Π€ΠΎΠ½ ΡΠ°ΠΉΡΠ° #55D52B
ΠΡΠΎΠΌΠ΅ ΡΠ΅ΡΡΠ½Π°Π΄ΡΠ°ΡΠ΅ΡΠΈΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° ΡΠ²Π΅ΡΠ° ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ³ΠΎ ΡΠ»ΠΎΠ²Π° ΠΈΠ»ΠΈ RGB . ΠΡΠΈΠΌΠ΅ΡΡ:
Π€ΠΎΠ½ ΡΠ°ΠΉΡΠ° rgb(23,113,44)
Π€ΠΎΠ½ ΡΠ°ΠΉΡΠ° green
Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΡΠ²Π΅ΡΠ° ΡΠΎΠ½Π° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»ΡΡΠ΅Π²ΡΡ
ΡΠ»ΠΎΠ² ΠΈΠΌΠ΅Π΅Ρ ΡΡΠ΄ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠΉ ΠΏΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ ΠΎΡΡΠ°Π»ΡΠ½ΡΠΌΠΈ Π΄Π²ΡΠΌΡ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ.
Π html ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π²ΡΠ΅Π³ΠΎ 16 ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΡΠ»ΠΎΠ² Π΄Π»Ρ Π·Π°Π΄Π°Π½ΠΈΡ ΡΠ²Π΅ΡΠ°. ΠΠΎΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΠ· Π½ΠΈΡ : white, red, blue, black, yellow ΠΈ Π΄ΡΡΠ³ΠΈΠ΅.
ΠΠΎΡΡΠΎΠΌΡ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠΎΠ½ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° html , Π»ΡΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ΅ΡΡΠ½Π°Π΄ΡΠ°ΡΠ΅ΡΠΈΡΠ½ΡΠΉ ΡΠΎΡΠΌΠ°Ρ ΠΈΠ»ΠΈ RGB .
ΠΡΠΎΠΌΠ΅ Π²ΡΠ±ΠΎΡΠ° ΡΠ²Π΅ΡΠ° Π΄ΠΎΡΡΡΠΏΠ½Ρ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ. ΠΡΠ»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Ρ background-color Π·Π°Π΄Π°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ transparent , ΡΠΎ ΡΠΎΠ½ ΡΡΡΠ°Π½ΠΈΡΡ ΡΡΠ°Π½Π΅Ρ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠΌ. ΠΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π°Π½Π½ΠΎΠΌΡ ΡΠ²ΠΎΠΉΡΡΠ²Ρ ΠΏΡΠΈΡΠ²ΠΎΠ΅Π½ΠΎ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.
Π’Π΅ΠΏΠ΅ΡΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΡΠ·ΡΠΊΠ° Π³ΠΈΠΏΠ΅ΡΡΠ΅ΠΊΡΡΠ° Π΄Π»Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΡΠΈΡΡΠ½ΠΊΠ° Π΄Π»Ρ ΡΠ°ΠΉΡΠ°. ΠΡΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° background-image .
ΠΠ°ΠΊ Π²ΠΈΠ΄Π½ΠΎ ΠΈΠ· ΠΊΠΎΠ΄Π°, ΠΏΡΠΈΠ²ΡΠ·ΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΡΠ΅ΡΠ΅Π· ΠΏΡΡΡ url , Π·Π°Π΄Π°Π½Π½ΡΠΉ Π² ΡΠΊΠΎΠ±ΠΊΠ°Ρ . ΠΠΎ Π½Π΅ Π²ΡΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡΡΡ ΡΠ°ΠΊΠΈΠΌΠΈ Π±ΠΎΠ»ΡΡΠΈΠΌΠΈ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΎΠΈΠΌΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΡ Π²ΡΡ ΠΏΠ»ΠΎΡΠ°Π΄Ρ ΡΠΊΡΠ°Π½Π°. ΠΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΌΠ΅Π½ΡΡΠΈΠΉ ΠΏΠΎ Π²Π΅Π»ΠΈΡΠΈΠ½Π΅ ΡΠΈΡΡΠ½ΠΎΠΊ.
ΠΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, ΡΡΠΎ ΠΌΡ ΡΠ°Π·ΡΠ°Π±Π°ΡΡΠ²Π°Π΅ΠΌ ΡΠ°ΠΉΡ ΠΎ ΠΏΠΎΡΠ·ΠΈΠΈ, ΠΈ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΠΎΠ΄Π»ΠΎΠΆΠΊΠΈ Π½ΡΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΠ΅Π³Π°ΡΠ°. ΠΡΡΠ»Π°ΡΡΠΉ ΠΊΠΎΠ½Ρ Π±ΡΠ΄Π΅Ρ ΠΎΠ»ΠΈΡΠ΅ΡΠ²ΠΎΡΡΡΡ ΡΠ²ΠΎΠ±ΠΎΠ΄Ρ ΡΠ²ΠΎΡΡΠ΅ΡΠΊΠΎΠΉ ΠΌΡΡΠ»ΠΈ ΠΏΠΎΡΡΠ°!
ΠΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ, ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π»ΠΎΡΡ ΠΏΠΎΡΡΠ΅Π΄ΠΈΠ½Π΅ ΡΠΊΡΠ°Π½Π° ΠΎΠ΄ΠΈΠ½ ΡΠ°Π·. ΠΠΎ, ΠΊ ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, Π±ΡΠ°ΡΠ·Π΅Ρ Π½Π΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ Π½Π°ΡΠΈΡ Π²ΠΎΠ·Π²ΡΡΠ΅Π½Π½ΡΡ ΠΆΠ΅Π»Π°Π½ΠΈΠΉ. Π Π²ΡΠ²ΠΎΠ΄ΠΈΡ ΠΌΠ΅Π½ΡΡΡΡ ΠΏΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π΄Π»Ρ ΡΠΎΠ½Π° ΡΠ°ΠΉΡΠ° ΡΡΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·, ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΌΠΎΠΆΠ΅Ρ Π²ΠΌΠ΅ΡΡΠΈΡΡ Π² ΡΠ΅Π±Ρ ΠΏΠ»ΠΎΡΠ°Π΄Ρ ΡΠΊΡΠ°Π½Π°:
ΠΠ°Π²Π΅ΡΠ½ΠΎΠ΅, ΡΠ΅ΡΡΡΠ΅Ρ ΡΠ»ΡΠ±Π°ΡΡΠΈΡ ΡΡ Π»ΠΎΡΠ°Π΄Π΅ΠΉ Ρ ΠΊΡΡΠ»ΡΡΠΌΠΈ ΠΏΠΎΡΡΠ°ΠΌ Π±ΡΠ΄Π΅Ρ ΡΠ΅ΡΠ΅ΡΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ Π΄Π»Ρ Π²Π΄ΠΎΡ Π½ΠΎΠ²Π΅Π½ΠΈΡ. ΠΠΎΡΡΠΎΠΌΡ Π·Π°ΠΏΡΠ΅ΡΠ°Π΅ΠΌ ΠΊΠ»ΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π°ΡΠ΅Π³ΠΎ ΠΠ΅Π³Π°ΡΠ°. ΠΠ΅Π»Π°Π΅ΠΌ ΡΡΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° background-repeat . ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ:
- repeat-x β ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ;
- repeat-y β ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ;
- repeat β ΠΏΠΎ ΠΎΠ±Π΅ΠΈΠΌ ΠΎΡΡΠΌ;
- no-repeat β ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΠ΅ Π·Π°ΠΏΡΠ΅ΡΠ΅Π½ΠΎ.
Π‘ΡΠ΅Π΄ΠΈ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Π½ΡΡ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² Π½Π°Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΡΠ΅Ρ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ. ΠΠ΅ΡΠ΅Π΄ ΡΠ΅ΠΌ, ΠΊΠ°ΠΊ ΠΏΠΎΠΌΠ΅Π½ΡΡΡ ΡΠΎΠ½ ΡΠ°ΠΉΡΠ°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Π΅Π³ΠΎ Π² ΡΠ²ΠΎΠ΅ΠΌ ΠΊΠΎΠ΄Π΅:
ΠΠΎ, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ, Π»ΡΡΡΠ΅, Π΅ΡΠ»ΠΈ Π±Ρ Π½Π°Ρ Π»Π΅ΡΡΠ½ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΠ»ΡΡ ΠΏΠΎΡΡΠ΅Π΄ΠΈΠ½Π΅ ΡΠΊΡΠ°Π½Π°. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ background-position
ΠΊΠ°ΠΊ ΡΠ°Π· ΠΈ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΎ Π΄Π»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΡΠΈΡΡΠ½ΠΊΠ° Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠ°Π΄Π°Π²Π°ΡΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ:
- ΠΠ»ΡΡΠ΅Π²ΡΠΌ ΡΠ»ΠΎΠ²ΠΎΠΌ (top , bottom , center, left, right) ;
- ΠΡΠΎΡΠ΅Π½ΡΠ°ΠΌΠΈ β ΠΎΡΡΡΠ΅Ρ Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ ΠΎΡ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΡΠ³Π»Π°;
- Π Π΅Π΄ΠΈΠ½ΠΈΡΠ°Ρ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ (ΠΏΠΈΠΊΡΠ΅Π»ΡΡ ).
ΠΠΎΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ ΡΠ°ΠΌΡΠΌ ΠΏΡΠΎΡΡΡΠΌ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠΌ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ:
ΠΡΠ²Π°Π΅Ρ, ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ Π·Π°ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΈΡΡΠ½ΠΊΠ° ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅. ΠΠΎΡΡΠΎΠΌΡ ΠΏΡΠ΅ΠΆΠ΄Π΅, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΡΠΎΠ½ΠΎΠΌ ΡΠ°ΠΉΡΠ°, Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ΡΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠΌ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ background-attachment
. ΠΡΠΈΠ½ΠΈΠΌΠ°Π΅ΠΌΡΠ΅ ΠΈΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΡ:
ΠΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅. Π’Π΅ΠΏΠ΅ΡΡ ΠΊΠΎΠ΄ Π½Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ Π²ΠΎΡ ΡΠ°ΠΊ:
Π’Π΅ΠΊΡΡΡΡΠ½ΡΠΉ ΡΠΎΠ½ ΡΠ°ΠΉΡΠ°
Π ΠΏΠ΅ΡΠ²ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π΄Π»Ρ ΡΠΎΠ½Π° ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΈ ΠΊΡΠ°ΡΠΈΠ²ΡΠΉ ΠΏΠ΅ΠΉΠ·Π°ΠΆ ΠΏΡΡΡΡΠ½ΠΈ. ΠΠΎ Π·Π° ΡΠ°ΠΊΡΡ ΠΊΡΠ°ΡΠΎΡΡ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡΡΡ ΠΏΠ»Π°ΡΠΈΡΡ ΡΠΏΠΎΠ»Π½Π°. ΠΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π²ΡΠΏΠΎΠ»Π½Π΅Π½Π½ΠΎΠ³ΠΎ Π² Π²ΡΡΠΎΠΊΠΎΠΌ ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅, ΠΌΠΎΠΆΠ΅Ρ Π΄ΠΎΡΡΠΈΠ³Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΠΌΠ΅Π³Π°Π±Π°ΠΉΡ.
Π’Π°ΠΊΠΎΠΉ ΠΎΠ±ΡΠ΅ΠΌ Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ Π²Π»ΠΈΡΠ΅Ρ Π½Π° ΡΠΊΠΎΡΠΎΡΡΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ ΠΏΡΠΈ Π²ΡΡΠΎΠΊΠΎΡΠΊΠΎΡΠΎΡΡΠ½ΠΎΠΌ ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΠΈ Ρ ΠΈΠ½ΡΠ΅ΡΠ½Π΅ΡΠΎΠΌ. ΠΠΎ ΠΊΠ°ΠΊ Π±ΡΡΡ Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠΌ ΠΈΠ½ΡΠ΅ΡΠ½Π΅ΡΠΎΠΌ, ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π·Π°Π³ΡΡΠ·ΠΊΠ° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ Β«ΠΌΠ΅ΡΡΠΎΠ² Β» Π·Π°ΠΉΠΌΠ΅Ρ ΠΌΠ½ΠΎΠ³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ?
ΠΡΠ΅ ΡΡΠΈ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΡΠ΅ΡΠ°ΡΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅ΠΊΡΡΡΡΠ½ΠΎΠ³ΠΎ ΡΠΎΠ½Π°. Π Π½Π΅ΠΌ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΈΡΡΠ½ΠΊΠ° ΡΠ΅ΠΊΡΡΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΠ°ΠΆΠ΅ ΠΏΡΠΈ ΡΡΠ»ΠΎΠ²ΠΈΠΈ Π΅Π³ΠΎ ΠΌΠ½ΠΎΠ³ΠΎΠΊΡΠ°ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΡ ΡΠΈΡΡΠ½ΠΎΠΊ Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΡΡ Π»ΠΈΡΡ ΠΎΠ΄ΠΈΠ½ ΡΠ°Π·.
ΠΠ»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠΎΠ½Π° Π΄Π»Ρ ΡΠ°ΠΉΡΠ° Π·Π°Ρ ΠΎΠ΄ΠΈΠΌ Π² Photoshop , ΡΠΎΠ·Π΄Π°Π΅ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² Π²ΠΈΠ΄Π΅ ΠΏΠΎΠ»ΠΎΡΠΊΠΈ Π΄Π»ΠΈΠ½Π½ΠΎΠΉ 1200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΠΈ ΡΠΈΡΠΈΠ½ΠΎΠΉ 15 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΠ°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠ΅ΡΠ½ΠΎ-Π±Π΅Π»ΡΠΉ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌ ΠΏΠΎΠ»ΡΡΠΈΠ²ΡΡΡΡΡ ΡΠ΅ΠΊΡΡΡΡΡ ΠΊ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΡΠ°ΠΉΡΠ°:
Π‘ΡΠ΅Π΄ΡΡΠ²Π° CSS
ΠΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΠΎΠΏΠΈΡΠ°Π½Π½ΡΠ΅ Π²ΡΡΠ΅, ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌΡ ΠΈ Π΄Π»Ρ ΠΊΠ°ΡΠΊΠ°Π΄Π½ΡΡ ΡΠ°Π±Π»ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ. Π‘ΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΡΠΎΠ½ ΡΠ°ΠΉΡΠ° css , ΠΏΠ΅ΡΠ΅ΠΏΠΈΡΠ°Π² ΠΊΠΎΠ΄ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· Π½Π°ΡΠΈΡ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ².
ΠΠΎΡΠΎΠ±ΠΈΠ΅ Π΄Π»Ρ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ ΠΏΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ½Π° Π² CSS β CSS-LIVE
ΠΠ΅ΡΠ΅Π²ΠΎΠ΄ ΡΡΠ°ΡΡΠΈ A Primer To Background Positioning In CSS Ρ ΡΠ°ΠΉΡΠ° blogs.adobe.com, Π°Π²ΡΠΎΡ β Π‘Π°ΡΠ° Π‘ΡΡΠΉΠ΄Π°Π½.
ΠΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠΎΠ½ΠΎΠ²ΡΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, ΠΎΠ΄Π½Π° ΠΈΠ· ΡΠ°ΠΌΡΡ
Π²ΠΎΡΡΡΠ΅Π±ΠΎΠ²Π°Π½Π½ΡΡ
Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ Π² CSS, ΠΈ Π΅ΡΡΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΠΎΠ½ΠΎΠ²ΡΡ
ΡΠ²ΠΎΠΉΡΡΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π½Π°ΠΌ ΡΠΏΡΠ°Π²Π»ΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ Π°ΡΠΏΠ΅ΠΊΡΠ°ΠΌΠΈ ΡΠΎΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π£ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡΠ»ΠΈ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΠΎ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΡΡ ΠΈΡ
Π² Π²ΠΈΠ΄Π΅ ΡΠ°Π·Π΄Π΅Π»ΡΠ½Π½ΠΎΠ³ΠΎ Π·Π°ΠΏΡΡΡΠΌΠΈ ΡΠΏΠΈΡΠΊΠ° Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° background
-
image
. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ background
-
position
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΈ ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΡΠΎΠΈΡ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅ΡΡ ΠΏΠΎΠ³Π»ΡΠ±ΠΆΠ΅, Ρ.ΠΊ. Π΅Π³ΠΎ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΡΠΈΠ²ΠΎΠ΄ΡΡ ΠΊ ΡΠ°Π·Π½ΡΠΌ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°ΠΌ, Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ
ΠΌΠΎΠ³ΡΡ ΠΎΠΊΠ°Π·Π°ΡΡΡΡ Π΄Π»Ρ Π²Π°Ρ Π² Π½ΠΎΠ²ΠΈΠ½ΠΊΡ, Π΅ΡΠ»ΠΈ Π²Ρ Π½Π΅ ΠΎΡΠ΅Π½Ρ Ρ
ΠΎΡΠΎΡΠΎ ΡΠ°Π·Π±ΠΈΡΠ°Π΅ΡΠ΅ΡΡ Π² CSS.
ΠΡ Π±ΡΠ΄Π΅ΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΠΎΠ΄Π½ΠΎ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΠΎ Π²ΡΠ΅Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ°Ρ , ΡΡΠΎΠ±Ρ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΠΊΠΎΠ΄ ΠΈ ΠΎΠ±ΡΠΈΠ΅ ΠΏΠΎΠ½ΡΡΠΈΡ ΠΏΡΠΎΡΡΡΠΌΠΈ Π½Π° ΠΏΡΠΎΡΡΠΆΠ΅Π½ΠΈΠΈ Π²ΡΠ΅ΠΉ ΡΡΠ°ΡΡΠΈ. ΠΠΎ ΡΡΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌΠΎ ΠΈ ΠΊΠΎ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²Π΅Π½Π½ΡΠΌ.
Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ Π²Π½ΡΡΡΠΈ ΡΠΎΠ³ΠΎ, ΡΡΠΎ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ Β«ΠΎΠ±Π»Π°ΡΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ½Π°Β» ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΡΠ° ΠΎΠ±Π»Π°ΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ½Π°, ΠΊΠ°ΠΊ ΡΡΠ½ΠΎ ΠΈΠ· Π½Π°Π·Π²Π°Π½ΠΈΡ, ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΎΠ±Π»Π°ΡΡΡ, Π²Π½ΡΡΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠΉ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡΡΡ ΡΠΎΠ½, ΠΈ Ρ Π½Π΅Π΅ Π΅ΡΡΡ ΡΠΈΡΡΠ΅ΠΌΠ° ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠ°Ρ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ.
ΠΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΡ ΡΠ³Π»ΡΠ±Π»ΡΡΡΡΡ Π² ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΏΠΎΠ½ΡΡΠΈΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΠ½Π°ΡΠ°Π»Π° Π±ΡΡΡΡΠ΅Π½ΡΠΊΠΎ Π·Π°Π³Π»ΡΠ½Π΅ΠΌ Π² Π±ΠΎΠΊΡΠΎΠ²ΡΡ ΠΌΠΎΠ΄Π΅Π»Ρ CSS ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ ΠΎΠ½Π° Π²Π»ΠΈΡΠ΅Ρ Π½Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π²Π½ΡΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠ±Π»Π°ΡΡΠΈ Π±ΠΎΠΊΡΠΎΠ²ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ CSS
Π£ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² CSS ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Ρ ΡΡΠΈ ΠΎΠ±Π»Π°ΡΡΠΈ, Π½Π°Π·ΡΠ²Π°Π΅ΠΌΡΠ΅ Π±ΠΎΠΊΡΠ°ΠΌΠΈ: border box (Π±ΠΎΠΊΡ ΠΏΠΎ Π³ΡΠ°Π½ΠΈΡΡ Π²ΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ), padding box (Π±ΠΎΠΊΡ ΠΏΠΎ ΠΎΡΡΡΡΠΏΡ) ΠΈ content box (Π±ΠΎΠΊΡ ΠΏΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠΌΡ). border box β ΠΎΠ±Π»Π°ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π²ΡΡ Π΅Π³ΠΎ Π²Π½ΡΡΡΠ΅Π½Π½ΡΡ ΡΠ°ΡΡΡ ΠΏΠ»ΡΡ ΠΎΠ±Π»Π°ΡΡΡ, ΠΊΠΎΡΠΎΡΡΡ Π·Π°Π½ΠΈΠΌΠ°ΡΡ ΡΠ°ΠΌΠΈ Π³ΡΠ°Π½ΠΈΡΡ.
Padding box β ΠΎΠ±Π»Π°ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΈΡΠΊΠ»ΡΡΠ°ΡΡΠ°Ρ Π³ΡΠ°Π½ΠΈΡΡ, Π½ΠΎ Π²ΠΊΠ»ΡΡΠ°ΡΡΠ°Ρ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ ΠΎΠΊΡΡΠΆΠ°ΡΡΠΈΠ΅ Π΅Π³ΠΎ ΠΎΡΡΡΡΠΏΡ β ΡΠΊΠ°Π·Π°Π½Π½ΡΠ΅ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° padding
.
Content box β ΠΎΠ±Π»Π°ΡΡΡ, ΡΠΎΠ·Π΄Π°Π½Π½Π°Ρ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΈΡΠΊΠ»ΡΡΠ°ΡΡΠ°Ρ Π»ΡΠ±ΡΠ΅ ΠΎΡΡΡΡΠΏΡ ΠΈ Π³ΡΠ°Π½ΠΈΡΡ.
ΠΠ±Π»Π°ΡΡΠΈ Π±ΠΎΠΊΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π·ΡΡΠΎ ΠΈΠ· CSS-ΡΠΏΡΠ°Π²ΠΎΡΠ½ΠΈΠΊΠ° Π½Π° Codrops, ΡΡΠ°ΡΡΡ ΠΏΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background-origin.
ΠΡΡΡ ΡΠ°ΠΊΠΆΠ΅ ΡΠ΅ΡΠ²ΡΡΡΠ°Ρ ΠΎΠ±Π»Π°ΡΡΡ β Β«margin boxΒ», Π²ΠΊΠ»ΡΡΠ°ΡΡΠ°Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈ Π΅Π³ΠΎ Π²Π½Π΅ΡΠ½ΠΈΠ΅ ΠΏΠΎΠ»Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΡΡ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° margin
.
ΠΠΎΠ³Π΄Π° Π²Ρ Π½Π°Π·Π½Π°ΡΠ°Π΅ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΎΠ½ Π² Π²ΠΈΠ΄Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠ»ΠΈ ΡΠΏΠ»ΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ°, ΡΠΎ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΎΠ½ Π·Π°ΠΊΡΠ°ΡΠΈΠ²Π°Π΅Ρ Π²ΡΡ ΠΎΠ±Π»Π°ΡΡΡ Π³ΡΠ°Π½ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. (ΠΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΡΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° background
-
origin
, Π½ΠΎ ΠΌΡ Π²Π΅ΡΠ½ΡΠΌΡΡ ΠΊ Π½Π΅ΠΌΡ Π² Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ.)
Π§ΡΠΎΠ±Ρ ΡΠΊΠ°Π·Π°ΡΡ, Π³Π΄Π΅ ΠΈΠΌΠ΅Π½Π½ΠΎ Π²Π½ΡΡΡΠΈ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π±ΡΠ΄Π΅Ρ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΡΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠ° ΡΠΈΡΡΠ΅ΠΌΠ° ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠ°Ρ Π΄Π»Ρ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΡ Π² Π½Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ background-position. ΠΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ Π΄Π²ΠΈΠ³Π°ΡΡΡΡ Π΄Π°Π»ΡΡΠ΅, Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠ²Π½ΠΈΠΌΠ°ΡΠ΅Π»ΡΠ½Π΅Π΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΡΡ ΡΠΈΡΡΠ΅ΠΌΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ.
Π‘ΠΈΡΡΠ΅ΠΌΠ° ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΏΠΎ ΡΠ°ΠΌΠΎΠΉ ΠΏΡΠΈΡΠΎΠ΄Π΅ Π±ΠΎΠΊΡΠΎΠ²ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² CSS, Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π΅ΡΡΡ ΡΠΈΡΡΠ΅ΠΌΠ° ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ Π΅Π³ΠΎ Π²ΡΡΠΎΡΠΎΠΉ ΠΈ ΡΠΈΡΠΈΠ½ΠΎΠΉ. ΠΡΠ° ΡΠΈΡΡΠ΅ΠΌΠ° ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄ΡΡΠ³ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½Π΅Π³ΠΎ ΡΠ°ΠΌΠΎΠ³ΠΎ.
Π£ HTML-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π΅ΡΡΡ ΡΠΈΡΡΠ΅ΠΌΠ° ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ Π² CSS. Π£ SVG-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π½Π°ΠΏΡΠΎΡΠΈΠ², Π½Π΅Ρ ΠΏΠΎΡ
ΠΎΠΆΠ΅ΠΉ ΡΠΈΡΡΠ΅ΠΌΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ΠΈ Π½Π΅ ΡΠ΅Π³Π»Π°ΠΌΠ΅Π½ΡΠΈΡΡΡΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠ΅ΠΉ Π±ΠΎΠΊΡΠΎΠ²ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ.
ΠΠ°ΡΠ°Π»ΡΠ½Π°Ρ ΡΠΎΡΠΊΠ° ΡΠΈΡΡΠ΅ΠΌΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ Π² CSS ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π° Π² Π»Π΅Π²ΠΎΠΌ Π²Π΅ΡΡ Π½Π΅ΠΌ ΡΠ³Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠ±Π»Π°ΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ½Π° ΡΠ°ΠΊΠΆΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠΈΡΡΠ΅ΠΌΠΎΠΉ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ, ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΠΎΠΉ Π΄Π»Ρ Π½Π΅Π΅, ΠΈ ΡΠ»ΡΠΆΠΈΡ Π΄Π»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΡΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ. Π£ ΡΡΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ Π½Π°ΡΠ°Π»ΡΠ½Π°Ρ ΡΠΎΡΠΊΠ° ΡΠΎΠΆΠ΅ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² Π²Π΅ΡΡ Π½Π΅ΠΌ Π»Π΅Π²ΠΎΠΌ ΡΠ³Π»Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΎΠ±Π»Π°ΡΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ²Π»ΡΠ΅ΡΡΡ padding box, ΡΠΎ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ ΡΠΎΡΠΊΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ½Π° Π±ΡΠ΄Π΅Ρ Π²Π΅ΡΡ Π½ΠΈΠΉ Π»Π΅Π²ΡΠΉ ΡΠ³ΠΎΠ» ΠΎΠ±Π»Π°ΡΡΠΈ Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π³ΠΎ ΠΎΡΡΡΡΠΏΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ, ΠΊΠΎΠ³Π΄Π° Π²Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π±ΡΠ°ΡΠ·Π΅Ρ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠ΅ΡΠ²ΠΎΠ΅ ΠΈ ΠΏΠΎΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π½Π°ΡΠΈΠ½Π°Ρ ΠΎΡ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΡΠ³Π»Π° ΠΎΠ±Π»Π°ΡΡΠΈ Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π³ΠΎ ΠΎΡΡΡΡΠΏΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ Ρ Π²Π°Ρ Π΅ΡΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΏΡΠΈΠΌΠ΅Π½ΡΠ½Π½ΠΎΠ΅ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΈ Π²Ρ Π½Π΅ Π·Π°Π΄Π°Π»ΠΈ Π΅ΠΌΡ ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΠ΅ (ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΡΠΊΠ·Π΅ΠΌΠΏΠ»ΡΡ ΡΡΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ). ΠΡΡ
ΠΎΠ΄Π½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠ΅ΠΉ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²Π½ΡΡΡΠΈ ΡΠΈΡΡΠ΅ΠΌΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ Π±ΡΠ΄Π΅Ρ Π½Π°ΡΠ°Π»ΡΠ½Π°Ρ ΡΠΎΡΠΊΠ° ΡΠΈΡΡΠ΅ΠΌΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ padding box. ΠΠΎΡΡΠΎΠΌΡ Π²Π΅ΡΡ
Π½ΠΈΠΉ Π»Π΅Π²ΡΠΉ ΡΠ³ΠΎΠ» ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ Π² Π²Π΅ΡΡ
Π½Π΅ΠΌ Π»Π΅Π²ΠΎΠΌ ΡΠ³Π»Ρ Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π³ΠΎ ΠΎΡΡΡΡΠΏΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. (Π‘ΠΌ. ΠΆΠΈΠ²ΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ Π½ΠΈΠΆΠ΅.)
Π ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½Π° ΠΏΠΎΠ»ΡΠΏΡΠΎΠ·ΡΠ°ΡΠ½Π°Ρ Π³ΡΠ°Π½ΠΈΡΠ° Π² 20px. ΠΠ°ΠΌΠ΅ΡΡΡΠ΅, ΠΊΠ°ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ Π² Π²Π΅ΡΡ Π½Π΅ΠΌ Π»Π΅Π²ΠΎΠΌ ΡΠ³Π»Ρ Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π³ΠΎ ΠΎΡΡΡΡΠΏΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π»ΡΠ±Π΅Π·Π½ΠΎ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½ΠΎ Freepik.com
ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background
-
position
, ΠΎ ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΌΡ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ Π² ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²Π½ΡΡΡΠΈ ΡΡΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ.
ΠΠΎ ΠΊΠ°ΠΊ ΡΠΏΠΎΠΌΠΈΠ½Π°Π»ΠΎΡΡ ΡΠ°Π½Π΅Π΅, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΎΠ±Π»Π°ΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ½Π°, ΠΈ ΡΡΠΎ, Π² ΡΠ²ΠΎΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ, ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ Π½Π°ΡΠ°Π»ΡΠ½ΡΡ ΡΠΎΡΠΊΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ Π΄Π»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²Π½ΡΡΡΠΈ ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠΎΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ½Π° ΠΈ ΡΠΈΡΡΠ΅ΠΌΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ
background
-
origin
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ background
-
origin
ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ, ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π½Π°ΡΠ°Π»ΡΠ½ΡΡ ΡΠΎΡΠΊΡ ΡΠΈΡΡΠ΅ΠΌΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ½Π°.
ΠΠ½ΠΎ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΡΡΡΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ: padding
-
box
(Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ), content
-
box
ΠΈ border
-
box
.
Π Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π²ΡΠ±ΠΎΡΠ° ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ½Π°, ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅ΠΉ ΡΠΎΡΠΊΠ΅ ΠΎΡΡΡΠ΅ΡΠ° Π΄Π»Ρ ΡΠΎΠ½Π° β Π½Π°ΡΠ°Π»ΡΠ½Π°Ρ ΡΠΎΡΠΊΠ° ΡΠΈΡΡΠ΅ΠΌΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ, ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΠΎΠΉ Π΄Π»Ρ ΡΡΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ β ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡ, ΠΈ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ (ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ) ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΠΆΠ΅.
Π‘Π»Π΅Π΄ΡΡΡΠΈΠΉ ΠΆΠΈΠ²ΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΠ°Π·Π½ΡΠ΅ ΠΈΡΡ ΠΎΠ΄Π½ΡΠ΅ ΡΠΎΡΠΊΠΈ ΡΠΎΠ½Π°/ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΠΈ.
Π‘ΠΌΠΎΡΡΠΈΡΠ΅ ΠΏΡΠΈΠΌΠ΅Ρ Π‘Π°ΡΡ Π‘ΡΡΠΉΠ΄Π΅Π½ (@SaraSoueidan) Β«Π Π°Π·Π½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ background-originΒ» Π½Π° CodePen.
ΠΠ»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ½Π°, ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ background
-
origin
, ΡΠΈΡΡΠ΅ΠΌΠ° ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ Π±ΡΠ΄Π΅Ρ ΡΠ΄Π²ΠΈΠ³Π°ΡΡΡΡ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΊΡΡΡΡ ΡΡΡ ΠΎΠ±Π»Π°ΡΡΡ.
ΠΠ°ΡΠ΅ΠΌ, Π² ΡΡΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΠ΅ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background
-
position
.
Π Π°Π΄ΠΈ ΠΏΡΠΎΡΡΠΎΡΡ, Π² ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠΉ ΡΠ°ΡΡΠΈ ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠΈ, ΠΌΡ ΠΎΡΡΠ°Π²ΠΈΠΌ ΠΎΠ±Π»Π°ΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΠΎΡΡΠΎΠΌΡ Π²ΡΠ΅ Π½Π°ΡΠΈ ΠΏΡΠΈΠΌΠ΅ΡΡ Π±ΡΠ΄ΡΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½Ρ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΠΎΠ½ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ Π² ΠΎΠ±Π»Π°ΡΡΠΈ ΠΎΡΡΡΡΠΏΠ°.
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ
background
-
position
Π ΠΏΡΠΎΡΠ»ΠΎΠΌ ΡΠ°Π·Π΄Π΅Π»Π΅ ΠΌΡ Π²ΠΈΠ΄Π΅Π»ΠΈ, ΠΊΠ°ΠΊ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ Π² Π»Π΅Π²ΠΎΠΌ Π²Π΅ΡΡ
Π½Π΅ΠΌ ΡΠ³Π»Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΠΡΠΎ ΡΠ²ΡΠ·Π°Π½ΠΎ Ρ ΡΠ΅ΠΌ, ΡΡΠΎ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° background
-
position
ΡΠ°Π²Π½ΠΎ 0% 0%.
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄Π»Ρ background
-
position
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅. Π background
-
position
ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΡΡΠ°Π²Π»ΡΡΡ Π»ΠΈΠ±ΠΎ ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΠΎΠ΅, Π»ΠΈΠ±ΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΎΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· ΡΠ΅ΡΡΡΡΡ
ΠΊΡΠ°ΡΠ² ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ (Π²Π²Π΅ΡΡ
, ΠΏΡΠ°Π²ΠΎ, Π½ΠΈΠ·, Π»Π΅Π²ΠΎ)
Π£Π³Π»Ρ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ ΡΠΈΡΡΠ΅ΠΌΠ° ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ Π² CSS.
Π Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΡΠΌ ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌ, Π΄Π»Ρ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅ΡΡ ΠΈ ΠΏΡΡΡ ΠΊΠ»ΡΡΠ΅Π²ΡΡ
ΡΠ»ΠΎΠ²: top
, right
, bottom
, left
ΠΈ center
.
ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½Π° ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΠΈΡΡΠ²Π°ΡΡ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΡΠΊΠ°Π·Π°Π½ΠΈΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ (ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ΅ ΡΠ»ΠΎΠ²ΠΎ, ΠΏΡΠΎΡΠ΅Π½ΡΡ ΠΈΠ»ΠΈ Π΄Π»ΠΈΠ½Π°), Π΄Π²ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ (ΠΏΠ°ΡΠ° Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ Ρ ΡΠ΅ΠΌΠΈ ΠΆΠ΅ ΡΡΠ΅ΠΌΡ Π²Π°ΡΠΈΠ°Π½ΡΠ°ΠΌΠΈ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ) ΠΈΠ»ΠΈ ΡΠ΅ΡΡΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ (ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ΅ ΡΠ»ΠΎΠ²ΠΎ ΠΈ ΡΠΈΡΠ»ΠΎΠ²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅Π³ΠΎ ΠΊΡΠ°Ρ). ΠΡ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΎΠ± ΡΡΠΎΠΌ Π±ΠΎΠ»Π΅Π΅ Π΄Π΅ΡΠ°Π»ΡΠ½ΠΎ Π² ΠΏΠΎΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΡΠ°Π·Π΄Π΅Π»Π°Ρ .
background-position: top left;
background-position: 50px 30%;
background-position: top 25%;
background-position: right 10px bottom 20px;
background-position: center center
background-position: 10px 20px;
background-position: 5em 2em;
background-position: 75% 50%;
ΠΡΠ»ΠΈ Π²Ρ ΡΠΊΠ°ΠΆΠΈΡΠ΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΡΠΎ Π²ΡΠΎΡΠΎΠ΅ Π±ΡΠ΄Π΅Ρ ΡΡΠΈΡΠ°ΡΡΡΡ, ΠΊΠ°ΠΊ center
. ΠΡΠ»ΠΈ ΡΠΊΠ°ΠΆΠΈΡΠ΅ Π΄Π²Π° Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΡΠΎ ΠΏΠ΅ΡΠ²ΠΎΠ΅ Π±ΡΠ΄Π΅Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΡ Π»Π΅Π²ΠΎΠ³ΠΎ ΡΠ³Π»Π° β Ρ.Π΅. Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ, Π° Π²ΡΠΎΡΠΎΠ΅ β ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π²Π½ΠΈΠ· ΠΎΡ Π²Π΅ΡΡ
Π½Π΅Π³ΠΎ ΡΠ³Π»Π° β Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ.
background-position: 10% 50%; /* ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π½Π° 10% Π²ΠΏΡΠ°Π²ΠΎ, ΠΈ 50% Π²Π½ΠΈΠ· ΠΎΡ Π²Π΅ΡΡ Π° */ background-position: top; /* ΠΈΠ΄Π΅Π½ΡΠΈΡΠ½ΠΎ `top center` */ background-position: 50px; /* ΠΈΠ΄Π΅Π½ΡΠΈΡΠ½ΠΎ `50px center` */
ΠΠΎΠΆΠ½ΠΎ ΡΠΌΠ΅ΡΠΈΠ²Π°ΡΡ ΠΈ ΡΠΎΡΠ΅ΡΠ°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΡΡ Π΄Π»ΠΈΠ½Ρ Ρ ΠΏΡΠΎΡΠ΅Π½ΡΠ°ΠΌΠΈ ΠΈ/ΠΈΠ»ΠΈ ΠΊΠ»ΡΡΠ΅Π²ΡΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ. ΠΠ°ΠΌΠ΅ΡΡΡΠ΅, ΡΡΠΎ ΠΏΠ°ΡΡ ΠΊΠ»ΡΡΠ΅Π²ΡΡ
ΡΠ»ΠΎΠ² ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅Π½ΡΡΡ ΠΌΠ΅ΡΡΠ°ΠΌΠΈ, ΡΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ³ΠΎ ΡΠ»ΠΎΠ²Π° ΠΈ Π΄Π»ΠΈΠ½Ρ Π»ΠΈΠ±ΠΎ ΠΏΡΠΎΡΠ΅Π½ΡΠΎΠ² β Π½Π΅Π»ΡΠ·Ρ. ΠΠΎΡΡΠΎΠΌΡ center
left
β ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½Π°Ρ Π·Π°ΠΏΠΈΡΡ, Π° 50%
left
β Π½Π΅Ρ, ΠΎΠ½Π° Π΄ΠΎΠ»ΠΆΠ½Π° Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ: left
50%
. ΠΡΠΈ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ³ΠΎ ΡΠ»ΠΎΠ²Π° ΠΈ Π΄Π»ΠΈΠ½Ρ ΠΈΠ»ΠΈ ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΏΠ΅ΡΠ²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π²ΡΠ΅Π³Π΄Π° ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ Π·Π° Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅, Π° Π²ΡΠΎΡΠΎΠ΅ β Π·Π° Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅.
Π‘ΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎ Π³ΠΎΠ²ΠΎΡΡ, ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ΅ ΡΠ»ΠΎΠ²ΠΎ β ΡΡΠΎ ΡΠΎΠΊΡΠ°ΡΡΠ½Π½Π°Ρ Π·Π°ΠΏΠΈΡΡ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΡΡ
ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΡΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ. Π’ΠΎΡΠ½Π΅Π΅ ΡΠΊΠ°Π·Π°ΡΡ:
top
β ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ 0%
ΠΎΡ Π²Π΅ΡΡ
Π½Π΅Π³ΠΎ ΠΊΡΠ°Ρ, bottom
β ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ 100%
ΠΎΡ Π²Π΅ΡΡ
Π½Π΅Π³ΠΎ ΠΊΡΠ°Ρ, left
β ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ 0%
ΠΎΡ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ, right
β ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ 100%
ΠΎΡ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ, Π° center
β ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ 50%
Π² ΡΠΎΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ (Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΌ ΠΈΠ»ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΌ), ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΠΎΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ.
ΠΠ°ΡΠ½ΡΠΌ Ρ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠΈΠΏ Π·Π½Π°ΡΠ΅Π½ΠΈΡ β Π²Π΅ΡΠΎΡΡΠ½ΠΎ, ΡΡΠΎ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½Π°Ρ Π²Π΅ΡΡ, Ρ.ΠΊ. Π΅ΡΡΡ ΡΡΠ½Π΄Π°ΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠ°Π·Π»ΠΈΡΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ΅ΠΌ, ΠΊΠ°ΠΊ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅Ρ ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΡ ΠΈ ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡΡ . ΠΠΎ Ρ ΠΎΠ΄Ρ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ ΠΌΡ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ Π±ΠΎΠ»ΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ².
ΠΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ background-position
ΠΡΠΈ ΡΠΊΠ°Π·Π°Π½ΠΈΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π² Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΡ
Π΅Π΄ΠΈΠ½ΠΈΡΠ°Ρ
, Π²Ρ ΡΠΌΠ΅ΡΠ°Π΅ΡΠ΅ Π²Π΅ΡΡ
Π½ΠΈΠΉ ΡΠ³ΠΎΠ» ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ ΡΠΈΡΠ»ΠΎ. ΠΡΡΠ³ΠΈΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠ΅ΡΠ΅Π΄Π²ΠΈΠ½Π΅ΡΡΡ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ Π΅Π³ΠΎ Π²Π΅ΡΡ
Π½ΠΈΠΉ Π»Π΅Π²ΡΠΉ ΡΠ³ΠΎΠ» ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π»ΡΡ Π½Π° ΡΠΊΠ°Π·Π°Π½Π½ΡΠ΅ Π² Π·Π½Π°ΡΠ΅Π½ΠΈΠΈ background
-
position
ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ.
ΠΡΡΡΠΈΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΎΠ±ΡΡΡΠ½ΠΈΡΡ ΠΈ ΠΏΠΎΠ½ΡΡΡ ΡΡΠΎ β ΠΏΠΎΠΊΠ°Π·Π°ΡΡ Π½Π°Π³Π»ΡΠ΄Π½ΠΎ, ΠΏΠΎΡΡΠΎΠΌΡ Π·Π΄Π΅ΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΎ Π΄Π²Π° ΠΏΡΠΈΠΌΠ΅ΡΠ° Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΡΠΎΠ½Π° ΠΈ ΡΠΎ, ΠΊΠ°ΠΊ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΡΠ΅Π°Π»ΠΈΠ·ΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ. ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² ΡΡΠΈΡ Π΄Π²ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠ°Ρ Π·Π°Π΄Π°Π½ ΡΠ°Π·ΠΌΠ΅Ρ 100px Π½Π° 80px.
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ.
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΌ. Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΌΠ΅ΡΡΠΈΡΡΡ Π² ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ ΠΎΡ ΠΊΡΠ°Ρ.
ΠΡΠΈΠΌΠ΅Ρ, ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡΠΈΠΉ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ.
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΡΠΎΠ½Π° Π² ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΆΠΈΠ²ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΎ Π²Π»ΠΈΡΠ΅Ρ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. Π ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅!
ΠΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ background-position
Π ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π² Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΡ
Π΅Π΄ΠΈΠ½ΠΈΡΠ°Ρ
Π΄Π»ΠΈΠ½Ρ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π΄Π²ΠΈΠ³Π°Π΅Ρ Π²Π΅ΡΡ
Π½ΠΈΠΉ Π»Π΅Π²ΡΠΉ ΡΠ³ΠΎΠ» ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π° ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅, ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅Ρ ΡΠΎΡΠΊΡ Π² X% ΠΎΡ Π»Π΅Π²ΠΎΠ³ΠΎ (Π΄Π»Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΡΠΎΡΡΠ°Π²Π»ΡΡΡΠ΅ΠΉ) ΠΈΠ»ΠΈ Π²Π΅ΡΡ
Π½Π΅Π³ΠΎ (Π΄Π»Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΉ) ΠΊΡΠ°Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΡΠΎΡΠΊΠΎΠΉ Π² X% ΠΎΡ Π»Π΅Π²ΠΎΠ³ΠΎ (Π΄Π»Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ) ΠΈΠ»ΠΈ Π²Π΅ΡΡ
Π½Π΅Π³ΠΎ (Π΄Π»Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΉ) ΠΊΡΠ°Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ 0% 0%
Π²ΡΡΠΎΠ²Π½ΡΠ΅Ρ ΡΠΎΡΠΊΡ 0% 0%
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ Ρ ΡΠΎΡΠΊΠΎΠΉ 0% 0%
Π² ΡΠΈΡΡΠ΅ΠΌΠ΅ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ½Π°. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ 50% 75%
ΡΠ²ΠΎΠΉΡΡΠ²Π° background-position Π²ΡΡΠΎΠ²Π½ΡΠ΅Ρ ΡΠΎΡΠΊΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π² 50%
ΠΎΡ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΈ Π² 75%
ΠΎΡ Π²Π΅ΡΡ
Π½Π΅Π³ΠΎ ΠΊΡΠ°Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΡΠΎΡΠΊΠΎΠΉ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π° Π½Π° 50% 75%
Π² ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ½Π°.
Π ΡΠ½ΠΎΠ²Π°, Π»ΡΡΡΠ΅ ΠΎΠ±ΡΡΡΠ½ΠΈΡ Π½Π°Π³Π»ΡΠ΄Π½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ. ΠΠ°ΠΌΠ΅ΡΡΡΠ΅, ΠΊΠ°ΠΊ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ background-position ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΠΎΡΠΊΡ ΡΡΠΈΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ Π²Π½ΡΡΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π° Π·Π°ΡΠ΅ΠΌ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅Ρ ΡΡΡ ΡΠΎΡΠΊΡ Ρ ΡΠΎΡΠΊΠΎΠΉ Π² ΡΠ΅Ρ ΠΆΠ΅ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΠ°Ρ Π² ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ..
ΠΠ°ΠΊ ΠΈ Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌΠΈ Π΅Π΄ΠΈΠ½ΠΈΡΠ°ΠΌΠΈ Π΄Π»ΠΈΠ½Ρ, ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΠΎΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π² ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΡΡ
, ΠΈ ΠΎΠ½ΠΈ ΠΏΠ΅ΡΠ΅Π΄Π²ΠΈΠ½ΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π² ΠΏΡΠΎΡΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ Π½Π° ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅ΠΉ ΠΎΡΠΈ. ΠΠΎΡΡΠΎΠΌΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ
-10% -30%
ΡΠΌΠ΅ΡΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° 10% Π²Π»Π΅Π²ΠΎ ΠΎΡ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΠΈ Π½Π° 30% Π²Π²Π΅ΡΡ
.
ΠΠΎΠΈΠ³ΡΠ°ΠΉΡΠ΅ ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ Π² ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
Π‘ΠΌΠΎΡΡΠΈΡΠ΅ ΠΏΡΠΈΠΌΠ΅Ρ Π‘Π°ΡΡ Π‘ΡΡΠΉΠ΄Π΅Π½ (@SaraSoueidan) Β«background-position Example#2Β» Π½Π° CodePen.
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π² ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΡ Π΄Π²ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠ°Ρ Π΄Π΅Π»Π°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ ΠΈ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°ΡΠ². Π’Π΅ΠΏΠ΅ΡΡ Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΡΡ ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ»ΠΎΠ²Π° Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΡΠΈΡΠ»Π΅Π½Π½ΡΠΌΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ (ΠΏΡΠΎΡΠ΅Π½ΡΠ°ΠΌΠΈ ΠΈΠ»ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌΠΈ Π΅Π΄ΠΈΠ½ΠΈΡΠ°ΠΌΠΈ), ΡΡΠΎΠ±Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²Π΄ΠΎΠ»Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ½Π° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΈΠ· ΡΠ΅ΡΡΡΡΡ ΠΊΡΠ°ΡΠ² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π‘ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ
Π ΠΏΡΠΈΠΌΠ΅ΡΠ°Ρ
ΠΈΠ· ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΡ
Π΄Π²ΡΡ
ΡΠ°Π·Π΄Π΅Π»ΠΎΠ² ΠΌΡ ΡΠΊΠ°Π·ΡΠ²Π°Π»ΠΈ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΈ Π²ΠΈΠ΄Π΅Π»ΠΈ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ, ΡΡΠΎΠ±Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²Π΅ΡΡ
Π½Π΅Π³ΠΎ ΠΈ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ β Ρ.Π΅. ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄Π»Ρ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ»ΠΈ Π΄Π²ΡΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ background
-
position
.
ΠΠΎΠ³Π΄Π° ΠΌΡ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΠ΅ΠΌ Π² ΡΠ΅ΡΡΡΡΡ Π·Π½Π°ΡΠ½ΡΠΉ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ»ΠΎΠ²Π° Π΄Π»Ρ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Ρ ΡΠΈΡΠ»Π΅Π½Π½ΡΠΌΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ, ΠΌΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΌΠ΅ΡΡΠΈΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡ ΠΏΡΠ°Π²ΠΎΠ³ΠΎ ΠΈ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΡΠ°ΡΠ² ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
Π§ΡΠΎΠ±Ρ ΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ, Π²ΡΡ ΡΡΠΎ Π½Π°ΠΌ Π½Π°Π΄ΠΎ, ΡΡΠΎ ΡΠΊΠ°Π·Π°ΡΡ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΊΡΠ°Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π½ΡΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ, Π·Π° ΠΊΠΎΡΠΎΡΡΠΌ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ ΡΠΈΡΠ»ΠΎ (Π² Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΡ ΠΈΠ»ΠΈ ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡΡ ), Π½Π° ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠΌΠ΅ΡΡΠΈΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡ ΡΠ°ΠΌΠΎΠ³ΠΎ ΠΊΡΠ°Ρ.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π² ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠ΅ΡΡΡΡΡ Π·Π½Π°ΡΠ½ΡΠΉ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ:
background
-
position
:top
1
em
right
3
em
; /* ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ Π½Π° 1
em
Π²Π½ΠΈΠ· ΠΎΡ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ ΡΠ³Π»Π° ΠΈ Π½Π° 3
em
Π²Π»Π΅Π²ΠΎ ΠΎΡ ΠΏΡΠ°Π²ΠΎΠ³ΠΎ ΡΠ³Π»Π° */
background
-
position
:right
1
em
bottom
1
em
; /* ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ Π½Π° 1
em
Π²Π²Π΅ΡΡ ΠΎΡ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΡΠ³Π»Π° ΠΈ 1
em
Π²Π»Π΅Π²ΠΎ ΠΎΡ ΠΏΡΠ°Π²ΠΎΠ³ΠΎ ΡΠ³Π»Π° */
background-position: left 20px bottom 50px;
ΠΡΠ»ΠΈ ΡΠΊΠ°Π·Π°Π½ΠΎ ΡΡΠΈ ΠΈΠ· ΡΠ΅ΡΡΡΡΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ, ΡΠ΅ΡΠ²ΡΡΡΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΈΡΠ°Π²Π½ΠΈΠ²Π°Π΅ΡΡΡ ΠΊ Π½ΡΠ»Ρ.
ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ΅ΡΡΡΡΡ
Π·Π½Π°ΡΠ½ΠΎΠ³ΠΎ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ° ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΊΠΎΠ΅-ΡΡΠΎ ΠΏΠΎΠΌΠ½ΠΈΡΡ: ΠΊΠΎΠ³Π΄Π° ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½ΠΎ ΡΡΠΈ ΠΈΠ»ΠΈ ΡΠ΅ΡΡΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΡΠΎΠ³Π΄Π° ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ Π΄Π»ΠΈΠ½Π° ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΠ΄ΡΠΈ Π·Π° ΠΊΠ»ΡΡΠ΅Π²ΡΠΌ ΡΠ»ΠΎΠ²ΠΎΠΌ, ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΠΈΠΌ ΠΊΡΠ°ΠΉ, ΠΎΡ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠΌΠ΅ΡΠ°ΡΡΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, background
-
position
: bottom
10
px
right
20
px
ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π½Π° 10px Π²Π²Π΅ΡΡ
ΠΎΡ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΡΠ°Ρ ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π½Π° 20px Π²Π»Π΅Π²ΠΎ ΠΎΡ ΠΏΡΠ°Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ. ΠΡΠ»ΠΈ ΡΠΊΠ°Π·Π°Π½ΠΎ ΡΡΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, Π½Π΅Π΄ΠΎΡΡΠ°ΡΡΠ΅Π΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΈΡΠ°Π²Π½ΠΈΠ²Π°Π΅ΡΡΡ ΠΊ Π½ΡΠ»Ρ. ΠΡΠ»ΠΈ Π²Ρ ΡΠΊΠ°ΠΆΠΈΡΠ΅ Π΄Π²Π° ΡΠΈΡΠ»Π΅Π½Π½ΡΡ
ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΈ ΠΎΠ΄Π½ΠΎ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ΅ ΡΠ»ΠΎΠ²ΠΎ, ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ Π½Π΅Π²Π΅ΡΠ½ΡΠΌ ΠΈ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ 0% 0%
β Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.
Π§ΡΠΎΠ±Ρ Π»ΡΡΡΠ΅ ΡΡΠΎ ΠΏΠΎΠ½ΡΡΡ, ΠΏΠΎΠΈΠ³ΡΠ°ΠΉΡΠ΅ΡΡ ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° background
-
position
Π² ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΆΠΈΠ²ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅. ΠΠ»Ρ Π»ΡΡΡΠ΅Π³ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ½Π°ΡΠ°Π»Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΎ ΡΠΌΠ΅ΡΠ°Π»ΠΎΡΡ Π½Π° 0 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΎΡ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΈ 2em ΠΎΡ ΠΏΡΠ°Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ.
ΠΡΠΎ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ, ΠΊΠΎΠ³Π΄Π° Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΎΡ ΠΏΡΠ°Π²ΠΎΠ³ΠΎ ΠΈ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΡΠ°ΡΠ², ΡΡΠΎ ΡΠ΄Π΅Π»Π°Π΅Ρ ΡΡΡ Π·Π°Π΄Π°ΡΡ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Π»Π΅Π³ΡΠ΅, ΡΠ΅ΠΌ Π²ΡΠ½ΡΠΆΠ΄Π΅Π½Π½ΠΎΠ΅ Π²ΡΡΡΠΈΡΡΠ²Π°Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠΉ ΠΎΡ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ ΠΈ Π»Π΅Π²ΠΎΠ³ΠΎ ΡΠ³Π»ΠΎΠ².
Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ², ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΠ΅, ΠΎΠ±ΡΠ΅Π·ΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅!
ΠΠΎΠΌΠ½ΠΈΡΠ΅, ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ (ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Π½ΡΡ
Π² Π²ΠΈΠ΄Π΅ ΡΠΏΠΈΡΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΡΠ°Π·Π΄Π΅Π»ΡΠ½Π½ΠΎΠ³ΠΎ Π·Π°ΠΏΡΡΡΠΌΠΈ Π² background
-
image
) ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΡΡ ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ; ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΡΠ°ΠΊΠΆΠ΅ ΡΠ°Π·Π΄Π΅Π»ΡΡΡΡΡ Π·Π°ΠΏΡΡΡΠΌΠΈ.
Π ΠΎΠ±ΡΠ΅ΠΌ, Π΅ΡΡΡ Π΄Π΅Π²ΡΡΡ CSS-ΡΠ²ΠΎΠΉΡΡΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΏΡΠ°Π²Π»ΡΡΡ ΡΠ°ΡΠΊΠ»Π°Π΄ΠΊΠΎΠΉ, ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ, ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΈ Π·Π°ΠΊΡΠ°ΡΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΎΠ½ΠΎΠ²ΡΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Π²ΠΊΠ»ΡΡΠ°Ρ ΡΠΎΠΊΡΠ°ΡΡΠ½Π½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΠΈ ΡΠ±ΡΠΎΡΠ° Π΄ΡΡΠ³ΠΈΡ
ΡΠΎΠΊΡΠ°ΡΡΠ½Π½ΡΡ
ΡΠ²ΠΎΠΉΡΡΠ². ΠΠ°ΠΆΠ΄ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π΄Π΅Π»Π°ΡΡ ΡΡΠΎ-Π½ΠΈΠ±ΡΠ΄Ρ ΠΎΠ΄Π½ΠΎ, Π° Π²ΠΌΠ΅ΡΡΠ΅ ΠΎΠ½ΠΈ Π΄Π°ΡΡ Π½Π°ΠΌ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ Π½Π°Π΄ ΡΠ΅ΠΌ, ΠΊΠ°ΠΊ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΊ Π»ΡΠ±ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² HTML.
ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΡΠ΅ΠΏΠ΅ΡΡ, ΠΏΠΎΠΌΠΈΠΌΠΎ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ
ΡΠ²ΠΎΠΉΡΡΠ² Π΄Π»Ρ ΡΠΎΠ½Π°, Π΅ΡΡΡ ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΠΊ ΡΠΎΠ½ΠΎΠ²ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ, ΠΏΠΎΡ
ΠΎΠΆΠΈΠ΅ Π½Π° ΡΡΡΠ΅ΠΊΡΡ, Π΄ΠΎΡΡΡΠΏΠ½ΡΠ΅ Π² ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ°Ρ
ΡΠΈΠΏΠ° Photoshop β Π² ΡΠ°ΡΡΠ½ΠΎΡΡΠΈ, ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background
-
blend
-
mode
. ΠΡΠ»ΠΈ Π²Π°ΠΌ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ ΠΈΠ·ΡΡΠΈΡΡ Π²ΡΡ ΠΎ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π² CSS, ΡΠΎ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ ΠΎΠ± ΡΡΠΎΠΌ Π² ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅.
Π― Π½Π°Π΄Π΅ΡΡΡ, ΡΡΠΎ ΡΡΠ° ΡΡΠ°ΡΡΡ ΠΎΠΊΠ°Π·Π°Π»Π°ΡΡ Π΄Π»Ρ Π²Π°Ρ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ. Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ Π·Π° ΡΡΠ΅Π½ΠΈΠ΅.
P.S. ΠΡΠΎ ΡΠΎΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ:
ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ | HTML Dog
Π§ΡΠΎΠ±Ρ ΡΠ³Π»ΡΠ±ΠΈΡΡΡΡ Π² Π³Π»ΡΠ±ΠΈΠ½Ρ, ΡΠΎΠΊΡΠ°ΡΠ΅Π½Π½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background
ΠΌΠΎΠΆΠ΅Ρ ΠΈΠΌΠ΅ΡΡ Π΄Π΅Π»ΠΎ ΡΠΎ Π²ΡΠ΅ΠΌΠΈ ΠΎΡΠ½ΠΎΠ²Π½ΡΠΌΠΈ Π°ΡΠΏΠ΅ΠΊΡΠ°ΠΌΠΈ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΡΠ΅Π»ΠΎ {
ΡΠΎΠ½: Π±Π΅Π»ΡΠΉ URL (http://www.htmldog.com/images/bg.gif) Π±Π΅Π· ΠΏΠΎΠ²ΡΠΎΡΠ° Π²Π²Π΅ΡΡ
Ρ ΡΠΏΡΠ°Π²Π°;
}
ΠΡΠΎ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΠ΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°:
-
background-color
, Ρ ΠΊΠΎΡΠΎΡΡΠΌΠΈ ΠΌΡ ΡΡΠ°Π»ΠΊΠΈΠ²Π°Π»ΠΈΡΡ ΡΠ°Π½ΡΡΠ΅. -
background-image
, Π³Π΄Π΅ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΡΠ°ΠΌΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. -
background-repeat
, ΡΠ°ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ²ΡΠΎΡΡΠ΅ΡΡΡ. ΠΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ:-
ΠΏΠΎΠ²ΡΠΎΡ
, ΡΠΊΠ²ΠΈΠ²Π°Π»Π΅Π½Ρ ΡΡΡΠ΅ΠΊΡΠ° Β«ΠΏΠ»ΠΈΡΠΊΠΈΒ» ΠΏΠΎ Π²ΡΠ΅ΠΌΡ ΡΠΎΠ½Ρ, -
repeat-y
, ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΠΎΡΠΈ y, Π²Π²Π΅ΡΡ Ρ ΠΈ Π²Π½ΠΈΠ·Ρ, -
repeat-x
(ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΠΎΡΠΈ x, ΡΡΠ΄ΠΎΠΌ) ΠΈΠ»ΠΈ -
no-repeat
(ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΡΠΊΠ·Π΅ΠΌΠΏΠ»ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ).
-
-
background-position
, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡΠ²Π΅ΡΡ Π½ΠΈΠΉ
,ΡΠ΅Π½ΡΡ
,Π½ΠΈΠΆΠ½ΠΈΠΉ
,Π»Π΅Π²ΡΠΉ
,ΠΏΡΠ°Π²ΡΠΉ
, Π΄Π»ΠΈΠ½Π°, ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΠΎΠ΅ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ Π»ΡΠ±Π°Ρ ΡΠ°Π·ΡΠΌΠ½Π°Ρ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅ΡΠ²Π΅ΡΡ Π½ΠΈΠΉ ΠΏΡΠ°Π²ΡΠΉ
.
ΠΠΎΠ²ΡΠΉ ΡΠ°Π·Π΄Π΅Π» ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ²! ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π½Π° Π²Π΅ΡΡ ΡΡΠΎΡ ΠΊΠΎΠ΄ Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΠΈ ΠΈ ΠΏΠΎΠΈΠ³ΡΠ°ΠΉΡΠ΅ Ρ Π½ΠΈΠΌ.
ΠΠ΅ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΠΈΠΉΡΡ ΡΠΎΠ½ Π² ΠΏΡΠ°Π²ΠΎΠΌ Π²Π΅ΡΡ Π½Π΅ΠΌ ΡΠ³Π»Ρ. ΠΠ° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ°ΠΊΠΆΠ΅ Π΄Π»Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ
Π΄ΡΡΠ³ΠΈΡ
ΡΡΠ½ΠΊΡΠΈΠΉ ΡΠΎΠ½Π°, Π² ΡΠ°ΡΡΠ½ΠΎΡΡΠΈ, ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»Π΅Π½ΠΈΡ, ΠΊΠ»ΠΈΠΏΠ°, ΠΏΡΠΎΠΈΡΡ
ΠΎΠΆΠ΄Π΅Π½ΠΈΡ ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ° (ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ ΡΠΌ. Π ΡΠΏΡΠ°Π²ΠΊΠ΅ ΠΏΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Ρ
background
), Π½ΠΎ Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠΊΠ° Π½Π΅ Π±ΡΠ΄Π΅ΠΌ ΡΠ²Π»Π΅ΠΊΠ°ΡΡΡΡ β ΡΠ²Π΅Ρ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΏΠΎΠ²ΡΠΎΡ ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ β Π±Π΅Π·ΡΡΠ»ΠΎΠ²Π½ΠΎ, ΡΠ°ΠΌΡΠ΅ ΡΡΠ½Π΄Π°ΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΡΠ΅ Π°ΡΠΏΠ΅ΠΊΡΡ, ΠΊΠΎΡΠΎΡΡΠΌΠΈ Π²Ρ Ρ
ΠΎΡΠ΅Π»ΠΈ Π±Ρ ΠΌΠ°Π½ΠΈΠΏΡΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°ΡΠ΅ Π²ΡΠ΅Π³ΠΎ.
Π€ΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² HTML β Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ Π²ΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΡ (ΡΠ΅Π»Π°), Π½ΠΎ ΠΈ Π΄Π»Ρ ΠΏΡΠΎΡΡΡΡ , Π½ΠΎ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠΎΠ². ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π½Π° ΡΡΠΎΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅ ΠΊΠ°ΠΊ ΠΌΠ°ΡΠΊΠ΅ΡΡ Π² ΡΠΏΠΈΡΠΊΠ°Ρ , ΠΊΠ°ΠΊ ΡΠ²Π΅Π»ΠΈΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΡΠ΅ΠΊΠ»ΠΎ Π² ΠΏΠΎΠ»Π΅ ΠΏΠΎΠΈΡΠΊΠ° ΠΈ ΠΊΠ°ΠΊ Π·Π½Π°ΡΠΊΠΈ Π² Π²Π΅ΡΡ Π½Π΅ΠΌ Π»Π΅Π²ΠΎΠΌ ΡΠ³Π»Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ Π·Π°ΠΌΠ΅ΡΠΎΠΊ, ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ ΡΡΠ°.
ΠΠ»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ Π΄Π»Ρ ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΡ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ°
ΠΠ·Π±Π΅Π³Π°ΠΉΡΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° ΡΠΎΠ½Π΅ CSS
ΠΡΠ»ΠΈ Π²Π°ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π²Π°ΠΆΠ½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ Π΄Π»Ρ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ,
ΡΠΎΠ³Π΄Π° ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ Π² HTML
ΡΠ΅Π³ Ρ Π½Π°Π΄Π»Π΅ΠΆΠ°ΡΠΈΠΌ
alt
ΡΠ΅ΠΊΡΡ.Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ CSS Π³Π»Π°ΡΠΈΡ:
ΠΠΎ ΠΏΡΠΈΡΠΈΠ½Π°ΠΌ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΠΈ Π°Π²ΡΠΎΡΠ°ΠΌ Π½Π΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΠ½ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΊΠ°ΠΊ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΏΠ΅ΡΠ΅Π΄Π°ΡΠΈ Π²Π°ΠΆΠ½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ.Π‘ΠΌ. ΠΠ½ΡΠ΅ΡΠ½Π΅Ρ Π ΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΠΎ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΠΈ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° F3 [WCAG20]. ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π΅Π΄ΠΎΡΡΡΠΏΠ½Ρ Π² Π½Π΅Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΠΏΡΠ΅Π·Π΅Π½ΡΠ°ΡΠΈΡΡ , ΠΈ ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΎΡΠΊΠ»ΡΡΠ΅Π½Ρ Π² Π²ΡΡΠΎΠΊΠΎΠΊΠΎΠ½ΡΡΠ°ΡΡΠ½ΡΠ΅ ΡΠ΅ΠΆΠΈΠΌΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡΡΠΎΡΠ½ΠΈΠΊ .
ΠΠ΅ ΠΌΠΎΠ³Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ CSS ΠΈΠ»ΠΈ Π·Π°ΠΌΠ΅Π½ΠΈΡΡ ΡΠ΅ΠΊΡΡ Π΄Π»Ρ Β«Π½Π΅Π²Π°ΠΆΠ½ΡΠ΅Β» ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΈ ΠΎΠΊΡΡΠΆΠ°ΡΡΠ΅ΠΉ ΡΡΠ΅Π΄Ρ ΠΈ Ρ. Π΄.?
Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ CSS Π΄Π΅Π»Π°Π΅Ρ ΡΡΠΎ Β«ΠΠΠΠΠΠ«Β», Π° Π½Π΅ Β«ΠΠΠΠΠΠΒ», ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π±ΡΠ²Π°ΡΡ ΡΠ»ΡΡΠ°ΠΈ, ΠΊΠΎΠ³Π΄Π° Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈΠ»ΠΈ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄ Π·Π°ΡΡΡΠ΄Π½ΡΠ΅Ρ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ Π΅Π³ΠΎ Π² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ HTML Π±Π΅Π· ΡΠ΅Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°.Π Π΄ΡΡΠ³ΠΈΡ ΡΠ»ΡΡΠ°ΡΡ Π°Π²ΡΠΎΡ ΠΌΠΎΠΆΠ΅Ρ Π·Π°Ρ ΠΎΡΠ΅ΡΡ ΡΡΠΎΠ±Ρ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΡΡ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ Π΄Π»Ρ ΠΎΠΊΡΡΠΆΠ°ΡΡΠ΅Π³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ²Π»ΡΠ΅ΡΡΡ , Π° Π½Π΅ Β«Π²Π°ΠΆΠ½ΠΎΒ» Π΄Π»Ρ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ, Π½ΠΎ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π²Π΅ΠΆΠ»ΠΈΠ²ΠΎΡΡΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌ ΡΡΠ΅Π½ΠΈΡ Ρ ΡΠΊΡΠ°Π½Π°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠ΅Π΄ΠΏΠΎΡΠΈΡΠ°ΡΡ Π·Π½Π°ΡΡ, ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΎ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ΅. ΠΠΎΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π°Ρ ΡΡΠ°ΡΡΡ ΠΎΠ± ΡΠΌΠ±ΠΈΠ΅Π½ΡΠ΅. ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΎΡΠΈΠ² ΡΠΈΡΡΠΎΠ³ΠΎ ΡΠΊΡΠ°ΡΠ΅Π½ΠΈΡ ΠΏΡΠΎΡΠΈΠ² ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
ΠΡΠΈ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½ΠΈΠΈ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ° Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ CSS Π΅ΡΡΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠΎΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
ΠΡΠ»ΠΈ
Π²Π½ΡΡΡΠΈ ΡΠ΅Π³Π° Π΅ΡΡΡ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, ΡΠΎΠ³Π΄Π° role = "img"
ΠΈ aria-label
ΠΌΠΎΠΆΠ΅Ρ ΡΠΊΡΡΡΡ Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΈΠ·-Π·Π° Π΄ΠΎΡΡΡΠΏΠ½ΡΡ
ΡΠ°ΡΡΠ΅Ρ ΠΈΠΌΠ΅Π½ΠΈ
, ΠΈΠ»ΠΈ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ ΠΌΠΎΠ³ΡΡ ΠΏΡΠΎΡΡΠΎ ΠΈΠ³Π½ΠΎΡΠΈΡΠΎΠ²Π°ΡΡ aria-label
.
ΠΠΎΡΡΠΎΠΌΡ Π½Π΅ ΠΏΠΎΠΌΠ΅ΡΠ°ΠΉΡΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ CSS Π²Π½ΡΡΡΠΈ
ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π»ΡΠ±ΠΎΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ. ΠΡΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΡΡΠΎΠΉ
ΠΈ aria-label
Ρ role = "img"
Π‘Π΄Π΅Π»Π°ΠΉΡΠ΅ ΡΡΠΎ:
<Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½
role = "img" aria-label = "[ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ Π·Π΄Π΅ΡΡ]>
[Π²ΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅]
ΠΠ΅ Π΄Π΅Π»Π°ΠΉΡΠ΅ ΡΡΠΎΠ³ΠΎ:
[Π²ΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ΅
ΠΌΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ]
Π§ΡΠΎ Π΄Π΅Π»Π°ΡΡ, Π΅ΡΠ»ΠΈ Ρ Π°Π²ΡΠΎΡΠ° Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ CSS Π² div, ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ
ΠΠ½ΠΎΠ³Π΄Π° Π² ΡΡΠ΅ΠΊΠ΅ CSS Π΅ΡΡΡ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΈ Π²ΠΎΠ·Π½ΠΈ Ρ ΠΌΠΎΠΆΠ΅Ρ ΡΠ°ΡΡΡΡΠΎΠΈΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈ Π²Π΅ΡΡΡΠΊΡ ΡΠ°ΠΉΡΠ°, Π»ΠΈΠ±ΠΎ ΠΏΡΠΎΡΡΠ±Π° ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° ΠΌΠΎΠ³Π»ΠΎ Π·Π°Π²ΠΈΡΠ½ΡΡΡ ΠΎΡ ΠΎΠ΄ΠΎΠ±ΡΠ΅Π½ΠΈΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π·Π°ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΡΠΎΡΠΎΠ½Ρ.Π ΡΠ»ΡΡΠ°ΡΡ , ΠΊΠΎΠ³Π΄Π° Ρ Π°Π²ΡΠΎΡΠ° Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ ΠΏΡΠ΅Π΄ΡΡΡΠΎΡΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²

<Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½
role = "img" aria-label = "[ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ Π·Π΄Π΅ΡΡ]>
[Π²ΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅]
ΠΡΠΎ Π²Π·Π»ΠΎΠΌ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΠ΅ΠΌΠ°Π½ΡΠΈΡΠ΅ΡΠΊΠΈ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ Π½Π΅ Π²ΠΊΠ»ΡΡΠ΅Π½
ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΠΈΠΌΠ΅Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΠ΄Π½Π°ΠΊΠΎ Ρ ΡΠΊΡΠ°Π½Π°
ΡΠΈΡΠ°ΡΠ΅Π»Ρ Π²ΠΈΠ΄ΠΈΡ
Ρ ΡΠΎΠ½ΠΎΠ²ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈΠ³Π½ΠΎΡΠΈΡΡΠ΅ΡΡΡ, ΠΏΠΎΡΡΠΎΠΌΡ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅
Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ ΠΏΠΎΡΠ»Π΅ Π½Π΅Π³ΠΎ ΡΡΠ° ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ Π±ΡΠ΄Π΅Ρ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½Π° ββΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΡΠΎΠ±Ρ
Π±ΡΠ΄Π΅Ρ ΠΊΠ°Π·Π°ΡΡΡΡ, ΡΡΠΎ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π² ΡΠΎΠΌ ΠΆΠ΅ ΠΌΠ΅ΡΡΠ΅, ΡΡΠΎ ΠΈ
ΡΠΎΠ½ΠΎΠ²Π°Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°.Π‘Π²ΠΎΠ΄ΠΊΠ°
- Π‘ΡΠ°ΡΠ°ΠΉΡΠ΅ΡΡ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ CSS Π΄Π»Ρ Π²Π°ΠΆΠ½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
- ΠΠ»Ρ ΠΎΠΊΡΡΠΆΠ°ΡΡΠΈΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ²Π»ΡΡΡΡΡ CSS, ΡΡΠΎ Π»ΡΠ±Π΅Π·Π½ΠΎ
ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΡΡ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ. ΠΡΠΈ ΡΡΠΎΠΌ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ΅
ΠΏΡΡΡΠΎΠΉ
aria-label
ΠΈrole = "img.
ΠΡΠΎ ΡΠ°ΠΊΠΆΠ΅ Π²Π΅ΡΠ½ΠΎ, Π² ΡΠΈΡΡΠ°ΡΠΈΠΈ Π³Π΄Π΅ CSS Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ. - ΠΡΠ»ΠΈ
aria-label
ΠΈrole = "img"
ΡΡΠ°Π·Ρ ΠΏΠΎΡΠ»Π΅
ΠΠ΅ ΡΡΠ΅ΡΠ½ΡΠΉΡΠ΅ΡΡ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡ Π² Twitter @davidmacd
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎΠ± Π°Π²ΡΠΎΡΠ΅:
ΠΡΠ²ΠΈΠ΄ ΠΠ°ΠΊΠ΄ΠΎΠ½Π°Π»ΡΠ΄ β Π²Π΅ΡΠ΅ΡΠ°Π½ WCAG, ΡΠΎΡΠ΅Π΄Π°ΠΊΡΠΎΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ WAI ARIA Π² HTML5 ΠΈ ΡΠ»Π΅Π½ ΡΠ°Π±ΠΎΡΠ΅ΠΉ Π³ΡΡΠΏΠΏΡ ΠΏΠΎ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΠΈ HTML5. ΠΠ½Π΅Π½ΠΈΠ΅ ΠΌΠΎΠ΅ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ΅.
HTML Π’Π°Π±Π»ΠΈΡΠ° Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΡΠ΅ΠΉΠΊΠΈ
ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ, ΠΊΠ°ΠΊ Π½Π° ΡΠ°ΠΉΡΠ°Ρ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΠ΄Π½ΠΎ ΠΏΡΠΎΡΡΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΠΎΠ΄ΠΈΠ½ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅.Π§ΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ°ΠΊΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅ Π½Π°Ρ ΡΡΠ΅Π±Π½ΠΈΠΊ ΠΏΠΎ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ°ΠΌ Π² ΡΠ°Π·Π΄Π΅Π»Π΅ Π³ΡΠ°ΡΠΈΠΊΠΈ.ΠΡΠΎ Π½Π°Ρ ΡΠ΅ΠΊΡΡ Π½Π°Π΄ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ |
background = 'images / bg1.
jpg' >
ΠΡΠΎ Π½Π°Ρ ΡΠ΅ΠΊΡΡ Π½Π°Π΄ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ
ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΡΠ΅ΠΉΠΊΡ Π΄Π°Π½Π½ΡΡ ΡΠ°Π±Π»ΠΈΡΡ
ΠΡΠΎ Π½Π°Ρ ΡΠ΅ΠΊΡΡ Π½Π°Π΄ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ |
background = 'images / bg1.jpg '> ΠΡΠΎ Π½Π°Ρ ΡΠ΅ΠΊΡΡ Π½Π°Π΄ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ
Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π²ΡΡΠ΅ ΡΠΊΡΠΈΠΏΡΠ΅ ΠΌΡ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π°ΠΏΡΡΠΌΡΡ. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π²Π½ΡΡΡΠΈ ΡΠ°Π±Π»ΠΈΡΡΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΡΠΈΠ»Ρ
ΠΠ»ΠΎΠ±Π°Π»ΡΠ½ΠΎ (Π΄Π»Ρ ΡΡΡΠ°Π½ΠΈΡΡ) ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΎΠ±ΡΡΠ²ΠΈΡΡ ΡΡΠΈΠ»Ρ ΡΠ°Π±Π»ΠΈΡΡ Π²ΠΎΡ ΡΠ°ΠΊ. ΡΠ°Π±Π»ΠΈΡΠ° {background: url ("https://www.plus2net.com/images/top2.jpg") no-repeat; }
ΠΡΠ΅ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π±ΡΠ΄ΡΡ ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ ΡΡΠΎΠΌΡ ΡΠ²ΠΎΠΉΡΡΠ²Ρ, ΠΈ Π²ΡΠ΅ Π±ΡΠ΄ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΠ΄Π½ΠΎ ΠΈ ΡΠΎ ΠΆΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΠΎΠ±Π°Π²Π»ΡΡ ΠΊ Π½Π΅ΠΌΡ ΠΊΠ»Π°ΡΡ, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΈΠ»Ρ Π΄Π»Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ Π΄ΡΡΠ³ΠΈΡ ΡΠ°Π±Π»ΠΈΡ.
table.t1 {background: url ("images / bg1.jpg") repeat;}
ΠΡ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ Π²ΡΡΠ΅ ΠΊΠΎΠ΄ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΠΌ Ρ Π½ΠΈΠΌ Π΄Π²Π΅ ΡΠ°Π±Π»ΠΈΡΡ. ΠΠΎΡ ΡΡΠ΅Π½Π°ΡΠΈΠΉ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΉ Π²ΡΡΠ΅ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΡΠΎΠ»Π°
<ΡΠ°Π±Π»ΠΈΡΠ°>
Π―ΡΠ΅ΠΉΠΊΠ° 1 Π―ΡΠ΅ΠΉΠΊΠ° 2 Π―ΡΠ΅ΠΉΠΊΠ° 3 Π―ΡΠ΅ΠΉΠΊΠ° 4
Π―ΡΠ΅ΠΉΠΊΠ° 1 Π―ΡΠ΅ΠΉΠΊΠ° 2 Π―ΡΠ΅ΠΉΠΊΠ° 4 Π―ΡΠ΅ΠΉΠΊΠ° 4
<ΡΠ°Π±Π»ΠΈΡΠ°>
Π―ΡΠ΅ΠΉΠΊΠ° 1 Π―ΡΠ΅ΠΉΠΊΠ° 2 Π―ΡΠ΅ΠΉΠΊΠ° 3 Π―ΡΠ΅ΠΉΠΊΠ° 4
Π―ΡΠ΅ΠΉΠΊΠ° 1 Π―ΡΠ΅ΠΉΠΊΠ° 2 Π―ΡΠ΅ΠΉΠΊΠ° 4 Π―ΡΠ΅ΠΉΠΊΠ° 4
ΠΡΠ° ΡΡΠ°ΡΡΡ Π½Π°ΠΏΠΈΡΠ°Π½Π° plus2net. com team.
HTML-ΡΠ΅Π³ΠΎΠ² / ΡΠ°Π±Π»ΠΈΡ / ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ β TAG index
: ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊΠΎ Π²ΡΠ΅ΠΌ ΡΡΠ΅ΠΉΠΊΠ°ΠΌ Π² ΡΡΡΠΎΠΊΠ΅ : ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ ΠΎΠ΄Π½ΠΎΠΉ ΡΡΠ΅ΠΉΠΊΠ΅ΠΡΡΠΈΠ±ΡΡ background ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² TABLE, TR ΠΈ TD (TH) ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°Π±Π»ΠΈΡΡ. |
ΠΡΡΠΈΠ±ΡΡ | ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ | ΠΠΎΡΡΠ½Π΅Π½ΠΈΠ΅ |
---|---|---|
background = «» | URL | URL-Π°Π΄ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ |
ΠΡΡΠΈΠ±ΡΡ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΡ. (ΠΠ΅ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΉ Π°ΡΡΠΈΠ±ΡΡ)
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ CSS Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ Π°ΡΡΠΈΠ±ΡΡΠ°. ΠΠΎΠ΄ΡΠΎΠ±Π½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ CSS ΡΠΌ. Π Β«Π‘Π²ΡΠ·Π°Π½Π½ΠΎΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅Β».
ΠΡΠΈΠΌΠ΅Ρ
Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΡΠΎΠ»Π°
gif ">
Π‘ΡΡΠΎΠΊΠ°1 - Π‘ΡΠΎΠ»Π±Π΅Ρ1
Π‘ΡΡΠΎΠΊΠ°1 - Π‘ΡΠΎΠ»Π±Π΅Ρ2
Π‘ΡΡΠΎΠΊΠ°1 - ΠΠΎΠ»ΠΎΠ½ΠΊΠ°3
Π‘ΡΡΠΎΠΊΠ°2 - Π‘ΡΠΎΠ»Π±Π΅Ρ1
Π‘ΡΡΠΎΠΊΠ°2 - Π‘ΡΠΎΠ»Π±Π΅Ρ2
Π‘ΡΡΠΎΠΊΠ°2 - Π‘ΡΠΎΠ»Π±Π΅Ρ3
Π‘ΡΡΠΎΠΊΠ°3 - Π‘ΡΠΎΠ»Π±Π΅Ρ1
Π‘ΡΡΠΎΠΊΠ°3 - Π‘ΡΠΎΠ»Π±Π΅Ρ2
Row3 - Col3
- ΠΡΡ ΠΎΠ΄
Π ΡΠ΄1 β Π‘ΡΠΎΠ»Π±Π΅Ρ 1 Π ΡΠ΄ 1 β Π‘ΡΠΎΠ»Π±Π΅Ρ 2 Π ΡΠ΄ 1 β Π‘ΡΠΎΠ»Π± 3 Π ΡΠ΄ 2 β Π‘ΡΠΎΠ»Π± 1 Π ΡΠ΄ 2 β Π‘ΡΠΎΠ»Π±Π΅Ρ 2 Π ΡΠ΄ 2 β Π‘ΡΠΎΠ»Π± 3 Π ΡΠ΄Ρ 3 β Π‘ΡΠΎΠ»Π±ΡΡ 1 Π ΡΠ΄ 3 β Π‘ΡΠΎΠ»Π±Π΅Ρ 2 Π ΡΠ΄ 3 β Π‘ΡΠΎΠ»Π±Π΅Ρ
Π‘ΡΡΠΎΠΊΠ°1 - Π‘ΡΠΎΠ»Π±Π΅Ρ1
Π‘ΡΡΠΎΠΊΠ°1 - Π‘ΡΠΎΠ»Π±Π΅Ρ2
Π‘ΡΡΠΎΠΊΠ°1 - ΠΠΎΠ»ΠΎΠ½ΠΊΠ°3
Π‘ΡΡΠΎΠΊΠ°2 - Π‘ΡΠΎΠ»Π±Π΅Ρ1
Π‘ΡΡΠΎΠΊΠ°2 - Π‘ΡΠΎΠ»Π±Π΅Ρ2
Π‘ΡΡΠΎΠΊΠ°2 - Π‘ΡΠΎΠ»Π±Π΅Ρ3
Π‘ΡΡΠΎΠΊΠ°3 - Π‘ΡΠΎΠ»Π±Π΅Ρ1
Π‘ΡΡΠΎΠΊΠ°3 - Π‘ΡΠΎΠ»Π±Π΅Ρ2
Row3 - Col3
- ΠΡΡ ΠΎΠ΄
- gifΒ»>
Π ΡΠ΄Ρ 1 β Π‘ΡΠΎΠ»Π±ΡΡ 1 Π ΡΠ΄ 1 β Π‘ΡΠΎΠ»Π±Π΅Ρ 2 Π ΡΠ΄ 1 β Π‘ΡΠΎΠ»Π± 3 Π ΡΠ΄ 2 β Π‘ΡΠΎΠ»Π±Π΅Ρ Π ΡΠ΄ 2 β Π‘ΡΠΎΠ»Π±Π΅Ρ 2 Π ΡΠ΄ 2 β Π‘ΡΠΎΠ»Π± 3 Π ΡΠ΄Ρ 3 β Π‘ΡΠΎΠ»Π±ΡΡ 1 Π ΡΠ΄ 3 β Π‘ΡΠΎΠ»Π±Π΅Ρ 2 Π ΡΠ΄ 3 β Π‘ΡΠΎΠ»Π±Π΅Ρ
Π‘ΡΡΠΎΠΊΠ°1 - Π‘ΡΠΎΠ»Π±Π΅Ρ1
Π ΡΠ΄1 - Π‘ΡΠΎΠ»Π±Π΅Ρ 2
Π‘ΡΡΠΎΠΊΠ°1 - ΠΠΎΠ»ΠΎΠ½ΠΊΠ°3
Π‘ΡΡΠΎΠΊΠ°2 - Π‘ΡΠΎΠ»Π±Π΅Ρ1
Row2 - Col2
Π‘ΡΡΠΎΠΊΠ°2 - Π‘ΡΠΎΠ»Π±Π΅Ρ3
Π‘ΡΡΠΎΠΊΠ°3 - Π‘ΡΠΎΠ»Π±Π΅Ρ1
Row3 - Col2
Row3 - Col3
- ΠΡΡ ΠΎΠ΄
Π ΡΠ΄Ρ 1 β Π‘ΡΠΎΠ»Π±ΡΡ 1 Π ΡΠ΄ 1 β Π‘ΡΠΎΠ»Π±Π΅Ρ 2 Π ΡΠ΄ 1 β Π‘ΡΠΎΠ»Π± 3 Π ΡΠ΄ 2 β Π‘ΡΠΎΠ»Π± 1 gifΒ»> Π ΡΠ΄ 2 β Π‘ΡΠΎΠ»Π±Π΅Ρ 2 Π ΡΠ΄ 2 β Π‘ΡΠΎΠ»Π± 3 Π ΡΠ΄Ρ 3 β Π‘ΡΠΎΠ»Π±ΡΡ 1 Π ΡΠ΄ 3 β Π‘ΡΠΎΠ»Π±Π΅Ρ 2 Π ΡΠ΄ 3 β Π‘ΡΠΎΠ»Π±Π΅Ρ
- Π‘Π²ΡΠ·Π°Π½Π½ΡΠΉ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ
ΠΡΠ»Π΅Π½Π΅ΠΏΡΠΎΠ±ΠΈΠ²Π°Π΅ΠΌΡΠ΅ ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ | ΠΠΎΠ½ΠΈΡΠΎΡ ΠΊΠ°ΠΌΠΏΠ°Π½ΠΈΠΈ
ΠΠΎΠ³Ρ Π»ΠΈ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠ»Π΅Π½Π΅ΠΏΡΠΎΠ±ΠΈΠ²Π°Π΅ΠΌΡΠ΅ ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΠΎΠ²Π΅ΡΡ Π΄ΡΡΠ³ΠΈΡ ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ?
Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, ΡΡΠΈ ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π΅Π»ΡΠ·Ρ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΠΏΠΎΠ²Π΅ΡΡ Π΄ΡΡΠ³ΠΈΡ ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Outlook Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ VML.ΠΠ΄Π½Π°ΠΊΠΎ Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ ΡΠ»ΡΡΠ°ΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΠΏΠ΅ΡΠ½ΠΎ Π·Π°ΠΊΠΎΠ΄ΠΈΡΠΎΠ²Π°ΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½, ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ² ΡΡΡΡΠΊΡΡΡΡ.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄ΠΎΠ»ΠΆΠ½Π° Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡΡ Π·Π° ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ½ΠΎΠ³Π΄Π° ΡΠ°Π·ΡΠ΅Π·Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠ»Π΅Π½Π΅ΠΏΡΠΎΠ±ΠΈΠ²Π°Π΅ΠΌΠΎΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΡΡΠΎΠΉ ΡΠ°ΡΡΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠ»Π΅Π½Π΅ΠΏΡΠΎΠ±ΠΈΠ²Π°Π΅ΠΌΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈΠ»ΠΈ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ (ΡΠ΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΠ΅ Π²ΠΌΠ΅ΡΡΠ΅ ΡΠ°Π±Π»ΠΈΡΠ΅ΠΉ ΡΡΡΡΠΊΡΡΡΠ°) Π΄Π»Ρ Π΄ΡΡΠ³ΠΈΡ
ΡΠ°ΡΡΠ΅ΠΉ.
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΌΠΎΠ΅ ΠΏΡΠ»Π΅Π½Π΅ΠΏΡΠΎΠ±ΠΈΠ²Π°Π΅ΠΌΠΎΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌ?
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Outlook Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π·Π°ΠΏΡΠΎΡΡ @media, Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±Π΅ΡΠΏΠΎΠΊΠΎΠΈΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎ ΠΏΠΎΡΡΠΎΠ²ΡΡ ΠΊΠ»ΠΈΠ΅Π½ΡΠ°Ρ , ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ.Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΠ΅Π°Π³ΠΈΡΠΎΠ²Π°ΡΡ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ HTML, Π° Π½Π΅ VML. Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΎΠ±ΡΠ΅ΠΉ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΠΈ Π±ΠΎΠ»Π΅Π΅ Π½Π°Π΄Π΅ΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΈΡΠΈΠ½Ρ, ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΡΡ Π½Π° ΠΏΠΈΠΊΡΠ΅Π»ΡΡ , Π² HTML, ΠΈ Π·Π°ΡΠ΅ΠΌ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°ΠΌΠ΅Π½ΠΈΡΡ Π΅Π΅ Π΄ΡΡΠ³ΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈΠ»ΠΈ ΠΏΡΠΎΡΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ Π΄ΡΡΠ³ΠΈΡ ΠΎΠΊΠΎΠ½ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°.
ΠΠ»Ρ Π½Π°ΡΠ°Π»Π° ΠΏΡΠΈΡΠ²ΠΎΠΉΡΠ΅ ΡΡΠ΅ΠΉΠΊΠ΅ ΡΠ°Π±Π»ΠΈΡΡ ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΊΠ»Π°ΡΡ ΠΈΠ»ΠΈ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡ, Π½Π° ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ ΡΠ°ΡΠ³Π΅ΡΠΈΠ½Π³. ΠΠ°ΡΠ΅ΠΌ Π² Π»ΡΠ±ΡΡ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠΈΡ Π·Π°ΠΏΡΠΎΡΠ°Ρ @media ΠΏΡΠΈΡΠ²ΠΎΠΉΡΠ΅ ΡΡΠ΅ΠΉΠΊΠ°ΠΌ ΡΠ°Π±Π»ΠΈΡΡ ΡΠ°Π·Π½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ, ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ Ρ. Π.
ΠΠΎΠΆΠ½ΠΎ Π»ΠΈ ΠΎΡΠΊΠ»ΡΡΠΈΡΡ ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ?
ΠΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π² ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΡΠ΅ ΠΏΠΈΡΡΠΌΠ° ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΠΈΠ΅ΡΡ ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠΎ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π²Π°ΡΠ΅Π³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΅ΡΠΈΡΡ ΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π²ΡΡΠΎΡΡ, ΡΠΈΡΠΈΠ½Ρ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ
ΠΈΠ»ΠΈ ΠΈ ΡΠΎ, ΠΈ Π΄ΡΡΠ³ΠΎΠ΅. ΠΠ»ΠΈ, Π² Π½Π΅ΠΊΠΎΡΠΎΡΡΡ
ΡΠ»ΡΡΠ°ΡΡ
, ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΌΠΎΡΡ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π±ΠΎΠ»ΡΡΠ΅Π³ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π° Π²ΠΎΠΊΡΡΠ³ ΡΠ°ΠΌΠΎΠ³ΠΎ ΡΠ°ΠΉΠ»Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΠΎΡΠ΅ΠΌΡ ΠΏΡΠΈ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΏΠΎΠ²Π΅ΡΡ ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠΉ ΠΏΠΎΡΡΡ Π²ΠΎ Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΎΠ½ΠΎ Π½Π΅ ΡΠΎΠ²ΠΏΠ°Π΄Π°Π΅Ρ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ?
Π€ΠΎΠ½Ρ Ρ ΠΏΠΎΠ»Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠΉ ΠΏΠΎΡΡΡ Π² Outlook ΠΎΡΠ½ΠΎΠ²Π°Π½Ρ Π½Π° ΡΠ²ΠΎΠΉΡΡΠ²Π΅ mso-width-percent, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΡΠ΅ Π½Π° ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ , Π½Π΅ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ ΠΎΠ±ΡΡΠ½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ.Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, Π² Outlook 2007/2010/2013 Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΡΠΈΠ±ΠΎΠΊ, Π²Π»ΠΈΡΡΡΠΈΡ Π½Π° ΡΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄.
Outlook ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ° Π΄Π»Ρ Π²ΡΠ΅Ρ
ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΡΡ
ΠΏΠΈΡΠ΅ΠΌ HTML. Π Π΅ΡΠ»ΠΈ Π²Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° VML Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Β«mso-width-percent: 1000Β» (100% ΡΠΈΡΠΈΠ½Π°), ΠΎΠ½ ΠΎΡΠ½ΠΎΠ²ΡΠ²Π°Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌΡΡ ΡΠΈΡΠΈΠ½Ρ Π½Π° ΠΏΠΎΠ»Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Π΅ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠΉ ΠΏΠΎΡΡΡ / ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΠΏΡΠΈ ΡΡΠΎΠΌ Π΄ΠΎΠ±Π°Π²Π»ΡΡ ΠΏΠΎΠ»Ρ 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π΅ΡΠ»ΠΈ Π²Ρ ΡΠ΅Π½ΡΡΠΈΡΡΠ΅ΡΠ΅ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π²Π½ΡΡΡΠΈ ΠΏΠΎΠ»Π½ΠΎΡΠ°Π·ΠΌΠ΅ΡΠ½ΡΡ
ΡΠ°Π±Π»ΠΈΡ ΡΠΎΠ½ΠΎΠ²ΡΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΡΠΌΠ΅ΡΠ°ΡΡ ΡΡΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π½Π° 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π²ΠΏΡΠ°Π²ΠΎ, Π° ΡΠ°ΠΊΠΆΠ΅ Π²ΡΠ·ΡΠ²Π°ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡ Ρ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΡΠΎΡΠ΅Π½ΡΠ° ΡΠΈΡΠΈΠ½Ρ MSO ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ Π΄ΠΎ 960-980, ΡΡΠΎΠ±Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, Π½ΠΎ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ Π±ΡΠ΄Π΅Ρ Π·Π°Π²ΠΈΡΠ΅ΡΡ ΠΎΡ ΡΠΈΡΠΈΠ½Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.
ΠΠΎΡΠ΅ΠΌΡ ΠΌΠΎΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΎ ΠΈΠ»ΠΈ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΎ Π² Outlook?
Π ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π° Π΄ΡΡΠ³ΠΈΡ ΠΏΠΎΡΡΠΎΠ²ΡΡ ΠΊΠ»ΠΈΠ΅Π½ΡΠΎΠ² ΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ², Outlook 2007/2010/2013 ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ DPI ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΌΠ°ΡΡΡΠ°Π±Π°.ΠΠΎΡΡΠΎΠΌΡ, ΡΡΠΎΠ±Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ 96 ΡΠΎΡΠ΅ΠΊ Π½Π° Π΄ΡΠΉΠΌ.
ΠΠ°ΠΊ ΠΌΠ½Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΎΡΡΡΡΠΏΡ ΠΈΠ»ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π² ΠΏΡΠ»Π΅Π½Π΅ΠΏΡΠΎΠ±ΠΈΠ²Π°Π΅ΠΌΡΡ ΡΡΠ΅ΠΉΠΊΠ°Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ?
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΡΠ°Π±Π»ΠΈΡΡ Π²Π½ΡΡΡΠΈ ΡΡΠ΅ΠΉΠΊΠΈ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²ΠΎΠΊΡΡΠ³ Π²Π°ΡΠ΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΡΠΎΠΊΠΈ ΠΈ ΡΡΠΎΠ»Π±ΡΡ ΡΠ°Π±Π»ΠΈΡΡ Ρ Π²ΡΡΠΎΡΠΎΠΉ ΠΈ ΡΠΈΡΠΈΠ½ΠΎΠΉ, ΡΠ°Π²Π½ΡΠΌΠΈ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π»Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ. Π Π½Π΅ΠΊΠΎΡΠΎΡΡΡ
ΡΠ»ΡΡΠ°ΡΡ
Π»ΡΡΡΠΈΠΌ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠΌ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ°Π·ΡΠ΅Π·Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΡΠ΅ΠΉΠΊΠΈ ΡΠ°Π±Π»ΠΈΡΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅.ΠΠΊΡΡΠΆΠ°ΡΡΠΈΠ΅ ΡΡΠ΅ΠΉΠΊΠΈ ΠΌΠΎΠ³ΡΡ ΠΈΠΌΠ΅ΡΡ ΠΎΡΡΠ°Π»ΡΠ½ΡΡ ΡΠ°ΡΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π² Π²ΠΈΠ΄Π΅ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΡ
ΡΠ΅Π³ΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΡΠ΅ΠΊΡΡΠ° ΠΈΠ»ΠΈ ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ° ΡΠΎΠ½Π°, Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.
Π§ΡΠΎΠ±Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π°ΡΡΠΈΠ±ΡΡ valign ΡΡΠ΅ΠΉΠΊΠΈ ΡΠ°Π±Π»ΠΈΡΡ Π½Π° ΡΡΠ΅Π΄Π½ΠΈΠΉ ΠΈΠ»ΠΈ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΈΠ»ΠΈ ΠΊ ΡΠ΅Π³Ρ
.
Π§ΡΠΎΠ±Ρ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°ΠΌΠ΅Π½ΠΈΡΡ ΡΠ΅Π³
Π½Π°
.ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΏΠΎ ΠΏΡΠ°Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ
, Π½ΠΎ ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ²Π΅ΡΡΠΈ ΠΊ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ Π½Π΅ΠΆΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΡΡ
ΠΈΠ½ΡΠ΅ΡΠ²Π°Π»ΠΎΠ². ΠΡΡΠ³ΠΎΠΉ Π²Π°ΡΠΈΠ°Π½Ρ β ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ ΡΠ°Π±Π»ΠΈΡΡ Ρ ΠΎΠ΄Π½ΠΎΠΉ ΡΡΠ΅ΠΉΠΊΠΎΠΉ Π²Π½ΡΡΡΠΈ ΡΡΠ΅ΠΉΠΊΠΈ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΏΡΠΈΡΠ²ΠΎΠΈΡΡ ΡΡΠΎΠΉ ΡΡΠ΅ΠΉΠΊΠ΅ ΡΡ ΠΆΠ΅ ΡΠΈΡΠΈΠ½Ρ, ΡΡΠΎ ΠΈ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ
.
ΠΡΠΈ Π²Π»ΠΎΠΆΠ΅Π½ΠΈΠΈ ΡΠ°Π±Π»ΠΈΡΡ Π² ΠΏΡΠ»Π΅Π½Π΅ΠΏΡΠΎΠ±ΠΈΠ²Π°Π΅ΠΌΡΡ ΡΡΠ΅ΠΉΠΊΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΠΏΠΎΠ΄Π³ΠΎΠ½ΠΊΠ΅ Π²ΡΡΠΎΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ, ΠΊΠ°ΠΊ ΠΌΠ½Π΅ ΠΈΠ·Π±Π°Π²ΠΈΡΡΡΡ ΠΎΡ Π·Π°Π·ΠΎΡΠ° Π² Outlook Π² Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΡΠ΅ΠΉΠΊΠΈ?
ΠΡΠΎ ΡΠ²ΡΠ·Π°Π½ΠΎ Ρ ΡΠ΅ΠΌ, ΡΡΠΎ Outlook Π²ΡΠ΅Π³Π΄Π° ΠΎΠΆΠΈΠ΄Π°Π΅Ρ Π°Π±Π·Π°ΡΠ° Π²Π½ΡΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² VML (ΠΈ Π²ΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΈΡ
, Π΅ΡΠ»ΠΈ ΡΠ°ΠΊΠΎΠ²ΠΎΠ³ΠΎ Π½Π΅Ρ).ΠΠΎ ΡΡΠΎΠ±Ρ ΠΎΠ±ΠΎΠΉΡΠΈ ΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ, ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΡΠΎΠΊΡ
right ΠΏΠ΅ΡΠ΅Π΄ Π·Π°ΠΊΡΡΠ²Π°ΡΡΠΈΠΌ ΡΠ΅Π³ΠΎΠΌ
, ΠΈ ΠΏΡΠΎΠ±Π΅Π»Π° Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ.ΠΠΎΠ³Ρ Π»ΠΈ Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄ΠΎΡΡΡΠΏΠ½ΡΠΌΠΈ Π΄Π»Ρ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅Π³ΠΎΠ² ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ² Campaign Monitor?
Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΠΆΠ΅ΡΡΠΊΠΎ Π²ΡΡΡΠΎΠ΅Π½Ρ Π² Π²Π°Ρ ΡΠ°Π±Π»ΠΎΠ½ ΠΈΠ»ΠΈ ΠΊΠ°ΠΌΠΏΠ°Π½ΠΈΡ.ΠΠ΄Π½Π°ΠΊΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ΅Π³ Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ s, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΠΏΡΠ΅Π΄ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄ΠΎΡΡΡΠΏΠ½ΡΠΌΠΈ Π² ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅.
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΡΡΠ° ΡΡΠ½ΠΊΡΠΈΡ Π±ΡΠ»Π° Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π° ββΠ² ΡΠ΅Π΄Π°ΠΊΡΠΎΡ, ΡΠΎΠΎΠ±ΡΠΈΡΠ΅ ΠΎ ΡΠ΅Π±Π΅ Π½Π° Π½Π°ΡΠ΅ΠΌ ΡΠΎΡΡΠΌΠ΅ ΠΈΠ»ΠΈ ΠΏΠΎ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠΉ ΠΏΠΎΡΡΠ΅.
ΠΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² html β BytesofGigabytes
Π§ΡΠΎ Π²Ρ ΡΠ·Π½Π°Π΅ΡΠ΅ Π·Π΄Π΅ΡΡ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² HTML
- ΠΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² HTML
- ΠΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² HTML ΠΈΠ· ΠΏΠ°ΠΏΠΊΠΈ
- ΠΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² HTML
- ΠΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠ΅Π»Π° Π² HTML
- ΠΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ div
- ΠΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΠ±ΡΠ°Π· Π΄ΠΈΡΠΊΠ° Google Π² html
ΠΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² HTML
ΠΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ img tag Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅
ΠΡΠ»ΠΈ Π²Π°ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ HTML-ΡΠ°ΠΉΠ» Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π² ΠΎΠ΄Π½ΠΎΠΉ ΠΏΠ°ΠΏΠΊΠ΅, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΈΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠ»ΠΈ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΠΎΠ»Π½ΡΠΉ ΠΏΡΡΡ ΠΊ Π²Π°ΡΠ΅ΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.ΠΠΈΠΆΠ΅ Ρ Π΄ΠΎΠ±Π°Π²ΠΈΠ» ΡΠΎΠ»ΡΠΊΠΎ ΠΈΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΌΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ ΡΠ°ΠΉΠ» HTML Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π² ΠΎΠ΄Π½ΠΎΠΉ ΠΏΠ°ΠΏΠΊΠ΅
ΠΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² HTML ΠΈΠ· ΠΏΠ°ΠΏΠΊΠΈ
ΠΡΠ»ΠΈ Π²Π°ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ HTML-ΡΠ°ΠΉΠ» Π½Π΅ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π² ΠΎΠ΄Π½ΠΎΠΉ ΠΏΠ°ΠΏΠΊΠ΅, Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΠΎΠ»Π½ΡΠΉ ΠΏΡΡΡ ΠΊ Π²Π°ΡΠ΅ΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠΈΠΆΠ΅ Ρ Π΄ΠΎΠ±Π°Π²ΠΈΠ» ΡΠΎΠ»ΡΠΊΠΎ ΠΈΠΌΡ ΠΏΠ°ΠΏΠΊΠΈ, Π·Π° ΠΊΠΎΡΠΎΡΡΠΌ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΌΠΎΡ ΠΏΠ°ΠΏΠΊΠ° ΠΈ ΡΠ°ΠΉΠ» HTML Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π² ΠΎΠ΄Π½ΠΎΠΉ ΠΏΠ°ΠΏΠΊΠ΅
ΠΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² HTML
Π§ΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² HTML, Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background-image , ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅.Π§ΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠΎ Π²ΡΠ΅ΠΌΡ ΡΠ΅Π»Ρ, Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background-image ΠΊ ΡΠ΅Π»Ρ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅. ΠΡΠ»ΠΈ Π²Π°ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ HTML-ΡΠ°ΠΉΠ» Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π² ΠΎΠ΄Π½ΠΎΠΉ ΠΏΠ°ΠΏΠΊΠ΅, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΈΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠ»ΠΈ Π²Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΠΎΠ»Π½ΡΠΉ ΠΏΡΡΡ ΠΊ Π½Π΅ΠΌΡ. ΠΠΈΠΆΠ΅ Ρ Π΄ΠΎΠ±Π°Π²ΠΈΠ» ΡΠΎΠ»ΡΠΊΠΎ ΠΈΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΌΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ ΡΠ°ΠΉΠ» HTML Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π² ΠΎΠ΄Π½ΠΎΠΉ ΠΏΠ°ΠΏΠΊΠ΅
ΠΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠ΅Π»Π° Π² HTML β Π΄ΡΡΠ³ΠΎΠΉ ΠΏΡΡΡ
Π§ΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² HTML, Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background-image, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅.Π§ΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠΎ Π²ΡΠ΅ΠΌΡ ΡΠ΅Π»Ρ, Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background-image ΠΊ ΡΠ΅Π»Ρ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅. ΠΡΠ»ΠΈ Π²Π°ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ HTML-ΡΠ°ΠΉΠ» Π½Π΅ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π² ΠΎΠ΄Π½ΠΎΠΉ ΠΏΠ°ΠΏΠΊΠ΅, Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΠΎΠ»Π½ΡΠΉ ΠΏΡΡΡ ΠΊ Π²Π°ΡΠ΅ΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ . ΠΠΈΠΆΠ΅ Ρ Π΄ΠΎΠ±Π°Π²ΠΈΠ» ΡΠΎΠ»ΡΠΊΠΎ ΠΈΠΌΡ ΠΏΠ°ΠΏΠΊΠΈ, Π·Π° ΠΊΠΎΡΠΎΡΡΠΌ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΌΠΎΡ ΠΏΠ°ΠΏΠΊΠ° ΠΈ ΡΠ°ΠΉΠ» HTML Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π² ΠΎΠ΄Π½ΠΎΠΉ ΠΏΠ°ΠΏΠΊΠ΅
ΠΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ div
Π§ΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΡΠ΅Π³ div , , Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background-image, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅.ΠΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄ΠΈΡΠΊΠ° Google Π² HTML
ΠΡΠΏΠΎΠ»Π½ΠΈΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ, ΡΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Ρ Π΄ΠΈΡΠΊΠ° Google Π² HTML
1) Π§ΡΠΎΠ±Ρ ΡΠ½Π°ΡΠ°Π»Π° Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Ρ Π΄ΠΈΡΠΊΠ° Google Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ HTML, Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΡΠ²ΠΎΠΉ Π΄ΠΈΡΠΊ Google.ΠΡΠ°ΠΊ, Ρ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Ρ, ΡΡΠΎ Π²Ρ Π·Π½Π°Π΅ΡΠ΅, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Google ΠΠΈΡΠΊ.
2) Π― ΠΏΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Ρ, ΡΡΠΎ Π²Ρ ΡΡΠΏΠ΅ΡΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Google ΠΠΈΡΠΊ.
Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ β Tailwind CSS
ΠΠΈΠ½Π΅ΠΉΠ½ΡΠ΅ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΡ
Π§ΡΠΎΠ±Ρ ΠΏΡΠΈΠ΄Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΎΠ½ Ρ Π»ΠΈΠ½Π΅ΠΉΠ½ΡΠΌ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠΌ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΎΠ΄Π½Ρ ΠΈΠ· ΡΡΠΈΠ»ΠΈΡ bg-gradient- {direction}
Π² ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠΈ Ρ ΡΡΠΈΠ»ΠΈΡΠ°ΠΌΠΈ ΠΎΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΡΠ²Π΅ΡΠ° Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ°.
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ
Π§ΡΠΎΠ±Ρ ΡΠΏΡΠ°Π²Π»ΡΡΡ ΡΠΎΠ½ΠΎΠ²ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΡΠΎΡΠΊΠ΅ ΠΎΡΡΠ°Π½ΠΎΠ²Π°, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΠΏΡΠ΅ΡΠΈΠΊΡ {screen}:
ΠΊ Π»ΡΠ±ΠΎΠΉ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠ΅ΠΉ ΡΡΠΈΠ»ΠΈΡΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ md: bg-gradient-to-r
, ΡΡΠΎΠ±Ρ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΡΡΠΈΠ»ΠΈΡΡ bg-gradient-to-r
ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΡΡΠ΅Π΄Π½ΠΈΡ
ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠΊΡΠ°Π½Π° ΠΈ Π²ΡΡΠ΅.
ΠΠ»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΎ ΡΡΠ½ΠΊΡΠΈΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Tailwind ΠΎΠ·Π½Π°ΠΊΠΎΠΌΡΡΠ΅ΡΡ Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠ΅ΠΉ ΠΏΠΎ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΌΡ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ.
ΠΠ°ΡΡΡΠΎΠΉΠΊΠ°
Π€ΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Tailwind Π²ΠΊΠ»ΡΡΠ°Π΅Ρ ΡΡΠΈΠ»ΠΈΡΡ ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠΎΠ½ΠΎΠ² Ρ Π»ΠΈΠ½Π΅ΠΉΠ½ΡΠΌ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠΌ Π² Π²ΠΎΡΡΠΌΠΈ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡΡ .
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ²ΠΎΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π² ΡΠ°Π·Π΄Π΅Π» theme.backgroundImage
Π² ΡΠ°ΠΉΠ»Π΅ tailwind.config.js
:
module.exports = {
ΡΠ΅ΠΌΠ°: {
ΠΏΡΠΎΠ΄Π»Π΅Π²Π°ΡΡ: {
backgroundImage: theme => ({
+ 'hero-pattern': "url ('/ img / hero-pattern.svg')",
+ 'footer-texture': "url ('/ img / footer-texture.png')",
})
}
}
}
ΠΡΠΎ Π½Π΅ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΡ β ΡΡΠΎ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π»ΡΠ±ΡΠ΅ ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π°ΠΌ Π½ΡΠΆΠ½Ρ.
ΠΡΠΈ ΠΊΠ»Π°ΡΡΡ Π±ΡΠ΄ΡΡ ΠΈΠΌΠ΅ΡΡ Π²ΠΈΠ΄ bg- {key}
, ΠΏΠΎΡΡΠΎΠΌΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, hero-pattern
ΠΏΡΠ΅Π²ΡΠ°ΡΠΈΡΡΡ Π² bg-hero-pattern
.
ΠΠ°ΡΠΈΠ°Π½ΡΡ
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ·Π΄Π°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ, ΠΊΠ°ΠΊΠΈΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ ΡΠΎΠ·Π΄Π°ΡΡΡΡ Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΈΠ·ΠΌΠ΅Π½ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ backgroundImage
Π² ΡΠ°Π·Π΄Π΅Π»Π΅ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ²
ΡΠ°ΠΉΠ»Π° tailwind.config.js
.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΠ° ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ ΡΠ°ΠΊΠΆΠ΅ Π±ΡΠ΄Π΅Ρ Π³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°ΡΡ Π²Π°ΡΠΈΠ°Π½ΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈ ΡΠΎΠΊΡΡΠΈΡΠΎΠ²ΠΊΠΈ:
module.