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ìêè 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:
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".
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é.
Çía÷eíèÿ none èëè hidden ìoãyò ècïoëüçoâaòücÿ, ecëè âû íe xoòèòe oòoápaæaòü paìêy.
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;}
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;}
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