Image html background no repeat: background-repeat | htmlbook.ru

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

background-repeat — CSS | MDN

Бвойство background-repeat устанавливаСт, ΠΊΠ°ΠΊ фоновыС изобраТСния Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒΡΡ. Они ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒΡΡ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ оси ΠΈΠ»ΠΈ Π½Π΅ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒΡΡ вовсС.

The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Π˜ΡΡ…ΠΎΠ΄Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ этого ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° хранится Π² Ρ€Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠΈ GitHub. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ внСсти свой Π²ΠΊΠ»Π°Π΄ Π² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ², поТалуйста, ΠΊΠ»ΠΎΠ½ΠΈΡ€ΡƒΠΉΡ‚Π΅ Β https://github.com/mdn/interactive-examplesΒ ΠΈ ΠΎΡ‚ΠΏΡ€Π°Π²ΡŒΡ‚Π΅ Π½Π°ΠΌ запрос Π½Π° ΠΈΠ·Π²Π»Π΅Ρ‡Π΅Π½ΠΈΠ΅.

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, изобраТСния ΠΎΠ±Ρ€Π΅Π·Π°ΡŽΡ‚ΡΡ ΠΏΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ элСмСнта, Π½ΠΎ ΠΈΡ… ΠΌΠΎΠΆΠ½ΠΎ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ (ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡΒ round) ΠΈΠ»ΠΈ Ρ€Π°Π²Π½ΠΎΠΌΠ΅Ρ€Π½ΠΎ Ρ€Π°ΡΡ‚ΡΠ½ΡƒΡ‚ΡŒ ΠΎΡ‚ ΠΊΠΎΠ½Ρ†Π° ΠΊ ΠΊΠΎΠ½Ρ†ΡƒΒ (ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡΒ space).

Β 

/*ΠšΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ значСния*/
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
​​​​​​​background-repeat: space;
​​​​​​​background-repeat: round;
​​​​​​​background-repeat: no-repeat;

/*Π”Π²Π° значСния: Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ | Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅*/
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

/* Π“Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹Π΅ значСния */
background-repeat: inherit;
background-repeat: initial;
background-repeat: unset;

ЗначСния

<repeat-style>
Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΠΎΠ΄Π½ΠΎΠ·Π½Π°Ρ‡Π½Ρ‹Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ Π΄Π²ΡƒΡ…Π·Π½Π°Ρ‡Π½Ρ‹Π΅ эквивалСнты:
repeat-xΡ‚ΠΎΠΆΠ΅ самоС, Ρ‡Ρ‚ΠΎ ΠΈΒ repeat no-repeat
repeat-yΡ‚ΠΎΠΆΠ΅ самоС, Ρ‡Ρ‚ΠΎ ΠΈ no-repeat repeat
repeatΡ‚ΠΎΠΆΠ΅ самоС, Ρ‡Ρ‚ΠΎ ΠΈ repeat repeat
spaceΡ‚ΠΎΠΆΠ΅ самоС, Ρ‡Ρ‚ΠΎ ΠΈ space space
roundΡ‚ΠΎΠΆΠ΅ самоС, Ρ‡Ρ‚ΠΎ ΠΈ round round
no-repeatΡ‚ΠΎΠΆΠ΅ самоС, Ρ‡Ρ‚ΠΎ ΠΈ no-repeat no-repeat

Π’ Π΄Π²ΡƒΡ…Π·Π½Π°Ρ‡Π½ΠΎΠΌ синтаксисС ΠΏΠ΅Ρ€Π²ΠΎΠ΅ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅ повторСния, Π° Π²Ρ‚ΠΎΡ€ΠΎΠ΅ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅.

repeatΠ˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‚ΡΡ ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ, сколько Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΠΎΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ элСмСнта, послСднСС обрСзаСтся, Ссли Π½Π΅ Ρ…Π²Π°Ρ‚Π°Π΅Ρ‚ мСста.
spaceΠ˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ повторяСтся Π² Π·Π°Π΄Π°Π½Π½ΠΎΠΌ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ€Π°Π·, сколько Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΡ€Ρ‹Ρ‚ΡŒ Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ области рисования Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния, Π½Π΅ обрСзая ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. ΠžΡΡ‚Π°Π²ΡˆΠ΅Π΅ΡΡ Π½Π΅Π·Π°ΠΊΡ€Ρ‹Ρ‚ΠΎΠ΅ пространство Ρ€Π°Π²Π½ΠΎΠΌΠ΅Ρ€Π½ΠΎ распрСдСлСно ΠΌΠ΅ΠΆΠ΄Ρƒ изобраТСниями. ΠŸΠ΅Ρ€Π²ΠΎΠ΅ ΠΈ послСднСС изобраТСния ΠΊΠ°ΡΠ°ΡŽΡ‚ΡΡ края элСмСнта. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ CSS свойства background-position игнорируСтся для рассматриваСмого направлСния, Π·Π° ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ случаСв, ΠΊΠΎΠ³Π΄Π° ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ большС области рисования Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния, Ρ‡Ρ‚ΠΎ являСтся СдинствСнным случаСм, ΠΊΠΎΠ³Π΄Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΠ±Ρ€Π΅Π·Π°Π½ΠΎ, ΠΊΠΎΠ³Π΄Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ space.
roundΠ˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ повторяСтся Π² Π·Π°Π΄Π°Π½Π½ΠΎΠΌ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ€Π°Π·, сколько Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΡ€Ρ‹Ρ‚ΡŒ Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ области рисования Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния, Π½Π΅ обрСзая ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. Если ΠΎΠ½ΠΎ Π½Π΅ ΠΏΠΎΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ Ρ‚ΠΎΡ‡Π½ΠΎ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ, ΠΏΠ»ΠΈΡ‚ΠΊΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ Π² этом Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Π΅ΠΉ.
no-repeatΠ˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ повторяСтся (ΠΈ, ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, ΠΎΠ±Π»Π°ΡΡ‚ΡŒ рисования Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΠΎΠΊΡ€Ρ‹Ρ‚Π°). РасполоТСниС Π½Π΅ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‰Π΅Π³ΠΎΡΡ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния опрСдСляСтся CSS свойством background-position.

HTML

<ol>
    <li>no-repeat
        <div>&nbsp;</div>
    </li>
    <li>repeat
        <div>&nbsp;</div>
    </li>
    <li>repeat-x
        <div>&nbsp;</div>
    </li>
    <li>repeat-y
        <div>&nbsp;</div>
    </li>
    <li>repeat-x, repeat-y (multiple images)
        <div>&nbsp;</div>
    </li>
</ol>

CSS


li {margin-bottom: 12px;}
div {
    background-image: url(https://mdn. mozillademos.org/files/12005/starsolid.gif);
    width: 144px;
    height: 84px;
}


.one {
    background-repeat: no-repeat;
}
.two {
    background-repeat: repeat;
}
.three {
    background-repeat: repeat-x;
}
.four {
    background-repeat: repeat-y;
}


.five {
    background-image:  url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
                       url(https://developer.mozilla.org/static/img/favicon32.png);
    background-repeat: repeat-x,
                       repeat-y;
    height: 144px;
}

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ элСмСнту списка соотвСтствуСт Π΄Ρ€ΡƒΠ³ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ background-repeat.

BCD tables only load in the browser

background — CSS | MDN

Π‘ΠΎΠΊΡ€Π°Ρ‰Ρ‘Π½Π½ΠΎΠ΅Β CSS свойство backgroundΒ  устанавливаСт сразу всС свойства стиля Ρ„ΠΎΠ½Π°, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Ρ†Π²Π΅Ρ‚, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, источник ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€, ΠΈΠ»ΠΈ ΠΌΠ΅Ρ‚ΠΎΠ΄ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π°.

The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github. com/mdn/interactive-examples and send us a pull request.

Π˜ΡΡ…ΠΎΠ΄Π½Ρ‹ΠΉ код этого ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° хранится Π² Ρ€Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠΈ GitHub.Β  Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ внСсти свой Π²ΠΊΠ»Π°Π΄ Π² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ², поТалуйста ΠΊΠ»ΠΎΠ½ΠΈΡ€ΡƒΠΉΡ‚Π΅ https://github.com/mdn/interactive-examplesΒ ΠΈ ΠΎΡ‚ΠΏΡ€Π°Π²ΡŒΡ‚Π΅ Π½Π°ΠΌ запрос Π½Π° ΠΈΠ·Π²Π»Π΅Ρ‡Π΅Π½ΠΈΠ΅..

Бвойство являСтся сокращСниСм, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ‚Β ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ свойства Π² ΠΎΠ΄Π½ΠΎΠΌ объявлСнии: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, ΠΈ background-attachment.

Как ΠΈ Π²ΠΎ всСх сокращённых свойствах, Π»ΡŽΠ±Ρ‹Π΅ ΠΏΡ€ΠΎΠΏΡƒΡ‰Π΅Π½Π½Ρ‹Π΅ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ значСния Π±ΡƒΠ΄ΡƒΡ‚ установлСны Π² свои ΠΈΠ·Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹Π΅ значСния.


background: green;


background: url("test.jpg") repeat-y;


background: border-box red;


background: no-repeat center/80% url("../img/image.png");

ΠŸΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠ΅: background-color ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° послСднСм Ρ„ΠΎΠ½Π΅, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ для всСго элСмСнта сущСствуСт Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°.

ЗначСния

Π€ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ синтаксис

[ (en-US) <bg-layer> , ] (en-US)* (en-US) <final-bg-layer>

Π³Π΄Π΅
<bg-layer> = <bg-image> || (en-US) <bg-position> [ (en-US) / <bg-size> ] (en-US)? (en-US) || (en-US) <repeat-style> || (en-US) <attachment> || (en-US) <box> || (en-US) <box>
<final-bg-layer> = <'background-color'> || (en-US) <bg-image> || (en-US) <bg-position> [ (en-US) / <bg-size> ] (en-US)? (en-US) || (en-US) <repeat-style> || (en-US) <attachment> || (en-US) <box> || (en-US) <box>

Π³Π΄Π΅
<bg-image> = none | (en-US) <image> (en-US)
<bg-position> = [ (en-US) [ (en-US) left | (en-US) center | (en-US) right | (en-US) top | (en-US) bottom | (en-US) <length-percentage> ] (en-US) | (en-US) [ (en-US) left | (en-US) center | (en-US) right | (en-US) <length-percentage> ] (en-US) [ (en-US) top | (en-US) center | (en-US) bottom | (en-US) <length-percentage> ] (en-US) | (en-US) [ (en-US) center | (en-US) [ (en-US) left | (en-US) right ] (en-US) <length-percentage>? (en-US) ] (en-US) && (en-US) [ (en-US) center | (en-US) [ (en-US) top | (en-US) bottom ] (en-US) <length-percentage>? (en-US) ] (en-US) ] (en-US)
<bg-size> = [ (en-US) <length-percentage> | (en-US) auto ] (en-US){ (en-US)1,2} (en-US) | (en-US) cover | (en-US) contain
<repeat-style> = repeat-x | (en-US) repeat-y | (en-US) [ (en-US) repeat | (en-US) space | (en-US) round | (en-US) no-repeat ] (en-US){ (en-US)1,2} (en-US)
<attachment> = scroll | (en-US) fixed | (en-US) local
<box> = border-box | (en-US) padding-box | (en-US) content-box

Π³Π΄Π΅
<image> = <url> | (en-US) <image()> | (en-US) <image-set()> | (en-US) <element()> | (en-US) <paint()> | (en-US) <cross-fade()> | (en-US) <gradient>
<length-percentage> = <length> | (en-US) <percentage>

Π³Π΄Π΅
<image()> = image( <image-tags>? (en-US) [ (en-US) <image-src>? (en-US) , <color>? (en-US) ] (en-US)! (en-US) )
<image-set()> = image-set( <image-set-option># (en-US) )
<element()> = element( <id-selector> )
<paint()> = paint( <ident> (en-US), <declaration-value>? (en-US) )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? (en-US) )
<gradient> = <linear-gradient()> | (en-US) <repeating-linear-gradient()> | (en-US) <radial-gradient()> | (en-US) <repeating-radial-gradient()> | (en-US) <conic-gradient()>

Π³Π΄Π΅
<image-tags> = ltr | (en-US) rtl
<image-src> = <url> | (en-US) <string> (en-US)
<color> = <rgb()> | (en-US) <rgba()> | (en-US) <hsl()> | (en-US) <hsla()> | (en-US) <hex-color> | (en-US) <named-color> | (en-US) currentcolor | (en-US) <deprecated-system-color>
<image-set-option> = [ (en-US) <image> (en-US) | (en-US) <string> (en-US) ] (en-US) <resolution> (en-US)
<id-selector> = <hash-token>
<cf-mixing-image> = <percentage>? (en-US) && (en-US) <image> (en-US)
<cf-final-image> = <image> (en-US) | (en-US) <color>
<linear-gradient()> = linear-gradient( [ (en-US) <angle> | (en-US) to <side-or-corner> ] (en-US)? (en-US) , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ (en-US) <angle> | (en-US) to <side-or-corner> ] (en-US)? (en-US) , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ (en-US) <ending-shape> || (en-US) <size> ] (en-US)? (en-US) [ (en-US) at <position> (en-US) ] (en-US)? (en-US) , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ (en-US) <ending-shape> || (en-US) <size> ] (en-US)? (en-US) [ (en-US) at <position> (en-US) ] (en-US)? (en-US) , <color-stop-list> )
<conic-gradient()> = conic-gradient( [ (en-US) from <angle> ] (en-US)? (en-US) [ (en-US) at <position> (en-US) ] (en-US)? (en-US), <angular-color-stop-list> )

