| Ì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).
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äí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äí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:
|
a{border-left: 2px}. |
| 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ò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â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 óì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.
| Ñîäåðæàíèå |
| |||||||||||||||||||