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> </div>
</li>
<li>repeat
<div> </div>
</li>
<li>repeat-x
<div> </div>
</li>
<li>repeat-y
<div> </div>
</li>
<li>repeat-x, repeat-y (multiple images)
<div> </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
- Π±Π΅Π· ΠΏΠΎΠ²ΡΠΎΡΠ°
- ΠΏΠΎΠ²ΡΠΎΡΠΈΡΡ
- repeat-x
- repeat-y
- ΠΏΡΠΎΠ±Π΅Π»
- ΡΠ°ΡΠ½Π΄
- 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. | ΠΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΡΠΊΠ°Π·Π°ΡΡ ΠΠ½ΠΎΠ³ΠΈΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ Π²ΡΠ±ΠΎΡΠ° ΡΠ²Π΅ΡΠ° ΠΏΠΎΠΌΠΎΠ³ΡΡ Π²Π°ΠΌ Π½Π°ΠΉΡΠΈ ΡΠ΅ΡΡΠ½Π°Π΄ΡΠ°ΡΠ΅ΡΠΈΡΠ½ΠΎΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ°. Π§ΠΈΡΡΡΠΉ ΠΊΡΠ°ΡΠ½ΡΠΉ ΡΠ²Π΅Ρ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π±ΡΠ΄Π΅Ρ # FF0000. ΠΠΎΠΏΡΡΡΠΈΠΌΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ |
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ | Π£ΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΏΡΡΡ ΠΈΠ»ΠΈ URL ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. | Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΠΠΎΠΏΡΡΡΠΈΠΌΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ: |
ΠΏΠΎΠ²ΡΠΎΡ | Π£ΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, Π² ΠΊΠ°ΠΊΠΎΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. | ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ, Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ ΠΈΠ»ΠΈ ΠΏΠΎ ΠΎΠ±ΠΎΠΈΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡΠΌ, ΡΡΠΎΠ±Ρ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΡ Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈΠ»ΠΈ Π²ΡΡΠΎΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° HTML. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΠΎΠΏΡΡΡΠΈΠΌΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π²ΠΊΠ»ΡΡΠ°ΡΡ |
Π½Π°ΡΠ°Π΄ΠΊΠ° | ΠΠ°Π΄Π°Π΅Ρ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ. | ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΌΠΎΠ³ΡΡ Π»ΠΈΠ±ΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ, Π»ΠΈΠ±ΠΎ ΠΎΡΡΠ°Π²Π°ΡΡΡΡ Π½Π° ΠΌΠ΅ΡΡΠ΅ Π½Π° ΡΠΊΡΠ°Π½Π΅ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΠΎΠΏΡΡΡΠΈΠΌΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ: |
ΠΏΠΎΠ·ΠΈΡΠΈΡ | Π‘ΠΎΠΎΠ±ΡΠ°Π΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΡ, Π³Π΄Π΅ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. | ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΌΠΎΠ³ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π² Π»ΡΠ±ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ Π² ΠΏΡΠ΅Π΄Π΅Π»Π°Ρ
HTML-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΠΎΠ½ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΡΡ
ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΡΠΊΠ°Π·Π°ΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½Π°, ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ»ΠΎΠ²Π° ΠΈ ΡΠΈΡΠ»ΠΎΠ²ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ. ΠΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ»ΠΎΠ²Π° (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΠΎΠ³Π΄Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΠΏΡΠΎΡΠ΅Π½ΡΡ ΠΈ ΠΏΠΈΠΊΡΠ΅Π»ΠΈ, ΠΎΡΠΏΡΠ°Π²Π½ΠΎΠΉ ΡΠΎΡΠΊΠΎΠΉ Π²ΡΠ΅Π³Π΄Π° ΡΠ²Π»ΡΠ΅ΡΡΡ Π²Π΅ΡΡ Π½ΠΈΠΉ Π»Π΅Π²ΡΠΉ ΡΠ³ΠΎΠ» ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° HTML, Ρ ΠΎΡΡ ΡΠΏΠΎΡΠΎΠ± ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Ρ ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌΠΈ ΠΈ ΠΏΡΠΎΡΠ΅Π½ΡΠ°ΠΌΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΠ½Π°ΡΠ΅.ΠΠΈΠΊΡΠ΅Π»ΠΈ Π²ΡΠ΅Π³Π΄Π° ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π·Π°Π΄Π°Π½Π½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π²Π½ΠΈΠ· ΠΈ Π²ΠΏΡΠ°Π²ΠΎ ΠΎΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ ΠΏΠΎΠ»Ρ (ΠΈΠ»ΠΈ Π²Π²Π΅ΡΡ ΠΈ Π²Π»Π΅Π²ΠΎ, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ ΠΈΠΌΠ΅ΡΡ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ), Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ ΠΏΠΎΠ»Ρ. Π‘ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ, ΠΏΡΠΎΡΠ΅Π½ΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΠΏΡΠΎΡΠ΅Π½Ρ ΡΠ°Π·Π½ΠΈΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ ΠΏΠΎΠ»Ρ ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π΅ Π΅Π³ΠΎ ΠΏΠΎΠ»Π΅ ΠΈΠΌΠ΅ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ, ΠΏΡΠΎΡΠ΅Π½ΡΡ Π½Π΅ Π±ΡΠ΄ΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΠΎΠΎΠ±ΡΠ΅. ΠΠΎΠΏΡΡΡΠΈΠΌΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π²ΠΊΠ»ΡΡΠ°ΡΡ |
ΡΠΎΠ½ | Π‘ΠΎΠΊΡΠ°ΡΠ΅Π½Π½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ Π²ΡΠ΅Ρ Π΄ΡΡΠ³ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ² Π² ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅. | Π‘ΠΎΠΊΡΠ°ΡΠ΅Π½Π½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΡΠ΅Π½Ρ Ρ ΠΎΡΠΎΡΠΈ. ΠΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΠΈΡ , ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ CSS ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΊΠΎΠΌΠΏΠ°ΠΊΡΠ½ΡΠΌ ΠΈ ΡΠ³ΡΡΠΏΠΏΠΈΡΠΎΠ²Π°ΡΡ ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°.ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΏΠΈΡΠ°ΡΡ ΠΎΠ±ΡΠ΅Π΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΠ΅, Π° Π·Π°ΡΠ΅ΠΌ ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ Π΅Π³ΠΎ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠΌΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ. Π‘Π²ΠΎΠΉΡΡΠ²Π° Π²ΡΠ΅Π³Π΄Π° Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΈ ΡΠΎΠΌ ΠΆΠ΅ ΠΏΠΎΡΡΠ΄ΠΊΠ΅, ΡΡΠΎΠ±Ρ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΌΠΎΠ³Π»ΠΈ Π»Π΅Π³ΠΊΠΎ ΠΈΠ½ΡΠ΅ΡΠΏΡΠ΅ΡΠΈΡΠΎΠ²Π°ΡΡ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅ΠΌΡΠ΅ ΡΡΠΈΠ»ΠΈ:
ΠΡΠΈΠΌΠ΅Ρ ΡΡΠΎΠ³ΠΎ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΡ ΡΠΎ Π²ΡΠ΅ΠΌΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΌΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ (ΠΊΡΠΎΠΌΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ |
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π°ΡΡΠ΅Π³ΠΎ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ
Π’Π΅ΠΏΠ΅ΡΡ, ΠΊΠΎΠ³Π΄Π° Π²Ρ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅ΡΠ΅ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΠΉΡΠΈ ΡΠ΅ΡΠ΅Π· ΠΏΡΠΎΡΠ΅ΡΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΎΠΊΠ½Π° ΠΏΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΠ΅Ρ Π²ΡΠ΅ Π°ΡΠΏΠ΅ΠΊΡΡ ΡΠ°Π±ΠΎΡΡ Ρ ΡΠΎΠ½ΠΎΠ²ΡΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ.
ΠΠΎΠ½ΡΡΡΡΠΊΡΠΈΡ
ΠΡΠ΅Π΄ΡΡΠ°Π²ΡΡΠ΅, ΡΡΠΎ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΠ» Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ ΠΏΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π°ΡΡΠ΅Π³ΠΎ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ Π΄Π»Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°. ΠΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠ²Π΅ΡΠ»ΠΎ-ΠΎΡΠ°Π½ΠΆΠ΅Π²ΡΠΉ ΡΠ²Π΅Ρ ΡΠΎΠ½Π°, ΡΡΠΎΠ±Ρ Π²ΡΠ΄Π΅Π»ΡΡΡΡΡ Π½Π° ΡΠΎΠ½Π΅ ΠΎΠΊΡΡΠΆΠ°ΡΡΠΈΡ Π°Π±Π·Π°ΡΠ΅Π².ΠΠ½ ΡΠ°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ Π·Π½Π°ΡΠΎΠΊ ΠΏΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΡ Π² Π΄Π΅ΡΡΡΠΈ ΠΏΠΈΠΊΡΠ΅Π»ΡΡ ΠΎΡ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΡΠ³Π»Π°.
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π² ΠΌΠ°ΠΊΠ΅ΡΠ΅ Π΅ΡΡΡ ΠΎΠ΄Π½Π° ΡΡΡΠΎΠΊΠ° ΡΠ΅ΠΊΡΡΠ°, Π½ΠΎ Π² Π±ΡΠ΄ΡΡΠ΅ΠΌ ΠΎΠ½Π° ΠΌΠΎΠΆΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ Π±ΠΎΠ»ΡΡΠ΅. ΠΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ°ΠΌΡΡ Π²Π°ΠΆΠ½ΡΡ Π½Π°Π²ΡΠΊΠΎΠ² Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° — ΠΏΡΠ΅Π΄Π²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ Π±ΡΠ΄Π΅Ρ ΡΠ°Π·Π²ΠΈΠ²Π°ΡΡΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½. Π§Π°ΡΡΡ ΡΠ²Π°ΠΆΠ΅Π½ΠΈΡ ΠΊ Ρ ΡΠ΄ΠΎΠΆΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠΌΡ Π²ΠΈΠ΄Π΅Π½ΠΈΡ ΡΠ°ΠΉΡΠ° — ΡΡΠΎ ΠΏΠΎΡΡΠΎΡΠ½ΡΡΠ²ΠΎ ΠΎΡ Π·Π°ΠΏΡΡΠΊΠ° Π΄ΠΎ ΡΠ΅Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΏΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π°ΡΡΠ΅Π΅ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ ΡΠ΅ΠΊΡΡΠ° ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π°Π±Π·Π°ΡΠ΅Π², ΡΠΏΠΈΡΠΊΠΎΠ² ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² 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;
}
Π‘ΠΎΠ²Π΅Ρ: ΠΏΡΠΈ Π³ΡΡΠΏΠΏΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ ΠΏΠΎΠ΄ΡΠ²ΠΎΠΉΡΡΠ² ΡΠΎΠ½Π°
Π²ΡΠ΅Π³Π΄Π° ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΠΉΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π² ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅. ΠΡΠΎ Π²Π°ΠΆΠ½ΠΎ ΠΊΠ°ΠΊ Π΄Π»Ρ ΠΊΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎΠΉ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΠΈ, ΡΠ°ΠΊ ΠΈ Π΄Π»Ρ ΠΎΡΠ³Π°Π½ΠΈΠ·Π°ΡΠΈΠΈ ΠΈ ΠΎΠ±ΡΠ»ΡΠΆΠΈΠ²Π°Π½ΠΈΡ ΡΠ°Π±Π»ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ:
-
ΡΠ²Π΅Ρ
-
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
-
ΠΏΠΎΠ²ΡΠΎΡ
-
ΠΏΡΠΈΡΡΠ°Π²ΠΊΠ°
-
Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ
ΠΏΠΎΠ·ΠΈΡΠΈΡ -
Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ Π·Π°ΠΌΠ΅Π½ΠΈΡΡ ΡΡΠ°ΡΡΠΉ ΠΊΠΎΠ΄ 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 ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΎΠ±Π° ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.ΠΠΎ-ΠΏΠ΅ΡΠ²ΡΡ , Π²Π·Π³Π»ΡΠ½ΠΈΡΠ΅ Π½Π° ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ°. Π‘Π»Π΅Π΄ΡΠ΅Ρ ΠΎΡΠΌΠ΅ΡΠΈΡΡ ΡΡΠΈ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΡ ΠΌΠΎΠΌΠ΅Π½ΡΠ°:
- ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ²ΡΠΎΡΡΠ΅ΡΡΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ (
ΠΏΠΎΠ²ΡΠΎΡ-x
). ΠΡΠ° ΠΌΠΎΠ·Π°ΠΈΠΊΠ° ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π°ΠΌ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΊΠΎΠ΅ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°ΡΡΡΠ½ΡΡΡΠΌ ΠΏΠΎ Π²ΡΠ΅ΠΌΡ ΡΠΏΠΈΡΠΊΡ. - ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ΅Π½ΡΡΠΈΡΡΠ΅ΡΡΡ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ. ΠΡ Ρ
ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΠΊΡΡΠ³Π»Π°Ρ ΡΠ°ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠΎΡΠ²Π»ΡΠ»Π°ΡΡ Π² ΡΠ΅ΡΠ΅Π΄ΠΈΠ½Π΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠΏΠΈΡΠΊΠ°, ΠΏΠΎΡΡΠΎΠΌΡ Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΡΠΎΠ½Π°
ΡΠ»Π΅Π²Π° ΠΏΠΎ ΡΠ΅Π½ΡΡΡ
. - Π 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_ . |