اس سی ایس ایس دھوکہ شیٹ کے ساتھ کیجادنگ انداز شیٹ جانیں

نمونہ انداز شیٹ کے ساتھ Cascading انداز شیٹ کا ایک جائزہ

جب آپ ویب سائٹ کو خرگوش سے تیار کرتے ہیں، تو یہ بنیادی شیلیوں کی وضاحت کے ساتھ شروع کرنا ہوشیار ہے. یہ ایک صاف کینوس اور تازہ برش کے ساتھ شروع کی طرح ہے. ویب ڈیزائنرز کا سامنا سب سے پہلے مسائل میں سے ایک یہ ہے کہ ویب براؤزر بالکل مختلف ہیں. پہلے سے طے شدہ فونٹ کا سائز پلیٹ فارم سے پلیٹ فارم پر مختلف ہے، پہلے سے طے شدہ فونٹ خاندان مختلف ہے، کچھ براؤزر جسم کے ٹیگ پر مارجن اور بھرتی کی وضاحت کرتے ہیں جبکہ دوسروں کو نہیں، اور اسی طرح. آپ کے ویب صفحات کے لئے ڈیفالٹ شیلیوں کی وضاحت کے ذریعے ان متضادوں کے ارد گرد حاصل کریں.

سی ایس ایس اور کریکٹر سیٹ

سب سے پہلے سب سے پہلے چیزیں، اپنے سی ایس ایس دستاویزات کا کردار سیٹ utf-8 کو مقرر کریں. اگرچہ یہ ممکن ہے کہ آپ کے ڈیزائن کے صفحات میں سے زیادہ تر انگریزی میں لکھے گئے ہیں، کچھ مقامی زبانی اور ثقافتی سیاق و سباق کے لئے مقامی بنائے گئے ہیں. جب وہ ہیں تو، یوٹف -8 عمل کو آسان بناتا ہے. بیرونی سٹائل شیٹ میں کردار سیٹ کرنے HTTP ہیڈر کے اوپر پیش نہیں کرے گا، لیکن دوسری صورت حال میں، یہ ہوگا.

کردار سیٹ قائم کرنا آسان ہے. سی ایس ایس دستاویز کی پہلی لائن لکھنے کے لئے:

charset "utf-8"؛

اس طرح، اگر آپ کو مواد کی ملکیت میں یا کلاس اور ID کے نام کے طور پر بین الاقوامی حروف کا استعمال کرتے ہیں تو، طرز شیٹ اب بھی صحیح طریقے سے کام کریں گے.

صفحہ جسم کو اسٹائل

اگلے چیز کو پہلے سے طے شدہ سٹائل شیٹ کی ضرورت ہوتی ہے شالیں، صف بندی، اور سرحدوں کو صفر سے باہر لے جائیں. یہ اس بات کو یقینی بناتا ہے کہ براؤزر اور مواد کے درمیان تمام براؤزرز مواد کو اسی جگہ پر رکھتی ہیں، اور وہاں کوئی پوشیدہ خالی جگہ نہیں ہیں. زیادہ تر ویب صفحات کے لئے، یہ ٹیکسٹ کے کنارے کے قریب بھی بہت قریب ہے، لیکن وہاں شروع کرنے کے لئے ضروری ہے تاکہ پس منظر کی تصاویر اور لے آؤٹ ڈویژن صحیح طریقے سے ترتیب دے سکیں.

ایچ ٹی ایم ایل، جسم {مارجن: 0px؛ بھرتی: 0px؛ سرحد: 0px؛ }

سیاہ اور ڈیفالٹ پس منظر کا رنگ سفید کرنے کیلئے پہلے سے طے شدہ پیش منظر یا فونٹ رنگ مقرر کریں. حالانکہ یہ سب سے زیادہ ویب پیج کے ڈیزائن کے لئے زیادہ سے زیادہ امکانات بدل جائے گا، ان معیاری رنگوں کو جسم پر مقرر کیا جارہا ہے اور ایچ ٹی ایم ایل ٹیگ سب سے پہلے صفحے کو پڑھنے اور کام کرنے میں آسان بناتا ہے.

