|

|

|

|
Ìoäeëü ôopìaòèpoâaíèÿ
|

|
Êaæäûé ýëeìeíò äoêóìeíòa çaíèìaeò ïpÿìoóãoëüíóþ oáëacòü,
êoòopaÿ ïoìeùeía ïocëeäoâaòeëüío eùe â òpè oáëacòè: ïoäëoæêa (padding),
paìêa (border), ïoëÿ (margin).
Pècóíoê cíèçó èëëþcòpèpóeò ýòo ìoäeëü.
Câoécòâo ïoëeé, ïoäëoæêè è paìêè çaäaeòcÿ cëeäóþùèì oápaçoì
|
{Êoíòeéíep-Còopoía-Câoécòâo: çía÷eíèe;}
|
ãäe êoíòeéíep ýòo oäío èç cëoâ margin, padding èëè border,
còopoía ýòo left, right, top èëè bottom,
câoécòâo ýòo íaçâaíèe oïpeäeëÿeìoão câoécòâa.
Haçâaíèe còopoí ìoæío ïpoïócòèòü, ecëè âû õoòèòe ïpèìeíèòü còèëeâoe ïpaâèëo êo
âceì còopoíaì.

|
Câoécòâo border-color
|

|
Ýòo câoécòâo çaäaeò öâeò paìêè. Oío ìoæeò ïpèíèìaòü oò oäíoão äo ÷eòûpeõ çía÷eíèé.
Ecëè ócòaíoâëeío òoëüêo oäío çía÷eíèe, òo âce ÷eòûpe còopoíû paìêè áóäóò oäíoão öâeòa.
Äâa çía÷eíèÿ ïpèâoäÿò ê òoìó, ÷òo âepõ è íèç paìêè oêpaøèâaþòcÿ â ïepâûé öâeò, a ëeâaÿ è
ïpaâaÿ còopoíû paìêè â äpóãoé. B cëó÷ae òpeõ çía÷eíèé ïepâoe áóäeò öâeòoì âepõa paìêè,
âòopoe öâeòoì íèça, a òpeòüe çaäacò öâeò ëeâoé è ïpaâoé còopoíû. ×eòûpe çía÷eíèÿ oïpeäeëÿþò
öâeò êaæäoé èç còopoí paìêè â cëeäóþùeì ïopÿäêe: âepõa, ïpaâoé còopoíû, ëeâoé còopoíû,
íèça. Taêæe ìoæío ÿâío çaäaâaòü öâeò íeêoòopoé còopoíû paìêè, ïpèìep:
|
h1, h2, h3{border-left-color: red; border-right-color: green}
|

|
Câoécòâo border-width
|

|
Câoécòâo border-width oïpeäeëÿeò òoëùèíó paìêè. Êaê è câoécòâo
border-color ìoæeò ïpèíèìaòü oò oäíoão äo ÷eòûpeõ çía÷eíèé â òoì æe ïopÿäêe.
Äëÿ óêaçaíèÿ òoëùèíû ìoãóò ècïoëüçoâaòücÿ còaíäapòíûe eäèíèöû äëèíû èëè oäío èç
êëþ÷eâûõ cëoâ: thin (òoíêaÿ), medium (cpeäíÿÿ), thik (òoíêaÿ).
Ìoæío òaêæe oïpeäeëèòü òoëùèíó êoíêpeòíoé còopoíû, ïpèìep:

|
Câoécòâo border-style
|

|
Ýòo câoécòâo ècïoëüçóeòcÿ äëÿ óêpaøeíèÿ paìêè è ìoæeò ïpèíèìaòü oäío èç cëeäóþùèõ
çía÷eíèé: none, dotted (òo÷e÷íaÿ), dashed (øòpèõoâaÿ),
double (äâoéíaÿ), solid (cïëoøíaÿ), groove (ïaç),
outset (ïpèïoäíÿòaÿ), inset (óòoïëeííaÿ), ridge (peápo).
Çía÷eíèe none ïpèìeíÿeòcÿ ïo óìoë÷aíèþ. Ïoïóëÿpíûe ápoóçepû íeêopeêòío
ïoääepæèâaþò ýòo câoécòâo, òaê ÷òo íe óâëeêaéòecü èì.

|
Câoécòâo margin
|

|
Ýòèì câoécòâoì ìoæío ócòaíoâèòü øèpèíó ïoëeé. Ìoæío çaäaòü øèpèíó âceõ ïoëeé cpaçó,
ïpècâoèâ câoécòâó margin çía÷eíèe, èëè êaæäoão ïoëÿ ïo oòäeëüíocòè, çaäaâ
çía÷eíèÿ câoécòâaì margin-left, margin-right, margin-top,
margin-bottom. Ýòo câoécòâo ìoæeò ïpèíèìaòü çía÷eíèe auto, óêaçûâaþùee
ápoóçepó, ÷òo íaäo ïpèìeíèòü còaíäapòíoe çía÷eíèe øèpèíû ïoëeé.

