Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ 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.

jpgΒ» alt=Β»Flowers in 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>:

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

<a href=Β»default.phpΒ»>
  <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;Β»>

The image will float to the left of the text.</p>


ГрафичСскиС ΠΊΠ°Ρ€Ρ‚Ρ‹

Π’Π΅Π³ <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Β»>

  <img src=Β»img_orange_flowers.jpgΒ» alt=Β»FlowersΒ»>
</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. Если Π’Ρ‹ ΠΎ Π½ΠΈΡ… Π·Π½Π°Π΅Ρ‚Π΅, ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚Π΅ΡΡŒ, поТалуйста, коммСнтариях.

Как Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅? Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½ΠΎΠΌ?

Как Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ Π²ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ:
  1. Π Π°Π·Π°Ρ€Ρ…ΠΈΠ²ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ скачанный Ρ„Π°ΠΉΠ».
  2. ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΏΠ°ΠΏΠΊΡƒ index.
  3. Π—Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ Ρ„Π°ΠΉΠ» 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. jpg ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‹Π»ΠΎΠΆΠΈΡ‚ΡŒ для всСобщСго обозрСния.
<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. jpgΒ»>
МСня Π·ΠΎΠ²ΡƒΡ‚ ΠšΠ°Ρ€Π»ΡΠΎΠ½! Π― Π² ΠΌΠ΅Ρ€Ρƒ ΡƒΠΏΠΈΡ‚Π°Π½Π½Ρ‹ΠΉ ΠΌΡƒΠΆΡ‡ΠΈΠ½Π° β€” это моя пСрвая страничка! Π—Π΄Π΅ΡΡŒ я Ρ…ΠΎΡ‡Ρƒ Π½Π°ΠΉΡ‚ΠΈ сСбС Π½ΠΎΠ²Ρ‹Ρ… Π΄Ρ€ΡƒΠ·Π΅ΠΉ, для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ вмСстС Π³ΡƒΠ»ΡΡ‚ΡŒ ΠΏΠΎ ΠΊΡ€Ρ‹ΡˆΠ°ΠΌ! Π― ΠΎΡ‡Π΅Π½ΡŒ ΠΎΡ‡Π΅Π½ΡŒ сильно люблю <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. jpgΒ» align=Β»topΒ»> β€” тСкст Π²Ρ‹ΡˆΠ΅ Ρ„ΠΎΡ‚ΠΎ
<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. jpg Β«>
<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. jpgΒ» alt=Β»ΠŸΡ€ΠΈΠ²Π΅Ρ‚ ΠΌΠΈΡ€!!!Β»>
</center>
<p align=Β»justifyΒ»>
<img src=Β»graphics/foto.jpgΒ» align=Β»leftΒ» hspace=Β»15β€³height=Β»120β€³ alt=Β»Π­Ρ‚ΠΎ моя Ρ„ΠΎΡ‚ΠΊΠ°!!!Β»>
<font size=Β»+1β€³>
&nbsp;&nbsp;МСня Π·ΠΎΠ²ΡƒΡ‚ ΠšΠ°Ρ€Π»ΡΠΎΠ½! Π― Π² ΠΌΠ΅Ρ€Ρƒ ΡƒΠΏΠΈΡ‚Π°Π½Π½Ρ‹ΠΉ ΠΌΡƒΠΆΡ‡ΠΈΠ½Π° β€” это моя пСрвая страничка! Π—Π΄Π΅ΡΡŒ я Ρ…ΠΎΡ‡Ρƒ Π½Π°ΠΉΡ‚ΠΈ сСбС Π½ΠΎΠ²Ρ‹Ρ… Π΄Ρ€ΡƒΠ·Π΅ΠΉ, для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ вмСстС Π³ΡƒΠ»ΡΡ‚ΡŒ ΠΏΠΎ ΠΊΡ€Ρ‹ΡˆΠ°ΠΌ! Π― ΠΎΡ‡Π΅Π½ΡŒ ΠΎΡ‡Π΅Π½ΡŒ сильно люблю <font size=Β»+2β€³ color=Β»#ff0000β€³>Π²Π°Ρ€Π΅Π½ΡŒΡ‘!!!</font> Π‘ Π½Π΅Ρ‚Π΅Ρ€ΠΏΠ΅Π½ΡŒΠ΅ΠΌ Π±ΡƒΠ΄Ρƒ ΠΆΠ΄Π°Ρ‚ΡŒ Π’Π°ΡˆΠ΅Π³ΠΎ ΠΏΡ€ΠΈΠ³Π»Π°ΡˆΠ΅Π½ΠΈΡ Π½Π° Ρ‡Π°ΠΉ. ΠŸΡ€ΠΈΠ»Π΅Ρ‡Ρƒ!!
</font>
</p>
</body>
</html>

