Π§ΠΈΡ‚Π°ΠΉΡ‚Π΅ ΠΊΠ½ΠΈΠ³ΠΈ ΠΎΠ½Π»Π°ΠΉΠ½ Π½Π° Bookidrom.ru! БСсплатныС ΠΊΠ½ΠΈΠ³ΠΈ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠ»ΠΈΠΊΠ΅

Π§ΠΈΡ‚Π°Ρ‚ΡŒ ΠΎΠ½Π»Π°ΠΉΠ½ «БпСцификация CSS2Β». Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π° 37

Автор Π•Π²Π³Π΅Π½ΠΈΠΉ Π Π΅Π·Π½ΠΈΡ‡Π΅Π½ΠΊΠΎ

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅: <color> | inherit

ΠΠ°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅: зависит ΠΎΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ Π°Π³Π΅Π½Ρ‚Π° (ПА)

ΠŸΡ€ΠΈΠΌΠ΅Π½ΡΠ΅Ρ‚ΡΡ: ΠΊΠΎ всСм элСмСнтам

НаслСдуСтся: Π΄Π°

ΠŸΡ€ΠΎΡ†Π΅Π½Ρ‚Π½ΠΎΠ΅: N/A

ΠΠΎΡΠΈΡ‚Π΅Π»ΡŒ: Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ

Π­Ρ‚ΠΎ свойство описываСт Ρ†Π²Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅Π΄Π½Π΅Π³ΠΎ ΠΏΠ»Π°Π½Π° содСрТимого тСкста элСмСнта. МоТно ΠΏΠΎ Ρ€Π°Π·Π½ΠΎΠΌΡƒ ΡΠΏΠ΅Ρ†ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ красный Ρ†Π²Π΅Ρ‚:


EM { color: red } /* ΠΏΡ€Π΅Π΄ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½ΠΎΠ΅ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° */ EM { color: rgb(255,0,0) } /* Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ RGB 0-255 */


Авторы ΠΌΠΎΠ³ΡƒΡ‚ ΡΠΏΠ΅Ρ†ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ элСмСнта (Ρ‚.Π΅. Π΅Π³ΠΎ Π²ΠΈΠ΄ΠΈΠΌΡƒΡŽ ΠΏΠΎΠ²Π΅Ρ€Ρ…Π½ΠΎΡΡ‚ΡŒ) ΠΊΠ°ΠΊ Ρ†Π²Π΅Ρ‚ ΠΈΠ»ΠΈ ΠΊΠ°ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. Π’ Ρ‚Π΅Ρ€ΠΌΠΈΠ½Π°Ρ… ΠΌΠΎΠ΄Π΅Π»ΠΈ бокса, "background" относится ΠΊ Ρ„ΠΎΠ½Ρƒ содСрТимого ΠΈ области заполнСния. Π¦Π²Π΅Ρ‚ ΠΈ ΡΡ‚ΠΈΠ»ΡŒ обрамлСния ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°ΡŽΡ‚ΡΡ Π² свойствах обрамлСния. Поля всСгда ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹, поэтому Ρ„ΠΎΠ½ бокса-ΠΏΡ€Π΅Π΄ΠΊΠ° всСгда просвСчиваСт.

Бвойства Ρ„ΠΎΠ½Π° Π½Π΅ Π½Π°ΡΠ»Π΅Π΄ΡƒΡŽΡ‚ΡΡ, Π½ΠΎ Ρ„ΠΎΠ½ бокса-ΠΏΡ€Π΅Π΄ΠΊΠ° Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΏΡ€ΠΎΡΠ²Π΅Ρ‡ΠΈΠ²Π°Ρ‚ΡŒ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 'background-color' - 'transparent'.

Π€ΠΎΠ½ бокса, Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅ΠΌΡ‹ΠΉ ΠΊΠΎΡ€Π½Π΅Π²Ρ‹ΠΌ элСмСнтом, ΠΏΠΎΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ всю ΠΊΠ°Π½Π²Ρƒ.

Для Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ² HTML, ΠΎΠ΄Π½Π°ΠΊΠΎ, ΠΌΡ‹ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π°Π²Ρ‚ΠΎΡ€Ρ‹ спСцифицировали Ρ„ΠΎΠ½ элСмСнта BODY, Π° Π½Π΅ элСмСнта HTML.

