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.
Ýë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ìíûì span>.
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.
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.
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ëü