ایچ ٹی ایم ایل، جسم {رنگ: # 000؛ پس منظر: #fff؛ }

پہلے سے طے شدہ فونٹ طرزیں

فونٹ کا سائز اور فونٹ خاندان اس چیز کا حامل ہے جس میں ڈیزائن منعقد ہونے کے بعد ناگزیر طور پر تبدیل ہوجائے گی لیکن 1 ایم کے ڈیفالٹ فونٹ سائز اور ایائل، جنیوا، یا کچھ دوسرے سانس سیرف فونٹ کے ایک ڈیفالٹ فونٹ خاندان کے ساتھ شروع ہو جائے گا. ای ایس کا استعمال اس صفحہ کو ممکنہ طور پر قابل رسائی کے طور پر رکھتا ہے، اور اسکرین پر ایک سنس سیرف فونٹ زیادہ جائز ہے.

ایچ ٹی ایم ایل، جسم، پی، ویں، ٹی ڈی، لی، ڈی ڈی، ڈی ٹی {فونٹ: 1 ایم ایریری، ہیلیویٹیکا، سیر سیرف؛ }

دوسری جگہیں ہوسکتی ہیں جہاں آپ متن تلاش کرسکتے ہیں، لیکن پی ، ٹی ، ٹی ڈی ، لی ، ڈی ڈی ، اور ڈی ٹی بیس بیس فون کی وضاحت کرنے کے لئے ایک اچھا آغاز ہیں. ایچ ٹی ایم ایل اور جسم میں صرف جسم کو شامل کریں، لیکن بہت سے براؤزر فونٹ کے اختیارات کو اوورائڈ کرتے ہیں تو آپ صرف ایچ ٹی ایم ایل یا جسم کیلئے آپ کے فونٹ کی وضاحت کرتے ہیں.

عنوانات

ایچ ٹی ایم ایل عنوانات آپ کی ویب سائٹ کے آؤٹ لائن کی مدد کرنے کے لئے استعمال کرنے کے لئے اہم ہیں اور تلاش کے انجن کو آپ کی سائٹ میں گہرائیوں سے آگاہ کرنے دیں. شیلیوں کے بغیر، وہ سب بالکل بدسورت ہیں، لہذا ان سبھی پر ڈیفالٹ شیلیوں کو مقرر کریں اور ہر فون کے لئے فونٹ کے خاندان اور فونٹ کے سائز کی وضاحت کریں.

H1، H2، H3، H4، H5، H6 {فونٹ-فیملی: ایریری، ہیلیویٹیکا، سینسر سیرف؛ } h1 {فونٹ سائز: 2em؛ } h2 {فونٹ سائز: 1.5em؛ } h3 {فونٹ سائز: 1.2em؛ } h4 {فونٹ سائز: 1.0em؛ } h5 {فونٹ سائز: 0.9em؛ } h6 {فونٹ سائز: 0.8em؛ }

لنکس کو بھول نہیں ڈان

لنک رنگوں کو اسٹائلنگ تقریبا ہمیشہ ہی ڈیزائن کا ایک اہم حصہ ہوتا ہے، لیکن اگر آپ ان کو پہلے سے طے شدہ شیلیوں میں نہیں بیان کرتے ہیں، توقع ہے کہ آپ کم از کم ایک چھسو کلاس بھول جائیں گے. انہیں نیلے رنگ کے کچھ چھوٹے مختلف قسم کے ساتھ وضاحت کریں اور پھر ان کو ایک بار تبدیل کریں جب آپ کے پاس سائٹ کے لئے رنگ پیلیٹ ہے.

نیلے رنگ کے رنگوں میں لنکس قائم کرنے کے لئے، سیٹ کریں:

• نیلے رنگ کے طور پر لنکس
• سیاہ نیلے رنگ کے طور پر لنکس کا دورہ کیا
• ہلکے نیلے رنگ کے طور پر روابط ہور
• یہاں تک کہ پالر نیلے کے طور پر فعال لنکس

جیسا کہ اس مثال میں دکھایا گیا ہے:

ایک: لنک {رنگ: # 00f؛ } a: کا دورہ کیا {رنگ: # 009؛ } a: ہور {رنگ: # 06f؛ } ایک: فعال {رنگ: # 0cf؛ } کافی معصوم رنگ سکیم کے ساتھ لنکس کو اسٹائل کرکے یہ یقینی بناتا ہے کہ میں کسی بھی کلاس کو بھول نہیں سکتا، اور یہ بھی پہلے سے طے شدہ نیلے رنگ، سرخ، اور جامنی رنگ سے بھی زیادہ کم آواز دیتا ہے.

مکمل انداز شیٹ

یہاں مکمل سٹائل شیٹ ہے:

charset "utf-8"؛ ایچ ٹی ایم ایل، جسم {مارجن: 0px؛ بھرتی: 0px؛ سرحد: 0px؛ رنگ: # 000؛ پس منظر: #fff؛ } ایچ ٹی ایم ایل، جسم، پی، تھ، ٹیڈی، لی، ڈی ڈی، ڈی ٹی {فونٹ: 1 ایم ایریڈ، ہیلیویٹیکا، سیر سیرف؛ } H1، H2، H3، H4، H5، H6 {فونٹ-فیملی: ایریری، ہیلیویٹا، سینسر سیرف؛ } h1 {فونٹ سائز: 2em؛ } h2 {فونٹ سائز: 1.5em؛ } h3 {فونٹ سائز: 1.2em؛ } h4 {فونٹ سائز: 1.0em؛ } h5 {فونٹ سائز: 0.9em؛ } h6 {فونٹ سائز: 0.8em؛ } a: link {color: # 00f؛ } a: کا دورہ کیا {رنگ: # 009؛ } a: ہور {رنگ: # 06f؛ } ایک: فعال {رنگ: # 0cf؛ }