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:
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
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é.
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 ").
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íèe | Oïècaíèe |
Background-repeat: repeat-x | Pècyíoê ïoâòopÿeòcÿ ïo ãopèçoíòaëè |
background-repeat: repeat-y | Pècyíoê ïoâòopÿeòcÿ ïo âepòèêaëè |
background-repeat: repeat | Pècyíoê ïoâòopÿeòcÿ ïo ãopèçoíòaëè è âepòèêaëè |
background-repeat: no-repeat | Pè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;}
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íèe | Oïè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;}
Ï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íèe | Oïècaíèe |
background- position: 2 cm 2cm | Pè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 right | Pè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;}
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.
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èôòû