Ópoê 11:
Paìêè

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

Paìêè èìeþò ìíoãooápaçíoe ïpèìeíeíèe, íaïpèìep, êaê äeêopaòèâíûé ýëeìeíò èëè äëÿ oòäeëeíèÿ äâyx oáúeêòoâ. CSS ïpeäocòaâëÿeò áec÷ècëeííoe ìíoæecòâo âapèaíòoâ ècïoëüçoâaíèÿ paìoê.

Toëùèía paìêè [border- width]

Toëùèía paìêè oïpeäeëÿeòcÿ câoécòâoì border-width, êoòopoe ìoæeò èìeòü çía÷eíèÿ thin, medium è thick, èëè ÷ècëoâoe çía÷eíèe â ïèêceëax. Ha pècyíêe ïoêaçaía ýòa cècòeìa:
êapòèíêa

Öâeò paìêè [border-color]

Câoécòâo border-color oïpeäeëÿeò öâeò paìêè. Çía÷eíèÿ - íopìaëüíûe çía÷eíèÿ öâeòa, íaïpèìep: "# 123456 ", "rgb (123 ,123 ,123)" èëè "yellow".

Tèïû paìoê [border-style]

Cyùecòâyþò paçëè÷íûe òèïû paìoê. Hèæe ïoêaçaíû âoceìü òèïoâ paìêè è èx èíòepïpeòaöèÿ â Internet Explorer 5.5. Bce ïpèìepû ïoêaçaíû öâeòoì "gold" è òoëùèíoé "thick", ío ìoãyò, ecòecòâeíío, âûâoäèòücÿ äpyãèì öâeòoì è òoëùèíoé.
êapòèíêa

Çía÷eíèÿ none èëè hidden ìoãyò ècïoëüçoâaòücÿ, ecëè âû íe xoòèòe oòoápaæaòü paìêy.

Ïpèìepû oïpeäeëeíèÿ paìoê

Tpè paccìoòpeííûx âûøe câoécòâa ìoæío oáúeäèíèòü â êaæäoì ýëeìeíòe è, cooòâeòcòâeíío, ycòaíaâëèâaòü paçíûe paìêè. Äëÿ èëëþcòpaöèè âçãëÿíeì ía äoêyìeíò, ãäe oïpeäeëeíû paçíûe paìêè äëÿ <h1>, <h2>, <ul> è <p>. Peçyëüòaò, ìoæeò áûòü, íe còoëü âïe÷aòëÿþù, ío oí äeìoícòpèpyeò íeêoòopûe âoçìoæíocòè:

h1
{border-width: thick;
border-style: dotted;
border- color: gold;}

h2
{border-width: 20px;
border-style: outset;
border- color: red;}

p
{border-width: 1px;
border- style: dashed;
border-color: blue;}

ul
{border-width: thin;
border- style: solid;
border-color: orange;}

Moæío òaêæe ycòaíoâèòü cïeöèaëüíûe câoécòâa äëÿ âepxíeão, íèæíeão, ïpaâoão è ëeâoão êpaÿ paìêè. Boò êaê ýòo äeëaeòcÿ:

h1
{border-top-width: thick;
border-top-style: solid;
border-top-color: red;

border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: blue;

border-right-width: thick;
border-right-style: solid;
border-right-color: green;

border-left-width: thick;
border-left-style: solid;
border-left-color: orange;}

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

Kaê è äëÿ ìíoãèx äpyãèx câoécòâ, âû ìoæeòe oáúeäèíèòü íecêoëüêo câoécòâ â oäío, ècïoëüçyÿ cëoâo border. Ïpèìep:

p
{border-width: 1px;
border- style: solid;
border-color: blue;}

ìoæío oáúeäèíèòü â:

p {border: 1px solid blue;}

Peçþìe

B ýòoì ypoêe âû ïoçíaêoìèëècü c áeçãpaíè÷íûìè âoçìoæíocòÿìè CSS ïpè ècïoëüçoâaíèè paìoê.

B cëeäyþùeì ypoêe ìû paccìoòpèì, êaê oïpeäeëÿòü paçìepû â áoêcoâoé ìoäeëè - height è width

Haçaä

Bâepx