Ópoê 12:
height/âûcoòa è width/øèpèía

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

Äo cèx ïop ìû ocoáo íe çaáoòèëècü o paçìepax ýëeìeíòoâ, c êoòopûìè paáoòaëè. B ýòoì ypoêe ìû ïocìoòpèì, êaê ëeãêo ìoæío oïpeäeëÿòü âûcoòy è øèpèíy ýëeìeíòa.

Ócòaíoâêa øèpèíû [width]

Câoécòâoì width âû ìoæeòe oïpeäeëÿòü øèpèíy ýëeìeíòa.
B ïpèìepe ïoêaçaí áoêc äëÿ ââoäa òeêcòa:

div.box
{width: 100px;
border: 1px solid black;
background: orange;}

Tâoè ãëaça ìeíÿ cìyùaþò
Koãäa òû cìoòpèøü ía ìeíÿ
Kaê áyäòo òû âëþáèòücÿ xo÷eøü
A ÿ äaâío ëþáëþ òeáÿ..

Ócòaíoâêa âûcoòû [height]

Oápaòèòe âíèìaíèe, êaê, â ïpeäûäyùeì ïpèìepe, âûcoòa áoêca ycòaíaâëèâaeòcÿ coäepæèìûì ýòoão áoêca. Bûcoòy ýëeìeíòa ìoæío oïpeäeëèòü câoécòâoì height. B êa÷ecòâe ïpèìepa ïoïûòaeìcÿ coçäaòü áoêc âûcoòoé 500px:

div.box
{height: 500px;
width: 150px;
border: 1px solid black;
background: orange;}

Peçþìe

Ópoêè 9, 10, 11 è 12 äaëè ââeäeíèe â áoêcoâyþ ìoäeëü CSS. Kaê âû, âepoÿòío, çaìeòèëè, áoêcoâaÿ ìoäeëü ïpeäocòaâëÿeò ìíoão íoâûx âoçìoæíocòeé. Paíee âû yæe ìoãëè ècïoëüçoâaòü òaáëèöû â HTML äëÿ äèçaéía còpaíèö, ío c ïoìoùüþ CSS è áoêcoâoé ìoäeëè âû cìoæeòe coçäaâaòü ýëeãaíòíûé äèçaéí áoëee òo÷ío è â cooòâeòcòâèè c peêoìeíäaöèÿìè W3C.

Cëeäyþùèé ypoê: Bcïëûâaþùèe ýëeìeíòû (ïoïëaâêè)

Haçaä

Bâepx