ЕдинствСнноС, Ρ‡Ρ‚ΠΎ Π’Π°ΠΌ Π² этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π½Π΅ Π·Π½Π°ΠΊΠΎΠΌΠΎ Ρ‚Π°ΠΊ это надпись β€” &nbsp; β€” это Π΅ΡΡ‚ΡŒ Ρ‚Π°ΠΊ Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΡ‹ΠΉ спСцсимвол Π² Π΄Π°Π½Π½ΠΎΠΌ случаС β€” ΠΏΡ€ΠΎΠ±Π΅Π».. ΠΎ спСцсимволах ΠΈ ΠΈΡ… Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΈ я расскаТу Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΉ Π³Π»Π°Π²Π΅.

ЧСстно говоря, ΠΌΠ½Π΅ ΠΌΠΎΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π½Π΅ сильно ΠΏΠΎ вкусу, Π½Π΅Ρ€ΡΡˆΠ»ΠΈΠ²ΠΎ ΠΊΠ°ΠΊ-Ρ‚ΠΎ. . Но Ρ†Π΅Π»ΡŒ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ с изобраТСниями Π΄ΡƒΠΌΠ°ΡŽ достигнута..

  • Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π³Ρ€Π°Ρ„ΠΈΠΊΡƒ, Π±ΡƒΠ΄ΡŒΡ‚Π΅ остороТны.. Π½Π΅ стоит Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ Π½Π° своСй страницС большиС вСсом ΠΌΠ΅Π³Π°Π±Π°ΠΉΡ‚Π½Ρ‹Π΅ изобраТСния, ΠΏΠΎΠΆΠ°Π»Π΅ΠΉΡ‚Π΅ врСмя ΠΈ дСньги посСтитСлСй страницы. Π‘ΠΎΠ»ΡŒΡˆΠΎΠΉ ΠΎΠ±ΡŠΡ‘ΠΌ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ ΠΏΡ€ΠΈ Π½ΠΈΠ·ΠΊΠΎΠΉ скорости ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π° ΠΌΠΎΠΆΠ΅Ρ‚ привСсти ΠΊ Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»ΡŒ Π·Π°ΠΊΡ€ΠΎΠ΅Ρ‚ Π’Π°ΡˆΡƒ страницу Π΅Ρ‰Ρ‘ Π΄ΠΎ Ρ‚ΠΎΠ³ΠΎ ΠΌΠΎΠΌΠ΅Π½Ρ‚Π° ΠΊΠ°ΠΊ ΠΎΠ½Π° загрузится.

  • ΠŸΠΎΠΌΠ½ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡƒΠΌΡ‹ΡˆΠ»Π΅Π½Π½ΠΎ Π² своём Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ рисунков, Π΄Π°Π±Ρ‹ ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ‚ΡŒ Π½Π° Ρ‚Ρ€Π°Ρ„ΠΈΠΊΠ΅, Π° ΠΏΠΎ сСму Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ ΡΠΎΠ±Π»ΡŽΠ΄Π°Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ совСты:

  • Если рисунки Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡŽΡ‚ Ρ€ΠΎΠ»ΡŒ ΠΊΠ½ΠΎΠΏΠΎΠΊ (см. Π³Π»Π°Π²Π° ссылки), ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ подписывайтС ΠΈΡ… (Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ 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. Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΈ ΠΊ ΠΊΠΎΠ΄Ρƒ. БущСствуСт нСсколько Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² записи ΠΊΠΎΠ΄Π°, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Ρ„ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ.

  1. ΠΠ°ΠΏΠΈΡΠ°Ρ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ Ρ‚Π΅Π³Π°.
  2. Π§Π΅Ρ€Π΅Π· CSS ΡΡ‚ΠΈΠ»ΡŒ Π² HTML ΠΊΠΎΠ΄Π΅.
  3. ΠΠ°ΠΏΠΈΡΠ°Ρ‚ΡŒ CSS ΡΡ‚ΠΈΠ»ΡŒ Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΌ Ρ„Π°ΠΉΠ»Π΅.

Как Π² HTML ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΎΠΉ, Ρ€Π΅ΡˆΠ°Ρ‚ΡŒ Π²Π°ΠΌ, Π½ΠΎ Ρ…ΠΎΡ‚Π΅Π»ΠΎΡΡŒ Π±Ρ‹ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΏΠ°Ρ€Ρƒ слов ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ Π±Ρ‹Π»ΠΎ Π±Ρ‹ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΎΠΏΡ‚ΠΈΠΌΠ°Π»ΡŒΠ½ΠΎ. ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΌΠ΅Ρ‚ΠΎΠ΄ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ написания Ρ‡Π΅Ρ€Π΅Π· Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Ρ‚Π΅Π³Π° ΡƒΠΆΠ΅ Π΄Π°Π²Π½ΠΎ устарСл. Π’Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² ΠΎΡ‡Π΅Π½ΡŒ Ρ€Π΅Π΄ΠΊΠΈΡ… случаях, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ получаСтся ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°. А Ρ‚Ρ€Π΅Ρ‚ΠΈΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ самый распространСнный ΠΈ эффСктивный. Π’ΠΎΡ‚ HTML ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Ρ‚Π΅Π³ΠΎΠ²:

  1. ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ способ записи Ρ‡Π΅Ρ€Π΅Π· Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Ρ‚Π΅Π³Π° (body) Π² Ρ„Π°ΠΉΠ»Π΅ index.htm. Он записываСтся Π² Ρ‚Π°ΠΊΠΎΠΌ Π²ΠΈΠ΄Π΅: (body background= «НазваниС_ΠΏΠ°ΠΏΠΊΠΈ/НазваниС_ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ.Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅Β»)(/body). Π’ΠΎ Π΅ΡΡ‚ΡŒ Ссли Ρƒ нас ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° с Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ Β«PictureΒ» ΠΈ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ΠΌ JPG, Π° ΠΏΠ°ΠΏΠΊΡƒ ΠΌΡ‹ Π½Π°Π·Π²Π°Π»ΠΈ ΠΊΠ°ΠΊ Β«ImagesΒ», Ρ‚ΠΎΠ³Π΄Π° запись HTML-ΠΊΠΎΠ΄Π° Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ: (body background=Β»Images/Picture.jpgΒ»)… (/body).
  2. Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΌΠ΅Ρ‚ΠΎΠ΄ записи Π·Π°Ρ‚Ρ€Π°Π³ΠΈΠ²Π°Π΅Ρ‚ CSS ΡΡ‚ΠΈΠ»ΡŒ, Π½ΠΎ записываСтся Π² Ρ‚ΠΎΠΌ ΠΆΠ΅ Ρ„Π°ΠΉΠ»Π΅ с Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ index.htm. (body../Images/Picture.jpgΒ»)Β»).
  3. И Ρ‚Ρ€Π΅Ρ‚ΠΈΠΉ способ записи производится Π² Π΄Π²ΡƒΡ… Ρ„Π°ΠΉΠ»Π°Ρ…. Π’ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅ с Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ 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 ΡΡ‚ΠΈΠ»ΡŒ ΠΏΠΎΠ΄Π³ΠΎΠ½ΡΡ‚ΡŒ ΠΏΠΎΠ΄ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π² соврСмСнноС врСмя развития смартфонов ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΡΡ‚Π°Ρ€Π°ΡŽΡ‚ΡΡ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ сайты, Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ ΠΈ ΠΏΠΎΠ΄ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ вСрсии ΠΈ ΠΏΠΎΠ΄ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π½Ρ‹ΠΉ Π²ΠΈΠ΄.

