Пайвастшавӣ дар саҳифаҳои интернетӣ хеле маъмуланд, вале бисёре аз дизайнерҳои вебсайт ин қобилияти онро надоранд, ки онҳо бо CSS барои идора кардани роҳҳои самараноки онҳо алоқаманд мебошанд. Шумо метавонед алоқаҳо бо давлатҳои ҷустуҷӯӣ, даврӣ ва фаъолро муайян кунед. Шумо инчунин метавонед бо сарҳадҳо ва заминаҳо кор кунед, то пайвандҳои худро бештар pizzaz диҳед ё онҳоро ба тугмаҳо ва ҳатто тасвирҳо табдил диҳед.
Аксарияти дизайнерҳои вебсайт бо муайян кардани сабки дар "а":
{ранги: сурх; }}Ин ба ҳамаи паҳлӯҳои пайвастшавӣ (давр, ташриф ва фаъол) хоҳад буд. Барои ҳар як ҷузъи алоҳида тарҳрезӣ кардан лозим аст, шумо бояд дарсҳои псевдо-ро истифода баред.
Пайвастшавӣ-синфҳо
Ду намуди асосии намудҳои пневматикӣ шумо метавонед муайян кунед:
- : link - ин сабки пешфарз барои пайванди
- : боздид - пас аз пайвастшави пахш карда шуд
- : hover - ҳамчун ҷобаҷо аз рӯи пайвастшавӣ (пеш аз тугмача)
- : фаъол - росте, ки пайвастшави пахш мешавад
Барои муайян кардани псевдо-класс, онро бо аломати интихобкунандаи CSS истифода баред. Пас, барои тағир додани ранги дидани ҳамаи пайвандҳоятон ба гул, нависед:
a: visited {color: gray; }}Агар шумо як сабки pseudo-class пайванд, он як фикри хуб барои тарҳрезии онҳо ҳама. Бо ин роҳ шумо аз натиҷаҳои ғайричашмдошт ҳайрон намешавед. Пас, агар шумо хоҳед, ки ранги дидаро ба графи тағир диҳед, дар ҳоле, ки ҳамаи псевдо-хосиятҳои пайвастҳои шумо сиёҳ мемонанд, шумо навиштед:
a: link, a: hover, a: фаъолӣ {ранги: сиёҳ; } a: visited {color: gray; }}Тағир додани Colors Link
Услуби беҳтарин ба сабки алоқа ин тағир додани ранги пӯстро дорад:
{ранги: # 00f; } a: hover {color: # 0f0; }}Аммо фаромӯш накунед, ки шумо метавонед чӣ гуна пайвандҳоро ба назар гиред, зеро онҳо бо он пайванданд: моликияти фаъол:
{ранги: # 00f; } a: ранги фаъол: # f00; }}Ё чӣ гуна пайванде, ки шумо пас аз он ба шумо мефиристем:
{ранги: # 00f; } a: visited {color: # f0f; }}Барои он ки ҳамаи онро якҷоя кунед:
{ранги: # 00f; } a: visited {color: # f0f; } a: hover {color: # 0f0; } a: ранги фаъол: # f00; }}Пешгӯиҳо дар бораи пайвандҳо барои Иловаи Нусхаҳо ё Мавзӯъҳо
Шумо метавонед заминаеро бо пайванде, ки дар мақолаи Stylish Backgrounds ҷойгир аст, ҷойгир кунед, вале бо бозии якчанд дақиқа бозӣ кунед, шумо метавонед пайвандеро, ки аломати алоқаманд дорад, эҷод кунед. Нишонеро, ки хурд аст, тақрибан 15px то 15px интихоб кунед, агар матни шумо калонтар бошад. Мавзӯро ба як тараф пайваст кунед ва такроран такроран такрор накунед. Пас, пайвастшавии пайвастшавӣ ба матн, то матн дар дохили саёҳа барои дидани симо ба тарафи чап ё рост ҳаракат кунад.
a {padding: 0 2px 1px 15px; замина: #fff url (ball.gif) маркази чапи такрорӣ; ранг: # c00; }}Пас аз он, ки шумо аломати худро доред, шумо метавонед симои мухталифро ҳамчун ҷӯйбор, фаъол ва диданашаванда барои тағир додани пайванди пайванд тасаввур кунед:
a {padding: 0 2px 1px 15px; замина: #fff url (ball.gif) маркази чапи такрорӣ; ранг: # c00; } a: hover {background: #fff url (ball2.gif) маркази чапи такрорӣ; } a: фаъоли {саҳифа: #fff url (ball3.gif) маркази чапи такрорӣ; }}Чашмҳои худро бинед, мисли тугмаҳо
Тугмаҳо хеле маъмуланд, вале то он даме, ки CSS дар якҷоягӣ пайдо шуд, шумо бояд ба тугмаҳои тасвирӣ тасвирҳоро эҷод кардед, ки саҳифаҳои худро барои боркунӣ зиёдтар мекунад. Хушбахтона, усули сарҳадӣ вуҷуд дорад, ки ба шумо осонтар бо CSS-ро осон мекунад.
{сарҳад: 4px ибтидоӣ; padding: 2px; матн-фароғат: none; } a: фаъол {сарҳад: 4px; }}Дар хотир доред, ки вақте шумо рангҳоро дар оғози расмҳо ва намудҳои пинҳон гузоштаед, браузерҳо эҳтимолан онҳоро ба интизори он, ки шумо интизоред. Пас, дар инҷо як тугмаи ороишгар бо сарҳадҳои рангӣ аст:
a {border style: solid; васеи сарҳадӣ: 1px 4px 4px 1px; матн-фароғат: none; padding: 4px; Ранги сарҳадӣ: # 69f # 00f # 00f # 69f; }}Ва шумо метавонед сабтҳо ва намудҳои фаъолро бо алоқаи тугмаҳо низ истифода баред, танҳо он истифодаҳои синфҳоро истифода баред:
a: link {st style border: solid; васеи сарҳадӣ: 1px 4px 4px 1px; матн-фароғат: none; padding: 4px; Ранги сарҳадӣ: # 69f # 00f # 00f # 69f; } a: hover {border-color: #ccc; }}