Π³Π΄Π΅
<rgb()> = rgb( <percentage>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <percentage># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgb( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<rgba()> = rgba( <percentage>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <percentage># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgba( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<hsl()> = hsl( <hue> <percentage> <percentage> [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsl( <hue>, <percentage>, <percentage>, <alpha-value>? (en-US) )
<hsla()> = hsla( <hue> <percentage> <percentage> [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsla( <hue>, <percentage>, <percentage>, <alpha-value>? (en-US) )
<side-or-corner> = [ (en-US) left | (en-US) right ] (en-US) || (en-US) [ (en-US) top | (en-US) bottom ] (en-US)
<color-stop-list> = [ (en-US) <linear-color-stop> [ (en-US), <linear-color-hint>] (en-US)? (en-US) ] (en-US)# (en-US) , <linear-color-stop>
<ending-shape> = circle | (en-US) ellipse
<size> = closest-side | (en-US) farthest-side | (en-US) closest-corner | (en-US) farthest-corner | (en-US) <length> | (en-US) <length-percentage>{ (en-US)2} (en-US)
<position> = [ (en-US) [ (en-US) left | (en-US) center | (en-US) right ] (en-US) || (en-US) [ (en-US) top | (en-US) center | (en-US) bottom ] (en-US) | (en-US) [ (en-US) left | (en-US) center | (en-US) right | (en-US) <length-percentage> ] (en-US) [ (en-US) top | (en-US) center | (en-US) bottom | (en-US) <length-percentage> ] (en-US)? (en-US) | (en-US) [ (en-US) [ (en-US) left | (en-US) right ] (en-US) <length-percentage> ] (en-US) && (en-US) [ (en-US) [ (en-US) top | (en-US) bottom ] (en-US) <length-percentage> ] (en-US) ] (en-US)
<angular-color-stop-list> = [ (en-US) <angular-color-stop> [ (en-US), <angular-color-hint>] (en-US)? (en-US) ] (en-US)# (en-US) , <angular-color-stop>

Π³Π΄Π΅
<alpha-value> = <number> | (en-US) <percentage>
<hue> = <number> | (en-US) <angle>
<linear-color-stop> = <color> <color-stop-length>? (en-US)
<linear-color-hint> = <length-percentage>
<angular-color-stop> = <color> && (en-US) <color-stop-angle>? (en-US)
<angular-color-hint> = <angle-percentage>

Π³Π΄Π΅
<color-stop-length> = <length-percentage>{ (en-US)1,2} (en-US)
<color-stop-angle> = <angle-percentage>{ (en-US)1,2} (en-US)
<angle-percentage> = <angle> | (en-US) <percentage>

HTML

<p>
  Starry sky<br/>
  Twinkle twinkle<br/>
  Starry sky
</p>
<p>Here is a paragraph<p>

CSS

. warning {
  background: red;
}

.topbanner {
  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #00D repeat-y fixed;
}

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚

BCD tables only load in the browser

ΠΏΠΎΠ²Ρ‚ΠΎΡ€ Ρ„ΠΎΠ½Π° β€” ΡƒΡ‡Π΅Π±Π½ΠΈΠΊ CSS

Если элСмСнту Π·Π°Π΄Π°Ρ‚ΡŒ свойство background-image, Ρ‚ΠΎ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ рисунок Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒΡΡ Π² Π΄Π²ΡƒΡ… осях β€” ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ (x) ΠΈ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ (y). Для ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° возьмСм нСбольшоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с Π±Π΅ΡΡˆΠΎΠ²Π½Ρ‹ΠΌ Ρ„ΠΎΠ½ΠΎΠΌ:

И установим Π΅Π³ΠΎ Π² качСствС Ρ„ΠΎΠ½Π° для Π±Π»ΠΎΠΊΠ° div:

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ дублируСтся ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ

Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ Ρ„ΠΎΠ½ продублировался ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ оси, Π½Π° всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ высоту нашСго Π±Π»ΠΎΠΊΠ° (ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΠΌ, Ρ‡Ρ‚ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ Π±Π»ΠΎΠΊΠ° div ΠΌΡ‹ ΡƒΠΊΠ°Π·Π°Π»ΠΈ Π·Π°Ρ€Π°Π½Π΅Π΅).

Бвойство background-repeat

Бвойство background-repeat ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΎ для управлСния ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΎΠΌ Ρ„ΠΎΠ½Π°, Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ Ρ‡Π΅Ρ€Π΅Π· background-image. ΠŸΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ ΠΎΠ½ΠΎ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ значСния:

  • repeat β€” Ρ‚ΠΎ ΠΆΠ΅, Ρ‡Ρ‚ΠΎ ΠΈ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ β€” ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ заполняСт элСмСнт Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΌ рисунком Π½Π°Ρ‚ΡƒΡ€Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, повторяя Π΅Π³ΠΎ свСрху Π²Π½ΠΈΠ· ΠΈ слСва Π½Π°ΠΏΡ€Π°Π²ΠΎ. Π’Π°ΠΊΠΎΠΉ эффСкт Ρ…ΠΎΡ€ΠΎΡˆΠΎ смотрится Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€ΠΈ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠΌ ΠΏΠΎΠ΄Π±ΠΎΡ€Π΅ Ρ„ΠΎΠ½Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π² ΠΈΠ΄Π΅Π°Π»Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ Π±Π΅ΡΡˆΠΎΠ²Π½Ρ‹ΠΌ, Π½Π΅ слишком ярким, малоконтрастным.
  • no-repeat β€” заполняСт элСмСнт Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΌ рисунком ΠΎΠ΄ΠΈΠ½ Ρ€Π°Π·. Π Π°Π·ΠΌΠ΅Ρ€ Ρ„ΠΎΠ½Π° остаСтся Π½Π°Ρ‚ΡƒΡ€Π°Π»ΡŒΠ½Ρ‹ΠΌ (Π½Π΅ суТаСтся ΠΈ Π½Π΅ растягиваСтся). Бвойство с Π΄Π°Π½Π½Ρ‹ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ ΠΎΡ‡Π΅Π½ΡŒ часто примСняСтся Π½Π° ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅ (ΠΌΡ‹ рассмотрим это Π΄Π°Π»Π΅Π΅ Π² ΠΊΠ½ΠΈΠ³Π΅).

    background-repeat: no-repeat

  • repeat-x β€” Ρ„ΠΎΠ½ повторяСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ (оси x), Π΄ΠΎ ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ заполнСния элСмСнта ΠΏΠΎ ΡˆΠΈΡ€ΠΈΠ½Π΅. Π£Π΄ΠΎΠ±Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для оформлСния элСмСнтов интСрфСйса (графичСская полоска вдоль шапки сайта ΠΈ Ρ‚.Β ΠΏ.).

    background-repeat: repeat-x

  • repeat-y β€” Ρ„ΠΎΠ½ повторяСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ (оси y), Π΄ΠΎ ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ заполнСния элСмСнта ΠΏΠΎ высотС. Π£Π΄ΠΎΠ±Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для оформлСния элСмСнтов интСрфСйса (графичСская полоска ΠΏΠΎ высотС сайдбара ΠΈ Ρ‚.Β ΠΏ.).

    background-repeat: repeat-y

Π­Ρ‚ΠΈ значСния ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ всСми Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ IE6. БущСствуСт Π΅Ρ‰Π΅ Π΄Π²Π° значСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² соврСмСнных вСрсиях Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² (IE10+, Edge 12+, Firefox 49+, Chrome 32+, Safari 7+, Opera 19+):

  • round β€” Ρ„ΠΎΠ½ повторяСтся Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π² ΠΎΠ±Π»Π°ΡΡ‚ΡŒ элСмСнта ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΠ»ΠΎΡΡŒ Ρ†Π΅Π»ΠΎΠ΅ число ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Если это Π½Π΅ удаСтся ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, Ρ„ΠΎΠ½ автоматичСски подгоняСтся (ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅Ρ‚ΡΡ), Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ ΡƒΡΠ»ΠΎΠ²ΠΈΡŽ.

    background-repeat: round

  • space β€” Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅Π΅ свойство, Π½ΠΎ с ΠΎΠ΄Π½ΠΈΠΌ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ΠΌ: Ссли Ρ†Π΅Π»ΠΎΠ΅ число ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π΅ помСщаСтся Π² ΠΎΠ±Π»Π°ΡΡ‚ΡŒ, рисунки Π½Π΅ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΡŽΡ‚ΡΡ, Π° ΠΌΠ΅ΠΆΠ΄Ρƒ Π½ΠΈΠΌΠΈ добавляСтся пространство.

    background-repeat: space


Π˜Ρ‚Π°ΠΊ, Π²Ρ‹ ΡƒΠΆΠ΅ Π·Π½Π°Π΅Ρ‚Π΅, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Ρ„ΠΎΠ½ ΠΊ элСмСнту, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΊΠ°ΠΊ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Π΅Π³ΠΎ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠ΅ΠΌ. Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΡƒΡ€ΠΎΠΊΠ΅ Π²Ρ‹ ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚Π΅ΡΡŒ с Π΅Ρ‰Π΅ ΠΎΠ΄Π½ΠΈΠΌ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌ свойством β€” background-position.

background-repeat — CSS: каскадныС Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй

Бвойство CSS background-repeat устанавливаСт способ повторСния Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒΡΡ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ осям ΠΈΠ»ΠΈ Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π΅ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒΡΡ.

Π˜ΡΡ…ΠΎΠ΄Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ этого ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° хранится Π² Ρ€Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠΈ GitHub. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ внСсти свой Π²ΠΊΠ»Π°Π΄ Π² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ², ΠΊΠ»ΠΎΠ½ΠΈΡ€ΡƒΠΉΡ‚Π΅ https://github.com/mdn/interactive-examples ΠΈ ΠΎΡ‚ΠΏΡ€Π°Π²ΡŒΡ‚Π΅ Π½Π°ΠΌ запрос Π½Π° пСрСнос.

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‰ΠΈΠ΅ΡΡ изобраТСния ΠΎΠ±Ρ€Π΅Π·Π°ΡŽΡ‚ΡΡ ΠΏΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ элСмСнта, Π½ΠΎ ΠΈΡ… ΠΌΠΎΠΆΠ½ΠΎ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ (ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ , округляя ) ΠΈΠ»ΠΈ Ρ€Π°Π²Π½ΠΎΠΌΠ΅Ρ€Π½ΠΎ Ρ€Π°ΡΠΏΡ€Π΅Π΄Π΅Π»ΡΡ‚ΡŒ ΠΎΡ‚ ΠΊΠΎΠ½Ρ†Π° Π΄ΠΎ ΠΊΠΎΠ½Ρ†Π° (ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ пространство ).

 
Ρ„ΠΎΠ½-ΠΏΠΎΠ²Ρ‚ΠΎΡ€: ΠΏΠΎΠ²Ρ‚ΠΎΡ€-Ρ…;
Ρ„ΠΎΠ½-ΠΏΠΎΠ²Ρ‚ΠΎΡ€: ΠΏΠΎΠ²Ρ‚ΠΎΡ€-Ρƒ;
Ρ„ΠΎΠ½-ΠΏΠΎΠ²Ρ‚ΠΎΡ€: ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ;
Ρ„ΠΎΠ½-ΠΏΠΎΠ²Ρ‚ΠΎΡ€: ΠΏΡ€ΠΎΠ±Π΅Π»;
Ρ„ΠΎΠ½-ΠΏΠΎΠ²Ρ‚ΠΎΡ€: ΠΊΡ€ΡƒΠ³Π»Ρ‹ΠΉ;
Ρ„ΠΎΠ½-ΠΏΠΎΠ²Ρ‚ΠΎΡ€: Π±Π΅Π· повторСния;


background-repeat: ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠ±Π΅Π»;
Ρ„ΠΎΠ½-ΠΏΠΎΠ²Ρ‚ΠΎΡ€: ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠ΅ повторСния;
Ρ„ΠΎΠ½-ΠΏΠΎΠ²Ρ‚ΠΎΡ€: ΠΊΡ€ΡƒΠ³Π»ΠΎΠ΅ пространство;
Ρ„ΠΎΠ½-ΠΏΠΎΠ²Ρ‚ΠΎΡ€: Π±Π΅Π· повторСния Ρ€Π°ΡƒΠ½Π΄Π°;


Ρ„ΠΎΠ½-ΠΏΠΎΠ²Ρ‚ΠΎΡ€: Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ;
Ρ„ΠΎΠ½-ΠΏΠΎΠ²Ρ‚ΠΎΡ€: Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΉ;
Ρ„ΠΎΠ½-ΠΏΠΎΠ²Ρ‚ΠΎΡ€: Π½Π΅ Π·Π°Π΄Π°Π½ΠΎ;
  

ЗначСния

<ΡΡ‚ΠΈΠ»ΡŒ повторСния>
ΠžΠ΄Π½ΠΎΠ·Π½Π°Ρ‡Π½Ρ‹ΠΉ синтаксис являСтся сокращСниСм ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ Π΄Π²ΡƒΡ…Π·Π½Π°Ρ‡Π½ΠΎΠ³ΠΎ синтаксиса:
Одно Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π”Π²ΡƒΡ…Π·Π½Π°Ρ‡Π½Ρ‹ΠΉ эквивалСнт
ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ x ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠ΅ Π±Π΅Π· повторСния
ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½Ρ‹ΠΉ Π±Π΅Π· ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π°
ΠΏΠΎΠ²Ρ‚ΠΎΡ€ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠ΅
мСсто космос
ΠΊΡ€ΡƒΠ³Π»Ρ‹ΠΉ ΠΊΡ€ΡƒΠ³Π»Ρ‹ΠΉ ΠΊΡ€ΡƒΠ³Π»Ρ‹ΠΉ
Π±Π΅Π· ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π° Π±Π΅Π· ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π° Π‘Π΅Π· ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π°

Π’ синтаксисС с двумя значСниями ΠΏΠ΅Ρ€Π²ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ прСдставляСт ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ повторСния ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, Π° Π²Ρ‚ΠΎΡ€ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ прСдставляСт ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ. Π’ΠΎΡ‚ объяснСниС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π² любом Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ:

ΠΏΠΎΠ²Ρ‚ΠΎΡ€ Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ повторяСтся ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ, сколько Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΡ€Ρ‹Ρ‚ΡŒ всю ΠΎΠ±Π»Π°ΡΡ‚ΡŒ рисования Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния. ПослСднСС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ±Ρ€Π΅Π·Π°Π½ΠΎ, Ссли ΠΎΠ½ΠΎ Π½Π΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚.
мСсто Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ максимально повторяСтся Π±Π΅Π· ΠΎΠ±Ρ€Π΅Π·ΠΊΠΈ. ΠŸΠ΅Ρ€Π²ΠΎΠ΅ ΠΈ послСднСС изобраТСния ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»ΡΡŽΡ‚ΡΡ ΠΊ любой сторонС элСмСнта, Π° ΠΏΡ€ΠΎΠ±Π΅Π»Ρ‹ Ρ€Π°ΡΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ΡΡ ΠΌΠ΅ΠΆΠ΄Ρƒ изобраТСниями Ρ€Π°Π²Π½ΠΎΠΌΠ΅Ρ€Π½ΠΎ.Бвойство background-position игнорируСтся, Ссли Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΎ Π±Π΅Π· ΠΎΠ±Ρ€Π΅Π·ΠΊΠΈ. ЕдинствСнный случай, ΠΊΠΎΠ³Π΄Π° отсСчСниС происходит с использованиСм пространства , — это ΠΊΠΎΠ³Π΄Π° нСдостаточно мСста для отобраТСния ΠΎΠ΄Π½ΠΎΠ³ΠΎ изобраТСния.
ΠΊΡ€ΡƒΠ³Π»Ρ‹ΠΉ По ΠΌΠ΅Ρ€Π΅ увСличСния допустимого пространства ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‰ΠΈΠ΅ΡΡ изобраТСния Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°ΡΡ‚ΡΠ³ΠΈΠ²Π°Ρ‚ΡŒΡΡ (Π½Π΅ оставляя ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΊΠΎΠ²) Π΄ΠΎ Ρ‚Π΅Ρ… ΠΏΠΎΡ€, ΠΏΠΎΠΊΠ° Π½Π΅ останСтся мСсто (ΠΎΡΡ‚Π°Π²ΡˆΠ΅Π΅ΡΡ пространство> = ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Π΅ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ изобраТСния) для добавлСния Π΅Ρ‰Π΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ изобраТСния. Когда добавляСтся ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, всС Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΠ΅ ΡΠΆΠΈΠΌΠ°ΡŽΡ‚ΡΡ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡΠ²ΠΎΠ±ΠΎΠ΄ΠΈΡ‚ΡŒ мСсто.ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с исходной ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ 260 пиксСлСй, ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½Π½ΠΎΠ΅ Ρ‚Ρ€ΠΈ Ρ€Π°Π·Π°, ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π°ΡΡ‚ΡΠ³ΠΈΠ²Π°Ρ‚ΡŒΡΡ Π΄ΠΎ Ρ‚Π΅Ρ… ΠΏΠΎΡ€, ΠΏΠΎΠΊΠ° ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠ΅ Π½Π΅ станСт ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ 300 пиксСлСй, Π° Π·Π°Ρ‚Π΅ΠΌ Π±ΡƒΠ΄Π΅Ρ‚ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. Π—Π°Ρ‚Π΅ΠΌ ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ сТаты Π΄ΠΎ 225 пиксСлСй.
Π±Π΅Π· ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π° Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ повторяСтся (ΠΈ, ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, ΠΎΠ±Π»Π°ΡΡ‚ΡŒ рисования Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π·Π°ΠΊΡ€Ρ‹Ρ‚Π°). ПолоТСниС Π½Π΅ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‰Π΅Π³ΠΎΡΡ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния опрСдСляСтся свойством CSS background-position .

Настройка повторСния Ρ„ΠΎΠ½Π°

HTML
  
  1. Π±Π΅Π· ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π°
  2. ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΈΡ‚ΡŒ
  3. repeat-x
  4. repeat-y
  5. ΠΏΡ€ΠΎΠ±Π΅Π»
  6. Ρ€Π°ΡƒΠ½Π΄
  7. repeat-x, repeat-y (нСсколько ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ)
CSS
 
ΠΎΠ»,
li {
  ΠΌΠ°Ρ€ΠΆΠ°: 0;
  отступ: 0;
}
li {
  ниТнСС полС: 12 пиксСлСй;
}
div {
    background-image: url (https: // mdn. mozillademos.org/files/12005/starsolid.gif);
    ΡˆΠΈΡ€ΠΈΠ½Π°: 160 пиксСлСй;
    высота: 70 пиксСлСй;
}


.ΠΎΠ΄ΠΈΠ½ {
  Ρ„ΠΎΠ½-ΠΏΠΎΠ²Ρ‚ΠΎΡ€: Π±Π΅Π· повторСния;
}
.Π΄Π²Π° {
  Ρ„ΠΎΠ½-ΠΏΠΎΠ²Ρ‚ΠΎΡ€: ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ;
}
.Ρ‚Ρ€ΠΈ {
  Ρ„ΠΎΠ½-ΠΏΠΎΠ²Ρ‚ΠΎΡ€: ΠΏΠΎΠ²Ρ‚ΠΎΡ€-Ρ…;
}
.four {
  Ρ„ΠΎΠ½-ΠΏΠΎΠ²Ρ‚ΠΎΡ€: ΠΏΠΎΠ²Ρ‚ΠΎΡ€-Ρƒ;
}
.ΠΏΡΡ‚ΡŒ {
  Ρ„ΠΎΠ½-ΠΏΠΎΠ²Ρ‚ΠΎΡ€: ΠΏΡ€ΠΎΠ±Π΅Π»;
}
.ΡˆΠ΅ΡΡ‚ΡŒ {
  Ρ„ΠΎΠ½-ΠΏΠΎΠ²Ρ‚ΠΎΡ€: ΠΊΡ€ΡƒΠ³Π»Ρ‹ΠΉ;
}


.БСмь {
  background-image: url (https://mdn.mozillademos.org/files/12005/starsolid.gif),
                     URL (https://developer.mozilla.org/static/img/favicon32.png);
  Ρ„ΠΎΠ½-ΠΏΠΎΠ²Ρ‚ΠΎΡ€: ΠΏΠΎΠ²Ρ‚ΠΎΡ€-Ρ…,
                     ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ-Ρƒ;
  высота: 144 пиксСля;
}  
Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ элСмСнту списка соотвСтствуСт Π΄Ρ€ΡƒΠ³ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ background-repeat .

Π’Π°Π±Π»ΠΈΡ†Ρ‹ BCD Π·Π°Π³Ρ€ΡƒΠΆΠ°ΡŽΡ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ — ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° WordFly

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° ΠΏΠΎΡ‡Ρ‚ΠΎΠ²ΠΎΠ³ΠΎ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π° для Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² ваш Π΄ΠΈΠ·Π°ΠΉΠ½

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° ΠΏΠΎΡ‡Ρ‚ΠΎΠ²ΠΎΠ³ΠΎ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π° для Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ

Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим Π½Π° Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π΅ состояниС Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² ΠΏΠΎΡ‡Ρ‚ΠΎΠ²Ρ‹Ρ… ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°Ρ…. Π˜ΡΡ‚ΠΎΡ€ΠΈΡ‡Π΅ΡΠΊΠΈ Ρ‚Π°ΠΊΠΈΠ΅ ΠΏΠΎΡ‡Ρ‚ΠΎΠ²Ρ‹Π΅ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Ρ‹, ΠΊΠ°ΠΊ Outlook, Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π»ΠΈ Π΅Π³ΠΎ.Π’Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ CSS Π² ΠΊΠΎΠ΄Π΅ элСктронной ΠΏΠΎΡ‡Ρ‚Ρ‹ (ΠΈ конструктор элСктронной ΠΏΠΎΡ‡Ρ‚Ρ‹ Π² соврСмСнном Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ WordFly), ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ для Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Π² элСктронноС письмо, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ ΠΏΠΎΡ‡Ρ‚ΠΎΠ²Ρ‹Ρ… ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ², Π² Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ Π² Π΄Ρ€ΡƒΠ³ΠΈΡ… случаях ΠΎΠ½ΠΎ Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚.

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

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² ΠΏΠΎΡ‡Ρ‚ΠΎΠ²ΠΎΠΌ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π΅

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ повторяСтся ΠΊΠ°ΠΊ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ, Ρ‚Π°ΠΊ ΠΈ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ. МоТно Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ объявлСния CSS, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, ΠΏΠΎ ΠΊΠ°ΠΊΠΎΠΉ оси повторяСтся ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ (x — Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎ, Π° y — Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎ) ΠΈ Π³Π΄Π΅ располагаСтся ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. ΠŸΠΎΡ‡Ρ‚ΠΎΠ²Ρ‹Π΅ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Ρ‹ Π²Π΅Π±-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΈ Apple Mail Π½Π΅ΠΏΠ»ΠΎΡ…ΠΎ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ этот CSS; ΠΎΠ΄Π½Π°ΠΊΠΎ ПК Outlook Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Π΅Π³ΠΎ.

Π”Π•ΠšΠ›ΠΠ ΠΠ¦Π˜Π― CSS Π­Π›Π•ΠšΠ’Π ΠžΠΠΠΠ― ПОЧВА ΠŸΠžΠ”Π”Π•Π Π–ΠšΠ ΠšΠ›Π˜Π•ΠΠ’ΠžΠ’
ЀОН-ΠŸΠžΠ’Π’ΠžΠ : ΠŸΠžΠ’Π’ΠžΠ  (Π’ Π’Π•Π›Π•)

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ΡΡ Π² Outlook Mac.

Outlook PC Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ ΠΊΠ°ΠΊ x, Ρ‚Π°ΠΊ ΠΈ y, нСзависимо ΠΎΡ‚ значСния свойства (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, repeat-x ΠΈΠ»ΠΈ repeat-y).

НС поддСрТиваСтся Π² Android ΠΈΠ»ΠΈ Yahoo, Π½ΠΎ Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ.

ЀОН-ΠŸΠžΠ’Π’ΠžΠ : Π‘Π•Π— ΠŸΠžΠ’Π’ΠžΠ Π

Π‘ΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ Π½Π΅ поддСрТиваСтся Π² Outlook 2000, 2002, 2003.

ВсС ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠ΅ Π»ΠΈΠ±ΠΎ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Π΅Π³ΠΎ, Π»ΠΈΠ±ΠΎ изящно Ρ‚Π΅Ρ€ΠΏΠΈΡ‚ Π½Π΅ΡƒΠ΄Π°Ρ‡Ρƒ (Π»ΠΈΠ±ΠΎ Π² Ρ‚Π΅Π»Π΅, Π»ΠΈΠ±ΠΎ Π² Π΄Ρ€ΡƒΠ³ΠΈΡ… элСмСнтах).

BACKGROUND-REPEAT: REPEAT (IN # EMAIL-CONTAINER)

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ΡΡ Π²Π΅Π·Π΄Π΅! Π—Π° ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ…

Π’ настоящСС врСмя Π½Π΅ поддСрТиваСтся Π² Outlook.

Π˜ΠΌΠ΅ΠΉΡ‚Π΅ Π² Π²ΠΈΠ΄Ρƒ, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠΌΠΈΠΌΠΎ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ ΠΏΠΎΡ‡Ρ‚ΠΎΠ²ΠΎΠ³ΠΎ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°, Ρƒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΏΡ€ΠΎΠ²Π°ΠΉΠ΄Π΅Ρ€ΠΎΠ² Π΅ΡΡ‚ΡŒ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±Π»ΠΎΠΊΠΈΡ€ΡƒΡŽΡ‚ элСктронныС письма с Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΌΠΈ изобраТСниями, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ спамСры использовали встроСнный ΠΊΠΎΠ΄ для автоматичСской Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ своих ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. ΠŸΡ€ΠΎΡ‚Π΅ΡΡ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅ это Ρƒ ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΏΡ€ΠΎΠ²Π°ΠΉΠ΄Π΅Ρ€ΠΎΠ², Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ Π΄ΠΎΡΡ‚Π°Π²Π»ΡΠ΅ΠΌΠΎΡΡ‚ΡŒ вашСй элСктронной ΠΏΠΎΡ‡Ρ‚Ρ‹ Π½Π΅ Π½Π°Ρ€ΡƒΡˆΠ°Π΅Ρ‚ΡΡ.

ВмСсто Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ ΠΎ создании изобраТСния со встроСнным тСкстом.Π’Π·Π²Π΅ΡΡŒΡ‚Π΅ всС Π·Π° ΠΈ ΠΏΡ€ΠΎΡ‚ΠΈΠ² этого ΠΌΠ°Ρ€ΡˆΡ€ΡƒΡ‚Π°. НапримСр, Ссли Ρƒ Π²Π°ΡˆΠΈΡ… подписчиков ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Ρ‹ изобраТСния, Ρ‚ΠΎΠ³Π΄Π° вашС Π²Π΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с тСкстом Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ с Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΌ тСкстом ΠΈ ссылкой пСрСнаправлСния.

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² ваш Π΄ΠΈΠ·Π°ΠΉΠ½ Π² соврСмСнном Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅

Π•ΡΡ‚ΡŒ Π΄Π²Π° Ρ‚ΠΈΠΏΠ° Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π² свой Π΄ΠΈΠ·Π°ΠΉΠ½ Π² Modern Editor: ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‰ΠΈΠ΅ΡΡ ΠΈ Π½Π΅ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‰ΠΈΠ΅ΡΡ.

Π‘ΠžΠ‘Π‘Π’Π’Π•ΠΠΠžΠ‘Π’Π¬ ΠŸΠžΠ”Π ΠžΠ‘ΠΠ•Π•
ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ повторяСтся ΠΊΠ°ΠΊ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ, Ρ‚Π°ΠΊ ΠΈ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ ΠΏΠΎ всСй конструкции
ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΈΡ‚ΡŒ-x ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ повторяСтся ΠΏΠΎ оси x (ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, ΠΎΠ΄Π½Π° линия)
ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ повторяСтся ΠΏΠΎ оси Y (ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ, ΠΎΠ΄Π½Π° линия)
Π±Π΅Π· ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ отобраТаСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ Ρ€Π°Π· Π² Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠΌ Ρ€Π΅ΠΆΠΈΠΌΠ΅

Π’Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ дСйствия, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊ ΠΎΠ΄Π½ΠΎΠΌΡƒ Π±Π»ΠΎΠΊΡƒ Π² вашСм Π΄ΠΈΠ·Π°ΠΉΠ½Π΅:


1. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ свой Π΄ΠΈΠ·Π°ΠΉΠ½ Π² соврСмСнном Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅.

2. Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Π±Π»ΠΎΠΊ, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.

Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ любой Π±Π»ΠΎΠΊ ΠΈΠ· вашСй ΠΏΠ°Π½Π΅Π»ΠΈ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ просмотра.

3. Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Π‘Ρ‚ΠΈΠ»ΠΈ.

4. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ элСмСнт ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ Π±Π»ΠΎΠΊΠ°.

5. ΠŸΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠ· ΠΈ Ρ€Π°Π·Π²Π΅Ρ€Π½ΠΈΡ‚Π΅ Ρ€Π°Π·Π΄Π΅Π» Β«Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ (Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ)Β».

6.Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ‚ΠΈΠΏ отобраТСния Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния — ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ ΠΈΠ»ΠΈ Π½Π΅ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ.

Π’ этом Ρ€Π°Π·Π΄Π΅Π»Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ, Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π»ΠΈ Π²Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΠ»ΠΎΡΡŒ, ΠΈΠ»ΠΈ ΠΎΠ½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π»ΠΎΡΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ Ρ€Π°Π·.

  • Repeat: ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ повторяСтся Π²ΠΎ всСм Π΄ΠΈΠ·Π°ΠΉΠ½Π΅.
  • repeat-x: ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ повторяСтся ΠΏΠΎ оси X (ΠΎΠ΄Π½Π° Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Π°Ρ линия).
  • repeat-y: ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ повторяСтся ΠΏΠΎ оси Y (ΠΎΠ΄Π½Π° Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Π°Ρ линия).
  • no-repeat: ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ отобраТаСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ Ρ€Π°Π· Π² Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠΌ Ρ€Π΅ΠΆΠΈΠΌΠ΅.

7. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния.

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅ ΠΏΠΎΠ»Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Π²Π°ΠΌ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ мСсто размСщСния ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ изобраТСния, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ являСтся ΠΎΡ‚ΠΏΡ€Π°Π²Π½ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΎΠΉ для ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‰Π΅Π³ΠΎΡΡ ΡƒΠ·ΠΎΡ€Π° ΠΈΠ»ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ СдинствСнного изобраТСния, Ссли это ΠΈΠΌΠ΅Π»ΠΎ мСсто.

Если Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ всСму Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ, ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π½Π° Π’ΠΠ‘Π›Π˜Π¦Π£ Π‘Π’Π˜Π›Π•Π™ ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠžΠ‘ΠΠžΠ’ΠΠ«Π•> Π€ΠΎΠ½. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊ своСму элСмСнту Body ΠΈΠ»ΠΈ Container.

Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ | 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-элСмСнтов — Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для всСй страницы (Ρ‚Π΅Π»Π°), Π½ΠΎ ΠΈ для простых, Π½ΠΎ эффСктивных Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΠΎΠ². НапримСр, Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Π΅ изобраТСния ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π½Π° этом Π²Π΅Π±-сайтС ΠΊΠ°ΠΊ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ Π² списках, ΠΊΠ°ΠΊ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ стСкло Π² ΠΏΠΎΠ»Π΅ поиска ΠΈ ΠΊΠ°ΠΊ Π·Π½Π°Ρ‡ΠΊΠΈ Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ Π»Π΅Π²ΠΎΠΌ ΡƒΠ³Π»Ρƒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π·Π°ΠΌΠ΅Ρ‚ΠΎΠΊ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ этой.

HTML — Π€ΠΎΠ½ΠΎΠ²Ρ‹Π΅ изобраТСния. Π˜Ρ‚Π°ΠΊ, Π²Ρ‹ Π΄ΡƒΠΌΠ°Π΅Ρ‚Π΅, Ρ‡Ρ‚ΠΎ Π·Π½Π°Π΅Ρ‚Π΅ Ρ„ΠΎΠ½Ρ‹ HTML… | Π£Ρ‡ΠΈΡ‚Π΅Π»ΡŒ JavaScript

ΠŸΡƒΡ‚Π΅ΠΌ объСдинСния background-repeat: no-repeat; с background-size: 100% ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°ΡΡ‚ΡΠ½ΡƒΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, ΠΏΠΎ всСй ΡˆΠΈΡ€ΠΈΠ½Π΅ элСмСнта:

Π§Ρ‚ΠΎ Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ, Π½ΠΎ ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π΅Π³ΠΎ растянутым ΠΏΠΎ ΡˆΠΈΡ€ΠΈΠ½Π΅? НСт ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ, просто ΡƒΠ΄Π°Π»ΠΈΡ‚Π΅ no-repeat ΠΈΠ· ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅Π³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°.

Π’ΠΎΡ‚ Ρ‡Ρ‚ΠΎ Ρƒ вас получится:

Π­Ρ‚ΠΎΡ‚ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ ΠΌΠ΅Ρ‚ΠΎΠ΄ HTML / CSS ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для сайтов, содСрТимоС ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… растягиваСтся ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ Π½Π° большой ΠΏΠ»ΠΎΡ‰Π°Π΄ΠΈ. Π― Π΄ΡƒΠΌΠ°ΡŽ, Ρ‡Ρ‚ΠΎ сайт Blizzard ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ эту Ρ‚Π΅Ρ…Π½ΠΈΠΊΡƒ. Иногда хочСтся ΠΎΡ‚Ρ€Π΅Π·Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ статичным. Π’ Π΄Ρ€ΡƒΠ³ΠΈΡ… случаях Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ это ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Π»ΠΎΡΡŒ Π²Π΅Ρ‡Π½ΠΎ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ. Π­Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π²ΠΈΡΠ΅Ρ‚ΡŒ ΠΎΡ‚ видСния вашСго Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

Иногда Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Ρ€Π°ΡΡ‚ΡΠ½ΡƒΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΎ соотвСтствовало ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ Ρ€Π°ΠΌΠΊΠ΅ элСмСнта. Однако это часто происходит Π·Π° счСт Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ искаТСния.CSS автоматичСски растянСт ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² соотвСтствии с Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ автоматичСски рассчитанным ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π½Ρ‹ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ.

ИзлишнС Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ этот эффСкт Π»ΡƒΡ‡ΡˆΠ΅ всСго Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½Ρ‹ΠΌΠΈ элСмСнтами HTML.

ВсС, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, это ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ background-size: 100% 100% для достиТСния этого Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π°.

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅: 100% 100% повторяСтся Π΄Π²Π°ΠΆΠ΄Ρ‹. ΠŸΠ΅Ρ€Π²ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ CSS Ρ€Π°ΡΡ‚ΡΠ½ΡƒΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ , Π° Π²Ρ‚ΠΎΡ€ΠΎΠ΅ 100% Π΄Π΅Π»Π°Π΅Ρ‚ Ρ‚ΠΎ ΠΆΠ΅ самоС ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ .Π—Π΄Π΅ΡΡŒ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ значСния ΠΎΡ‚ 0 Π΄ΠΎ 100%, хотя я Π½Π΅ Π²ΠΈΠΆΡƒ ΠΌΠ½ΠΎΠ³ΠΈΡ… случаСв, ΠΊΠΎΠ³Π΄Π° это Π±Ρ‹Π»ΠΎ Π±Ρ‹ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ.

Π£ΠΊΠ°Π·Π°Π½ΠΈΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ

Π’ HTML, ΠΊΠΎΠ³Π΄Π° Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ нСсколько Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ, ΠΎΠ½ΠΈ часто Ρ€Π°Π·Π΄Π΅Π»ΡΡŽΡ‚ΡΡ ΠΏΡ€ΠΎΠ±Π΅Π»ΠΎΠΌ. Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ ( ось Y ΠΈΠ»ΠΈ высота ) всСгда ΠΈΠ΄ΡƒΡ‚ ΠΏΠ΅Ρ€Π²Ρ‹ΠΌΠΈ. Иногда значСния Ρ€Π°Π·Π΄Π΅Π»ΡΡŽΡ‚ΡΡ запятыми. ΠŸΡ€ΠΈΠΌΠ΅Ρ€? Когда Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ нСсколько Ρ„ΠΎΠ½ΠΎΠ², ΠΎΠ½ΠΈ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Ρ€Π°Π·Π΄Π΅Π»ΡΡŽΡ‚ΡΡ запятой, Π° Π½Π΅ ΠΏΡ€ΠΎΠ±Π΅Π»ΠΎΠΌ.( Как ΠΌΡ‹ ΡƒΠ²ΠΈΠ΄ΠΈΠΌ Π² послСднСм Ρ€Π°Π·Π΄Π΅Π»Π΅ этого руководства. )

ИспользованиС background-position

Π­Ρ‚ΠΎ background-position: center center Π² Ρ€Π°Π±ΠΎΡ‚Π΅.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ всСгда Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π² Ρ†Π΅Π½Ρ‚Ρ€Π΅, Π½ΠΎ ΠΏΠΎΡ‚Π΅Ρ€ΡΡ‚ΡŒ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΠ΅ΠΌΠΎΡΡ‚ΡŒ ΡƒΠ·ΠΎΡ€Π°, ΡƒΠΊΠ°Π·Π°Π² no-repeat value background-repeat property:

Center the image:

background- ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: Ρ†Π΅Π½Ρ‚Ρ€ Ρ†Π΅Π½Ρ‚Ρ€;

ΠžΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΏΠΎΠ²Ρ‚ΠΎΡ€:

background-repeat: no-repeat;

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎ оси x ( ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ ), ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ repeat-x:

Π­Ρ‚ΠΎ repeat-x Π² дСйствии.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, ΡƒΠΊΠ°Π·Π°Π² repeat-x Π² качСствС значСния для свойства background-repeat .

Π‘ Ρ‚Π΅ΠΌ ΠΆΠ΅ эффСктом, Π½ΠΎ ΠΏΠΎ оси Y ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свойство repeat-y :

Как ΠΈ любоС Π΄Ρ€ΡƒΠ³ΠΎΠ΅ свойство CSS, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ значСния для достиТСния ΠΆΠ΅Π»Π°Π΅ΠΌΡ‹Ρ… Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΠΎΠ². Π― Π΄ΡƒΠΌΠ°ΡŽ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ рассмотрСли ΠΏΠΎΡ‡Ρ‚ΠΈ всС, Ρ‡Ρ‚ΠΎ касаСтся Ρ„ΠΎΠ½Π°.Π—Π° ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ ΠΎΠ΄Π½ΠΎΠ³ΠΎ послСднСго момСнта…

НСсколько Ρ„ΠΎΠ½ΠΎΠ²

К ΠΎΠ΄Π½ΠΎΠΌΡƒ ΠΈ Ρ‚ΠΎΠΌΡƒ ΠΆΠ΅ элСмСнту HTML ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Ρ„ΠΎΠ½Π°. ΠŸΡ€ΠΎΡ†Π΅ΡΡ довольно простой.

Рассмотрим эти изобраТСния, хранящиСся Π² Π΄Π²ΡƒΡ… ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ„Π°ΠΉΠ»Π°Ρ…:

Рисунок ΡˆΠ°Ρ…ΠΌΠ°Ρ‚Π½ΠΎΠΉ доски Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ справа ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для обозначСния прозрачности здСсь. Π‘Π΅Π»Ρ‹Π΅ ΠΈ сСрыС ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Ρ‹ Π½Π΅ ΡΠ²Π»ΡΡŽΡ‚ΡΡ Ρ‡Π°ΡΡ‚ΡŒΡŽ самого изобраТСния. Π­Ρ‚ΠΎ «прозрачная» ΠΎΠ±Π»Π°ΡΡ‚ΡŒ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π²Ρ‹ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Π²ΠΈΠ΄ΠΈΡ‚Π΅ Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°Ρ… для Ρ†ΠΈΡ„Ρ€ΠΎΠ²Ρ‹Ρ… манипуляций.

Когда ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ справа помСщаСтся ΠΏΠΎΠ²Π΅Ρ€Ρ… Π΄Ρ€ΡƒΠ³ΠΈΡ… элСмСнтов HTML ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, клСтчатая ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ это содСрТимоС Π²Π½ΠΈΠ·Ρƒ. И Π² этом вся идСя Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Ρ„ΠΎΠ½ΠΎΠ² Π² HTML.

ΠŸΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ изобраТСния

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ прСимущСства Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Ρ„ΠΎΠ½ΠΎΠ², ΠΎΠ΄Π½ΠΎ ΠΈΠ· Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ. Но ΠΊΠ°ΠΊ Π΅Π³ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ?

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π²Ρ‚ΠΎΡ€ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ image2.png содСрТит 5 Ρ‡Π΅Ρ€Π½Ρ‹Ρ… Ρ‚ΠΎΡ‡Π΅ΠΊ Π½Π° ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΠΌ Ρ„ΠΎΠ½Π΅ , ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π΅Π½Π½Ρ‹Ρ… ΠΊΠ»Π΅Ρ‚Ρ‡Π°Ρ‚Ρ‹ΠΌ ΡƒΠ·ΠΎΡ€ΠΎΠΌ.

Как Π½Π°ΠΉΡ‚ΠΈ Π²ΠΎΠ»ΡˆΠ΅Π±Π½Ρ‹ΠΉ ластик Π² Photoshop.

Как ΠΈ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ свойства CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°ΡŽΡ‚ нСсколько Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ — всС, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ — для настройки Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Ρ„ΠΎΠ½ΠΎΠ² — это ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π½Π°Π±ΠΎΡ€ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ для свойства background , Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… запятыми:

Π£ΠΊΠ°Π·Π°Π½ΠΈΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ

Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π°Π·Π½Π°Ρ‡ΠΈΡ‚ΡŒ нСсколько ( слоСв ) Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΎΠ΄Π½ΠΎΠΌΡƒ ΠΈ Ρ‚ΠΎΠΌΡƒ ΠΆΠ΅ элСмСнту HTML, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ CSS:

body {background: url (‘image2.png ’), url (β€˜ image1.png ’)

Π’Π°ΠΆΠ΅Π½ порядок, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π²Ρ‹ добавляСтС изобраТСния Π² свойство url Ρ„ΠΎΠ½Π°. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ самоС Π²Π΅Ρ€Ρ…Π½Π΅Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ всСгда указываСтся ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ. Π’ΠΎΡ‚ ΠΏΠΎΡ‡Π΅ΠΌΡƒ ΠΌΡ‹ Π½Π°Ρ‡ΠΈΠ½Π°Π΅ΠΌ с image2.png .

Π­Ρ‚ΠΎΡ‚ ΠΊΠΎΠ΄ Π΄Π°Π΅Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

НалоТСниС ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΠ³ΠΎ изобраТСния Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠ΅ с использованиСм Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Ρ„ΠΎΠ½ΠΎΠ² Π² CSS.

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ тСорСтичСски продСмонстрировали нСсколько Ρ„ΠΎΠ½ΠΎΠ² Π½Π° ΡΡƒΠ±ΡŠΠ΅ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΌ элСмСнтС

( ΠΈΠ»ΠΈ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹ΠΉ ) с ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½Ρ‹ΠΌΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌΠΈ.

Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€.

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ puppy.png Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ элСмСнтом Π² спискС, Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌ запятыми. Π­Ρ‚ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ Π½Π°Π»ΠΎΠΆΠΈΡ‚ΡŒ Π½Π° ΠΏΠΎΠ²Π΅Ρ€Ρ… всСх ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² спискС.

ОбъСдиняя два:

body {background: url (‘puppy.png’), url (‘pattern.png’)

ΠœΡ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

Π”Ρ€ΡƒΠ³ΠΈΠ΅ свойства Ρ„ΠΎΠ½Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°ΡŽΡ‚ запятых. Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… списков сущСствуСт .ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈ всС ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ свойства, связанныС с Ρ„ΠΎΠ½ΠΎΠΌ, ΠΊΡ€ΠΎΠΌΠ΅ background-color .

Π’Π°ΠΊΠΈΠΌ ΠΆΠ΅ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ Ρ„ΠΎΠ½Π°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ свойства Ρ„ΠΎΠ½Π°, ΠΏΠΎΠΊΠ°Π·Π°Π½Π½Ρ‹Π΅ Π½ΠΈΠΆΠ΅:

background
background-attachment
background-clip
background-image
background-origin
background-position
background-repeat
background-size

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅ свойство нСльзя ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ со списком ΠΏΠΎ ΠΎΡ‡Π΅Π²ΠΈΠ΄Π½Ρ‹ΠΌ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π°ΠΌ:

background-color

Π§Ρ‚ΠΎ Π±Ρ‹ ΠΎΠ·Π½Π°Ρ‡Π°Π»ΠΎ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ нСсколько Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ Ρ†Π²Π΅Ρ‚Π° для Ρ„ΠΎΠ½Π°? ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° Π·Π°Π΄Π°Π½ΠΎ свойство Ρ†Π²Π΅Ρ‚Π° Ρ„ΠΎΠ½Π°, ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ вся ΠΎΠ±Π»Π°ΡΡ‚ΡŒ заполняСтся ΡΠΏΠ»ΠΎΡˆΠ½Ρ‹ΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ .Но для Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Ρ„ΠΎΠ½ΠΎΠ² трСбуСтся, Ρ‡Ρ‚ΠΎΠ±Ρ‹ хотя Π±Ρ‹ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Ρ„ΠΎΠ½ΠΎΠ² содСрТал ΠΊΠ°ΠΊΡƒΡŽ-Ρ‚ΠΎ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ. Π‘Π»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, Π΅Π³ΠΎ нСльзя ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² случаС Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Ρ„ΠΎΠ½ΠΎΠ² для ΠΊΠ°ΠΊΠΈΡ…-Π»ΠΈΠ±ΠΎ Π·Π½Π°Ρ‡ΠΈΠΌΡ‹Ρ… Ρ†Π΅Π»Π΅ΠΉ.

Π­Ρ‚ΠΎ всС, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎ Ρ„ΠΎΠ½Π°Ρ… HTML.

Π― ΡƒΠ²Π΅Ρ€Π΅Π½, Ρ‡Ρ‚ΠΎ пропустил ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ нСстандартный Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ использования ΠΈΠ»ΠΈ допустил Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ошибки. Если ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ Ρ‡Ρ‚ΠΎ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ, Π΄Π°ΠΉΡ‚Π΅ ΠΌΠ½Π΅ Π·Π½Π°Ρ‚ΡŒ.

ΠŸΠΎΠ·Π΄Ρ€Π°Π²Π»ΡΡŽ. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Ρƒ вас Π΅ΡΡ‚ΡŒ нСсколько ΠΈΠ΄Π΅ΠΉ ΠΎΠ± использовании Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² CSS .Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° мСня Π½Π° GitHub — Π― ΠΏΠΎΠ΄ΠΏΠΈΡˆΡƒΡΡŒ Π½Π° мСня!

Π­Ρ‚Π° ΡΡ‚Π°Ρ‚ΡŒΡ Π±Ρ‹Π»Π° спонсирована ΠΈΠ·Π΄Π°Ρ‚Π΅Π»Π΅ΠΌ Π»ΠΈΡ‚Π΅Ρ€Π°Ρ‚ΡƒΡ€Ρ‹ ΠΏΠΎ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠΌΡƒ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡Π΅Π½ΠΈΡŽ Learning Curve .

Бпасибо Π·Π° Ρ‡Ρ‚Π΅Π½ΠΈΠ΅ πŸ™‚

ΠŸΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½Π° — Tailwind CSS

ΠŸΠΎΠ²Ρ‚ΠΎΡ€ΠΈΡ‚ΡŒ

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ bg-repeat , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΠΊ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ, Ρ‚Π°ΠΊ ΠΈ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ.

  

Π‘Π΅Π· ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π°

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ bg-no-repeat , Ссли Π²Ρ‹ Π½Π΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.

  

ΠŸΠΎΠ²Ρ‚ΠΎΡ€ΠΈΡ‚ΡŒ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ bg-repeat-x , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ.

  

ΠŸΠΎΠ²Ρ‚ΠΎΡ€ΠΈΡ‚ΡŒ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ bg-repeat-y , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ.

  

Адаптивный

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния элСмСнта Π² ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠ΅ останова, Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ прСфикс {screen}: ΠΊ любой ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΉ ΡƒΡ‚ΠΈΠ»ΠΈΡ‚Π΅ повторСния Ρ„ΠΎΠ½Π°.НапримСр, Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ класса md: bg-repeat-x ΠΊ элСмСнту ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Ρ‚ ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡŽ ΡƒΡ‚ΠΈΠ»ΠΈΡ‚Ρ‹ bg-repeat-x ΠΏΡ€ΠΈ срСдних Ρ€Π°Π·ΠΌΠ΅Ρ€Π°Ρ… экрана ΠΈ Π²Ρ‹ΡˆΠ΅.

  

Для получСния Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎ функциях Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Tailwind ΠΎΠ·Π½Π°ΠΊΠΎΠΌΡŒΡ‚Π΅ΡΡŒ с Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠ΅ΠΉ ΠΏΠΎ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΌΡƒ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ.

Настройка

Π’Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для ΡƒΡ‚ΠΈΠ»ΠΈΡ‚ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π° ΡΠΎΠ·Π΄Π°ΡŽΡ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Π΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊΠΈΠ΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΡŽΡ‚ΡΡ для ΡƒΡ‚ΠΈΠ»ΠΈΡ‚ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π°, ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ² свойство backgroundRepeat Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² вашСго ΠΏΠΎΠΏΡƒΡ‚Π½ΠΎΠ³ΠΎ Π²Π΅Ρ‚Ρ€Π° .config.js Ρ„Π°ΠΉΠ».

НапримСр, эта конфигурация Ρ‚Π°ΠΊΠΆΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ навСдСния ΠΈ фокусировки:

 
  module.exports = {
    Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹: {
      ΠΏΡ€ΠΎΠ΄Π»Π΅Π²Π°Ρ‚ΡŒ: {
        
+ backgroundRepeat: ['hover', 'focus'],
      }
    }
  }  

Если Π²Ρ‹ Π½Π΅ ΠΏΠ»Π°Π½ΠΈΡ€ΡƒΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡƒΡ‚ΠΈΠ»ΠΈΡ‚Ρ‹ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π° Π² своСм ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΈΡ…, установив для свойства backgroundRepeat Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ false Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ corePlugins вашСго Ρ„Π°ΠΉΠ»Π° ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ:

 
  ΠΌΠΎΠ΄ΡƒΠ»ΡŒ.export = {
    corePlugins: {
      
+ backgroundRepeat: false,
    }
  }  

ИспользованиС Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ CSS Β· Π”ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Ρ‹ WebPlatform

Π‘Π²ΠΎΠ΄ΠΊΠ°

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ Ρ€Π°ΡΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°ΡŽΡ‚ΡΡ Ρ„ΠΎΠ½Ρ‹ CSS: Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠ΅, Π²Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. Π‘Π»ΠΈΠΆΠ΅ ΠΊ ΠΊΠΎΠ½Ρ†Ρƒ ΠΎΠ½ Ρ‚Π°ΠΊΠΆΠ΅ рассматриваСт ΠΏΠ΅Ρ€Π΅Π΄ΠΎΠ²Ρ‹Π΅ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ спрайты CSS.

Π’Π²Π΅Π΄Π΅Π½ΠΈΠ΅

ΠŸΡ€ΠΈΠ·Π½Π°ΠΉΡΡ! Π‘ ΠΌΠΎΠΌΠ΅Π½Ρ‚Π° появлСния ΠΏΠ΅Ρ€Π²ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠΈ Π² ΡƒΡ‡Π΅Π±Π½ΠΎΠΉ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ΅ ΠΏΠΎ Π²Π΅Π±-стандартам Π²Ρ‹ Π±Ρ‹Π»ΠΈ Π²Π·Π²ΠΎΠ»Π½ΠΎΠ²Π°Π½Ρ‹, ΡƒΠ·Π½Π°Π², ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ свой сайт ярким ΠΈ ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΠΌ.ΠœΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ, Π²Ρ‹ Π΄Π°ΠΆΠ΅ ΠΏΠ΅Ρ€Π΅ΡˆΠ»ΠΈ ΠΊ этому Ρ€Π°Π·Π΄Π΅Π»Ρƒ?

Π€ΠΎΠ½ΠΎΠ²Ρ‹Π΅ изобраТСния ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Ρ‹ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ваш сайт выглядСл ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰Π΅, Π½ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π±Ρ‹Ρ‚ΡŒ ΡƒΠ΄ΠΈΠ²Π»Π΅Π½Ρ‹, насколько тСсно ΠΎΠ½ΠΈ основаны Π½Π° Ρ„ΡƒΠ½Π΄Π°ΠΌΠ΅Π½Ρ‚Π°Π»ΡŒΠ½Ρ‹Ρ… концСпциях, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΡƒΠΆΠ΅ ΠΈΠ·ΡƒΡ‡ΠΈΠ»ΠΈ.

Как Π²Ρ‹ Ρ€Π°Π½Π΅Π΅ ΡƒΠ·Π½Π°Π»ΠΈ ΠΈΠ· ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΉ ΡΡ‚Π°Ρ‚ΡŒΠΈ Π² этой сСрии, ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½Ρ‹Ρ… ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ происходят с CSS, являСтся Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΠΈΡ‚ΡŒ прСдставлСниС , , ΠΈΠ»ΠΈ Ρ‚ΠΎ, ΠΊΠ°ΠΊ всС выглядит, ΠΎΡ‚ сСмантики ΠΈΠ»ΠΈ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°ΡŽΡ‚ Π²Π΅Ρ‰ΠΈ. Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ CSS являСтся ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½Ρ‹Ρ… инструмСнтов, ΠΈΠΌΠ΅ΡŽΡ‰ΠΈΡ…ΡΡ Π² вашСм распоряТСнии, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ΠΎ позволяСт ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ Π΄Π΅ΠΊΠΎΡ€Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ изобраТСния ΠΊ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ частям вашСго HTML, Π½Π΅ добавляя лишнСго вСса Π²Π°ΡˆΠ΅ΠΌΡƒ HTML.РаньшС Π°Π²Ρ‚ΠΎΡ€Ρ‹ (ΠΊΠ°ΠΊ ΠΈ Π²Ρ‹!) Π‘Ρ‹Π»ΠΈ Π²Ρ‹Π½ΡƒΠΆΠ΄Π΅Π½Ρ‹ Π·Π°ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ свой ΠΊΠΎΠ΄ Ρ‚Π΅Π³Π°ΠΌΠΈ img для достиТСния Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ эффСкта.

CSS ΠΈ, Π² частности, свойство background ΠΏΡ€Π΅Π΄ΠΎΡ…Ρ€Π°Π½ΡΡŽΡ‚ ваш HTML ΠΎΡ‚ ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ бСспорядка. Π Π΅Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ измСнСния Π² ΠΆΠΈΠ·Π½ΠΈ сайтов, построСнных с использованиСм соврСмСнных ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ², ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½Ρ‹ Π³ΠΎΡ€Π°Π·Π΄ΠΎ Π±ΠΎΠ»Π΅Π΅ эффСктивно. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ свой сайт, ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ² Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ стилСй, вмСсто Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΆΠ΄ΡƒΡŽ HTML-страницу. Π’ зависимости ΠΎΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° вашСго сайта это ΠΌΠΎΠΆΠ΅Ρ‚ сущСствСнно ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ‚ΡŒ врСмя.

Из этой ΡΡ‚Π°Ρ‚ΡŒΠΈ Π²Ρ‹ ΡƒΠ·Π½Π°Π΅Ρ‚Π΅ основы Ρ€Π°Π±ΠΎΡ‚Ρ‹ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ CSS. Π’Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅, ΠΊΠ°ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS, Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π΅Π³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅, Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ ΠΌΠΎΠ·Π°ΠΈΠΊΡƒ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ ΠΈΠ»ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ ΠΈ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Π΅ изобраТСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS-спрайтов для ΠΏΠΎΠ²Ρ‹ΡˆΠ΅Π½ΠΈΡ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ сайта.

Как это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚?

CSS для Ρ„ΠΎΠ½Π° Ρ€Π°Π·Π΄Π΅Π»Π΅Π½ Π½Π° нСсколько Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… свойств. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ эти свойства, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ позиция ΠΈ Ρ†Π²Π΅Ρ‚ , Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°Ρ‡Π°Ρ‚ΡŒ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ внСшним Π²ΠΈΠ΄ΠΎΠΌ своСй страницы.Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Π²Ρ‹ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ рассмотритС Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Π΅ изобраТСния CSS, шаг Π·Π° шагом создавая ΠΏΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π°ΡŽΡ‰Π΅Π΅ сообщСниС Π² качСствС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°.

Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, просмотритС Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ свойства, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ.

Бвойства Ρ„ΠΎΠ½Π°

Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° УстанавливаСт Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° элСмСнта HTML.

Π•ΡΡ‚ΡŒ нСсколько способов ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ background-color , Π²ΠΊΠ»ΡŽΡ‡Π°Ρ значСния RGB ΠΈ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ слова.Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ людСй ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ ΡˆΠ΅ΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚Π΅Ρ€ΠΈΡ‡Π½ΠΎΠ΅ прСдставлСниС, символ Ρ€Π΅ΡˆΠ΅Ρ‚ΠΊΠΈ (#), Π·Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΡΠ»Π΅Π΄ΡƒΡŽΡ‚ ΡˆΠ΅ΡΡ‚ΡŒ символов. ΠŸΠ΅Ρ€Π²Π°Ρ ΠΏΠ°Ρ€Π° ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π½Π° красный ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ, Π° вторая ΠΈ Ρ‚Ρ€Π΅Ρ‚ΡŒΡ — Π½Π° Π·Π΅Π»Π΅Π½Ρ‹ΠΉ ΠΈ синий ΡƒΡ€ΠΎΠ²Π½ΠΈ соотвСтствСнно — #RRGGBB .

МногиС инструмСнты Π²Ρ‹Π±ΠΎΡ€Π° Ρ†Π²Π΅Ρ‚Π° ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Π²Π°ΠΌ Π½Π°ΠΉΡ‚ΠΈ ΡˆΠ΅ΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚Π΅Ρ€ΠΈΡ‡Π½ΠΎΠ΅ прСдставлСниС Π΄Π°Π½Π½ΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚Π°. Чистый красный Ρ†Π²Π΅Ρ‚, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π±ΡƒΠ΄Π΅Ρ‚ # FF0000.

ДопустимыС значСния Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ , Ρ†Π²Π΅Ρ‚, , , ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ, ΠΈΠ»ΠΈ , наслСдуСмый .

ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΏΡƒΡ‚ΡŒ ΠΈΠ»ΠΈ URL Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния.

УстановитС background-image , ΡƒΠΊΠ°Π·Π°Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ, Π³Π΄Π΅ Π½Π°ΠΉΡ‚ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ URL-адрСс. НапримСр; URL (alert.png) . ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΠΏΡƒΡ‚ΡŒ начинаСтся с ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ слова url ​​ ΠΈ Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ Π² ΠΊΡ€ΡƒΠ³Π»Ρ‹Π΅ скобки. Π­Ρ‚ΠΎΡ‚ синтаксис Π²Π°ΠΆΠ΅Π½ для понимания Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ мСстополоТСниС. Если ваш URL-адрСс содСрТит ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ символы ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΠ±Π΅Π»Ρ‹, Π²Π°ΠΌ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, придСтся ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ апострофы ΠΈΠ»ΠΈ ΠΊΠ°Π²Ρ‹Ρ‡ΠΊΠΈ Π²ΠΎΠΊΡ€ΡƒΠ³ URL-адрСса Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΡ€ΡƒΠ³Π»Ρ‹Ρ… скобок.

ДопустимыС значСния: URL , Π½Π΅Ρ‚ ΠΈΠ»ΠΈ Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ .

ΠΏΠΎΠ²Ρ‚ΠΎΡ€ Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Π² ΠΊΠ°ΠΊΠΎΠΌ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ слСдуСт Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ, Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ ΠΈΠ»ΠΈ ΠΏΠΎ ΠΎΠ±ΠΎΠΈΠΌ направлСниям, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈΠ»ΠΈ высоту элСмСнта HTML. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ background-repeat , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.

ДопустимыС значСния Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠΉ , ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠΉ x , ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠΉ ΠΈ Π±Π΅Π· ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠΉ .

насадка Π—Π°Π΄Π°Π΅Ρ‚ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ.

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ ΠΌΠΎΠ³ΡƒΡ‚ Π»ΠΈΠ±ΠΎ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Ρ‚ΡŒΡΡ вмСстС с содСрТимым, Π»ΠΈΠ±ΠΎ ΠΎΡΡ‚Π°Π²Π°Ρ‚ΡŒΡΡ Π½Π° мСстС Π½Π° экранС просмотра. ДопустимыС значСния: scroll , fixed ΠΈ Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ .

позиция Π‘ΠΎΠΎΠ±Ρ‰Π°Π΅Ρ‚ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ, Π³Π΄Π΅ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π² любом мСстС Π² ΠΏΡ€Π΅Π΄Π΅Π»Π°Ρ… HTML-элСмСнта, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ ΠΎΠ½ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ background-position , Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ‚ΠΎΡ‡Π½ΠΎ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ изобраТСния для Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ эффСкта ΠΈ налоТСния слоСв.

Π•ΡΡ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Ρ… способов ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½Π°, ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ слова ΠΈ числовыС значСния. ΠšΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ слова (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ ΠΈ Π½ΠΈΠΆΠ½ΠΈΠΉ ) ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ ΠΈ Π»Π΅Π³ΠΊΠΎ Ρ‡ΠΈΡ‚Π°ΡŽΡ‚ΡΡ. ЗначСния пиксСлСй ΠΎΡ‡Π΅Π½ΡŒ Ρ‚ΠΎΡ‡Π½Ρ‹, Π½ΠΎ ΠΎΠ½ΠΈ Π½Π΅ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΊ измСнСнию высоты ΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρ‹. ΠžΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния пиксСлСй ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ ΠΏΡ€ΠΈ использовании спрайтов CSS, ΠΊΠ°ΠΊ Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ ΠΏΠΎΠ·ΠΆΠ΅.

Когда ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Ρ‹ ΠΈ пиксСли, ΠΎΡ‚ΠΏΡ€Π°Π²Π½ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΎΠΉ всСгда являСтся Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ Π»Π΅Π²Ρ‹ΠΉ ΡƒΠ³ΠΎΠ» элСмСнта HTML, хотя способ позиционирования изобраТСния Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с пиксСлями ΠΈ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π°ΠΌΠΈ нСсколько ΠΈΠ½Π°Ρ‡Π΅.ПиксСли всСгда ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°ΡŽΡ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π·Π°Π΄Π°Π½Π½ΠΎΠ΅ количСство пиксСлСй Π²Π½ΠΈΠ· ΠΈ Π²ΠΏΡ€Π°Π²ΠΎ ΠΎΡ‚ содСрТащСго поля (ΠΈΠ»ΠΈ Π²Π²Π΅Ρ€Ρ… ΠΈ Π²Π»Π΅Π²ΠΎ, Ссли ΠΎΠ½ΠΈ ΠΈΠΌΠ΅ΡŽΡ‚ ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния), нСзависимо ΠΎΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° изобраТСния ΠΈ содСрТащСго поля. Π‘ Π΄Ρ€ΡƒΠ³ΠΎΠΉ стороны, ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°ΡŽΡ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚ Ρ€Π°Π·Π½ΠΈΡ†Ρ‹ ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ содСрТащСго поля ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ изобраТСния. Если ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ содСрТащСС Π΅Π³ΠΎ ΠΏΠΎΠ»Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€, ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Ρ‹ Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΠΎΠΎΠ±Ρ‰Π΅.

ДопустимыС значСния Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ Π΄Π»ΠΈΠ½Ρ‹ (ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Π² пиксСлях), ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚ΠΎΠ² (ΡˆΠΈΡ€ΠΈΠ½Ρ‹ элСмСнта) ΠΈ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ слова Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ , ΠΏΡ€Π°Π²Ρ‹ΠΉ , Π½ΠΈΠΆΠ½ΠΈΠΉ , Π»Π΅Π²Ρ‹ΠΉ ΠΈ Ρ†Π΅Π½Ρ‚Ρ€Π°Π»ΡŒΠ½Ρ‹ΠΉ .ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Ρ†Π΅Π½Ρ‚Ρ€ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ для обозначСния ΠΊΠ°ΠΊ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ, Ρ‚Π°ΠΊ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Ρ†Π΅Π½Ρ‚Ρ€Π°. Π’Π°ΠΊΠΆΠ΅ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΌΠ΅ΡˆΠΈΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Ρ‹ ΠΈ пиксСли Π² ΠΏΡ€Π°Π²ΠΈΠ»Π°Ρ…, Π½ΠΎ Π½Π΅ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ слова ΠΈ пиксСли ΠΈΠ»ΠΈ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ слова ΠΈ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Ρ‹.

Ρ„ΠΎΠ½ Π‘ΠΎΠΊΡ€Π°Ρ‰Π΅Π½Π½ΠΎΠ΅ свойство, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для описания всСх Π΄Ρ€ΡƒΠ³ΠΈΡ… свойств Π² ΠΎΠ΄Π½ΠΎΠΉ строкС.

Π‘ΠΎΠΊΡ€Π°Ρ‰Π΅Π½Π½Ρ‹Π΅ свойства Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΡ‡Π΅Π½ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΈ. Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ ΠΈΡ…, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ CSS ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΊΠΎΠΌΠΏΠ°ΠΊΡ‚Π½Ρ‹ΠΌ ΠΈ ΡΠ³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ связанныС свойства.Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΎΠ±Ρ‰Π΅Π΅ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ сокращСниС, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΏΡ€ΠΈ нСобходимости ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Π΅Π³ΠΎ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΌΠΈ свойствами.

Бвойства всСгда Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΈ Ρ‚ΠΎΠΌ ΠΆΠ΅ порядкС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π»Π΅Π³ΠΊΠΎ ΠΈΠ½Ρ‚Π΅Ρ€ΠΏΡ€Π΅Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅ΠΌΡ‹Π΅ стили:

  1. Ρ†Π²Π΅Ρ‚
  2. url ​​
  3. ΠΏΠΎΠ²Ρ‚ΠΎΡ€
  4. насадка (ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΎΡ‡Π΅Π½ΡŒ Ρ€Π΅Π΄ΠΊΠΎ; ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΠΏΡƒΡ‰Π΅Π½Π°)
  5. Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎ
  6. Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ этого сокращСния со всСми ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΌΠΈ свойствами (ΠΊΡ€ΠΎΠΌΠ΅ прилоТСния ) выглядит ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

Ρ„ΠΎΠ½: Π·Π΅Π»Π΅Π½Ρ‹ΠΉ url (Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ.gif) Π±Π΅Π· ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π° слСва Π²Π²Π΅Ρ€Ρ…Ρƒ;

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π°ΡŽΡ‰Π΅Π³ΠΎ сообщСния

Π’Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚Π΅ основной синтаксис, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΠΉΡ‚ΠΈ Ρ‡Π΅Ρ€Π΅Π· процСсс создания ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° ΠΎΠΊΠ½Π° прСдупрСТдСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ дСмонстрируСт всС аспСкты Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΌΠΈ изобраТСниями.

ΠšΠΎΠ½ΡΡ‚Ρ€ΡƒΠΊΡ†ΠΈΡ

ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²ΡŒΡ‚Π΅, Ρ‡Ρ‚ΠΎ графичСский Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ прСдоставил Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΏΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π°ΡŽΡ‰Π΅Π³ΠΎ сообщСния, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ для своСго Π²Π΅Π±-сайта. ΠŸΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ свСтло-ΠΎΡ€Π°Π½ΠΆΠ΅Π²Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π΄Π΅Π»ΡΡ‚ΡŒΡΡ Π½Π° Ρ„ΠΎΠ½Π΅ ΠΎΠΊΡ€ΡƒΠΆΠ°ΡŽΡ‰ΠΈΡ… Π°Π±Π·Π°Ρ†Π΅Π².Он Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ Π·Π½Π°Ρ‡ΠΎΠΊ прСдупрСТдСния Π² дСсяти пиксСлях ΠΎΡ‚ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΡƒΠ³Π»Π°.

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ Π΅ΡΡ‚ΡŒ ΠΎΠ΄Π½Π° строка тСкста, Π½ΠΎ Π² Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ ΠΎΠ½Π° ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ большС. Один ΠΈΠ· самых Π²Π°ΠΆΠ½Ρ‹Ρ… Π½Π°Π²Ρ‹ΠΊΠΎΠ² Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° — ΠΏΡ€Π΅Π΄Π²ΠΈΠ΄Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π·Π²ΠΈΠ²Π°Ρ‚ΡŒΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½. Π§Π°ΡΡ‚ΡŒ уваТСния ΠΊ худоТСствСнному видСнию сайта — это постоянство ΠΎΡ‚ запуска Π΄ΠΎ Ρ€Π΅Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΏΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π°ΡŽΡ‰Π΅Π΅ сообщСниС ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ ΠΎΠ΄Π½ΠΎΠΉ строки тСкста ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ нСсколько Π°Π±Π·Π°Ρ†Π΅Π², списков ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… элСмСнтов HTML. Π‘Ρ‚Ρ€Π΅ΠΌΠΈΡ‚Π΅ΡΡŒ Π±Ρ‹Ρ‚ΡŒ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π±ΠΎΠ»Π΅Π΅ элСмСнтарным агностиком.Π­Ρ‚ΠΎ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ Π²Π΅Ρ€ΠΎΡΡ‚Π½ΠΎΡΡ‚ΡŒ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎΠ³ΠΎ использования ΠΊΠΎΠ΄Π° ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Π²Π°ΠΌ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ сайт Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ Π±Ρ‹Π» максимально быстрым ΠΈ эффСктивным. ΠœΠ°ΠΊΠ΅Ρ‚ выглядит, ΠΊΠ°ΠΊ Π½Π° РисункС 1.

Рис. 1. ΠœΠ°ΠΊΠ΅Ρ‚ ΠΎΠΊΠ½Π° с ΠΏΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ΠΌ, созданный графичСским Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠΌ.

Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Ρ‚Π°ΠΊΠΆΠ΅ прСдоставил Π·Π½Π°Ρ‡ΠΎΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½Π° рисункС 2.

Рисунок 2: Π—Π½Π°Ρ‡ΠΎΠΊ прСдупрСТдСния.

Код

ΠžΡΠ½ΠΎΠ²Ρ‹Π²Π°ΡΡΡŒ Π½Π° Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΡƒΠ·Π½Π°Π»ΠΈ ΠΎ Ρ„ΠΎΠ½Π°Ρ… CSS Π² ΠΏΠ΅Ρ€Π²ΠΎΠΉ части этой ΡΡ‚Π°Ρ‚ΡŒΠΈ, Π²Ρ‹, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΡƒΠΆΠ΅ прСдставляСтС, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ это ΠΏΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π°ΡŽΡ‰Π΅Π΅ сообщСниС.Π― Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ Π²Π°ΠΌ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π΅Π³ΠΎ сСйчас, Π° Π·Π°Ρ‚Π΅ΠΌ ΡΡ€Π°Π²Π½ΠΈΡ‚ΡŒ свою Ρ€Π°Π±ΠΎΡ‚Ρƒ с ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹ΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ.

ПослС создания ΠΎΠΊΠ½Π° ΠΏΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠΉ слСдуйтС ΠΏΠΎΡˆΠ°Π³ΠΎΠ²Ρ‹ΠΌ инструкциям, ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹ΠΌ Π½ΠΈΠΆΠ΅. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ снимок экрана содСрТит ссылки Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΠΊΠΎΠ΄Π°, поэтому Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡΡ‚ΡŒ исходный Ρ„Π°ΠΉΠ» Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΌ этапС. ΠŸΠΎΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅ с ΠΊΠΎΠ΄ΠΎΠΌ, увСличивая ΠΈΠ»ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Ρ значСния, ΠΈ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Ρ‹. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚ΡŒ, написав ΠΊΠ°ΠΆΠ΄ΡƒΡŽ Π½ΠΎΠ²ΡƒΡŽ строку ΠΊΠΎΠ΄Π° Π² Ρ‚Π°ΠΊΠΎΠΌ инструмСнтС, ΠΊΠ°ΠΊ Opera Dragonfly ΠΈΠ»ΠΈ Firefox Firebug, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ сразу ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ шага.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π»ΠΎΠ²ΡƒΡˆΠΊΠΈ ΠΈΠ»ΠΈ сСлСктора CSS.

Π‘Π½Π°Ρ‡Π°Π»Π° Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΎΠΏΠΎΠ²Π΅Ρ‰Π΅Π½ΠΈΠ΅ класса , ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Π²Π°ΠΌ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄ CSS. Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Π½ΠΎΠ²Ρ‹Π΅ Ρ„Π°ΠΉΠ»Ρ‹ скСлСтов CSS ΠΈ HTML, свяТитС Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ стилСй CSS с Ρ„Π°ΠΉΠ»ΠΎΠΌ HTML ΠΈ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π² ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· Π½ΠΈΡ… ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄:

Π‘ΠΊΠΎΠΏΠΈΡ€ΡƒΠΉΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ CSS ΠΈ Π²ΡΡ‚Π°Π²ΡŒΡ‚Π΅ Π΅Π³ΠΎ Π² Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ стилСй:

  .alert {...}
  

Π‘ΠΊΠΎΠΏΠΈΡ€ΡƒΠΉΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ HTML-ΠΊΠΎΠ΄ ΠΈ Π²ΡΡ‚Π°Π²ΡŒΡ‚Π΅ Π΅Π³ΠΎ Π² HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚:

  

Π’Π½ΠΈΠΌΠ°Π½ΠΈΠ΅! Π—Π΄Π΅ΡΡŒ находится тСкст нашСго ΠΏΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π°ΡŽΡ‰Π΅Π³ΠΎ сообщСния.

ΠŸΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹ΠΉ Π²Ρ‹ΡˆΠ΅ ΠΊΠΎΠ΄ Π·Π°Π΄Π°Π΅Ρ‚ для оповСщСния класс , Π° Π½Π΅ id , ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ это позволяСт ΠΈΠΌΠ΅Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ оповСщСния Π½Π° страницС. НапримСр, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ прСдупрСТдСния ΠΊ элСмСнту Ρ„ΠΎΡ€ΠΌΡ‹ с нСсколькими ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΌΠΈ ошибками. ЦСль состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ваш CSS ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π±ΠΎΠ»Π΅Π΅ Π³ΠΈΠ±ΠΊΠΈΠΌ ΠΈ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΡ‚ΡŒ элСмСнты Π² соотвСтствии с Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ ΠΏΡ€ΠΈ создании содСрТимого HTML.

На Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ Ρƒ вас Π΅ΡΡ‚ΡŒ прочная основа, Π½ΠΎ ΠΏΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ выглядит ΠΊΠ°ΠΊ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ Π°Π±Π·Π°Ρ†, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π΅Ρ‰Π΅ Π½Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ Π½ΠΈΠΊΠ°ΠΊΠΈΡ… стилСй.Π”Π°Π»Π΅Π΅ Π²Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚Π΅ нСсколько ΠΏΡ€Π°Π²ΠΈΠ» для Π΅Π³ΠΎ стилизации.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅. Π― Π½Π°ΠΌΠ΅Ρ€Π΅Π½Π½ΠΎ Π²Ρ‹Π±Ρ€Π°Π» , Π° Π½Π΅ , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΡ‚ΡŒ ΠΏΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ класса ΠΏΠ°Ρ€Π°Π³Ρ€Π°Ρ„Π°ΠΌΠΈ; ΠΎΠΊΠ½Π° ΠΏΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠΉ ΠΌΠΎΠ³ΡƒΡ‚ Π»Π΅Π³ΠΊΠΎ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ элСмСнты. Π’Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ большС гибкости Π² своСм CSS.

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° Ρ„ΠΎΠ½Π°

Π’Ρ‹ ΡƒΠΆΠ΅ ΡƒΠ·Π½Π°Π»ΠΈ ΠΎΠ± использовании Ρ†Π²Π΅Ρ‚Π° Ρ„ΠΎΠ½Π° ΠΏΡ€ΠΈ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ тСкста Π² Бтилизация тСкста с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS . Π’Π΅ ΠΆΠ΅ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡ‹ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌΡ‹ ΠΊ Π»ΡŽΠ±ΠΎΠΌΡƒ элСмСнту HTML ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½Π΅Π½Ρ‹ с Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΌΠΈ изобраТСниями для создания Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Ρ… эффСктов.Если Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° Π½Π΅ Π·Π°Π΄Π°Π½ ΠΈ Π½Π΅ унаслСдован, ΠΎΠ½ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ.

Как ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ свСтло-ΠΎΡ€Π°Π½ΠΆΠ΅Π²Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° ΠΊ ΠΎΠΊΠ½Ρƒ прСдупрСТдСния, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ Π΅Π³ΠΎ срСди тСкста Π²ΠΎΠΊΡ€ΡƒΠ³ Π½Π΅Π³ΠΎ. Π’Π°ΠΆΠ½ΠΎ Π½Π΅ Π΄Π΅Π»Π°Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° слишком Ρ‚Π΅ΠΌΠ½Ρ‹ΠΌ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·ΡƒΠΌΠ½Ρ‹ΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ контраста ΠΌΠ΅ΠΆΠ΄Ρƒ тСкстом ΠΈ Ρ†Π²Π΅Ρ‚ΠΎΠΌ Ρ„ΠΎΠ½Π°. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π² ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ CSS ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅ свойство:

  .alert {
  Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: #FFFFCC;
}
  

Окно прСдупрСТдСния Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ выглядит Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½Π° рисункС 3.

Рисунок 3: Окно прСдупрСТдСния с Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½Ρ‹ΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ Ρ„ΠΎΠ½Π°.

ΠŸΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния

Π—Π°Ρ‚Π΅ΠΌ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊ ΠΏΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΡŽ. ΠŸΡƒΡ‚ΡŒ ΠΊ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠΌΡƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ Π² url ​​() , ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π² ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΊΠΎΠ΄Π΅. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½ΡƒΡŽ строку Π² ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ CSS:

  .alert {
  Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: #FFFFCC;

  
  Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅: URL (alert.png);
}
  

Окно прСдупрСТдСния Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ выглядит, ΠΊΠ°ΠΊ Π½Π° РисункС 4.

Рисунок 4: Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±Ρ‹Π»ΠΎ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΎ, Π½ΠΎ ΠΌΠΎΠ·Π°ΠΈΠΊΠ° выглядит Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ.

ΠŸΠΎΠΌΠ½ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ свойство Ρ„ΠΎΠ½Π° ΠΈΠΌΠ΅Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ - Ссли Π²Ρ‹ Π½Π΅ ΡƒΠΊΠ°Π·Π°Π»ΠΈ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ всС ΠΏΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠ΅, ΠΊΠ°ΠΊ ΠΌΠΎΠ·Π°ΠΈΠΊΠ° Π½Π° ΠΏΠΎΠ»Ρƒ ΠΊΡƒΡ…Π½ΠΈ. Какой Π²Ρ‹Π²ΠΎΠ΄? По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Π΅ изобраТСния ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‚ΡΡ ΠΊΠ°ΠΊ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, Ρ‚Π°ΠΊ ΠΈ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ. ΠŸΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‰ΠΈΠΉΡΡ Ρ„ΠΎΠ½ особСнно ΠΏΠΎΠ»Π΅Π·Π΅Π½ для Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠ² ΠΈ ΡƒΠ·ΠΎΡ€ΠΎΠ², Π·Π°ΠΏΠΎΠ»Π½ΡΡŽΡ‰ΠΈΡ… экран ΠΈΠ»ΠΈ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΉ элСмСнт HTML, Π½ΠΎ Π² Π΄Π°Π½Π½ΠΎΠΌ случаС этот эффСкт , Π° Π½Π΅ .

ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ повторСния Ρ„ΠΎΠ½Π°

Рис. 5. Как ΠΈ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, эти ΠΏΠ»ΠΈΡ‚ΠΊΠΈ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‚ΡΡ ΠΊΠ°ΠΊ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, Ρ‚Π°ΠΊ ΠΈ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ.

Π§Ρ‚Π΅Π½ΠΈΠ΅ спСцификаций, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ, ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΡƒΠ³Π°ΡŽΡ‰ΠΈΠΌ, Π½ΠΎ спСцификация - Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠ΅Π΅ мСсто, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ΡΡΠ½ΠΈΡ‚ΡŒ, ΠΊΠ°ΠΊ Π΄ΠΎΠ»ΠΆΠ΅Π½ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ CSS , ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΡƒΠ³Π»ΡƒΠ±Π»ΡΡ‚ΡŒΡΡ Π² бСсчислСнноС мноТСство Ρ€Π°Π·Π»ΠΈΡ‡ΠΈΠΉ ΠΌΠ΅ΠΆΠ΄Ρƒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ. ΠŸΡ€ΠΎΡ‡Ρ‚ΠΈΡ‚Π΅ Ρ‡Π°ΡΡ‚ΡŒ спСцификации W3C, ΠΏΠΎΡΠ²ΡΡ‰Π΅Π½Π½ΡƒΡŽ Ρ†Π²Π΅Ρ‚Π°ΠΌ ΠΈ Ρ„ΠΎΠ½Ρƒ, ΠΈ ΠΏΠΎΠΏΡ‹Ρ‚Π°ΠΉΡ‚Π΅ΡΡŒ Π½Π°ΠΉΡ‚ΠΈ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ΅ слово, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π½Π΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΠ»ΠΎΡΡŒ.Π­Ρ‚Π° стратСгия ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π½ΠΈΠΆΠ΅:

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Ρ€Π°Π·Π΄Π΅Π» для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ свойства Ρ„ΠΎΠ½Π°, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½Π°. Π’ ΠΏΠΎΠ»Π΅ Value ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ всС Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ: repeat , repeat-x , repeat-y , Π±Π΅Π· ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π° ΠΈ Π½Π°ΡΠ»Π΅Π΄ΡƒΡŽΡ‚ . По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ( Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹Ρ… ) Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Π΅ изобраТСния настроСны Π½Π° ΠΏΠΎΠ²Ρ‚ΠΎΡ€. НаправлСниС Π½Π΅ ΡƒΠΊΠ°Π·Π°Π½ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΌΠΎΠ·Π°ΠΈΡ‡Π½Ρ‹ΠΌ ΠΊΠ°ΠΊ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, Ρ‚Π°ΠΊ ΠΈ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ.Π’Ρ‹, вСроятно, догадались, Ρ‡Ρ‚ΠΎ no-repeat - это Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π½ΡƒΠΆΠ½ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ для прСдотвращСния ΠΌΠΎΠ·Π°ΠΈΡ‡Π½ΠΎΠ³ΠΎ изобраТСния Π² любом Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½ΡƒΡŽ строку Π½ΠΈΠΆΠ΅ Π² ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ CSS:

  .alert {
  Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: #FFFFCC;
  Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅: URL (alert.png);

  
  Ρ„ΠΎΠ½-ΠΏΠΎΠ²Ρ‚ΠΎΡ€: Π±Π΅Π· повторСния;
}
  

Окно прСдупрСТдСния Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ выглядит, ΠΊΠ°ΠΊ Π½Π° РисункС 6.

Рисунок 6: Окно прСдупрСТдСния с СдинствСнной ΠΊΠΎΠΏΠΈΠ΅ΠΉ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния (Π±Π΅Π· ΠΌΠΎΠ·Π°ΠΈΠΊΠΈ).

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠ΅ Π² ΠΎΠ±ΠΎΠΈΡ… направлСниях (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, кухонная ΠΏΠ»ΠΈΡ‚ΠΊΠ°) ΠΈΠ»ΠΈ Π² любом Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ. Π“Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρ‹ часто ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‚ΡΡ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ ΠΈΠ»ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ (см. Рисунок 7). Π’Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π·Π½Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ HTML-элСмСнта; Π²Ρ‹ просто Π²Ρ‹Ρ€Π΅Π·Π°Π΅Ρ‚Π΅ Ρ‡Π°ΡΡ‚ΡŒ своСго Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π° ΠΈ настраиваСтС Π΅Π³ΠΎ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠ΅ Π² ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠΌ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ; Π»ΠΈΠ±ΠΎ x для Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, Π»ΠΈΠ±ΠΎ y для Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ. Π£Π·ΠΎΡ€Ρ‹ часто ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‚ΡΡ Π² ΠΎΠ±ΠΎΠΈΡ… направлСниях, Π° Π·Π½Π°Ρ‡ΠΊΠΈ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Π½Π΅ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‚ΡΡ. Π’Ρ‹ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚Π΅ background-repeat Π΄Π°Π»Π΅Π΅ Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅.

Рис. 7. Π—Π΅Π»Π΅Π½ΠΎΠ²Π°Ρ‚ΠΎ-ΠΆΠ΅Π»Ρ‚Ρ‹Π΅ ΠΏΠ»ΠΈΡ‚ΠΊΠΈ Π² этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ.

Π—Π°Ρ‚Π΅ΠΌ взглянитС Π½Π° практичСский ΠΏΡ€ΠΈΠΌΠ΅Ρ€ с ΠΌΠΎΠ΅Π³ΠΎ Π²Π΅Π±-сайта. Рисунок 8.

Рисунок 8: ΠŸΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‰ΠΈΠΉΡΡ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ с ΠΌΠΎΠ΅Π³ΠΎ Π²Π΅Π±-сайта.

CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я использовал для добавлСния этого Π΄Π΅ΠΊΠΎΡ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ эффСкта, ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ прост. Π― сдСлал Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ repeat-x :

.

  ΠΊΡƒΠ·ΠΎΠ² {
    
    Ρ„ΠΎΠ½-ΠΏΠΎΠ²Ρ‚ΠΎΡ€: ΠΏΠΎΠ²Ρ‚ΠΎΡ€-Ρ…;
  }
  
ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅

Атрибут влоТСния позволяСт ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ Π±ΡƒΠ΄Π΅Ρ‚ вСсти сСбя Ρ„ΠΎΠ½, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅Ρ‚ страницу Π²Π½ΠΈΠ·.ПовСдСниС ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ - scroll , ΠΏΡ€ΠΈ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ прокручиваСтся вмСстС с содСрТимым.

Π‘ Π΄Ρ€ΡƒΠ³ΠΎΠΉ стороны, установка background-attachment Π½Π° fixed ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ ΠΊ Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ элСмСнт застрСваСт Π² ΠΎΠΊΠ½Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, поэтому ΠΎΠ½ остаСтся Π½Π° Ρ‚ΠΎΠΌ ΠΆΠ΅ мСстС ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ содСрТимого Π²Π½ΡƒΡ‚Ρ€ΠΈ элСмСнта, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ ΠΎΠ½ ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»Π΅Π½. Π­Ρ‚ΠΎ создаСт Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ странныС эффСкты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡ‡Π΅Π²ΠΈΠ΄Π½Ρ‹ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»Π΅Π½Π½ΠΎΠ³ΠΎ HTML-элСмСнта. W3C ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π΅Π³ΠΎ для обозначСния статуса своих спСцификаций.НапримСр, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ «РСкомСндация ΠΊΠ°Π½Π΄ΠΈΠ΄Π°Ρ‚Π° W3CΒ» Π²Π²Π΅Ρ€Ρ…Ρƒ слСва. ΠŸΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΈΡ‚Π΅ страницу Π²Π½ΠΈΠ· ΠΈ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ остаСтся Π²Π²Π΅Ρ€Ρ…Ρƒ слСва. Он ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»Π΅Π½ ΠΊ элСмСнту body , поэтому всСгда Π²ΠΈΠ΄Π΅Π½.

Π­Ρ‚ΠΎΡ‚ шаг Π½Π΅ повлияСт Π½Π° наш дисплСй, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°ΡŽΡ‚ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Π΅ изобраТСния для ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ, Π½ΠΎ всС Ρ€Π°Π²Π½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ это Π² ΠΊΠΎΠ΄, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ свойство. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½ΡƒΡŽ строку Π² ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ CSS:

  .alert {
  Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: #FFFFCC;
  background-image: url (alert.png);
  Ρ„ΠΎΠ½-ΠΏΠΎΠ²Ρ‚ΠΎΡ€: Π±Π΅Π· повторСния;

  
  Π²Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½Π°: ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ°;
}
  

Как ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½Π° рисункС 9, Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠΊΠ½Π° прСдупрСТдСния Π½Π΅ сильно отличаСтся ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π±Ρ‹Π»ΠΎ Ρ€Π°Π½ΡŒΡˆΠ΅.

Рисунок 9: ДисплСй Π½Π΅ измСнился.

Π Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ изобраТСния

ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ - это точная настройка, которая позволяСт Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Π΅ изобраТСния ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚Π°ΠΌ, Π³Π΄Π΅ Π½ΡƒΠΆΠ½ΠΎ, ΠΊΠ°ΠΊ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, Ρ‚Π°ΠΊ ΠΈ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ Π²Π½ΡƒΡ‚Ρ€ΠΈ элСмСнта HTML. Π­Ρ‚ΠΎ свойство ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ слова ΠΈ числовыС значСния, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ top , center , right , 100% , -10% , 50px ΠΈ -30em .

На рисункС 10 ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ‹ значСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для размСщСния Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² Ρ€Π°Π·Π½Ρ‹Ρ… полоТСниях.

Рисунок 10: Π Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ полоТСния Ρ„ΠΎΠ½Π° с использованиСм ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… слов, ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚ΠΎΠ² ΠΈ пиксСлСй.

ΠŸΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹ΠΉ Π½ΠΈΠΆΠ΅ ΠΊΠΎΠ΄ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΠ΅Ρ‚ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. ЦСль состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ Π»Π΅Π²ΠΎΠΌ ΡƒΠ³Π»Ρƒ, Π½ΠΎ Π½Π΅ ΠΊΠ°ΡΠ°Ρ‚ΡŒΡΡ сторон, поэтому Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π½Π° 10 пиксСлСй ΠΊΠ°ΠΊ свСрху, Ρ‚Π°ΠΊ ΠΈ слСва. Π­Ρ‚ΠΎ достигаСтся ΠΏΡƒΡ‚Π΅ΠΌ добавлСния ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ строки Π² ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ CSS:

 .Ρ‚Ρ€Π΅Π²ΠΎΠ³Π°{
  Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: #FFFFCC;
  Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅: URL (alert.png);
  Ρ„ΠΎΠ½-ΠΏΠΎΠ²Ρ‚ΠΎΡ€: Π±Π΅Π· повторСния;
  Π²Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½Π°: ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ°;

  
  background-position: 10px 10px;
}
  

ΠŸΠ΅Ρ€Π²ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ - это смСщСниС ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, Π²Ρ‚ΠΎΡ€ΠΎΠ΅ - ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ. Π’ этом случаС значСния Ρ‚Π°ΠΊΠΈΠ΅ ΠΆΠ΅. ПослС внСсСния этих ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ вашС ΠΎΠΊΠ½ΠΎ с ΠΏΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ΠΌ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ Π½Π° РисункС 11.

Рисунок 11: ИспользованиС CSS-позиционирования для установки мСстополоТСния Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния.

Π‘ΠΎΠ²Π΅Ρ‚. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ слова ΠΈΠ»ΠΈ числовыС значСния, Π½ΠΎ Π½Π΅ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΠΉΡ‚Π΅ ΠΈΡ….Π‘Ρ‚Π°Ρ€Ρ‹Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ вашС объявлСниС, Ссли Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ ΠΎΠ±Π° сразу. ИспользованиС справа ΠΈ снизу даст Ρ‚ΠΎΡ‚ ΠΆΠ΅ эффСкт, Ρ‡Ρ‚ΠΎ ΠΈ использованиС 100% ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ ΠΈΠ»ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ, соотвСтствСнно.

ИспользованиС сокращСний, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ±Ρ€Π°Ρ‚ΡŒ всС вмСстС, ΠΊΠ°ΠΊ профСссионал

Как Π²Ρ‹ ΡƒΠ·Π½Π°Π»ΠΈ, ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ свойства CSS ΠΌΠΎΠΆΠ½ΠΎ ΡΠ³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π€ΠΎΠ½ ΠΈ всС Π΅Π³ΠΎ подсвойства ΠΌΠΎΠΆΠ½ΠΎ ΡΠ³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π² ΠΏΡ€Π°Π²ΠΈΠ»Π°Ρ… CSS. Код CSS, описанный Π΄ΠΎ сих ΠΏΠΎΡ€, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΏΠΈΡΠ°Ρ‚ΡŒ Π² сокращСнной Ρ„ΠΎΡ€ΠΌΠ΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

 .Ρ‚Ρ€Π΅Π²ΠΎΠ³Π°{
    
    Ρ„ΠΎΠ½: #FFFFCC url (alert.png) ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ° Π±Π΅Π· ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π° 10px 10px;
  }
  

Π‘ΠΎΠ²Π΅Ρ‚: ΠΏΡ€ΠΈ Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ подсвойств Ρ„ΠΎΠ½Π° всСгда располагайтС свойства Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ порядкС. Π­Ρ‚ΠΎ Π²Π°ΠΆΠ½ΠΎ ΠΊΠ°ΠΊ для кроссбраузСрной совмСстимости, Ρ‚Π°ΠΊ ΠΈ для ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΈ обслуТивания Ρ‚Π°Π±Π»ΠΈΡ† стилСй:

  1. Ρ†Π²Π΅Ρ‚
  2. ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅
  3. ΠΏΠΎΠ²Ρ‚ΠΎΡ€
  4. приставка
  5. Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎ позиция
  6. Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ старый ΠΊΠΎΠ΄ CSS Π² своСм Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅ сокращСниСм, ΠΏΠΎΠΊΠ°Π·Π°Π½Π½Ρ‹ΠΌ Π²Ρ‹ΡˆΠ΅.ПослС обновлСния ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚ΠΎΡ‡Π½ΠΎ Ρ‚Π°ΠΊ ΠΆΠ΅ (см. Рисунок 12).

Рисунок 12: Π‘ΠΎΠΊΡ€Π°Ρ‰Π΅Π½ΠΈΠ΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΊΠ°ΠΊ ΡˆΠ°Ρ€ΠΌ!

ЭкспСримСнтируя с ΠΊΠΎΠ΄ΠΎΠΌ

Π›ΡƒΡ‡ΡˆΠΈΠΉ способ Π·Π°ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ всС Π½ΡŽΠ°Π½ΡΡ‹ CSS - это ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ. ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ свойства Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΈ посмотритС, ΠΊΠ°ΠΊ Ρ€Π°Π·Π½Ρ‹Π΅ значСния Π²Π»ΠΈΡΡŽΡ‚ Π½Π° ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. УстановитС background-position Π½Π° 100% 100% ΠΈ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ это Π΄Π°Π΅Ρ‚ Ρ‚ΠΎΡ‚ ΠΆΠ΅ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚, Ρ‡Ρ‚ΠΎ ΠΈ использованиС ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… слов right ΠΈ bottom .А Ссли Π²Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚Π΅ Π΅Π³ΠΎ Π½Π° -5px 0 ? Как Π²Ρ‹ Π΄ΡƒΠΌΠ°Π΅Ρ‚Π΅, ΠΏΠΎΡ‡Π΅ΠΌΡƒ Ρ‡Π°ΡΡ‚ΡŒ изобраТСния скрыта?

ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ качСства

ВСстированиС Ρ‡Ρ€Π΅Π·Π²Ρ‹Ρ‡Π°ΠΉΠ½ΠΎ Π²Π°ΠΆΠ½ΠΎ для обСспСчСния Ρ…ΠΎΡ€ΠΎΡˆΠ΅Π³ΠΎ взаимодСйствия с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ. Π’ΠΎΡ‚ Ρ„Π°ΠΊΡ‚, Ρ‡Ρ‚ΠΎ сайт Ρ…ΠΎΡ€ΠΎΡˆΠΎ выглядит Π½Π° вашСм ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π΅ с вашСй ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΉ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠ΅ΠΉ, Π½Π΅ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅. ΠŸΡ€ΠΈ тСстировании ΠΎΠΊΠ½Π° ΠΏΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠΉ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ основныС ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹Π΅ шаги:

  • Π£Π²Π΅Π»ΠΈΡ‡ΡŒΡ‚Π΅ ΠΈΠ»ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚Π΅ количСство тСкста Π²Π½ΡƒΡ‚Ρ€ΠΈ прСдупрСТдСния.
  • Π£Π²Π΅Π»ΠΈΡ‡ΡŒΡ‚Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ тСкста Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ ΠΊΠ°ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ Π½Π° Π΄Π²Π° уровня.ΠžΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚Π΅, Π»ΡƒΡ‡ΡˆΠ΅ Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ em для позиционирования нашСго изобраТСния. ΠŸΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅, Ρ‡Ρ‚ΠΎ происходит, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Π΅Ρ‚Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ тСкста.
  • ΠŸΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚Π΅ ΠΏΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ класса ΠΊ Π΄Ρ€ΡƒΠ³ΠΈΠΌ элСмСнтам, Ρ‚Π°ΠΊΠΈΠΌ ΠΊΠ°ΠΊ div , p , ul , strong ΠΈΠ»ΠΈ em . Как ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ класс нСзависимым?
  • Π’ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ нСсколько Π°Π±Π·Π°Ρ†Π΅Π² ΠΈ список Π² ΠΏΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ div . Код всС Π΅Ρ‰Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚?
  • Π’ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅ ΠΏΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… уровня 1 (Ρ‚Π°ΠΊΠΆΠ΅ извСстных ΠΊΠ°ΠΊ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ уровня A).Мой совСт - Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΊΠΎΠ΄ для Ρ…ΠΎΡ€ΠΎΡˆΠΈΡ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ², Π° Π·Π°Ρ‚Π΅ΠΌ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ для Internet Explorer - ΠΊΠΎΠ³Π΄Π° ΠΊΠΎΠ΄ Π·Π°Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚.

Π‘Ρ‚Ρ€ΠΎΠ³ΠΎΠ΅ тСстированиС - это Ρ‡Π°ΡΡ‚ΡŒ обучСния написанию CSS. Π§Π΅ΠΌ Π²Π½ΠΈΠΌΠ°Ρ‚Π΅Π»ΡŒΠ½Π΅Π΅ Π²Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ, Ρ‚Π΅ΠΌ быстрСС смоТСтС ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΊΠΎΠ΄.

Π‘ΠΏΡ€Π°ΠΉΡ‚Ρ‹

ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ хотят всС. Они хотят, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ваш сайт Π±Ρ‹Π» Π³Π»Π°ΠΌΡƒΡ€Π½Ρ‹ΠΌ, ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌ ΠΈ быстрым. Однако Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ большого количСства Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ CSS ΠΌΠΎΠΆΠ΅Ρ‚ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π·Π°ΠΌΠ΅Π΄Π»ΠΈΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ вашСго сайта. Π§Π΅ΠΌ большС HTTP-запросов Π²Ρ‹ сдСлаСтС, Ρ‚Π΅ΠΌ ΠΌΠ΅Π΄Π»Π΅Π½Π½Π΅Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ваш сайт (HTTP-запрос Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ всякий Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° ваш ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€ обращаСтся ΠΊ Π²Π΅Π±-сайту, ΠΈ Π΅ΠΌΡƒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠΏΡ€ΠΎΡΠΈΡ‚ΡŒ сСрвСр ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ Π΅ΠΌΡƒ Π΄Ρ€ΡƒΠ³ΠΎΠΉ рСсурс Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ сайта, Ρ‚Π°ΠΊΠΎΠΉ ΠΊΠ°ΠΊ Ρ„Π°ΠΉΠ» CSS ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ... ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ запрос ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ Π±ΠΎΠ»Π΅Π΅ Π΄Π»ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ врСмя Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ сайта).

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±ΠΎΠΉΡ‚ΠΈ это ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠ΅, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ связанныС Π·Π½Π°Ρ‡ΠΊΠΈ Π² ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, извСстноС ΠΊΠ°ΠΊ CSS-спрайты. Бвойство background-position позволяСт Π·Π°Ρ‚Π΅ΠΌ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… полоТСниях, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π½Π°Ρ‡ΠΊΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π»ΠΈΡΡŒ Ρ‡Π΅Ρ€Π΅Π· ΠΎΠΊΠ½ΠΎ элСмСнта HTML, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»Π΅Π½Ρ‹ спрайты CSS.

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° рис. 13, Ρ‡Ρ‚ΠΎ для отобраТСния Π·Π½Π°Ρ‡ΠΊΠ° Π—Π΅ΠΌΠ»ΠΈ Π² ΠΎΠΊΠ½Π΅ HTML Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ слСва Π²Π²Π΅Ρ€Ρ…Ρƒ . Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ отобраТался Π·Π½Π°Ρ‡ΠΎΠΊ прСдупрСТдСния, ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½Π° Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π½Π° -80 пиксСлСй 0 .ΠžΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ смСщаСт ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π»Π΅Π²ΠΎ.

Рисунок 13: ИспользованиС CSS-спрайтов для ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΡ количСства HTTP-запросов.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅. Если Π²Ρ‹ установитС ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½Π°, Safari Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ вашС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π΄Π°ΠΆΠ΅ Ссли Π²Ρ‹ ΡƒΠΊΠ°Π·Π°Π»ΠΈ no-repeat . Π­Ρ‚ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΌΠΈ изобраТСниями для создания Π±ΠΎΠ»Π΅Π΅ слоТных ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ².

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ слоТного спрайта ΠΈ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния

Π—Π°Ρ‚Π΅ΠΌ посмотритС, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ спрайты CSS.ΠŸΡ€Π΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, Π΄Ρ€ΡƒΠΆΠ΅Π»ΡŽΠ±Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ прислал Π½Π°ΠΌ Π½ΠΎΠ²Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚. Π­Ρ‚ΠΎ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚ список ссылок Π½Π° Ρ†Π΅Π»Π΅Π²ΠΎΠΉ страницС Π±Π»ΠΎΠ³Π°. Он ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π½Π° ΠΏΡ€ΠΎΡ„ΠΈΠ»ΡŒ Π±Π»ΠΎΠ³Π³Π΅Ρ€ΠΎΠ² Π² LinkedIn, RSS-ΠΊΠ°Π½Π°Π», Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ Flickr ΠΈ Π·Π°ΠΊΠ»Π°Π΄ΠΊΠΈ. ΠŸΡ€ΠΈ ΠΎΡ†Π΅Π½ΠΊΠ΅ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ссылки ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚, Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΠΉΡΡ Π² Ρ†Π΅Π½Ρ‚Ρ€Π΅ с Π±Π΅Π»ΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚Π° ΠΈ пСрСходящий ΠΊ сСрому Π²Π²Π΅Ρ€Ρ…Ρƒ ΠΈ Π²Π½ΠΈΠ·Ρƒ ссылки. И Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΅Ρ‰Π΅ большС ΡƒΡΠ»ΠΎΠΆΠ½ΠΈΡ‚ΡŒ ΡΠΈΡ‚ΡƒΠ°Ρ†ΠΈΡŽ, Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ спросил, ΠΌΠΎΠΆΠ΅ΠΌ Π»ΠΈ ΠΌΡ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠ°ΠΆΠ΄ΡƒΡŽ ссылку простой Π±Π΅Π»ΠΎΠΉ Π±Π΅Π· ΠΊΡ€ΠΈΠ²ΠΎΠΉ, ΠΊΠΎΠ³Π΄Π° посСтитСли наводят курсор Π½Π° ссылку, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½Π° рисункС 14.

Рисунок 14: ΠœΠ°ΠΊΠ΅Ρ‚ Π½ΠΎΠ²ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

Π›ΠΎΠ³ΠΎΡ‚ΠΈΠΏΡ‹ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Ρ‹ с использованиСм элСмСнтов img Π² Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ΅. Однако использованиС CSS-спрайтов - Π³ΠΎΡ€Π°Π·Π΄ΠΎ Π»ΡƒΡ‡ΡˆΠ΅Π΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅. Π‘ΠΏΡ€Π°ΠΉΡ‚Ρ‹ Π·Π°Π³Ρ€ΡƒΠΆΠ°ΡŽΡ‚ΡΡ быстрСС, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ (Π° Π½Π΅ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅), ΠΈ ΠΎΠ½ освобоТдаСт ваш HTML ΠΎΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ Π·Π° счСт ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΡ объСма Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ спрайта

ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ шаг Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π²Ρ‹Ρ€Π΅Π·Π°Π½ΠΈΠ΅ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅Ρ… Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠΎΠ² ΠΈ созданиС Π½Π°Π±ΠΎΡ€Π° спрайтов, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½Π° рисункС 15.

Рисунок 15: Набор спрайтов.

Π’Π°ΠΊΠΆΠ΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π²Ρ‹Ρ€Π΅Π·Π°Ρ‚ΡŒ Ρ‡Π°ΡΡ‚ΡŒ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π° ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ 1 пиксСль. Для наглядности я Π²Ρ‹Ρ€Π΅Π·Π°Π» Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ больший Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚, Π½ΠΎ Π² Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅ сайта Π²Π°ΠΌ понадобится Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΎΠ΄ΠΈΠ½ пиксСль (см. Рисунок 16).

Рисунок 16: Π‘Ρ€Π΅Π·, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ для Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½ΠΎΠ³ΠΎ Ρ„ΠΎΠ½Π°.

HTML-ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ создаСт список, прСдставляСт собой нСупорядочСнный список, содСрТащий ссылки. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° пустыС , ΠΎΡ…Π²Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ элСмСнтов Π²Π½ΡƒΡ‚Ρ€ΠΈ ссылок. ΠžΡ‡Π΅Π½ΡŒ Π²Π°ΠΆΠ½ΠΎ Π½Π΅ ΠΈΠΌΠ΅Ρ‚ΡŒ фиксированных ΠΏΠΎ высотС ΠΈ ΠΏΠΎ ΡˆΠΈΡ€ΠΈΠ½Π΅ для элСмСнтов, содСрТащих тСкст.Π’ ΠΊΠΎΠ½Ρ†Π΅ ΠΊΠΎΠ½Ρ†ΠΎΠ², Π²Ρ‹ Π½Π΅ прСдставляСтС, насколько большим Π±ΡƒΠ΄Π΅Ρ‚ тСкст. Π§Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚, Ссли сайт ΠΏΠ΅Ρ€Π΅Π²Π΅Π΄ΡƒΡ‚ Π½Π° Π½Π΅ΠΌΠ΅Ρ†ΠΊΠΈΠΉ язык? Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ эти Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΊΠΈ для отобраТСния Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠΎΠ². Π’ качСствС Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Ρ‹ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π½Π΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ посторонняя нСсСмантичСская Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° Π·Π°Π³Ρ€ΠΎΠΌΠΎΠΆΠ΄Π°Π»Π° ваш HTML. Π’ этом случаС Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ спрайт большСго Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΈ ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠ±Π΅Π» ΠΌΠ΅ΠΆΠ΄Ρƒ Π·Π½Π°Ρ‡ΠΊΠ°ΠΌΠΈ. Π˜ΠΌΠ΅ΠΉΡ‚Π΅ Π² Π²ΠΈΠ΄Ρƒ, Ρ‡Ρ‚ΠΎ эта стратСгия ΠΌΠ΅Π΄Π»Π΅Π½Π½Π΅Π΅ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ с ΠΌΠ΅Π΄Π»Π΅Π½Π½Ρ‹ΠΌ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ, особСнно для Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Ρ‹ для просмотра сайта. Код для списка ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½ΠΈΠΆΠ΅.Π‘ΠΊΠΎΠΏΠΈΡ€ΡƒΠΉΡ‚Π΅ Π΅Π³ΠΎ, Π° Π·Π°Ρ‚Π΅ΠΌ Π²ΡΡ‚Π°Π²ΡŒΡ‚Π΅ Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ HTML:

  
  

Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ CSS-ΠΊΠΎΠ΄ Π² Π½ΠΎΠ²Ρ‹ΠΉ CSS-Ρ„Π°ΠΉΠ» ΠΈ свяТитС Π΅Π³ΠΎ с HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠΌ:

 .навигация, .navigation li {
  ΠΌΠ°Ρ€ΠΆΠ°: 0;
  отступ: 0;
}

.navigation li {
  border-top: сплошной Π±Π΅Π»Ρ‹ΠΉ 1px;
  Ρ‚ΠΈΠΏ-ΡΡ‚ΠΈΠ»ΡŒ-список: Π½Π΅Ρ‚;
}

.navigation li a {
  Ρ„ΠΎΠ½: # E2E2E2 url (sprite_gradient_bkg.jpg) repeat-x Π»Π΅Π²Ρ‹ΠΉ Ρ†Π΅Π½Ρ‚Ρ€;
  отступ: 20 пиксСлСй;
  дисплСй: блок;
  сСмСйство ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²: Arial, Helvetica, sans-serif;
  Ρ†Π²Π΅Ρ‚: # 333;
  Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π°: 18 пиксСлСй;
  тСкстовоС ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅: Π½Π΅Ρ‚;
}



.navigation li a: hover, .navigation li a: focus {
  Ρ„ΠΎΠ½: ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ - Π½Π΅Ρ‚;
}
  

CSS ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΎΠ±Π° Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… изобраТСния.Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, взглянитС Π½Π° Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°. Π‘Π»Π΅Π΄ΡƒΠ΅Ρ‚ ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ Ρ‚Ρ€ΠΈ интСрСсных ΠΌΠΎΠΌΠ΅Π½Ρ‚Π°:

  1. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ повторяСтся ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ ( ΠΏΠΎΠ²Ρ‚ΠΎΡ€-x ). Π­Ρ‚Π° ΠΌΠΎΠ·Π°ΠΈΠΊΠ° позволяСт Π²Π°ΠΌ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΎΠ΅ малСнькоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ растянутым ΠΏΠΎ всСму списку.
  2. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ цСнтрируСтся ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ. Π’Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ круглая Ρ‡Π°ΡΡ‚ΡŒ изобраТСния появлялась Π² сСрСдинС элСмСнта списка, поэтому Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ Ρ„ΠΎΠ½Π° слСва ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ .
  3. Π’ CSS я ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠ» Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ сСрого, Ρ‡Ρ‚ΠΎ ΠΈ сСрый Π½Π° Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½ΠΎΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ.Π­Ρ‚ΠΎ Π³Π°Ρ€Π°Π½Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚, Ρ‡Ρ‚ΠΎ Ссли элСмСнт вырастСт, ΠΎΠ½ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ сломанным. Для получСния Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎΠ± этой Ρ‚Π΅Ρ…Π½ΠΈΠΊΠ΅ я Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ Bulletproof Web Design Дэна Π‘Π΅Π΄Π΅Ρ€Ρ…ΠΎΠ»ΡŒΠΌΠ°.

ПослСдняя строка ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ элСмСнт Π½Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»ΡŒ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚ Π½Π° Π½Π΅Π³ΠΎ курсор ΠΈΠ»ΠΈ фокусируСтся Π½Π° элСмСнтС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹. Π’Π°ΠΌ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ интСрСсно, ΠΏΠΎΡ‡Π΅ΠΌΡƒ я ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠ» свойства Ρ„ΠΎΠ½Π° ΠΊ ссылкС, Π° Π½Π΅ ΠΊ элСмСнту списка. ΠžΡ‚Π²Π΅Ρ‚ Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Internet Explorer 6 ΠΈ Π±ΠΎΠ»Π΅Π΅ Ρ€Π°Π½Π½ΠΈΠ΅ вСрсии Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ псСвдоклассы, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ hover , для элСмСнтов, ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΎΡ‚ ссылок.Π― внСс измСнСния Π² ΠΊΠΎΠ΄, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΡ‡Π΅ΡΡ‚ΡŒ это ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠ΅.

Π—Π°Ρ‚Π΅ΠΌ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ CSS для ΠΌΠ°Π»Π΅Π½ΡŒΠΊΠΈΡ… Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠΎΠ². Как ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°Ρ‡Π°Ρ‚ΡŒ с опрСдСлСния Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΎΠ±Ρ‰Π΅Π³ΠΎ случая для всСх элСмСнтов span Π² вашСм Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΌ ΠΌΠΎΠ΄ΡƒΠ»Π΅. ИмСнно здСсь Π²Ρ‹ опрСдСляСтС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ для всСх ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΊΠΎΠ², настройку ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π° ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½Π° (ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΈΠ· Π½ΠΈΡ… отличаСтся, поэтому Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠ΅Ρ€Π²ΠΎΠ΅). Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ сокращСнноС ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ этого ΠΏΡ€Π°Π²ΠΈΠ»Π°. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ CSS дСлят Ρ€Π°Π·Π΄Π΅Π»Ρ‹ нашСго ΠΊΠΎΠ΄Π° Π½Π° управляСмыС Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρ‹.Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄ Π² ΠΊΠΎΠ½Π΅Ρ† Ρ„Π°ΠΉΠ»Π° CSS:

 

.navigation span {
  Ρ„ΠΎΠ½: url (sprite_logo.gif) Π±Π΅Π· ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π° слСва Π²Π²Π΅Ρ€Ρ…Ρƒ;
  высота: 15 пиксСлСй;
  ΡˆΠΈΡ€ΠΈΠ½Π°: 15 пиксСлСй;
  ΠΏΠΎΠ»Π΅ справа: 20 пиксСлСй;
  дисплСй: -moz-inline-box;
  дисплСй: встроСнный Π±Π»ΠΎΠΊ;
  Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅: ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ;
}
  

ПослС Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΡ Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ форматирования Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ, ΠΈΠ»ΠΈ , Ρ‡Ρ‚ΠΎ ΠΎΡ‚Π»ΠΈΡ‡Π°Π΅Ρ‚ ΠΎΡ‚ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ³ΠΎ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ°. Π’ этом случаС измСняСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ CSS background-position .Для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π³ΠΎ элСмСнта списка Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±Ρ‹Π»ΠΎ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΎ Π½Π° 15 пиксСлСй Π²Π»Π΅Π²ΠΎ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΈΠ· ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ° ΠΈΠΌΠ΅Π΅Ρ‚ ΡˆΠΈΡ€ΠΈΠ½Ρƒ 15 пиксСлСй. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π² ΠΊΠΎΠ½Π΅Ρ† Ρ„Π°ΠΉΠ»Π° CSS ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:

 

#rss span {
  background-position: -15px 0;
}

#photos span {
  background-position: -30px 0;
}

#links span {
  background-position: -45px 0;
}
  

Π­Ρ‚ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΠΎΠ½Π°Ρ‡Π°Π»Ρƒ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ ΡƒΡΡ‚Ρ€Π°ΡˆΠ°ΡŽΡ‰ΠΈΠΌ. Π‘ΠΎΡΡ€Π΅Π΄ΠΎΡ‚ΠΎΡ‡ΡŒΡ‚Π΅ΡΡŒ Π½Π° Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… изобраТСниях. Π’ этом случаС ΠΏΡ€ΠΈ использовании ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ значСния пиксСля Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ смСщаСтся Π²Π»Π΅Π²ΠΎ, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ отобраТаСтся ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π°Ρ Ρ‡Π°ΡΡ‚ΡŒ изобраТСния.ΠŸΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°ΡŽΡ‚ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π½ΠΈΠ· ΠΈ Π²ΠΏΡ€Π°Π²ΠΎ, Π° ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°ΡŽΡ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π²Π΅Ρ€Ρ… ΠΈ Π²Π»Π΅Π²ΠΎ.

ΠŸΠΎΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅ со значСниями полоТСния Ρ„ΠΎΠ½Π° Π² Π³ΠΎΡ‚ΠΎΠ²ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΊΠ°ΠΊ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ спрайта.

ИспользованиС

  10.02.2014 ΠΎΠΊΠΎΠ»ΠΎ 1500 Ρ†Π΅Π½Ρ‚Ρ€Π°Π»ΡŒΠ½ΠΎΠ΅ врСмя:
  

hoffmant99 внСс Π½Π΅Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ измСнСния, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ спрайта Ρ€Π°Π±ΠΎΡ‚Π°Π», хотя учащийся (Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»ΡŒ этой страницы) Π΄ΠΎΠ»ΠΆΠ΅Π½ Π·Π½Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΈΠΌΠ΅Π½Π° Ρ„Π°ΠΉΠ»ΠΎΠ² Π½Π΅ ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡŽΡ‚.Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ локально, ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ² имя с Β«sprite_logoΒ» Π½Π° Β«sprite_lΒ» ΠΈ Β«sprite_gradient_bkg.jpgΒ» Π½Π° sprite_g.jpg Β».

Π‘ΠΌ. Π’Π°ΠΊΠΆΠ΅

Π’Π½Π΅ΡˆΠ½ΠΈΠ΅ рСсурсы

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ прСдоставлСно

Вопросы ΠΊ ΡƒΠΏΡ€Π°ΠΆΠ½Π΅Π½ΠΈΡŽ

  • Π Π°Π·ΠΌΠ΅Ρ€ Π°Π±Π·Π°Ρ†Π° составляСт 40 Π½Π° 180 пиксСлСй, Π° Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния - 60 Π½Π° 200 пиксСлСй. Π’Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ†Π΅Π»ΠΈΠΊΠΎΠΌ ΠΈΠ»ΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π΅Π³ΠΎ Ρ‡Π°ΡΡ‚ΡŒ? ΠŸΠΎΡ‡Π΅ΠΌΡƒ?

  • Π’Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Π»ΠΎΡΡŒ Π² Π½ΠΈΠΆΠ½Π΅ΠΌ Π»Π΅Π²ΠΎΠΌ ΡƒΠ³Π»Ρƒ элСмСнта blockquote - Π²Π²Π΅Π΄ΠΈΡ‚Π΅ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹Π΅ значСния.

      blockquote {background: yellow url (quote.png) no-repeat scroll ____ ____;}
      
  • Допустим, Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ h3 Π² вашСм Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅ Π±Ρ‹Π» ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½Ρ‹ΠΉ ΡƒΠ·ΠΎΡ€ с классом «вопрос». Π’Ρ‹ Π±Ρ‹ использовали repeat-x , repeat-y , no-repeat ΠΈΠ»ΠΈ repeat для достиТСния Ρ‡Π΅Π³ΠΎ-Ρ‚ΠΎ ΠΏΠΎΡ…ΠΎΠΆΠ΅Π³ΠΎ Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π½ΠΈΠΆΠ΅? ΠŸΠΎΡ‡Π΅ΠΌΡƒ?

  • Каким Π±ΡƒΠ΄Π΅Ρ‚ фоновая позиция ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° Π² вопросС Π½ΠΎΠΌΠ΅Ρ€ 3? Как ΠΌΠΎΠΆΠ½ΠΎ творчСски ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ ΠΌΠΎΠ³ Ρ€Π°ΡΡˆΠΈΡ€ΡΡ‚ΡŒΡΡ Π΄ΠΎ любой высоты? ΠŸΠΎΡ‡Π΅ΠΌΡƒ это Π²Π°ΠΆΠ½ΠΎ?
  • КакоС сокращСниС ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для удалСния всСх свойств Ρ„ΠΎΠ½Π°?
  • Какова Ρ†Π΅Π»ΡŒ CSS-спрайтов?

HTML Bulletproof Π€ΠΎΠ½ΠΎΠ²Ρ‹Π΅ изобраТСния Π² элСктронном письмС

Π’ΠΊΠ»ΡŽΡ‡Π΅Π½Ρ‹ всС исправлСния для Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Outlook, Windows 10, Webkit ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Gmail, ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠ΅ ΠΎΡ‚ ΡƒΡ‡Π΅Ρ‚Π½ΠΎΠΉ записи Gmail (GANGA).

Π’ Action Rocket ΠΌΡ‹ слСдим Π·Π° всСми послСдними хитростями ΠΈ исправлСниями, Ρ‡Ρ‚ΠΎΠ±Ρ‹ наши ΠΊΠ»ΠΈΠ΅Π½Ρ‚Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Π»ΠΈ Π»ΡƒΡ‡ΡˆΠΈΠ΅ элСктронныС письма. Π€ΠΎΠ½ΠΎΠ²Ρ‹Π΅ изобраТСния ΠΌΠΎΠ³ΡƒΡ‚ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Π΅ эффСкты Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ элСктронной ΠΏΠΎΡ‡Ρ‚Ρ‹ ΠΈ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΠΆΠΈΠ²ΠΈΡ‚ΡŒ Π΅Π³ΠΎ.

Они Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π²Ρ‹Π·Ρ‹Π²Π°ΡŽΡ‚ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π³ΠΎΠ»ΠΎΠ²Π½Ρ‹Π΅ Π±ΠΎΠ»ΠΈ - Outlook 2007, 2010, 2013 всС Π½ΡƒΠΆΠ΄Π°ΡŽΡ‚ΡΡ Π² языкС Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ (VML) для ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ³ΠΎ отобраТСния изобраТСния, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π° Microsoft Word. Windows 10 Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹Π΅ особСнности, Π½ΠΎ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ Π΄Π°ΠΆΠ΅ большС ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ, Ρ‡Π΅ΠΌ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠ΅ ΠΏΡ€ΠΎΠ³Π½ΠΎΠ·Ρ‹, Π² основном ΡˆΠΈΡ€ΠΈΠ½Π° ΠΈ высота ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ Π² Ρ‚ΠΎΡ‡ΠΊΠ°Ρ… (pt), Π° Π½Π΅ Π² пиксСлях.ЭлСктронная ΠΏΠΎΡ‡Ρ‚Π° Webkit ΠΈ ΠΏΠΎΠ΄Π°Π²Π»ΡΡŽΡ‰Π΅Π΅ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ соврСмСнных ΠΏΠΎΡ‡Ρ‚ΠΎΠ²Ρ‹Ρ… ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ² ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ Ρ„ΠΎΠ½ CSS ΠΈΠ»ΠΈ html, ΠΈ совсСм Π½Π΅Π΄Π°Π²Π½ΠΎ ДТастин ΠšΡ…Ρƒ Π² freshinbox ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΠ», Ρ‡Ρ‚ΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΏΠΎΡ‡Ρ‚ΠΎΠ²Ρ‹ΠΉ ΠΊΠ»ΠΈΠ΅Π½Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π΄ΠΎ послСднСго мСсяца ΠΈΠ»ΠΈ ΠΎΠΊΠΎΠ»ΠΎ Ρ‚ΠΎΠ³ΠΎ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π» Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Π΅ изобраТСния, ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Gmail Π½Π΅ - Π£Ρ‡Π΅Ρ‚Π½Ρ‹Π΅ записи Gmail, исправлСниСм для этого Π±Ρ‹Π»ΠΎ свойство Ρ„ΠΎΠ½Π° css, Π½ΠΎ с сокращСнными значСниями свойств.

ΠžΠ·Π½Π°ΠΊΠΎΠΌΡŒΡ‚Π΅ΡΡŒ со всСм ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹ΠΌ Π½ΠΈΠΆΠ΅ ΠΊΠΎΠ΄ΠΎΠΌ - здСсь Π΅ΡΡ‚ΡŒ всС случаи, ΠΊΠΎΠ³Π΄Π° Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Π΅ изобраТСния:





ΠšΠžΠΠ’Π•ΠΠ’






Π Π°Π·Ρ€ΡƒΡˆΠ΅Π½ΠΈΠ΅

Начиная с Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΈ строки Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ - ΠΌΡ‹ настраиваСм ΡΠ»Π΅ΠΊΡ‚Ρ€ΠΎΠ½Π½ΡƒΡŽ ΠΏΠΎΡ‡Ρ‚Ρƒ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½Π° Ρ€Π°Π±ΠΎΡ‚Π°Π»Π° Π²ΠΎ всСх пСрспСктивах.Π—Π΄Π΅ΡΡŒ Π½ΠΈΡ‡Π΅Π³ΠΎ Π½ΠΎΠ²ΠΎΠ³ΠΎ.

, с Π΄Ρ€ΡƒΠ³ΠΎΠΉ стороны, Π·Π°Π±ΠΈΡ‚ исправлСниями, Ρ‡Ρ‚ΠΎΠ±Ρ‹ всС выглядСло Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ Π΄ΠΎΠ»ΠΆΠ½ΠΎ. ΠœΡ‹ объявляСм bgcolor Π² html ΠΊΠ°ΠΊ запасной Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ ΠΈ ΠΊΠ°ΠΊ Ρ†Π²Π΅Ρ‚ Π·Π° Π»ΡŽΠ±Ρ‹ΠΌΠΈ изобраТСниями png. Π”Π°Π»Π΅Π΅ свойство html background = со ссылкой Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.Π—Π°Ρ‚Π΅ΠΌ опрСдСляСм html width, height ΠΈ valign. НаконСц, встроСнный ΡΡ‚ΠΈΠ»ΡŒ = с сокращСнным CSS-свойством Ρ„ΠΎΠ½Π° ΠΈ Π΅Π³ΠΎ значСниями.

style = Β«background: url (β€˜ https://via.placeholder.com/640 Γ— 400 ’) center / cover no-repeat # 000000;Β»

Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, background: url (β€˜image.png’) ссылаСтся Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ являСтся ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠ΅ΠΌ Π²Ρ‹ΡˆΠ΅ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ изобраТСния, ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ Π² html. Π”Π°Π»Π΅Π΅ слСдуСт ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ изобраТСния - Ρ†Π΅Π½Ρ‚Ρ€ / Ρ€Π°Π·ΠΌΠ΅Ρ€ - ΠΎΠ±Π»ΠΎΠΆΠΊΠ°, Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π»ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒΡΡ - Π±Π΅Π· ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π° ΠΈ, Π½Π°ΠΊΠΎΠ½Π΅Ρ†, Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° # 000000; ВсС ΠΎΠ½ΠΈ настроСны для Ρ†Π΅Π½Ρ‚Ρ€Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ достаточно Π²Π΅Π»ΠΈΠΊΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΈ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒΡΡ.

Нам Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ ΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ значСниями свойств Ρ„ΠΎΠ½Π° CSS, Π½ΠΎ Π΅ΡΡ‚ΡŒ Π΅Ρ‰Π΅ нСсколько. Π”Π°ΠΉΡ‚Π΅ Π½Π°ΠΌ Π·Π½Π°Ρ‚ΡŒ, Ссли Π²Ρ‹ это сдСлаСтС ΠΈ ΠΊΠ°ΠΊ Ρƒ вас Π΄Π΅Π»Π°!

ПослС

запускаСм VML:





ΠžΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ ΠΈ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ условныС ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ MSO Π³Π°Ρ€Π°Π½Ρ‚ΠΈΡ€ΡƒΡŽΡ‚, Ρ‡Ρ‚ΠΎ VML ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊ Ρ‚Π΅ΠΌ вСрсиям Outlook, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π² Π½Π΅ΠΌ Π½ΡƒΠΆΠ΄Π°ΡŽΡ‚ΡΡ. VML Π—Π° Π½ΠΈΠΌ слСдуСт v: image, ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‰ΠΈΠΉ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² VML.

ΠœΡ‹ опрСдСляСм пространство ΠΈΠΌΠ΅Π½ xml xmlns: v = ”urn: schemas-microsoft-com: vml”, Π·Π°Ρ‚Π΅ΠΌ ΠΌΡ‹ опрСдСляСм значСния свойства v: image, Π·Π°Π»ΠΈΠ²ΠΊΠ° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для опрСдСлСния Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ², Ссли Ρ‡Ρ‚ΠΎ-Π»ΠΈΠ±ΠΎ ΠΊΡ€ΠΎΠΌΠ΅ сплошного Ρ†Π²Π΅Ρ‚Π° ΠΈΠ»ΠΈ изобраТСния использовал.fill = ”true” ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ vml Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ всю Ρ„ΠΎΡ€ΠΌΡƒ. stroke ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π»ΠΈ линия ΠΈΠ»ΠΈ Π³Ρ€Π°Π½ΠΈΡ†Π°, Π² случаС Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния это Π½Π΅ Ρ‚Π°ΠΊ, поэтому для этого ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° установлСно Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ stroke = "false". Π—Π°Ρ‚Π΅ΠΌ Π·Π° этими Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°ΠΌΠΈ VML слСдуСт Ρ‚Π΅Π³ стиля - Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½ΠΎ содСрТащий Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ изобраТСния Π² Π²ΠΈΠ΄Π΅ Ρ‚ΠΎΡ‡Π΅ΠΊ - Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ΅ число, ΡƒΠΌΠ½ΠΎΠΆΡŒΡ‚Π΅ пиксСли Π½Π° 0,75, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€. 640 пиксСлСй x 0,75 = 480 пиксСлСй. И послСднСС, Π½ΠΎ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ Π²Π°ΠΆΠ½ΠΎΠ΅: ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ src.

БлСдуя v: image, ΠΌΡ‹ «рисуСм ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠΌΠ΅Ρ‰Π°Π»ΠΎΡΡŒ Π² Π½Π΅Π³ΠΎ - v: rect со схоТими Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°ΠΌΠΈ.ОсновноС ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ - это ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅; Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ Ρ‚Π°ΠΌ, Π³Π΄Π΅ ΠΎΠ½ Π½Π°ΠΌ Π½ΡƒΠΆΠ΅Π½.

Π”Π°Π»Π΅Π΅ Π² VML ΠΈΠ΄Π΅Ρ‚ v: fill для установки Ρ†Π²Π΅Ρ‚Π° ΠΈ нСпрозрачности v: rect ΠΈ v: image - этот Ρ†Π²Π΅Ρ‚ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ Ρ‚Π°ΠΊΠΈΠΌ ΠΆΠ΅, ΠΊΠ°ΠΊ Π² bgcolor ΠΈ background: color; Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ² для всСх ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ².

НаконСц, ΠΌΡ‹ опрСдСляСм ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ v: textbox, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΏΠΎΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΠΏΠΎΠ²Π΅Ρ€Ρ… v: rect ΠΈ v: image, начиная с Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΡƒΠ³Π»Π° Π½Π° 0,0,0,0.

ПослС VML - ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ

, содСрТащий ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ vml. Π—Π° Π½ΠΈΠΌ слСдуСт

, Ρ‡Ρ‚ΠΎΠ±Ρ‹ послС изобраТСния Π² Outlook Π½Π΅ появлялся Π·Π°Π·ΠΎΡ€ Π² 20 пиксСлСй.

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ послСдний Ρ‚Π΅Π³ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ html, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΡ‹ использовали, Π±Ρ‹Π»

, Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ здСсь ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ синтаксис ΠΈ Π»ΠΈΠ±ΠΎ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ

, Π»ΠΈΠ±ΠΎ Π½Π°Ρ‡Π°Ρ‚ΡŒ Π½ΠΎΠ²ΡƒΡŽ

для добавлСния содСрТимого.

Π‘ΠžΠ”Π•Π Π–ΠΠΠ˜Π•

Π—Π°Ρ‚Π΅ΠΌ ΡΠ»Π΅Π΄ΡƒΡŽΡ‚ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ Ρ‚Π΅Π³ΠΈ для всСго Π²Ρ‹ΡˆΠ΅ΠΏΠ΅Ρ€Π΅Ρ‡ΠΈΡΠ»Π΅Π½Π½ΠΎΠ³ΠΎ, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Ρ‚Π΅Π³ΠΈ VML, Π·Π°ΠΊΡ€Ρ‹Ρ‚Ρ‹Π΅ Π²Π½ΡƒΡ‚Ρ€ΠΈ условного Ρ‚Π΅Π³Π° MSO.






Π’ послСднюю ΠΌΠΈΠ½ΡƒΡ‚Ρƒ! ВаТная информация

ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ создаСтС Π΄ΠΈΠ·Π°ΠΉΠ½, ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π±Π΅Π· Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния. НСсмотря Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ поддСрТиваСтся, низкая ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ соСдинСния Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах, Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²ΠΊΠ° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, странныС ΠΊΡ€Π°ΠΉΠ½ΠΈΠ΅ случаи ΠΈ ΠΏΠΎΡ‡Ρ‚ΠΎΠ²Ρ‹Π΅ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ всС ΠΈΡΠΏΠΎΡ€Ρ‚ΠΈΡ‚ΡŒ! Π’Ρ‹ΡˆΠ΅ ΠΌΡ‹ опрСдСляСм Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° Π²Π΅Π·Π΄Π΅, Π³Π΄Π΅ это Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΠΈ ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΊΠΎΠ½Ρ‚Ρ€Π°ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ с Π»ΡŽΠ±Ρ‹ΠΌ тСкстом, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ помСщаСтся свСрху.

ΠžΠ·Π½Π°ΠΊΠΎΠΌΡŒΡ‚Π΅ΡΡŒ с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ ΡƒΠ΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ рСсурсами Π² Π²Π΅Π±-пространствС #emailgeeks!

Litmus: ΠΏΠΎΠ»Π½ΠΎΠ΅ руководство ΠΏΠΎ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΌ изобраТСниям - ДТСйсон РодригСс

Gmail IMAP (GANGA) Π½Π°ΠΊΠΎΠ½Π΅Ρ†-Ρ‚ΠΎ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Π΅ изобраТСния Π² Π½ΠΎΠ²ΠΎΠΌ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΈ - ДТастин ΠšΡ…Ρƒ

ΠœΠΎΠ½ΠΈΡ‚ΠΎΡ€Ρ‹ ΠΊΠ°ΠΌΠΏΠ°Π½ΠΈΠΈ Bulletproof Backgrounds - Stig Morten Myre

Π”ΠΆΠ΅ΠΉ ΠžΡ€Π°ΠΌ - @emailjay_
Coder @ Action Rocket

.

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

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