ПА Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΠΏΡ€Π°Π²ΠΈΠ»Π° ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚Π° ΠΏΡ€ΠΈ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΈ Ρ„ΠΎΠ½Π°: Ссли Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства 'background' для элСмСнта HTML ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ ΠΎΡ‚ 'transparent', Ρ‚ΠΎΠ³Π΄Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π΅Π³ΠΎ, Π² ΠΈΠ½ΠΎΠΌ случаС - ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства 'background' элСмСнта BODY. Если Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚ΠΈΡ€ΡƒΡŽΡ‰Π΅Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ - 'transparent', Ρ‚ΠΎ прСдставлСниС Π½Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΎ.

Π’ соотвСтствии с этими ΠΏΡ€Π°Π²ΠΈΠ»Π°ΠΌΠΈ, ΠΊΠ°Π½Π²Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π³ΠΎ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° HTML Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ Ρ„ΠΎΠ½ "marble":


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Установка Ρ„ΠΎΠ½Π° ΠΊΠ°Π½Π²Ρ‹</TITLE> <STYLE type="text/css"> BODY { background: url("http://style.com/marble.png") } </STYLE> </HEAD> <BODY> <P>Мой Ρ„ΠΎΠ½ - marble. </BODY> </HTML>


'background-color'

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅: <color> | transparent | inherit

ΠΠ°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅: transparent

ΠŸΡ€ΠΈΠΌΠ΅Π½ΡΠ΅Ρ‚ΡΡ: ΠΊΠΎ всСм элСмСнтам

НаслСдуСтся: Π½Π΅Ρ‚

ΠŸΡ€ΠΎΡ†Π΅Π½Ρ‚Π½ΠΎΠ΅: N/A

ΠΠΎΡΠΈΡ‚Π΅Π»ΡŒ: Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ

Π­Ρ‚ΠΎ свойство устанавливаСт Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° элСмСнта Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ <color> ΠΈΠ»ΠΈ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹ΠΌ словом 'transparent' (Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ ΠΏΠΎΠ΄Π»ΠΎΠΆΠΊΠΈ ΠΏΡ€ΠΎΡΠ²Π΅Ρ‡ΠΈΠ²Π°ΡŽΡ‰ΠΈΠΌ).


