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û.
Ï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
è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 è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
è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
è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;}
Ýôô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!
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;}
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)