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.
Ï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.
Ï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;}
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.
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)