Ópoê 6:
Ccûëêè

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

Bce èçy÷eííoe â ïpeäûäyùèx ypoêax âû ìoæeòe ïpèìeíÿòü è äëÿ ccûëoê/links (íaïpèìep èçìeíÿòü øpèôò, öâeò, ïoä÷epêèâaíèe è ò. ä). Hoâûì áyäeò òo, ÷òo â CSS ýòè câoécòâa ìoæío oïpeäeëÿòü ïo-paçíoìy, â çaâècèìocòè oò òoão, ïoceòèëè yæe ccûëêy, aêòèâía ëè oía, íaxoäèòcÿ ëè yêaçaòeëü ìûøè íaä ccûëêoé. Ýòo ïoçâoëÿeò äoáaâèòü èíòepecíûe ýôôeêòû ía âaø web-caéò. Äëÿ ýòoão ècïoëüçyþòcÿ òaê íaçûâaeìûe ïceâäoêëaccû.

×òo òaêoe ïceâäoêëacc?

Ïceâäoêëacc ïoçâoëÿeò y÷èòûâaòü paçëè÷íûe ycëoâèÿ èëè coáûòèÿ ïpè oïpeäeëeíèè câoécòâ HTM-òýãa.
Paccìoòpèì ïpèìep. Kaê âû çíaeòe, ccûëêè cïeöèôèöèpyþòcÿ â HTML òýãoì <a>. B CSS ìû òaêæe ìoæeì ècïoëüçoâaòü a â êa÷ecòâe ceëeêòopa:

a {color: blue;}

Ccûëêa ìoæeò èìeòü paçíûe cocòoÿíèÿ. Haïpèìep, ee yæe ïoceòèëè/visited èëè eùe íeò. Moæío ècïoëüçoâaòü ïceâäoêëaccû äëÿ ycòaíoâêè paçíûx còèëeé ïoceùeííûx è íeïoceùeííûx ccûëoê.

a:link {color: blue;}
a:visited {color: red;}

Ècïoëüçyéòe a:link è a:visited äëÿ ïoceùeííûx è íeïoceùeííûx ccûëoê, cooòâeòcòâeíío. Aêòèâíûe ccûëêè èìeþò ïceâäoêëacc a:active, è a:hover, êoãäa yêaçaòeëü - íaä ccûëêoé.
Mû paccìoòpèì êaæäûé èx ýòèx ÷eòûpex ïceâäoêëaccoâ ía ïpèìepax è c oáúÿcíeíèÿìè.

Ïceâäoêëacc: link

Ïceâäoêëacc :link ècïoëüçyeòcÿ äëÿ ccûëoê ía còpaíèöû, êoòopûe ïoëüçoâaòeëü eùe íe ïoceùaë.
B ïpèìepe êoäa íeïoceùeííûe ccûëêè - cèíèe.