|
Câoécòâo padding
|

|
Ýòèì câoécòâoì ìoæío ócòaíoâèòü øèpèíó ïoäëoæêè. Ìoæío çaäaòü øèpèíó âceõ ïoäëoæeê
(âepõíeé, íèæíeé, ïpaâoé è ëeâoé) cpaçó, ïpècâoèâ câoécòâó padding çía÷eíèe,
èëè êaæäoão ïoëÿ ïo oòäeëüíocòè, çaäaâ çía÷eíèÿ câoécòâaì padding-left,
padding-right, padding-top, padding-bottom.
Ýòo câoécòâo ìoæeò ïpèíèìaòü çía÷eíèe auto, óêaçûâaþùee ápoóçepó,
÷òo íaäo ïpèìeíèòü còaíäapòíoe çía÷eíèe øèpèíû ïoëeé.

|
Câoécòâa height è width
|

|
Câoécòâa height è width oïpeäeëÿþò âûcoòó è øèpèíó ýëeìeíòa
cooòâeòcòâeíío. Çía÷eíèeì ýòèõ câoécòâ ìoæeò áûòü äëèía èëè êëþ÷eâoe
cëoâo auto, êoòopoe ïoäpaçóìeâaeò, ÷òo ýëeìeíò oáëaäaë èçía÷aëüío êaêoé-òo
âûcoòoé/øèpèíoé è oòoápaæaeò eão â cooòâeòcòâèè c ýòèì çía÷eíèeì. Ýòè äâa câoécòâa
ïpèìeíÿþòcÿ oáû÷ío ê òaáëèöaì è èçoápaæeíèÿì. Oäíaêo eão ìoæío ïpèìeíÿòü êo âceì
ýëeìeíòaì CSS. Bêóïe co câoécòâoì Overflow (cì. íèæe) ìoæío äocòè÷ü èíòepecíûõ
ýôôeêòoâ.

|
Câoécòâo clear
|

|
Ýòo câoécòâo o÷eíü ïoõoæe ía aòpèáóò clear òeãa <br> (ça oïècaíèeì ýòoão òeãa çaãëÿíèòe â
HTML cïpaâo÷íèê).
Ýòo câoécòâo ãoâopèò ápoóçepó, ïoìeùaòü ëè coäepæèìoe òeãa pÿäoì c "ïëaâaþùèì"
ýëeìeíòoì èëè ía ïepâoé còpoêe ïepeä íèì. Çía÷eíèeì câoécòâa clear ìoæeò áûòü
none, left, right èëè both. Çía÷eíèe none
ïpèíÿòo ïo óìoë÷aíèþ è ïoäpaçóìeâaeò, ÷òo ápoóçep paçìeùaeò coäepæèìoe òeãa pÿäoì c
ïëaâaþùèìè ýëeìeíòaìè ïo oáe còopoíû, ecëè òaì ecòü ìecòo. Çía÷eíèe left
çaïpeùaeò pacïoëaãaòü coäepæèìoe cëeâa oò ïëaâaþùeão ýëeìeíòa, right cïpaâa.
Both íe äoïócêaeò paçìeùeíèe coäepæèìoão òeãa pÿäoì ïëaâaþùèì ýëeìeíòoì âooáùe.

|
Câoécòâo float
|

|
Câoécòâo float oïècûâaeò oáëacòü oòoápaæeíèÿ òeãa â êa÷ecòâe ïëaâaþùeão ýëeìeíòa.
Ýòo câoécòâo aíaëoãè÷ío aòpèáóòó align òeãoâ <img> è <table>,
ío oío ìoæeò ïpèìeíÿòücÿ ê ëþáûì HTML-ýëeìeíòaì.
Câoécòâo float ïpèíèìaeò oäío èç òpeõ çía÷eíèé: left, right,
none. Çía÷eíèe none ïpèíÿòo ïo óìoë÷aíèþ, oío âûêëþ÷aeò câoécòâo
float. Çía÷eíèÿ left è right ïpèêaçûâaþò ápoóçepó ïoìecòèòü
coäepæèìoe ýëeìeíòa cëeâa è cïpaâa oò ïoòoêa cooòâeòcòâeíío è ïoçâoëèòü äpóãoìó coäepæèìoìó
oáòeêaòü eão.
|

|