Ópoê 7:
Èäeíòèôèêaöèÿ è ãpyïïèpoâaíèe ýëeìeíòoâ (class è id)

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

Èíoãäa âaì íyæío áyäeò ïpèìeíèòü ocoáûé còèëü ê oïpeäeëeííoìy ýëeìeíòy èëè êoíêpeòíoé ãpyïïe ýëeìeíòoâ. B ýòoì ypoêe ìû ïoäpoáío paçáepeì, êaê ìoæío ècïoëüçoâaòü class è id äëÿ cïeöèôèöèpoâaíèÿ câoécòâ âûápaííûx ýëeìeíòoâ.

Kaê èçìeíèòü öâeò êoíêpeòíoão çaãoëoâêa oòäeëüío oò äpyãèx çaãoëoâêoâ ía âaøeì web- caéòe? Kaê ãpyïïèpoâaòü ccûëêè ïo êaòeãopèÿì è çaäaâaòü äëÿ êaæäoé êaòeãopèè ocoáûé còèëü? Ýòo ëèøü ïpèìepíûe âoïpocû, ía êoòopûe ìû oòâeòèì â ýòoì ypoêe.

Ãpyïïèpoâaíèe ýëeìeíòoâ c ïoìoùüþ class

Ïpeäïoëoæèì, y íac ecòü äâa cïècêa ccûëoê copòoâ âèíoãpaäa - äëÿ áeëoão è äëÿ êpacíoão âèía. HTML-êoä ìoæeò áûòü òaêèì:

<p>Bèíoãpaä äëÿ áeëoão âèía:</p>
<ul>
<li> <a href="ri.htm">Pècëèíã</a></li>
<li><a href="ch.htm">Øapäoíý</a></li>
<li><a href="pb.htm">Ïèío Áëaí</a></li>
</ul>

<p>Bèíoãpaä äëÿ êpacíoão âèía:</p>
<ul>
<li><a href="cs.htm">Kaáepíý Coâèíüoí</a></li>
<li><a href="me.htm">Mepëo</a></li>
<li><a href="pn.htm">Ïèío Hyap</a></li>
</ul>

Äaëee, ìû xoòèì, ÷òoáû ccûëêè ía áeëoe âèío áûëè æeëòoão öâeòa, ía êpacíoe âèío - êpacíoão, a ocòaëüíûe ccûëêè ía ýòoé æe còpaíèöe ocòaâaëècü cèíèìè.
Äëÿ äocòèæeíèÿ ýòoé öeëè ìû paçäeëèì ccûëêè ía äâe êaòeãopèè c ïoìoùüþ ïpècâoeíèÿ êëacca êaæäoé ccûëêe aòpèáyòoì class.
Ïoïpoáyeì ycòaíoâèòü êëaccû äëÿ ïpeäûäyùeão ïpèìepa:

<p>Bèíoãpaä äëÿ áeëoão âèía:</p>
<ul>
<li><a href="ri.htm" class="whitewine" >Pècëèíã</a></li>
<li><a href="ch.htm" class="whitewine">Øapäoíý</a></li>
<li><a href="pb.htm" class="whitewine">Ïèío Áëaí</a></li>
</ul>

<p>Bèíoãpaä äëÿ êpacíoão âèía:</p>
<ul>
<li><a href="cs.htm" class="redwine">Kaáepíý Coâèíüoí</a></li>
<li><a href="me.htm" class="redwine">Mepëo</a></li>
<li><a href="pn.htm" class="redwine">Ïèío Hyap</a></li>
</ul>

Äaëee ìû ìoæeì oïpeäeëèòü cïeöèaëüíûe câoécòâa äëÿ ccûëoê whitewine è redwine, cooòâeòcòâeíío.

a {color: blue;}
a.whitewine {color:#FFBB00;}
a.redwine {color:#800000;}

Bèíoãpaä äëÿ áeëoão âèía:

Bèíoãpaä äëÿ êpacíoão âèía:

Kaê ïoêaçaío â ïpèìepe, âû ìoæeòe oïpeäeëÿòü câoécòâa äëÿ ýëeìeíòoâ, ïpèíaäëeæaùèx ê oïpeäeëeííoìy êëaccy, c ïoìoùüþ .èìÿ_êëacca â òaáëèöe còèëeé äoêyìeíòa.

Èäeíòèôèêaöèÿ ýëeìeíòa c ïoìoùüþ id

Ïoìèìo ãpyïïèpoâaíèÿ ýëeìeíòoâ âaì ìoæeò ïoíaäoáèòücÿ èäeíòèôèöèpoâaòü oäèí yíèêaëüíûé ýëeìeíò. Ýòo ìoæío peaëèçoâaòü c ïoìoùüþ aòpèáyòa id.

Ocoáeííocòü id â òoì, ÷òo â äoêyìeíòe íe ìoæeò áûòü áoëee oäíoão ýëeìeíòa c äaííûì êoíêpeòíûì id. Kaæäûé id äoëæeí áûòü yíèêaëüíûì. B äpyãèx cëy÷aÿx ècïoëüçyéòe aòpèáyò class. Teïepü âçãëÿíeì ía ïpèìep ècïoëüçoâaíèÿ id:

Ýòo ìoãyò áûòü çaãoëoâêè äoêyìeíòa, paçäeëeííoão ía ãëaâû èëè ïapaãpaôû. Ecòecòâeííûì áyäeò íaçía÷èòü id êaæäoé ãëaâe:

Çaãoëoâoê, cêaæeì, chapter 1.2, äoëæeí áûòü êpacíûì. Ýòo äeëaeòcÿ â cooòâeòcòâèè c CSS:

#c1-2{color:red;}

Ãëaâa 1.2

Kaê ïoêaçaío â ïpeäûäyùeì ïpèìepe, âû ìoæeòe oïpeäeëÿòü câoécòâa êoíêpeòíoão ýëeìeíòa c ïoìoùüþ #id â òaáëèöe còèëeé äoêyìeíòa.

Peçþìe

B ýòoì ypoêe ìû paçoápaëè, êaê, c ïoìoùüþ ceëeêòopoâ class è id, âû ìoæeòe cïeöèôèöèpoâaòü câoécòâa êoíêpeòíûx ýëeìeíòoâ.

B cëeäyþùeì ypoêe ìû paçáepeì äâa HTML-ýëeìeíòa, êoòopûe øèpoêo ècïoëüçyþòcÿ â co÷eòaíèè c CSS: <span> è <div>.

Cëeäyþùèé ypoê: Ãpyïïèpoâaíèe ýëeìeíòoâ (span è div)

Haçaä

Bâepx