CSS.MANUAL.RU



Bâeäeíèe
Cèíòaêcèc CSS
Bêëþ÷eíèe còèëeé â äoêóìeíò
Çía÷eíèÿ câoécòâ
Câoécòâa øpèôòa
Câoécòâa òeêcòa
Câoécòâa öâeòa è ôoía
Câoécòâa oápaìëeíèÿ
Câoécòâa ïoçèöèoíèpoâaíèÿ
Bèçóaëüíûe câoécòâa
Câoécòâa cïècêoâ
Teã SPAN
Còaòüè
Èäeoëoãèÿ CSS
Êaê ècïoëüçoâaòü CSS
Aëôaâèòíûé óêaçaòeëü
Ccûëêè





  Ì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ëü.

Èëëþñòðàöèÿ ñ ìîäåëè ôîðìàòèðîâàíèÿ CSS

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:


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ò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.






Bëaäèìèp Êëèìoíòoâè÷, Copyright (C) 2003
Ïpè ïoääepæêe ïpoeêòa MANUAL.RU