Ópoê 8: Ãpyïïèpoâaíèe ýëeìeíòoâ (span è div)

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

Ýëeìeíòû <span> è <div> ècïoëüçyþòcÿ äëÿ còpyêòypèpoâaíèÿ äoêyìeíòa, ÷acòo coâìecòío c aòpèáyòaìè class è id.

B ýòoì ypoêe ìû ïoäpoáío paccìoòpèì, êaê ècïoëüçoâaòü <span> è <div>, ïocêoëüêy ýòè ýëeìeíòû HTML èìeþò âaæíeéøee çía÷eíèe â CSS.

Ãpyïïèpoâaíèe c ïoìoùüþ <span>

Ýëeìeíò <span> ìoæío íaçâaòü íeéòpaëüíûì ýëeìeíòoì, êoòopûé íè÷eão íe äoáaâëÿeò ê coäepæèìoìy äoêyìeíòa. Ho, â co÷eòaíèè c CSS, <span> ìoæeò ècïoëüçoâaòücÿ äëÿ âèçyaëüíûx ýôôeêòoâ ïpèìeíèìo ê oòäeëüíûì áëoêaì òeêcòa.
Ïpèìep - öèòaòa èç Áeíäæaìèía Ôpaíêëèía:

"Kòo paío ëoæèòcÿ è paío âcòaeò, òoò áyäeò çäopoâûì, áoãaòûì è yìíûì"

Cêaæeì, ìû xoòèì, ÷òoáû Mr. Franklin yâèäeë âce ïpeèìyùecòâa áoäpcòâoâaíèÿ âûäeëeííûe êpacíûì öâeòoì. Äëÿ ýòoão ìû ìoæeì oòìeòèòü ýòè ïpeèìyùecòâa c ïoìoùüþ <span>. Kaæäoìy áëoêy span áyäeò ïpècâoeí class, êoòopûé çaòeì ìoæío oïpeäeëèòü â íaøeé òaáëèöe còèëeé:

<p>Kòo paío ëoæèòcÿ è paío âcòaeò, òoò áyäeò
<span class="benefit">çäopoâûì</span>,
<span class="benefit">áoãaòûì </span>
è <span class="benefit">yìíûì</ span>.
</p>

B CSS:

span.benefit { color:red;}

Kòo paío ëoæèòcÿ è paío âcòaeò, òoò áyäeò çäopoâûì, áoãaòûì è yìíûì.

Paçyìeeòcÿ, âû ìoæeòe òaêæe ècïoëüçoâaòü id äëÿ oïpeäeëeíèÿ còèëÿ <span>- ýëeìeíòoâ. He çaáûâaéòe òoëüêo, ÷òo âû äoëæíû ycòaíoâèòü yíèêaëüíûé id êaæäoìy èç òpex <span>- ýëeìeíòoâ, êaê ìû ãoâopèëè â ïpoøëoì ypoêe.

Ãpyïïèpoâaíèe c ïoìoùüþ <div>

B òo âpeìÿ êaê <span> ècïoëüçyeòcÿ â ýëeìeíòax ypoâíÿ áëoêa, êaê â ïpeäûäyùeì ïpèìepe, <div> ïpèìeíÿeòcÿ äëÿ ãpyïïèpoâaíèÿ oäíoão èëè áoëee áëoê-ýëeìeíòoâ.
Kpoìe ýòoão oòëè÷èÿ, ãpyïïèpoâaíèe c ïoìoùüþ <div> paáoòaeò áoëee èëè ìeíee aíaëoãè÷ío. Ïocìoòpèì ía ïpèìep - äâa cïècêa ïpeçèäeíòoâ CØA, cãpyïïèpoâaííûx ïo èx ïoëèòè÷ecêoé ïpèíaäëeæíocòè:

<div id="democrats">
<ul>
<li>Ôpaíêëèí Ä. Pyçâeëò</li>
<li>Ãappè Tpyìýí</li>
<li>Äæoí Ô. Keííeäè</li>
<li>Ëèíäoí Á. Äæoícoí</li>
<li>Äæèììè Kapòep</li>
<li>Áèëë Këèíòoí</li>
</ul>
</div>

<div id="republicans">
<ul>
<li>Äyaéò Ä. Ýéçeíxayýp</li>
<li>Pè÷apä Hèêcoí</li>
<li>Äæýpaëä Ôopä</li>
<li>Poíaëä Peéãaí</li>
<li>Äæopäæ Áyø</li>
<li>Äæopäæ Ó. Áyø</li>
</ul>
</div>

B íaøeé òaáëèöe còèëeé ìû ìoæeì ècïoëüçoâaòü òaêoe æe ãpyïïèpoâaíèe, êaê è paíüøe:

#democrats {background:blue;}
#republicans { background:red;}

B ýòèx ïpèìepax ìû ècïoëüçoâaëè <div> è <span> äëÿ oïpeäeëeíèÿ o÷eíü ïpocòûx âeùeé - öâeòa òeêcòa è ôoía. Ho oáa ýëeìeíòa íecyò â ceáe ïoòeíöèaë äëÿ íaìíoão áoëee cëoæíûx oïepaöèé, òaêèx êaê.... Oäíaêo ýòo - íe äëÿ íaøeão ypoêa. Ïoçäíee ìû paccìoòpèì ýòoò âoïpoc â äaííoì y÷eáíèêe.

Peçþìe

B Ópoêax 7 è 8, âû yçíaëè o ceëeêòopax id è class è oá ýëeìeíòax span è div.
Teïepü âû äoëæíû yìeòü, áoëee èëè ìeíee, ãpyïïèpoâaòü è èäeíòèôèöèpoâaòü âce ÷acòè äoêyìeíòa, ÷òo yæe ÿâëÿeòcÿ áoëüøèì øaãoì â ocâoeíèè CSS. B Ópoêe 9 ìû äaäèì ïoíÿòèe Áoêcoâoé ìoäeëè.

Cëeäyþùèé ypoê: Áoêcoâaÿ ìoäeëü

Haçaä

Bâepx