Ópoê 3:
Öâeò è ôoí

Oãëaâëeíèe (â íoâoì oêíe)
Bíèç

B ýòoì ypoêe âû íay÷èòecü, êaê ècïoëüçoâaòü öâeòa è ôoí ía âaøèx web-caéòax. Mû paccìoòpèì òaêæe ïpoäâèíyòûe ìeòoäû ïoçèöèoíèpoâaíèÿ è yïpaâëeíèÿ ôoíoâûì èçoápaæeíèeì. Áyäyò paçúÿcíeíû cëeäyþùèe CSS- câoécòâa:

Öâeò ïepeäíeão ïëaía : câoécòâo 'color'

Câoécòâo color oïècûâaeò öâeò ïepeäíeão ïëaía ýëeìeíòa.
Haïpèìep, ïpeäcòaâüòe, ÷òo ìû xoòèì cäeëaòü âce çaãoëoâêè äoêyìeíòa òeìío- êpacíûìè. Bce çaãoëoâêè oáoçía÷aþòcÿ HTML-ýëeìeíòoì <h1>. B íèæeïpèâeäeííoì êoäe öâeò ýëeìeíòa <h1> ycòaíaâëèâaeòcÿ êpacíûì.

h1 {color: #ff0000; }

Öâeòa ìoæío yêaçûâaòü êaê øecòíaäöaòepè÷íûe çía÷eíèÿ, êaê â ïpèìepe (#ff0000 ), ëèáo âû ìoæeòe ècïoëüçoâaòü íaçâaíèÿ öâeòoâ ("red") èëè rgb- çía÷eíèÿ (rgb(255 ,0 ,0)).

Câoécòâo 'background- color'

Câoécòâo background-color oïècûâaeò öâeò ôoía ýëeìeíòa.
B ýëeìeíòe <body> paçìeùaeòcÿ âce coäepæèìoe HTML-äoêyìeíòa. Taêèì oápaçoì, äëÿ èçìeíeíèÿ öâeòa ôoía âceé còpaíèöû câoécòâo background-color íyæío ïpèìeíèòü ê ýëeìeíòy <body>.
Bû ìoæeòe òaêæe ïpèìeíÿòü ýòo câoécòâo ê äpyãèì ýëeìeíòaì, â òoì ÷ècëe - ê çaãoëoâêaì è òeêcòy. B cëeäyþùeì ïpèìepe paçëè÷íûe öâeòa ôoía ïpèìeíÿþòcÿ ê ýëeìeíòaì <body> è <h1>.

body {background-color: #FFCC66;}
h1 {color:#990000; background-color:#FC9804;}

Çaìeòüòe, ÷òo ycòaíaâëèâaeò äâa câoécòâa äëÿ <h1>, paçäeëÿÿ èx òo÷êoé c çaïÿòoé.

Ôoíoâûe èçoápaæeíèÿ [background-image]

CSS-câoécòâo background- image ècïoëüçyeòcÿ äëÿ âcòaâêè ôoíoâoão èçoápaæeíèÿ.
Mû ècïoëüçyeì â êa÷ecòâe ôoíoâoão èçoápaæeíèe áaáo÷êè. Bû ìoæeòe çaãpyçèòü ýòo èçoápaæeíèe è ècïoëüçoâaòü eão ía âaøeì êoìïüþòepe (ùeëêíèòe ïpaâoé êëaâèøeé ìûøè ía èçoápaæeíèè è âûáepèòe "coxpaíèòü èçoápaæeíèe êaê/save image as"), ëèáo âû ìoæeòe ècïoëüçoâaòü äpyãoe èçoápaæeíèe.
Äëÿ âcòaâêè pècyíêa áaáo÷êè â êa÷ecòâe ôoíoâoão èçoápaæeíèÿ web-còpaíèöû ïpocòo ïpèìeíèòe câoécòâo background-image â òýãe <body> è yêaæèòe ìecòoïoëoæeíèe pècyíêa.

body {background-color: #FFCC66; background-image: url("butterfly.gif");}
h1 {color:#990000; background-color:#FC9804;}

NB: Oápaòèòe âíèìaíèe, ÷òo ìû cïeöèôèöèpyeì ìecòo, ãäe íaxoäèòcÿ ôaéë êaê url("butterfly.gif") . Ýòo oçía÷aeò, ÷òo oí íaxoäèòcÿ â òoé æe ïaïêe, ÷òo è òaáëèöa còèëeé. Bû, paçyìeeòcÿ, ìoæeòe ccûëaòücÿ è ía ôaéëû èçoápaæeíèé â äpyãèx ïaïêax, ècïoëüçyÿ, íaïpèìep, url("../images/butterfly.g if"), èëè äaæe ía ôaéëû â Internet, yêaçûâaÿ ïoëíûé aäpec ôaéëa : url(" http://www.html.net/butt erfly.gif ").

Ïoâòopeíèe/ìyëüòèïëè êaöèÿ ôoíoâoão èçoápaæeíèÿ [background-repeat]

Bû çaìeòèëè â ïpeäûäyùeì ïpèìepe, ÷òo èçoápaæeíèe áaáo÷êè ïoâòopÿeòcÿ ïo yìoë÷aíèþ ïo ãopèçoíòaëè è âepòèêaëè, çaïoëíÿÿ âecü ýêpaí? Câoécòâo background- repeat yïpaâëÿeò ýòèì.
B òaáëèöe yêaçaíû ÷eòûpe çía÷eíèÿ background-repeat.
Çía÷eíèeOïècaíèe
Background-repeat: repeat-xPècyíoê ïoâòopÿeòcÿ ïo ãopèçoíòaëè
background-repeat: repeat-yPècyíoê ïoâòopÿeòcÿ ïo âepòèêaëè
background-repeat: repeatPècyíoê ïoâòopÿeòcÿ ïo ãopèçoíòaëè è âepòèêaëè
background-repeat: no-repeatPècyíoê íe ïoâòopÿeòcÿ

Haïpèìep, äëÿ oòìeíû ïoâòopeíèÿ/ìyëüòèïëèêaöèè ôoíoâoão pècyíêa ìû äoëæíû çaïècaòü òaêoé êoä:

body
{background-color:#FFCC66;
background-image:url("butterfly.gif");
background-repeat:no- repeat;}
h1
{color:#990000;
background-color:#FC9804;}

Áëoêèpoâêa ôoíoâoão èçoápaæeíèÿ [background- attachment]

Câoécòâo background- attachment oïpeäeëÿeò, ôèêcèpyeòcÿ ëè ôoíoâûé pècyíoê, èëè ïpoêpy÷èâaeòcÿ âìecòe c coäepæèìûì còpaíèöû.
B òaáëèöe yêaçaíû äâa çía÷eíèÿ background- attachment.
Çía÷eíèeOïècaíèe
Background- attachment: scrollÈçoápaæeíèe ïpoêpy÷èâaeòcÿ âìecòe co còpaíèöeé - paçáëoêèpoâaío
Background- attachment: fixedÈçoápaæeíèe áëoêèpoâaío

Haïpèìep, cëeäyþùèé êoä ôèêcèpyeò èçoápaæeíèe.

body {background-color: #FFCC66;
background-image: url("butterfly.gif");
background- repeat:no-repeat;
background-attachment:fixed;}

h1
{color:#990000;
background-color:#FC9804;}

Pacïoëoæeíèe ôoíoâoão pècyíêa [background- position]

Ïo yìoë÷aíèþ ôoíoâûé pècyíoê ïoçèöèoíèpyeòcÿ â ëeâoì âepxíeì yãëy ýêpaía. Câoécòâo background-position ïoçâoëÿeò èçìeíÿòü ýòo çía÷eíèe ïo yìoë÷aíèþ, è ôoíoâûé pècyíoê ìoæeò pacïoëaãaòücÿ â ëþáoì ìecòe ýêpaía.

Ecòü ìíoão cïocoáoâ ycòaíoâèòü çía÷eíèe background-position. Teì íe ìeíee, âce oíè ïpeäcòaâëÿþò coáoé íaáop êoopäèíaò. Haïpèìep, çía÷eíèe '100 px 200 px' pacïoëaãaeò ôoíoâûé pècyíoê ía 100 px cëeâa è ía 200px câepxy â oêíe ápayçepa.

Koopäèíaòû ìoæío yêaçûâaòü â ïpoöeíòax øèpèíû ýêpaía, â ôèêcèpoâaííûx eäèíèöax (ïèêceëû, caíòèìeòpû, è ò. ï.), ëèáo âû ìoæeòe ècïoëüçoâaòü cëoâa top, bottom, center, left è right. Moäeëü íèæe èëëþcòpèpyeò cêaçaííoe:
B òaáëèöe äaío íecêoëüêo
Çía÷eíèeOïècaíèe
background- position: 2 cm 2cmPècyíoê pacïoëoæeí ía 2 cm cëeâa è ía 2 cm câepxy
background- position: 50 % 25%Pècyíoê pacïoëoæeí ïo öeíòpy è ía ÷eòâepòü ýêpaía câepxy
background- position: top rightPècyíoê pacïoëoæeí â ïpaâoì âepxíeì yãëy còpaíèöû

B ïpèìepe êoäa ôoíoâoe èçoápaæeíèe pacïoëaãaeòcÿ â ïpaâoì íèæíeì yãëy ýêpaía:

body {background-color: #FFCC66;
background-image: url("butterfly.gif");
background- repeat: no-repeat;
background- attachment: fixed;
background-position: right bottom;}

h1 {color:#990000;
background-color:#FC9804;}

Coêpaùeííaÿ çaïècü [background]

Câoécòâo background âxoäèò â cocòaâ âcex câoécòâ, ïepe÷ècëeííûx â ýòoì ypoêe. C ïoìoùüþ background âû ìoæeòe cæèìaòü íecêoëüêo câoécòâ è çaïècûâaòü âaøè còèëè â coêpaùeííoì âèäe, ÷òo oáëeã÷aeò ÷òeíèe òaáëèö.
Haïpèìep, ïocìoòpèòe ía ýòè còpoêè:

background-color: #FFCC66;
background-image: url("butterfly.gif");
background- repeat:no-repeat;
background- attachment: fixed;
background- position: right bottom;

Ècïoëüçyÿ background, òoão æe peçyëüòaòa ìoæío äocòè÷ü oäíoé còpoêoé êoäa:

background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;

Ïopÿäoê câoécòâ ýòoão ýëeìeíòa òaêoâ:

Ecëè câoécòâo oòcyòcòâyeò, oío aâòoìaòè÷ecêè ïoëy÷aeò çía÷eíèe ïo yìoë÷aíèþ. Haïpèìep, ecëè background- attachment è background- position íeò â äaííoì ïpèìepe:
background: #FFCC66 url("butterfly.gif") no-repeat;
òo ýòèì äâyì íecïeöèôèöèpoâaííûì câoécòâaì áyäyò ïpècâoeíû çía÷eíèÿ ïo yìoë÷aíèþ - scroll è top left.

Peçþìe

B ýòoì ypoêe âû yæe ïoçíaêoìèëècü c òexíèêoé, oòcyòcòâyþùeé â HTML. Eùe èíòepecíee áyäeò â cëeäyþùeì ypoêe , ãäe ìû paccìoòpèì øèpoêèe âoçìoæíocòè CSS ïpè oïècaíèè øpèôòoâ. Cëeäyþùèé ypoê: Øpèôòû

Haçaä

Bâepx