Viungo ni vya kawaida kwenye kurasa za wavuti, lakini wabunifu wengi wa mtandao hawana kutambua nguvu wanazo na CSS ili kuendesha na kusimamia viungo vyao kwa ufanisi. Unaweza kufafanua viungo na majaribio yaliyotembelea, ya hover, na ya kazi. Unaweza pia kufanya kazi na mipaka na asili ili kutoa viungo vyako zaidi pizzaz au uwawezesha kuangalia kama vifungo au hata picha.
Waumbaji wengi wa mtandao huanza kwa kufafanua mtindo kwenye lebo "ya":
{rangi: nyekundu; }Hii itaweka vipengele vyote vya kiungo (hover, kutembelea, na kazi). Kwa mtindo wa kila sehemu peke yake, unapaswa kutumia kiungo cha pseudo-madarasa.
Unganisha Darasa la Pseudo
Kuna aina nne za msingi za viungo vya pseudo ambavyo unaweza kuelezea:
- : kiungo - hii ni mtindo wa default wa kiungo
- : alitembelea - baada ya kiungo kilichobofya
- : hover - kama panya imewekwa juu ya kiungo (kabla ya bonyeza)
- : kazi - haki kama kiungo kinachozidi
Ili kufafanua kiungo cha pseudo-darasa, tumia na lebo katika chagua yako CSS . Kwa hiyo, kubadili rangi iliyopendekezwa ya viungo vyako vyote kwa kijivu, andika:
: alitembelea {rangi: kijivu; }Ikiwa unatafuta kiungo kimoja pseudo-darasa, ni wazo nzuri kwa mtindo wote. Kwa njia hiyo huwezi kushangazwa na matokeo ya nje. Kwa hiyo ikiwa unataka tu kubadilisha rangi iliyotembelewa na kijivu, wakati vitu vyote vingine vya pseudo-viungo vya viungo vyako vimeendelea kuwa nyeusi, ungeandika hivi:
: kiungo, a: hover, a: kazi {rangi: nyeusi; }: alitembelea {rangi: kijivu; }Badilisha Rangi za Kiungo
Njia maarufu zaidi ya viungo vya mtindo ni kubadili rangi wakati panya hupanda juu yake:
{rangi: # 00f; } a: hover {rangi: # 0f0; }Lakini usisahau kwamba unaweza kuathiri jinsi kiungo kinachoonekana kama wanachokifya na: mali ya kazi:
{rangi: # 00f; } a: kazi {rangi: # f00; }Au jinsi kiungo kinachoangalia kinapotembelea na: mali iliyohambelewa:
{rangi: # 00f; }: alitembelea {rangi: # f0f; }Ili kuiweka pamoja:
{rangi: # 00f; }: alitembelea {rangi: # f0f; } a: hover {rangi: # 0f0; } a: kazi {rangi: # f00; }Weka asili kwenye Viungo vya Kuongeza Icons au Bullets
Unaweza kuweka background juu ya kiungo kama katika makala ya asili ya Stylish, lakini kwa kucheza na background kidogo, unaweza kuunda kiungo ambacho kina picha iliyohusishwa. Chagua icon ambayo ni ndogo, karibu 15px na 15px, isipokuwa asilia yako ni kubwa. Weka background kwenye upande mmoja wa kiungo na weka chaguo kurudia tena. Kisha, chagua kiungo ili maandiko ndani ya kiungo yamehamishwa hadi mbali ya kushoto au kulia kuona picha.
{padding: 0 2px 1px 15px; background: #fff url (ball.gif) kituo cha kushoto bila kurudia; rangi: # c00; }Mara baada ya kupata icon yako, unaweza kuweka picha tofauti kama hover yako, kazi, na vivutio vilivyotembelea ili kuunganisha kiungo:
{padding: 0 2px 1px 15px; background: #fff url (ball.gif) kituo cha kushoto bila kurudia; rangi: # c00; }: hover {background: #fff url (ball2.gif) kituo cha kushoto bila kurudia; {a: background {background: #fff url (ball3.gif) kituo cha kushoto bila kurudia; }Fanya Viungo vyako Angalia Vifungo
Vifungo ni maarufu sana, lakini mpaka CSS ilikuja pamoja, ilibidi ufanye vifungo kutumia picha , ambayo inafanya kurasa zako kuchukua muda mrefu kupakia. Kwa bahati, kuna mtindo wa mpaka ambao unaweza kukusaidia kuunda athari kama kifungo kwa urahisi na CSS.
{mpaka: 4px mwanzo; padding: 2px; maandishi-mapambo: hakuna; } a: kazi {mpaka: 4px inset; }Kumbuka, unapoweka rangi kwenye mitindo ya mwanzoni na inset, wasifu hawawezi kuwapa kama unavyoweza kutarajia. Kwa hiyo, hapa ni kifungo cha fancier na mipaka ya rangi:
{border-style: imara; upana-upana: 1px 4px 4px 1px; maandishi-mapambo: hakuna; padding: 4px; rangi-mpaka: # 69f # 00f # 00f # 69f; }Na unaweza kuathiri mitindo ya hover na kazi ya kiungo cha kifungo pia, tu kutumia hizo madarasa ya pseudo:
: kiungo {mtindo wa mpaka: imara; upana-upana: 1px 4px 4px 1px; maandishi-mapambo: hakuna; padding: 4px; rangi-mpaka: # 69f # 00f # 00f # 69f; } a: hover {mpaka-rangi: #ccc; }