Π’ HTML изобраТСния Π²ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ΡΡ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π΅Π³Π° img .
Π’Π΅Π³ 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, rightbottomleft ΠΈ 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 1em right 3em; /* Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ позиционируСтся Π½Π° 1em Π²Π½ΠΈΠ· ΠΎΡ‚ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ ΡƒΠ³Π»Π° ΠΈ Π½Π° 3em Π²Π»Π΅Π²ΠΎ ΠΎΡ‚ ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ ΡƒΠ³Π»Π° */

background-position: right 1em bottom 1em; /* Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ позиционируСтся Π½Π° 1em Π²Π²Π΅Ρ€Ρ… ΠΎΡ‚ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΡƒΠ³Π»Π° ΠΈ 1em Π²Π»Π΅Π²ΠΎ ΠΎΡ‚ ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ ΡƒΠ³Π»Π° */

background-position: left 20px bottom 50px;

Если ΡƒΠΊΠ°Π·Π°Π½ΠΎ Ρ‚Ρ€ΠΈ ΠΈΠ· Ρ‡Π΅Ρ‚Ρ‹Ρ€Ρ‘Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ, Ρ‡Π΅Ρ‚Π²Ρ‘Ρ€Ρ‚ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ приравниваСтся ΠΊ Π½ΡƒΠ»ΡŽ.

ΠŸΡ€ΠΈ использовании Ρ‡Π΅Ρ‚Ρ‹Ρ€Ρ‘Ρ…Π·Π½Π°Ρ‡Π½ΠΎΠ³ΠΎ синтаксиса слСдуСт ΠΊΠΎΠ΅-Ρ‡Ρ‚ΠΎ ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ: ΠΊΠΎΠ³Π΄Π° ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½ΠΎ Ρ‚Ρ€ΠΈ ΠΈΠ»ΠΈ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ значСния, Ρ‚ΠΎΠ³Π΄Π° ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ Π΄Π»ΠΈΠ½Π° ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ смСщСниС ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΠ΄Ρ‚ΠΈ Π·Π° ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹ΠΌ словом, ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌ ΠΊΡ€Π°ΠΉ, ΠΎΡ‚ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. НапримСр, background-position: bottom 10px right 20px ΠΏΡ€Π΅Π΄ΡΡ‚авляСт Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ смСщСниС Π½Π° 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 Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ для ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ содСрТания.
  • Если
    с ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ 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.
Автор записи

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

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