په ویب پاڼو کې لینکونه ډیر عام دي، مګر ډیری ویب ډیزاینر هغه ځواک نه پوهیږي چې دوی یې د سی ایس ایس سره لري او د دوی اړیکې په اغیزمن ډول تنظیموي. تاسو کولی شئ د لیدلو، هور او فعاله هیوادونو سره لینکونه تعریف کړئ. تاسو کولی شئ د سرحدونو او پس منظر سره هم کار وکړو ترڅو ستاسو لینک نور پزیز ورکړئ او یا یې د بټونو یا حتی انځورونو بڼه ونیسي.
ډیری ویب ډیزاینرونه د "یو" ٹیګ په اړه د یو طرز په تعریف سره پیل کوي:
a {رنګ: سور؛ }دا به د اړیکو ټول اړخونه (هور، لیدل شوي، او فعال) بڼه غوره کړي. د هرې برخې لپاره په جلا توګه اندازې کولو لپاره، تاسو باید د لینډیسو کلاسونو څخه کار واخلئ.
لنک پیسودو کلاسونه
د لنک پیسو کلاسونو څلور اساسي ډولونه شتون لري چې تاسو کولی شئ تعریف کړئ:
- لینک - دا د لینک لپاره اصلي بڼه لري
- : لیدل شوی - د یو لینک څخه وروسته کلک شوی
- : هور - د مچ په څیر په یوه اړیکه کې لیکل کیږي (مخکې - کلیک)
- : فعال - سم د لینک په څیر کلیک وکړئ
د دې لپاره چې د پیسو سایډیشن تعریف کړئ، دا د خپل سی ایس ایس ټاکونکي کې د ټګ سره کاروئ. نو، د سپینې رنګ لپاره ستاسو ټولو لینکونو لیدل شوی رنګ بدلولو لپاره، ولیکئ:
A: لیدل {رنګ: سپین }که تاسو د انډول پیسودو طبقه ډک کړئ، دا یو ښه مفکوره ده چې ټول هغه ډول وټاکئ. په دې لاره تاسو به د غیر عادلانه پایلو له امله حیران نه یاست. نو که تاسو غواړئ د لیدلو لپاره رنګ شوي رنګ بدل کړئ، په داسې حال کې چې ستاسو د اړیکو ټول ټولپوښتنې پراخې تورې دي، تاسو به ولیکئ:
A: لینک، A: هور، A: فعال {رنګ: تور؛ } a: لیدل شوی (رنګ: خاکی؛ }د لینک رنګ بدل کړئ
د طرزالعملونو تر ټولو مشهوره لاره دا ده چې رنګ بدل کړي کله چې مږک په هغې باندې حرکت کوي:
a {رنګ: # 00f؛ } a: هور {رنګ: # 0f0؛ }مګر مه هېروئ چې تاسو کولی شئ په دې اغیزه وکړي چې دا څنګه چې لینک لیدل کیږي څنګه چې دوی د هغې سره د فعال فعالیت:
a {رنګ: # 00f؛ } a: فعال {رنګ: # f00؛ }یا دا څنګه چې تاسو ورسره لیدلي وي لیدل کیږي: د لیدنې ملکیت:
a {رنګ: # 00f؛ } a: لیدل شوی (رنګ: # f0f؛ }د ټولو لپاره یوځای کول:
a {رنګ: # 00f؛ } a: لیدل شوی (رنګ: # f0f؛ } a: هور {رنګ: # 0f0؛ } a: فعال {رنګ: # f00؛ }د شبیه ګانو په شمول د شبیه ګانو او ګولیو په اړه پس منظر ورکړئ
تاسو کولی شئ د سټیلیل پس منظر مضمون کې یو لینک کېښودل شئ، مګر د پس منظر سره لوبې کول، تاسو کولی شئ یوه داسې یوکه جوړه کړئ چې تړلې نښان ولري. یو داسې عکس غوره کړئ چې کوچنۍ وي، شاوخوا 15px 15px پورې وي مګر دا چې ستاسو متن لوی وي. شاليد د لینک یوې برخې ته ځای ونیسئ او بیا تکرار انتخاب کړئ چې بیا تکرار نشي. بیا، دا لینک تړل د دې لپاره چې په لینک کې متن تر ډیرې اندازې پورې لیږل کیږي ښي خوا ته ښي خوا ته ښکارندوی وګورئ.
a {ګوښه کول: 0 2px 1px 15px؛ شاليد: #fff url (ball.gif) پرېښودل شوی مرکز نه ځي. رنګ: # c00؛ }یو ځل چې تاسو خپل آیکنټ ترلاسه کړئ، تاسو کولی شئ د بدلون بدلون لپاره د بل حور، فعال، او لیدونو شبیه په توګه یو بل انځور وټاکئ:
a {ګوښه کول: 0 2px 1px 15px؛ شاليد: #fff url (ball.gif) پرېښودل شوی مرکز نه ځي. رنګ: # c00؛ } a: هور {شاليد: #fff url (ball2.gif) پرېښودل شوی مرکز نه ځي؛ } a: فعال {شاليد: #fff url (ball3.gif) پرېښودل شوی مرکز نه ځي. }خپل بکسونه د بټونو په څیر وګورئ
بٹن خورا مشهور دی، مګر تر هغه چې سی ایس ایس راغلل، تاسو باید د عکسونو په کارولو سره بټونه جوړ کړئ، کوم چې ستاسو پاڼې په اوږد وخت کې پورته کولو لپاره جوړوي. په خیر سره، د سرحد طرز شتون لري چې کولی شي تاسو سره د سیسټم سره په اسانۍ سره د تڼۍ ډول لکه اغیز سره مرسته وکړي.
a {سرحدي: 4px پیلول؛ ګنډل: 2px؛ د متن جوړونې: هیڅ نه } a: active {border: 4px inset؛ }يادونه، کله چې تاسو په شروع او رنګونو کې رنګونه کړئ، لټونګر د هغۀ امکان نه لري چې تاسو يې تمه لرئ. نو، د رنګ لرونکو سرحدونو سره یو فانکیر تڼۍ دی:
a {سرحدي طرزالعمل: سخت؛ د سرحد چوکۍ: 1px 4px 4px 1px؛ د متن جوړونې: هیڅ نه ګنډل: 4px؛ د سرحد رنګ: # 69f # 00f # 00f # 69f؛ }او تاسو کولی شئ د یوه تڼۍ د هور او فعال ډولونو سره اړیکه ټینګه کړئ، همدا رنګه یوازې د انوسو کلاسونو څخه کار واخلئ:
الف: اړیکه {سرحدي طرز: ډک؛ د سرحد چوکۍ: 1px 4px 4px 1px؛ د متن جوړونې: هیڅ نه ګنډل: 4px؛ د سرحد رنګ: # 69f # 00f # 00f # 69f؛ } a: هور {سرحدی رنګ: #ccc؛ }