H1 { background-color: #F00 }


'background-image'

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅: <uri> | none | inherit

ΠΠ°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅: none

ΠŸΡ€ΠΈΠΌΠ΅Π½ΡΠ΅Ρ‚ΡΡ: ΠΊΠΎ всСм элСмСнтам

НаслСдуСтся: Π½Π΅Ρ‚

ΠŸΡ€ΠΎΡ†Π΅Π½Ρ‚Π½ΠΎΠ΅: N/A

ΠΠΎΡΠΈΡ‚Π΅Π»ΡŒ: Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ

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

ЗначСниями Π΄Π°Π½Π½ΠΎΠ³ΠΎ свойства ΡΠ²Π»ΡΡŽΡ‚ΡΡ <uri>, для спСцификации изобраТСния, ΠΈΠ»ΠΈ 'none', Ссли ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ.


BODY { background-image: url("marble.gif") } P { background-image: none }


'background-repeat'

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅: repeat | repeat-x | repeat-y | no-repeat | inherit

ΠΠ°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅: repeat

ΠŸΡ€ΠΈΠΌΠ΅Π½ΡΠ΅Ρ‚ΡΡ: ΠΊΠΎ всСм элСмСнтам

НаслСдуСтся: Π½Π΅Ρ‚

ΠŸΡ€ΠΎΡ†Π΅Π½Ρ‚Π½ΠΎΠ΅: N/A

ΠΠΎΡΠΈΡ‚Π΅Π»ΡŒ: Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ

Если спСцифицировано ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½Π°, Ρ‚ΠΎ Π΄Π°Π½Π½ΠΎΠ΅ свойство опрСдСляСт, повторяСтся Π»ΠΈ Π΄Π°Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ (размноТаСтся Π»ΠΈ), ΠΈ ΠΊΠ°ΠΊ. Π Π°Π·ΠΌΠ½ΠΎΠΆΠ΅Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ области содСрТимого ΠΈ заполнСния бокса.

ЗначСния ΠΈΠΌΠ΅ΡŽΡ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ смысл:

repeat

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ размноТаСтся Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎ ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎ.

repeat-x

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ размноТаСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎ.

repeat-y

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ размноТаСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎ.

no-repeat

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ размноТаСтся: выводится Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½Π° копия изобраТСния.


BODY { background: white url("pendant.gif"); background-repeat: repeat-y; background-position: center; }


ЕдинствСнная копия Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π°, Π° Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΊΠΎΠΏΠΈΠΈ ΠΏΠΎΠΌΠ΅Ρ‰Π΅Π½Ρ‹ Π²Ρ‹ΡˆΠ΅ ΠΈ Π½ΠΈΠΆΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΡƒΡŽ Π»Π΅Π½Ρ‚Ρƒ ΠΏΠΎΠ·Π°Π΄ΠΈ элСмСнта.

[D]

'background-attachment'

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅: scroll | fixed | inherit

ΠΠ°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅: scroll

ΠŸΡ€ΠΈΠΌΠ΅Π½ΡΠ΅Ρ‚ΡΡ: ΠΊΠΎ всСм элСмСнтам

НаслСдуСтся: Π½Π΅Ρ‚

ΠŸΡ€ΠΎΡ†Π΅Π½Ρ‚Π½ΠΎΠ΅: N/A

ΠΠΎΡΠΈΡ‚Π΅Π»ΡŒ: Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ

Если спСцифицировано ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½Π°, Ρ‚ΠΎ Π΄Π°Π½Π½ΠΎΠ΅ свойство опрСдСляСт, являСтся Π»ΠΈ ΠΎΠ½ΠΎ фиксированным ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΡ€Ρ‚Π° просмотра ('fixed'), ΠΈΠ»ΠΈ прокручиваСтся вмСстС с Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠΌ ('scroll').

Π”Π°ΠΆΠ΅ Ссли ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ зафиксировано, ΠΎΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π²ΠΈΠ΄Π½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² Ρ‚ΠΎΠΌ случаС, Ссли находится Π² области Ρ„ΠΎΠ½Π° ΠΈΠ»ΠΈ заполнСния элСмСнта. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΏΠΎΠΊΠ° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ Ρ€Π°Π·ΠΌΠ½ΠΎΠΆΠ΅Π½ΠΎ ('background-repeat: repeat'), ΠΎΠ½ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌ.

Π—Π΄Π΅ΡΡŒ создаётся бСсконСчная Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Π°Ρ полоса, ΠΎΡΡ‚Π°ΡŽΡ‰Π°ΡΡΡ "ΠΏΡ€ΠΈΠΊΠ»Π΅Π΅Π½Π½ΠΎΠΉ" ΠΊ ΠΏΠΎΡ€Ρ‚Ρƒ просмотра ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π½ΠΈΠΈ элСмСнта.


BODY { background: red url("pendant.gif"); background-repeat: repeat-y; background-attachment: fixed; }


ПА ΠΌΠΎΠ³ΡƒΡ‚ Ρ€Π°ΡΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ 'fixed' ΠΊΠ°ΠΊ 'scroll'. Однако рСкомСндуСтся, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ ΠΈΠ½Ρ‚Π΅Ρ€ΠΏΡ€Π΅Ρ‚ΠΈΡ€ΠΎΠ²Π°Π»ΠΈ 'fixed' ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ, хотя Π±Ρ‹ для элСмСнтов HTML ΠΈ BODY, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Ρƒ Π°Π²Ρ‚ΠΎΡ€Π° Π½Π΅Ρ‚ способа ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для Ρ‚Π΅Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ 'fixed'. Π‘ΠΌ. Π΄Π΅Ρ‚Π°Π»ΠΈ Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ соотвСтствиС.

'background-position'

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅: [ [<percentage> | <length> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit

ΠΠ°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅: 0% 0%

ΠŸΡ€ΠΈΠΌΠ΅Π½ΡΠ΅Ρ‚ΡΡ: ΠΊ элСмСнтам уровня Π±Π»ΠΎΠΊΠ° ΠΈ ΠΊ Π·Π°ΠΌΠ΅Ρ‰Π°Π΅ΠΌΡ‹ΠΌ элСмСнтам

НаслСдуСтся: Π½Π΅Ρ‚

ΠŸΡ€ΠΎΡ†Π΅Π½Ρ‚Π½ΠΎΠ΅: относится ΠΊ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ самого бокса

ΠΠΎΡΠΈΡ‚Π΅Π»ΡŒ: Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ

Если Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ спСцифицировано, Ρ‚ΠΎ Π΄Π°Π½Π½ΠΎΠ΅ свойство опрСдСляСт Π΅Π³ΠΎ (изобраТСния) Π½Π°Ρ‡Π°Π»ΡŒΠ½ΡƒΡŽ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ. ЗначСния ΠΈΠΌΠ΅ΡŽΡ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ смысл:

<percentage> <percentage>

Если ΠΏΠ°Ρ€Π° Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ - '0% 0%', Ρ‚ΠΎ Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ Π»Π΅Π²Ρ‹ΠΉ ΡƒΠ³ΠΎΠ» изобраТСния Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½ с Π»Π΅Π²Ρ‹ΠΌ Π²Π΅Ρ€Ρ…Π½ΠΈΠΌ ΡƒΠ³Π»ΠΎΠΌ ΠΊΡ€ΠΎΠΌΠΊΠΈ заполнСния бокса. ΠŸΠ°Ρ€Π° Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ '100% 100%' ΠΏΠΎΠΌΠ΅Ρ‰Π°Π΅Ρ‚ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΏΡ€Π°Π²Ρ‹ΠΉ ΡƒΠ³ΠΎΠ» изобраТСния Π² Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΏΡ€Π°Π²Ρ‹ΠΉ ΡƒΠ³ΠΎΠ» области заполнСния. Если ΠΏΠ°Ρ€Π° Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ - '14% 84%', Ρ‚ΠΎΡ‡ΠΊΠ° изобраТСния 14% ΠΏΠΎΠΏΠ΅Ρ€Ρ‘ΠΊ ΠΈ 84% Π²Π½ΠΈΠ· помСщаСтся Π² Ρ‚ΠΎΡ‡ΠΊΡƒ 14% ΠΏΠΎΠΏΠ΅Ρ€Ρ‘ΠΊ ΠΈ 84% Π²Π½ΠΈΠ· области заполнСния.

<length> <length>

Если ΠΏΠ°Ρ€Π° Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ - '2cm 2cm', Ρ‚ΠΎ Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ Π»Π΅Π²Ρ‹ΠΉ ΡƒΠ³ΠΎΠ» изобраТСния помСщаСтся Π½Π° 2cm Π²ΠΏΡ€Π°Π²ΠΎ ΠΈ Π½Π° 2cm Π²Π½ΠΈΠ· ΠΎΡ‚ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΡƒΠ³Π»Π° области заполнСния.

top left ΠΈ left top

Π’ΠΎ ΠΆΠ΅, Ρ‡Ρ‚ΠΎ '0% 0%'.

top, top center ΠΈ center top

Π’ΠΎ ΠΆΠ΅, Ρ‡Ρ‚ΠΎ '50% 0%'.

right top ΠΈ top right

Π’ΠΎ ΠΆΠ΅, Ρ‡Ρ‚ΠΎ '100% 0%'.

left, left center ΠΈ center left

Π’ΠΎ ΠΆΠ΅, Ρ‡Ρ‚ΠΎ '0% 50%'.

center ΠΈ center center

Π’ΠΎ ΠΆΠ΅, Ρ‡Ρ‚ΠΎ '50% 50%'.

right, right center ΠΈ center right

Π’ΠΎ ΠΆΠ΅, Ρ‡Ρ‚ΠΎ '100% 50%'.

bottom left ΠΈ left bottom

Π’ΠΎ ΠΆΠ΅, Ρ‡Ρ‚ΠΎ '0% 100%'.

bottom, bottom center ΠΈ center bottom

Π’ΠΎ ΠΆΠ΅, Ρ‡Ρ‚ΠΎ '50% 100%'.

bottom right ΠΈ right bottom

Π’ΠΎ ΠΆΠ΅, Ρ‡Ρ‚ΠΎ '100% 100%'.

Если Π·Π°Π΄Π°Π½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, Π² ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π°Ρ… ΠΈΠ»ΠΈ Π΅Π΄ΠΈΠ½ΠΈΡ†Π°Ρ… измСрСния, Ρ‚ΠΎ ΠΎΠ½ΠΎ устанавливаСт Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΡƒΡŽ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ, Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Π°Ρ позиция Π±ΡƒΠ΄Π΅Ρ‚ 50%.

Если Π·Π°Π΄Π°Π½Ρ‹ Π΄Π²Π° значСния, ΠΏΠ΅Ρ€Π²ΠΎΠ΅ Π·Π°Π΄Π°Ρ‘Ρ‚ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΡƒΡŽ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ. Π”ΠΎΠΏΡƒΡΠΊΠ°ΡŽΡ‚ΡΡ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΠΈ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ Π² ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π°Ρ… ΠΈ Π΅Π΄ΠΈΠ½ΠΈΡ†Π°Ρ… измСрСния (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, '50% 2cm'). Π”ΠΎΠΏΡƒΡΠΊΠ°ΡŽΡ‚ΡΡ Π½Π΅Π³Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ значСния ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ. ΠšΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ слова Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ со значСниями Π² ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π°Ρ… ΠΈΠ»ΠΈ Π΅Π΄ΠΈΠ½ΠΈΡ†Π°Ρ… измСрСния (всС Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ сочСтания ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Ρ‹ Π²Ρ‹ΡˆΠ΅).


BODY { background: url("banner.jpeg") right top } /* 100% 0% */ BODY { background: url("banner.jpeg") top center } /* 50% 0% */ BODY { background: url("banner.jpeg") center } /* 50% 50% */ BODY { background: url("banner.jpeg") bottom } /* 50% 100% */


Если Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ фиксировано Π² ΠΏΠΎΡ€Ρ‚Π΅ просмотра (см. свойство 'background-attachment'), Ρ‚ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ размСщаСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΡ€Ρ‚Π° просмотра, Π° Π½Π΅ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ области заполнСния элСмСнта. НапримСр,


BODY { background-image: url("logo.png"); background-attachment: fixed; background-position: 100% 100%; background-repeat: no-repeat; }


Π’ Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ (ΠΎΠ΄ΠΈΠ½ΠΎΡ‡Π½ΠΎΠ΅) размСщаСтся Π² ΠΏΡ€Π°Π²ΠΎΠΌ Π½ΠΈΠΆΠ½Π΅ΠΌ ΡƒΠ³Π»Ρƒ ΠΏΠΎΡ€Ρ‚Π° просмотра.

'background'

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅: [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] | inherit

ΠΠ°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅: Π½Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΎ для сокращённых свойств

ΠŸΡ€ΠΈΠΌΠ΅Π½ΡΠ΅Ρ‚ΡΡ: ΠΊΠΎ всСм элСмСнтам

НаслСдуСтся: Π½Π΅Ρ‚

ΠŸΡ€ΠΎΡ†Π΅Π½Ρ‚Π½ΠΎΠ΅: Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΎ для 'background-position'

ΠΠΎΡΠΈΡ‚Π΅Π»ΡŒ: Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ

Бвойство 'background' это сокращённоС свойство для установки ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½Ρ‹Ρ… свойств Ρ„ΠΎΠ½Π° (Ρ‚.Π΅. 'background-color', 'background-image', 'background-repeat', 'background-attachment' ΠΈ 'background-position') Π² ΠΎΠ΄Π½ΠΎΠΌ мСстС Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅ стилСй.

Бвойство 'background' сначала устанавливаСт всС ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½Ρ‹Π΅ свойства Ρ„ΠΎΠ½Π° Π² ΠΈΡ… Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹Π΅ значСния, Π° Π·Π°Ρ‚Π΅ΠΌ Π½Π°Π·Π½Π°Ρ‡Π°Π΅Ρ‚ явныС значСния, Π·Π°Π΄Π°Π½Π½Ρ‹Π΅ Π² объявлСнии.

Π’ ΠΏΠ΅Ρ€Π²ΠΎΠΌ ΠΏΡ€Π°Π²ΠΈΠ»Π΅ Π·Π°Π΄Π°Π½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 'background-color', Π° Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½Ρ‹Π΅ свойства установлСны Π² свои Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹Π΅ значСния. Π’ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΌ ΠΏΡ€Π°Π²ΠΈΠ»Π΅ всС ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½Ρ‹Π΅ свойства спСцифицированы.


BODY { background: red } P { background: url("chess.png") gray 50% repeat fixed }