a:link {color: #6699CC;}

Ïceâäoêëacc: visited

Ïceâäoêëacc :visited ècïoëüçyeòcÿ äëÿ ccûëoê ía còpaíèöû, êoòopûe ïoëüçoâaòeëü ïoceòèë. B ïpèìepe êoäa ïoceùeííûe ccûëêè - ôèoëeòoâûe.

a:visited {color: #660099;}

Ïceâäoêëacc: active

Ïceâäoêëacc :active ècïoëüçyeòcÿ äëÿ aêòèâíûx ccûëoê.
B ïpèìepe aêòèâíûe ccûëêè èìeþò æeëòûé ôoí.

a:active {background-color: #FFFF00;}

Ïceâäoêëacc: hover

Ïceâäoêëacc :hover ècïoëüçyeòcÿ äëÿ ccûëoê, íaä êoòopûìè íaxoäèòcÿ yêaçaòeëü ìûøè.
Ýòo ìoæío ècïoëüçoâaòü äëÿ coçäaíèÿ èíòepecíûx ýôôeêòoâ. Haïpèìep, ecëè ìû xoòèì, ÷òoáû ccûëêè còaíoâèëècü opaíæeâûìè è êypcèâíûìè ïpè ïpoxoæäeíèè yêaçaòeëÿ íaä íèìè, òo íaø CSS äoëæeí âûãëÿäeòü òaê:

a:hover {color: orange;
font- style: italic;}

Ïpèìep 1: Ýôôeêò ïpè íaxoæäeíèè yêaçaòeëÿ íaä ccûëêoé

Ýôôeêòû äëÿ ïoëoæeíèÿ yêaçaòeëÿ ìûøè íaä ccûëêoé còaëè yæe oáùèì ìecòoì. Mû paccìoòpèì íecêoëüêo äoïoëíèòeëüíûx ïpèìepoâ äëÿ ïceâäoêëacca :hover.

Ïpèìep 1a: Paccòoÿíèe ìeæäy áyêâaìè
Kaê âû ïoìíèòe èç Ópoêa 5 , paccòoÿíèe ìeæäy cèìâoëaìè ìoæío ycòaíoâèòü câoécòâoì letter-spacing. Ýòo ìoæío ïpèìeíèòü äëÿ ccûëêè:

a:hover {letter-spacing: 10px;
font-weight:bold;
color:red;}

Ïpèìep 1b: UPPERCASE è lowercase

B Ópoêe 5 ìû paccìoòpeëè câoécòâo text-transform, êoòopoe ìoæeò ïepeêëþ÷aòü cèìâoëû c âepxíeão ía íèæíèé peãècòp. Ýòo òaêæe ìoæío ècïoëüçoâaòü äëÿ coçäaíèÿ ýôôeêòoâ ía ccûëêe:

a:hover {text-transform: uppercase; font-weight:bold; color:blue; background- color:yellow;}

Ýòè äâa ïpèìepa ïoêaçûâaþò ïo÷òè áeçãpaíè÷íûe âoçìoæíocòè êoìáèíèpoâaíèÿ paçëè÷íûx câoécòâ. Bû ìoæeòe coçäaâaòü câoè coácòâeííûe ýôôeêòû - ïoïpoáyéòe!

Ïpèìep 2: Óäaëeíèe ïoä÷epêèâaíèÿ ccûëoê

Oáû÷íûé âoïpoc - êaê yäaëèòü ïoä÷epêèâaíèe ccûëoê?
Bû äoëæíû òo÷ío oïpeäeëèòü, íyæío ëè yápaòü ïoä÷epêèâaíèe ccûëoê, òaê êaê ýòo ìoæeò çía÷èòeëüío cíèçèòü ècïoëüçoâaíèe âaøeão web-caéòa. Ëþäè ïpèâûêëè âèäeòü ía web-còpaíèöax cèíèe ïoä÷epêíyòûe ccûëêè è çíaþò, ÷òo ïo íèì íyæío ùeëêaòü. Äaæe ìoÿ ìaìa çíaeò ýòo! Ecëè âû yáepeòe ïoä÷epêèâaíèe è èçìeíèòe öâeò ccûëoê, âecüìa âepoÿòío, ÷òo ýòo cìyòèò ïoëüçoâaòeëeé è oíè íe ïoëy÷aò äocòyïa êo âceìy coäepæèìoìy âaøeão caéòa web-caéò.

Booáùe-òo yäaëèòü ïoä÷epêèâaíèe ccûëoê o÷eíü ïpocòo. Kaê âû, ìoæeò áûòü, ïoìíèòe èç Ópoêa 5 , câoécòâo text-decoration ìoæío ècïoëüçoâaòü äëÿ oïpeäeëeíèÿ ïoä÷epêèâaíèÿ òeêcòa. Äëÿ yäaëeíèÿ ïoä÷epêèâaíèÿ ïpocòo ycòaíoâèòe â text-decoration çía÷eíèe none.

a {text-decoration:none;}

Aëüòepíaòèâío ìoæío òaêæe ycòaíoâèòü text-decoration, íapÿäy c äpyãèìè câoécòâaìè, äëÿ âcex ÷eòûpex ïceâäoêëaccoâ.

a:link
{color: blue;
text- decoration:none;}

a:visited
{color: purple;
text- decoration:none;}

a:active
{background-color:yellow;
text- decoration:none;}

a:hover
{color:red;
text-decoration:none;}

Peçþìe

B ýòoì ypoêe âû yçíaëè o òoì, ÷òo òaêoe ïceâäoêëaccû, ècïoëüçyÿ íeêoòopûe câoécòâa èç ïpeäûäyùèx ypoêoâ. Ýòo äoëæío ïoêaçaòü âaì, êaêèe âoçìoæíocòè çaëoæeíû â CSS.
B cëeäyþùeì ypoêe ìû íay÷èì âac oïpeäeëÿòü câoécòâa êoíêpeòíûx ýëeìeíòoâ è ãpyïï ýëeìeíòoâ.

Cëeäyþùèé ypoê: Èäeíòèôèêaöèÿ è ãpyïïèpoâaíèe ýëeìeíòoâ (class è id)

Haçaä

Bâepx