ماسٹر شیلیوں شیٹ کے ساتھ ڈیفالٹ براؤزر اسٹائل کیسے ہٹا دیں

حقائق کو ان تجاویز کے ساتھ حاصل کریں

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

پہلے سے طے شدہ براؤزر شیلیوں کو مددگار ثابت ہوسکتا ہے، لیکن بہت سے معاملات میں ویب ڈیزائنرز ان طرزوں کو دور کرنا چاہتے ہیں تاکہ وہ اس سٹائل کے ساتھ تازہ شروع کرسکیں جو ان کے کنٹرول میں 100٪ ہیں. یہ استعمال کیا جاتا ہے جو "ماسٹر شیلیڈیٹ" کے طور پر جانا جاتا ہے.

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

عالمی غلطی

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

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

آپ بھی فونٹ کے مطابق بنانا چاہتے ہیں. فونٹ کا سائز 100 فیصد یا 1em تک مقرر کرنے کے لئے اس بات کا یقین رکھو، تاکہ آپ کا صفحہ قابل رسائی ہے، لیکن سائز اب بھی مستقل ہے. اور لائن کی اونچائی کو یقینی بنانے کے لئے یقین رکھو.

جسم {فونٹ: 1 ایم / 1.25 ایریری، ہیلیویٹیکا، سینسر سیرف؛ }

ہیڈ لائن فارمیٹنگ

عنوانات یا ہیڈر ٹیگ (H1، H2، H3، وغیرہ) عام طور پر بڑے مارجن کے ساتھ بولڈ ٹیکسٹ پر اپنی ڈیفالٹ یا ان کے ارد گرد بھرتی. وزن، مارجن اور بھرتی کو صاف کرنے سے، آپ کو اس بات کا یقین ہے کہ اضافی شیلیوں کے بغیر ان ٹیگ ان کے ارد گرد کے متن سے زیادہ بڑے (یا چھوٹے) رہیں گے:

h1، h2، h3، h4، h5، h6 {margin: 0؛ بھرتی: 0؛ فونٹ وزن: عام؛ فونٹ-خاندان: ایریری، ہیلیویٹیکا، سینسر سیرف؛ }

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

سادہ متن فارمیٹنگ

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

p، th، td، li، dd، dt، ul، ol، blockquote، q، acronym، abbr، a، input، select، textarea {margin: 0؛ بھرتی: 0؛ فونٹ: عام عام عام 1em / 1.25 ایریری، ہیلیویٹیکا، سینسر سیرف؛ }

آپ کے کوٹیشنز (بلاکسکوٹ اور ق)، اکاؤنٹس، اور تحریروں کو تھوڑا سا اضافی انداز دینے کے لئے بھی اچھا ہے، تاکہ وہ تھوڑا سا مزید کھڑے ہو جائیں.

blockquote {مارجن: 1.25em؛ بھرتی: 1.25em} q {فونٹ سٹائل: اطالوی؛ } مخفف، abbr {کرسر: مدد؛ سرحد کے نیچے: 1px دھکا ہوا؛ }

روابط اور تصاویر

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

ایک، ایک: لنک، ایک: دورہ کیا، ایک: فعال، ایک: ہور {ٹیکسٹ سجاوٹ: لائن لائن؛ }

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

img {سرحد: کوئی نہیں؛ }

میزیں

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

میز {مارجن: 0؛ بھرتی: 0؛ سرحد: کوئی نہیں }

فارم

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

فارم {مارجن: 0؛ بھرتی: 0؛ ڈسپلے: ان لائن؛ }

آپ کے لیبلز کے لئے کرسر کو تبدیل کرنے کا بھی اچھا خیال ہے. اس سے لوگوں کو یہ دیکھنے میں مدد ملتی ہے کہ جب لیبل پر کلک کریں تو لیبل کچھ کرے گا.

لیبل {کرسر: پوائنٹر؛ }

عام کلاس

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

واضح کریں {واضح: دونوں؛ } .فلٹففف {فلوٹ: بائیں؛ } .فلاٹ رائٹ {فلوٹ: دائیں؛ } .textLft {متن-سیدھ: بائیں؛ } .textRight {متن سیدھ: دائیں؛ } .textCenter {متن-سیدھ: مرکز؛ } .text کو درست کریں {متن-سیدھ: جواز دینا؛ }. بلاک کنٹر {ڈسپلے: بلاک؛ مارجن بائیں: آٹو؛ مارجن - دائیں: آٹو؛ } / * چوڑائی * / بڈول {فونٹ وزن مقرر کرنے کے لئے یاد رکھیں: بولڈ؛ } .italic {فونٹ سٹائل: اطالوی؛ }. لائن لائن {متن سجاوٹ: ان لائن؛ }. نابینت {مارجن - بائیں: 0؛ پیڈنگ بائیں: 0؛ }. نگرمن {مارجن: 0؛ } .nopadding {padding: 0؛ } .Nobullet {فہرست سٹائل: کوئی نہیں؛ فہرست طرز تصویر: کوئی نہیں؛ }

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

مکمل ماسٹر شیلیوں شیٹ

/ * عالمی غلطیاں * / ایچ ٹی ایم ایل، جسم {مارجن: 0px؛ بھرتی: 0px؛ سرحد: 0px؛ } جسم {فونٹ: 1 ایم / 1.25 ایریری، ہیلیویٹیکا، سینسر سیرف؛ } / * ہیڈ لائن * / H1، H2، H3، H4، H5، H6 {مارجن: 0؛ بھرتی: 0؛ فونٹ وزن: عام؛ فونٹ-خاندان: ایریری، ہیلیویٹیکا، سینسر سیرف؛ } / * ٹیکسٹ شیلیوں * / پی، وے، ٹی ڈی، لی، ڈی ڈی، ڈی ٹی، الال، اولمپک، بلوٹوت، ق، محرم، اببر، ایک، ان پٹ، منتخب، ٹیکسٹریا {مارجن: 0؛ بھرتی: 0؛ فونٹ: عام عام عام 1em / 1.25 ایریری، ہیلیویٹیکا، سینسر سیرف؛ } blockquote {مارجن: 1.25em؛ بھرتی: 1.25em} q {فونٹ سٹائل: اطالوی؛ } مخفف، abbr {کرسر: مدد؛ سرحد کے نیچے: 1px دھکا ہوا؛ } چھوٹے {فونٹ سائز: .85em؛ } بڑا {فونٹ سائز: 1.2em؛ } / * روابط اور تصاویر * / ایک، ایک: لنک، ایک: کا دورہ کیا، ایک: فعال، ایک: ہوور {متن سجاوٹ: ان لائن؛ } img {سرحد: کوئی نہیں؛ } / * میزیں * / میز {مارجن: 0؛ بھرتی: 0؛ سرحد: کوئی نہیں } / * فارم * / فارم {مارجن: 0؛ بھرتی: 0؛ ڈسپلے: ان لائن؛ } لیبل {کرسر: پوائنٹر؛ } / * عام کلاس * / واضح. {واضح: دونوں؛ } .فلٹففف {فلوٹ: بائیں؛ } .فلاٹ رائٹ {فلوٹ: دائیں؛ } .textLft {متن-سیدھ: بائیں؛ } .textRight {متن سیدھ: دائیں؛ } .textCenter {متن-سیدھ: مرکز؛ } .text کو درست کریں {متن-سیدھ: جواز دینا؛ }. بلاک کنٹر {ڈسپلے: بلاک؛ مارجن بائیں: آٹو؛ مارجن - دائیں: آٹو؛ } / * چوڑائی * / بڈول {فونٹ وزن مقرر کرنے کے لئے یاد رکھیں: بولڈ؛ } .italic {فونٹ سٹائل: اطالوی؛ }. لائن لائن {متن سجاوٹ: ان لائن؛ }. نابینت {مارجن - بائیں: 0؛ پیڈنگ بائیں: 0؛ }. نگرمن {مارجن: 0؛ } .nopadding {padding: 0؛ } .Nobullet {فہرست سٹائل: کوئی نہیں؛ فہرست طرز تصویر: کوئی نہیں؛ }

جینیفر کریین کی طرف سے اصل مضمون. 10/6/17 پر جیریمی Girard کی طرف سے ترمیم